起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識系列｜一款APP設計的從0到1：切圖標注篇
《一款APP設計的從0到1》這是一篇系列文章干貨，上次U妹講的是關于APP項目立項、預估時間和界面設計篇，今天U妹來說一下，界面切圖標注。
這次U妹接著上次的茬繼續，繼續之前先來看看整個目錄（滿滿的干貨）
U妹列了一個小小的目錄：
三、界面設計
四、切圖標注
五、視覺還原
六、上線準備
上期講了界面設計，我們設計完界面，就要開始切圖和標注了。
一、切圖工具和標注工具
1、切圖工具
Cutterman，一款PS的插件，切圖非常方便，但不支持綠色免安裝版本PS，而且對PS版本要求比較高，針對CS 6的已經不維護更新了。推薦安裝官方完整版PS CC及以上版本，目前cutterman最新版為3.2.0版本。
Cutterman安裝包和使用教程，請戳這里：《cutterman切圖教程（設計師必備）》
Cutterman官方地址：http://www.cutterman.cn/
Assistor PS ?也是一款PS的切圖標注插件，也被譽為神器；我使用了下，感還可以，但是切圖和標注上體驗還是不高，但是Assistor PS的其他輔助功能還是很不錯的，比如參考線輔助，圓角大小，磁鐵功能。
2、標注工具
PxCook（像素大廚），是一款切圖標注設計工具軟件。自2.0.0版本開始，支持PSD文件的文字，顏色，距離自動智能識別。
優點在于將標注、切圖這兩項設計完稿后集成在一個軟件內完成，支持Windows和Mac雙平臺。標注功能包括：支持長度，顏色，區域，文字注釋；從2.0.0版本開始，整體效率有了很大的提高，值得推薦的是自動智能識別標注。
PxCook安裝包和使用教程請戳這里：《PxCook標注教程（設計師必備）》
Parker，和cutterman是同一家的，Parker能夠自動計算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息，并按照你的需要進行標注, 它極大節省你標注的時間，大幅度提升設計效率。（U妹現在一直用Parker進行標注）
但是，parker并不是免費的，而是一款付費軟件，需要60RMB。
Mark Man，也是一款高效的設計稿標注工具，支持 Win / Mac, 可免費使用基礎功能，免費版的在體驗上也是差強人意，畢竟是免費的，如果需要高級功能也是需要付費的60RMB。
以上工具各有優點和缺點，在選擇上主要還是看個人的習慣，哪個用著順手就選擇哪個。
二、頁面標注
標注是非常重要的，開發哥哥能不能完美的的還原設計稿，很大一部分取決于我們的標注；如果不清楚你該怎么標，一定要和開發哥哥溝通！
溝通是非常有效解決問題的途徑！
在這里我大致的說一下我的標注習慣，不需要將每一張效果圖都進行標注，你標注的頁面能保證開發能把每個頁面都能順利進行就可以了。
我拿我標注過的頁面做個示例：
我們從上面的標注圖可以看出，需要標注的內容有：
- 文字：字體大小、字體顏色
- 布局控件屬性：控件寬高、背景色、透明度、描邊、圓角大小
- 列表：列表高度、列表顏色、列表內內容上下間距
- 間距：控件之間的距離、左右邊距
- 段落文字：字體大小、字體顏色、行距
- 全部屬性：如導航欄文字大小、顏色，左右邊距，默認間距等，你可以提前跟開發哥哥說好，不用標注。
所有的頁面標注總結起來就是：標文字，標間距，標大小，標區域
注：標注顏色格式是使用16進制（如：#FF0000），還是RGB（255,0,0）？你需要和開發哥哥商量一下，開他的開發習慣，一般采用16進制色值就好了。
三、界面切圖
我還是拿圖舉例來說明：（有圖有真相哈）
icon_alipay.png→iPhone 1-3代的手機(已經不考慮了)
icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7對應尺寸，這就是我們通常所說的2倍圖
icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，這就是3倍圖
可以簡單的理解為倍數關系，如果你使用750x1334px（iPhone 6/6S/7）尺寸做設計稿，那么切片輸出就是@2x，縮小2倍就是@1x，擴大1.5倍就是@3x了。
我總結了一些切圖中常常遇到的問題：
1、到底哪些資源需要切圖，哪些不需要切圖？
- 只要是無法用代碼來實現和表達出來的，就需要切圖
- 如果實在不清楚要不要切圖，多和開發溝通，他會告訴你哪些是需要你切圖的
2、切圖需要切幾套？（這里我只以iOS作為標準，安卓下期再說）
- 理論上，我們需要切3套圖，是為了更好的適配。
- 在實際工作中，iOS只需要切2套圖就可以，分別為：@2x和@3x
3、切圖該怎么命名，不會命名怎么辦？
注意：切圖是需要注意幾點：
- 切圖輸出格式必須為png24位、png8位、jpg格3種格式
- 同一模塊內，切圖大小應保持一致
- 切圖輸出大小必須保持為偶數
- 為了減小包的大小，所有切圖盡量壓縮后在給開發（包越小，你的boss越高興，說不好會給你多發點年終獎哈）
關于切圖和標注就說到這里了，如果在工作中，不清楚該怎么切怎么標的時候，多和開發溝通交流，良好的溝通才是解決問題的唯一方法，切記不要一個人在那瞎琢磨；有疑問和問題題也可給U妹留言，我們下期再見！
相關閱讀
作者：U妹，一個不要命的UI設計師，等你，來撩妹喲。微信公眾號“UI妹兒”（ID：UIfaner）
本文由 @U妹 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
我覺得摹客挺好用的，標注切圖很方便。「自動+手動」的標注方式，可以幫助設計師輕松交付設計稿。
除了基礎的多選標注、百分比標注等標注方式，摹客還可以將某個圖層設置為百分比參照，當鼠標點擊、hover設計圖上的其他圖層，會自動以該區域作為參照計算百分比，查看百分比標注更準確更便捷。