雖然我們都知道 Sketch + Zeplin 是各種好使，但有時你還是會發現，和開發團隊溝通依然有不少障礙。以下分享10點小心得，確保你可以和程序員高效而愉快地玩耍。

歡迎關注作者的知乎專欄：Sketch 中文教程

曾幾何時，你剛把新出爐的設計上傳到了Zeplin，不一會就收到開發同學的艾特了——“請把素材文件打包發我謝謝”。你很奇怪他們為什么不直接從Zeplin下載？

有時候明明居中對齊是再明顯不過的事，可開發同學就是怪你沒申明，然而你真不知道該怎么接~

如果你也遇到過類似的情況，那么恭喜，這篇文章就是為你準備的。

1. Artboard 尺寸

iOS

• @1X: 375 x 667 px

Android

• mdpi: 360 x 640 px

Web

這取決于你的產品將在哪些設備上呈現。定義好相應的柵格斷點，并熟知程序員將會使用的Media Queries（媒體查詢）。如果你還不清楚這些，請務必提前溝通好。

• 1920 x 1080 px
• 1200 x 900 px
• 1024 x 768 px
• 320 x 480 px

2. 提供完整的響應式斷點

當你設定好了柵格斷點并上傳到Zeplin后，你會先天地認為，在更高分辨率下，內容依然保持垂直居中顯示簡直是天經地義的，無需再費口舌贅述。但，程序員并不會讀心術~

請上傳不同分辨率下的響應式效果！

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

比如你在設計一款iOS產品，請確保其可以輸出@3x的素材。因為一旦你沒做到位，遭到開發同學的質疑可是相當沒面兒的：

“請給我@3x大小的素材，因為在iPhone 7上面看全是像素粒謝謝~”

4. 請確保「整組」與「組內元素」均可以獨立導出

程序員的心你還真別猜，因為猜來猜去你也猜不透~有時他們也許會希望單獨導出圖標中的某一個部分。所以還請盡量確保整組與組內元素都支持獨立導出。

5. 請將確保導出的圖片不含文字

這就不用多說了吧，只要Banner上的文字是活字，就千萬不要把文字和底圖混在一起導出。

6. 文本行高

正文文本的行高請務必比正文字號至少大6px，除非是標題文本或吸引眼球的廣告文本可以例外。

請檢查每一處文本域的行高，以確保它們是統一的。因為不能排除開發同學有時會直接復制粘貼文本行高的現象。

譯者：原作者沒論證為什么是 6px，以及沒論證為什么此約束僅對正文文本適用。

7. 文本寬度

請將單行文本的寬度設置為“auto”（自動）。這會更有利于開發同學查看文本與其它元素之間的padding。

譯者：此處存疑，因為多數情況下，某字段的顯示寬度最大值是限定死的。即意味著：即使此處單行文本哪怕只有一個字，我也需要將其寬度設定為 N px。因為超出這個寬度，將不再折行，而顯示“...”

8. 移除Icon的bounds

bounds，就是框定單個icon最大區域的那個范圍。有時你導入一個icon是自帶bounds的，但開發人員將很難檢查icon輪廓本身與相鄰元素的真實padding，所以應該去除。

譯者：此處很奇怪，且恰恰相反，應當倡導連同 bounds一起導出。因為程序員根本不需要關心“icon輪廓本身與相鄰元素的真實距離”。只需關心此處 icon占位的尺寸即可。因為只有這樣，才能在 symbol 里隨意替換同類型 icon（盡管他們視覺尺寸不同，但占位尺寸相同），而這樣也可以讓程序員做到代碼的高度復用，以提升效率及確保代碼的簡潔。

9. 按鈕狀態

現在你覺得設計都完事兒了，很不幸，此時程序員哥哥又艾特你了 ??

“這些文字、圖標、按鈕的狀態分別是什么大哥？當用戶懸停、點擊時，會發生什么？”

請確保你的控件包含了所有狀態，并將其命名為“Specs”！

10. 如何在Zeplin內有序地組織N多界面？

Zeplin可以讓你為每個頁面添加Tag，以將其進行分類。

并且，請按照用戶使用流程將界面排序，這會讓使用者（無論是開發同學還是產品經理還是老板）瀏覽時更加直觀。

「Sketch 全方位使用指南」

1. PS 和 Sketch 哪個好用？丨《巔峰對決！新晉神器SKETCH VS. 經典老炮PHOTOSHOP》
2. 新手使用技巧丨《SKETCH新手指南！10個幫你UI設計提速的SKETCH使用技巧》
3. 達人使用技巧丨《幫到心坎了！一組實用熱門的SKETCH技巧幫你快速過稿》
4. 好用的Sketch 插件丨《快成一道閃電！讓你設計效率疾速提升的免費SKETCH插件》
5. Windows 用戶福利丨《用虛擬機體驗Sketch！為設計師準備的MAC OSX安裝指南》

原文地址：medium
譯文地址：Sketch 中文教程
譯者：@Alpha_Lynnn

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com