曾幾何時(shí)，你剛把新出爐的設(shè)計(jì)上傳到了Zeplin，不一會(huì)就收到開(kāi)發(fā)同學(xué)的艾特了——“請(qǐng)把素材文件打包發(fā)我謝謝”。你很奇怪他們?yōu)槭裁床恢苯訌腪eplin下載？他們讓你把截圖上傳到Zeplin，因?yàn)樗麄儫o(wú)法看到項(xiàng)目之間的邊距...

你也有遇到過(guò)這種情況嗎？接下來(lái)這篇文章將告訴你如何更為正確地使用Zeplin。

1. 畫(huà)板尺寸

iOS

@1X: 375 x 667 px

Android

mdpi: 360 x 640 px

Web

這取決于你的產(chǎn)品將在哪些設(shè)備上呈現(xiàn)。定義好相應(yīng)的柵格斷點(diǎn)，并熟知程序員將會(huì)使用的Media Queries（媒體查詢(xún)）。如果你還不清楚這些，請(qǐng)務(wù)必提前溝通好。

1920 x 1080 px

1200 x 900 px

1024 x 768 px

320 x 480 px

2. 提供完整的響應(yīng)式斷點(diǎn)

當(dāng)你設(shè)定好了柵格斷點(diǎn)并上傳到Zeplin后，你會(huì)先天地認(rèn)為，在更高分辨率下，內(nèi)容依然保持垂直居中顯示簡(jiǎn)直是天經(jīng)地義的，無(wú)需再費(fèi)口舌贅述。但，程序員并不會(huì)讀心術(shù)~

請(qǐng)上傳不同分辨率下的響應(yīng)式效果！

3. 讓素材支持不同分辨率

比如你在設(shè)計(jì)一款iOS產(chǎn)品，請(qǐng)確保其可以輸出@3x的素材。如果您不這樣做，遭到開(kāi)發(fā)同學(xué)的質(zhì)疑可是相當(dāng)沒(méi)面兒的。

4. 請(qǐng)確保「整組」與「組內(nèi)元素」均可以獨(dú)立導(dǎo)出

開(kāi)發(fā)者可能想導(dǎo)出您的圖標(biāo)的一個(gè)或多個(gè)元素，或完整的圖標(biāo)。所以使所有項(xiàng)目可以單獨(dú)導(dǎo)出也可成組導(dǎo)出是必要的。有時(shí)他們也許會(huì)希望單獨(dú)導(dǎo)出圖標(biāo)中的某一個(gè)部分，所以您需要確保整組與組內(nèi)元素都支持獨(dú)立導(dǎo)出。

5. 請(qǐng)將確保導(dǎo)出的圖片不含文字

這就不用多說(shuō)了吧，只要Banner上的文字是活字，就千萬(wàn)不要把文字和底圖混在一起導(dǎo)出。

6. 文本行高

正文文本的行高請(qǐng)務(wù)必比正文字號(hào)至少大6px，除非是標(biāo)題文本或吸引眼球的廣告文本可以例外。然后，請(qǐng)檢查每一處文本域的行高，以確保它們是統(tǒng)一的。因?yàn)椴荒芘懦_(kāi)發(fā)同學(xué)有時(shí)會(huì)直接復(fù)制粘貼文本行高的現(xiàn)象。

7. 文本寬度

請(qǐng)將單行文本的寬度設(shè)置為“auto”（自動(dòng)），這將允許您的開(kāi)發(fā)團(tuán)隊(duì)查看文本和界面的其他元素之間的邊界，或屏幕設(shè)計(jì)的邊界。

譯者：此處存疑，因?yàn)槎鄶?shù)情況下，某字段的顯示寬度最大值是限定死的。即意味著：即使此處單行文本哪怕只有一個(gè)字，我也需要將其寬度設(shè)定為 N px。因?yàn)槌鲞@個(gè)寬度，將不再折行，而顯示“…”

8. 移除Icon的bounds

bounds，就是框定單個(gè)icon最大區(qū)域的那個(gè)范圍。有時(shí)你導(dǎo)入一個(gè)icon是自帶bounds的，但開(kāi)發(fā)人員將很難檢查icon輪廓本身與相鄰元素的真實(shí)padding，所以應(yīng)該去除。

9. 按鈕狀態(tài)

您在Sketch中完成了設(shè)計(jì)，并將屏幕上傳到了Zeplin。現(xiàn)在問(wèn)題又出現(xiàn)了：“當(dāng)用戶(hù)懸停，點(diǎn)擊等交互時(shí)，圖標(biāo)，文字，按鈕會(huì)變成什么樣？”

請(qǐng)確保你的控件包含了所有狀態(tài)，并將其命名為“Specs”！

10. 如何在Zeplin內(nèi)有序地組織N多界面？

Zeplin可以讓你為每個(gè)頁(yè)面添加Tag，以將其進(jìn)行分類(lèi)。

你可以按內(nèi)容（例如，您的網(wǎng)站的部分）或功能對(duì)屏幕設(shè)計(jì)進(jìn)行排序。按照用戶(hù)流程將屏幕排序到每個(gè)標(biāo)簽（部分或功能）中。這會(huì)讓使用者（無(wú)論是開(kāi)發(fā)同學(xué)還是產(chǎn)品經(jīng)理還是老板）瀏覽時(shí)更加直觀