UI 設(shè)計師從零開始做一個App 要經(jīng)歷哪些流程？這個系列的文章會為新手一一講解痴晦。本篇會為你講解界面設(shè)計中基礎(chǔ)的知識點（設(shè)計稿尺寸南吮、圖標(biāo)/字體設(shè)計等），比較實用誊酌。
界面設(shè)計
目前在行業(yè)里部凑，關(guān)于APP界面設(shè)計規(guī)范也是層次不齊，很多都還停留在6的設(shè)備和iOS 9的系統(tǒng)之上碧浊，而現(xiàn)在最新的是iPhone X和iOS 10了（更新?lián)Q代真的很快）涂邀，我這里說的是最新的iOS 界面設(shè)計規(guī)范
一. 關(guān)于設(shè)計工具
俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高箱锐，做界面設(shè)計我們用的最多的就是PS和AI了比勉，如果你是Mac用戶，可以嘗試一下Sketch驹止，軟件的版本當(dāng)然是推薦高版本敷搪，因為功能更強大，作圖的速度也就更快幢哨。
我個人剛接觸PS是從CS6開始赡勘，CS 6 – CC – CC 2014 – CC 2015，一直到現(xiàn)在的最新的CC 2017捞镰，深刻體會闸与，新的版本更好用。也可以根據(jù)個人習(xí)慣岸售，選擇自己順手的工具就好践樱。
二. 設(shè)計稿尺寸
在看設(shè)計稿尺寸之前，我們先來了解一下APP界面設(shè)計構(gòu)成凸丸。
界面構(gòu)成由：布局層拷邢、圖文排版層和圖標(biāo)層。
在iPhone 6還沒出的時候屎慢，都是用640×1136 px來做設(shè)計稿的瞭稼，自從6的發(fā)布，所有的設(shè)計稿尺寸以750×1334 px來做設(shè)計稿尺寸腻惠。
再帶大家來看看环肘，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：
iPhone界面設(shè)計規(guī)范：
iPhone 界面尺寸：
以750x1334px作為設(shè)計稿標(biāo)準(zhǔn)尺寸的原由：
1. 從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小，最方便適配集灌。
2. 大屏幕時代依然以小尺寸作為設(shè)計尺寸悔雹，會限制設(shè)計師的設(shè)計視角。
3. 設(shè)計安卓版本時只需做最小的設(shè)計調(diào)整，提升設(shè)計效率腌零。
所以做設(shè)計稿時請以750 x 1334 px來做設(shè)計稿梯找。
在文檔建立參考線是一個很好的習(xí)慣，我希望大家也可以養(yǎng)成這個習(xí)慣益涧，上下很容易設(shè)置初肉，左右我習(xí)慣設(shè)置24 px的距離，我通過對國內(nèi)外很多APP就行了對比饰躲，總結(jié)是24 px更合理牙咏，這個是我的個人習(xí)慣，所以也不要當(dāng)做是明文規(guī)則嘹裂，你設(shè)置為30 px妄壶，也是可以的。
三. 圖標(biāo)設(shè)計
iPhone 圖標(biāo)尺寸：
圖標(biāo)設(shè)計請用柵格化系統(tǒng)進(jìn)行設(shè)計寄狼。
設(shè)計尺寸：1024 x 1024 px丁寄，盡可能的采用黃金比例設(shè)計。
四. 關(guān)于設(shè)計字體
先來看一下字體的歷史演變過程
iOS 9：英文字體為Helvetica Neue
iOS 9：中文字體由為冬青黑
iOS 10：英文字體為San Francisco
iOS 10：中文字體為蘋方
關(guān)于字體大小的問題：
頂部操作欄文字大小 34-38px
標(biāo)題文字大小 28-34px
正文文字大小 26-30px
輔助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一個范圍泊愧，這要根據(jù)設(shè)計的視覺效果來決定伊磺，不要死記硬背，但是切記删咱，字體大小要用偶數(shù)
我們設(shè)計完界面屑埋，就要開始切圖和標(biāo)注了。
五.?切圖工具和標(biāo)注工具
1.?切圖工具：Cutterman：一款PS的插件痰滋，切圖非常方便摘能，但不支持綠色免安裝版本PS，而且對PS版本要求比較高敲街，針對CS 6的已經(jīng)不維護(hù)更新了团搞。推薦安裝官方完整版PS CC及以上版本，目前cutterman最新版為3.2.0版本多艇。
Cutterman官方地址：http://www.cutterman.cn/
2.?標(biāo)注工具：
Parker 現(xiàn)在Parker已經(jīng)更新到3.1.0逻恐，優(yōu)點在于將標(biāo)注、切圖這兩項設(shè)計完稿后集成在一個軟件內(nèi)完成峻黍，支持Windows和Mac雙平臺复隆。標(biāo)注功能包括：支持長度，顏色奸披，區(qū)域昏名，文字注釋。
Parker安裝包和使用教程請戳這里：http://www.cutterman.cn/zh/parker
Parker阵面，和cutterman是同一家的，Parker能夠自動計算尺寸、距離样刷、文字大小仑扑、陰影、描邊圓角置鼻、行高等信息镇饮，并按照你的需要進(jìn)行標(biāo)注, 它極大節(jié)省你標(biāo)注的時間，大幅度提升設(shè)計效率箕母。
但是储藐，Parker并不是免費的，而是一款付費軟件嘶是，需要60RMB钙勃。
六.?頁面標(biāo)注
標(biāo)注是非常重要的，開發(fā)哥哥能不能完美的的還原設(shè)計稿聂喇，很大一部分取決于我們的標(biāo)注辖源；如果不清楚你該怎么標(biāo)，一定要和開發(fā)哥哥溝通希太！
溝通是非常有效解決問題的途徑克饶！
在這里我大致的說一下我的標(biāo)注習(xí)慣，不需要將每一張效果圖都進(jìn)行標(biāo)注誊辉，你標(biāo)注的頁面能保證開發(fā)能把每個頁面都能順利進(jìn)行就可以了矾湃。
我拿我標(biāo)注過的頁面做個示例：
我們從上面的標(biāo)注圖可以看出，需要標(biāo)注的內(nèi)容有：
文字：字體大小堕澄、字體顏色
布局控件屬性：控件寬高洲尊、背景色、透明度奈偏、描邊坞嘀、圓角大小
列表：列表高度、列表顏色惊来、列表內(nèi)內(nèi)容上下間距
間距：控件之間的距離丽涩、左右邊距
段落文字：字體大小、字體顏色裁蚁、行距
全部屬性：如導(dǎo)航欄文字大小矢渊、顏色，左右邊距枉证，默認(rèn)間距等矮男，你可以提前跟開發(fā)哥哥說好，不用標(biāo)注
所有的頁面標(biāo)注總結(jié)起來就是：標(biāo)文字室谚，標(biāo)間距毡鉴，標(biāo)大小崔泵，標(biāo)區(qū)域
注：標(biāo)注顏色格式是使用16進(jìn)制（如：#FF0000），還是RGB（255,0,0）猪瞬？你需要和開發(fā)哥哥商量一下憎瘸，根據(jù)他的開發(fā)習(xí)慣，一般采用16進(jìn)制色值就好了陈瘦。
七.?界面切圖
我還是拿圖舉例來說明:
icon_alipay.png→iPhone 1-3代的手機(jī)(已經(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鞍泉，擴(kuò)大1.5倍就是@3x了皱埠。
總結(jié)
1. 到底哪些資源需要切圖，哪些不需要切圖塞弊？
只要是無法用代碼來實現(xiàn)和表達(dá)出來的漱逸，就需要切圖
如果實在不清楚要不要切圖，多和開發(fā)溝通游沿，他會告訴你哪些是需要你切圖的
2.?切圖需要切幾套饰抒？（這里我只以iOS作為標(biāo)準(zhǔn)，安卓下期再說）
理論上诀黍，我們需要切3套圖袋坑，是為了更好的適配
在實際工作中，iOS只需要切2套圖就可以眯勾，分別為：@2x和@3x
3.?切圖該怎么命名枣宫，不會命名怎么辦？
之前看到過一篇關(guān)于界面切圖命名規(guī)范的文章吃环，請戳進(jìn)去：《基礎(chǔ)知識炬搭！寫給UI設(shè)計新手的切圖命名規(guī)則手冊》
注意：切圖是需要注意幾點
切圖輸出格式必須為png24位添履、png8位拟杉、jpg格3種格式
同一模塊內(nèi)笑旺，切圖大小應(yīng)保持一致
切圖輸出大小必須保持為偶數(shù)
為了減小包的大小，所有切圖盡量壓縮后再給開發(fā)
關(guān)于設(shè)計界面好唯、切圖和標(biāo)注就說到這里了竭沫，如果在工作中，不清楚該怎么切怎么標(biāo)的時候骑篙，多和開發(fā)溝通交流蜕提，良好的溝通才是解決問題的唯一方法，切記不要一個人在那瞎琢磨靶端。
