UI實戰(zhàn)教程！從零開始做APP 系列之切圖標注篇

UI 設(shè)計師從零開始做一個App 要經(jīng)歷哪些流程？這個系列的文章會為新手一一講解。本篇會為你講解切圖標注的要點和技巧，實用高效，新手來收。

先來看看整個目錄：

• 項目立項
• 項目預(yù)估時間
• 界面設(shè)計
• 切圖標注
• 視覺還原
• 上線準備

上期回顧：

1. 《從零開始做APP 系列之項目立項+預(yù)估時間篇》
2. 《從零開始做APP 系列之界面設(shè)計篇》

上期講了界面設(shè)計，我們設(shè)計完界面，就要開始切圖和標注了。

一.?切圖工具和標注工具

1.?切圖工具：

Cutterman：一款PS的插件，切圖非常方便，但不支持綠色免安裝版本PS，而且對PS版本要求比較高，針對CS 6的已經(jīng)不維護更新了。推薦安裝官方完整版PS CC及以上版本，目前cutterman最新版為3.2.0版本。

Cutterman官方地址：http://www.cutterman.cn/

Assistor PS 也是一款PS的切圖標注插件，也被譽為神器；我使用了一下，感覺還可以，但是切圖和標注上體驗還是不高，但是Assistor PS的其他輔助功能還是很不錯的，比如參考線輔助，圓角大小，磁鐵功能。

2.?標注工具：

PxCook（像素大廚），是一款切圖標注設(shè)計工具軟件。自2.0.0版本開始，支持PSD文件的文字，顏色，距離自動智能識別。

優(yōu)點在于將標注、切圖這兩項設(shè)計完稿后集成在一個軟件內(nèi)完成，支持Windows和Mac雙平臺。標注功能包括：支持長度，顏色，區(qū)域，文字注釋；從2.0.0版本開始，整體效率有了很大的提高，值得推薦的是自動智能識別標注。

PxCook安裝包和使用教程請戳這里：《神器推薦！幫你輕松高效輸出標注切圖的PXCOOK！》

Parker，和cutterman是同一家的，Parker能夠自動計算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息，并按照你的需要進行標注, 它極大節(jié)省你標注的時間，大幅度提升設(shè)計效率。（U妹現(xiàn)在一直用Parker進行標注）

但是，Parker并不是免費的，而是一款付費軟件，需要60RMB。

Mark Man，也是一款高效的設(shè)計稿標注工具，支持 Win / Mac, 可免費使用基礎(chǔ)功能，免費版的在體驗上也是差強人意，畢竟是免費的，如果需要高級功能也是需要付費的60RMB。

以上工具各有優(yōu)點和缺點，在選擇上主要還是看個人的習(xí)慣，哪個用著順手就選擇哪個。

二.?頁面標注

標注是非常重要的，開發(fā)哥哥能不能完美的的還原設(shè)計稿，很大一部分取決于我們的標注；如果不清楚你該怎么標，一定要和開發(fā)哥哥溝通！

溝通是非常有效解決問題的途徑！

在這里我大致的說一下我的標注習(xí)慣，不需要將每一張效果圖都進行標注，你標注的頁面能保證開發(fā)能把每個頁面都能順利進行就可以了。

我拿我標注過的頁面做個示例：

我們從上面的標注圖可以看出，需要標注的內(nèi)容有：

• 文字：字體大小、字體顏色
• 布局控件屬性：控件寬高、背景色、透明度、描邊、圓角大小
• 列表：列表高度、列表顏色、列表內(nèi)內(nèi)容上下間距
• 間距：控件之間的距離、左右邊距
• 段落文字：字體大小、字體顏色、行距
• 全部屬性：如導(dǎo)航欄文字大小、顏色，左右邊距，默認間距等，你可以提前跟開發(fā)哥哥說好，不用標注

所有的頁面標注總結(jié)起來就是：標文字，標間距，標大小，標區(qū)域

注：標注顏色格式是使用16進制（如：#FF0000），還是RGB（255,0,0）？你需要和開發(fā)哥哥商量一下，根據(jù)他的開發(fā)習(xí)慣，一般采用16進制色值就好了。

三.?界面切圖

我還是拿圖舉例來說明:

• icon_alipay.png→iPhone 1-3代的手機(已經(jīng)不考慮了)
• icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7對應(yīng)尺寸，這就是我們通常所說的2倍圖
• icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，這就是3倍圖

可以簡單的理解為倍數(shù)關(guān)系，如果你使用750x1334px（iPhone 6/6S/7）尺寸做設(shè)計稿，那么切片輸出就是@2x，縮小2倍就是@1x，擴大1.5倍就是@3x了。

總結(jié)

1. 到底哪些資源需要切圖，哪些不需要切圖？

• 只要是無法用代碼來實現(xiàn)和表達出來的，就需要切圖
• 如果實在不清楚要不要切圖，多和開發(fā)溝通，他會告訴你哪些是需要你切圖的

2.?切圖需要切幾套？（這里我只以iOS作為標準，安卓下期再說）

• 理論上，我們需要切3套圖，是為了更好的適配
• 在實際工作中，iOS只需要切2套圖就可以，分別為：@2x和@3x

3.?切圖該怎么命名，不會命名怎么辦？

之前有一篇關(guān)于界面切圖命名規(guī)范的文章，請戳進去：《基礎(chǔ)知識！寫給UI設(shè)計新手的切圖命名規(guī)則手冊》

注意：切圖是需要注意幾點

• 切圖輸出格式必須為png24位、png8位、jpg格3種格式
• 同一模塊內(nèi)，切圖大小應(yīng)保持一致
• 切圖輸出大小必須保持為偶數(shù)
• 為了減小包的大小，所有切圖盡量壓縮后再給開發(fā)

關(guān)于圖片壓縮的文章請戳下面：《圖片壓縮不求人！7款超實用的壓縮神器推薦》

關(guān)于切圖和標注就說到這里了，如果在工作中，不清楚該怎么切怎么標的時候，多和開發(fā)溝通交流，良好的溝通才是解決問題的唯一方法，切記不要一個人在那瞎琢磨。

歡迎關(guān)注作者公眾號：UI妹兒

「從零開始設(shè)計App 之UI規(guī)范系列」

1. 《一份超實用的設(shè)計規(guī)范制定指南》
2. 《實用必收！如何建立一套UI設(shè)計規(guī)范？（附眾多神器）》
3. 《基礎(chǔ)小課堂！從零開始教你做高保真原型圖+UI 設(shè)計規(guī)范》
4. 《UI丨歷經(jīng)實戰(zhàn)，我總結(jié)了這四個界面設(shè)計規(guī)范的經(jīng)驗》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com