很多新人在開始做移動(dòng)端UI設(shè)計(jì)的時(shí)候兵迅，往往對(duì)界面的一些尺寸規(guī)范不是十分清楚，很多時(shí)候都是憑借自己的感覺和經(jīng)驗(yàn)去繪制界面，心里并沒(méi)有一個(gè)清晰的概念，導(dǎo)致做出來(lái)的頁(yè)面總是不那么盡如人意。本文整理匯總了一些界面設(shè)計(jì)（iOS系統(tǒng)）中常用的一些尺寸規(guī)范和方法都办，如控件間距、適配、標(biāo)注度宦、切圖等踢匣，設(shè)計(jì)師在設(shè)計(jì)時(shí)并不一定要嚴(yán)格遵守，但對(duì)這些規(guī)范應(yīng)有所了解戈抄，并融會(huì)貫通符糊。
目錄
- 界面設(shè)計(jì)尺寸及欄高度
- 邊距和間距
- 內(nèi)容布局
- 界面圖片設(shè)計(jì)比例
- 建立統(tǒng)一風(fēng)格的圖標(biāo)
- APP版式設(shè)計(jì)規(guī)范
- 界面文字設(shè)計(jì)規(guī)范
- 設(shè)計(jì)適配
- 切圖規(guī)范
- 設(shè)計(jì)稿標(biāo)注
一、界面設(shè)計(jì)尺寸及欄高度
目前主流的 iOS 設(shè)備主要有 iPhone SE（4英寸）呛凶、iPhone 6s/7/8（4.7英寸）男娄、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸）漾稀，它們都采用了 Retina 視網(wǎng)膜屏幕模闲，其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率崭捍，無(wú)論是欄高度還是應(yīng)用圖標(biāo)尸折，設(shè)計(jì)師提供給開發(fā)人員的切片大小，前者始終是后者的1.5倍殷蛇，并分別以@3x和@2x在文件名結(jié)尾命名实夹，程序再根據(jù)不同分辨率自動(dòng)加載@3x或者@2x的切片。
通過(guò)上面的講解和圖示我們了解了 iPhone 不同設(shè)備的物理尺寸粒梦，那么他們的像素分辨率又是多少呢亮航？也就是說(shuō)我們用 Photoshop 做設(shè)計(jì)新建畫布應(yīng)該設(shè)置多大呢？另外匀们，iOS應(yīng)用中的欄缴淋，包括狀態(tài)欄、導(dǎo)航欄泄朴、標(biāo)簽欄重抖、工具欄等，它們的高度又分別是多少呢祖灰？（注意：iOS 嚴(yán)格規(guī)定了各個(gè)欄的高度钟沛，這個(gè)是必須遵守的）通過(guò)下面的表格和圖示來(lái)為你解答上面的問(wèn)題。
注意：在進(jìn)行 iphone x 設(shè)計(jì)的時(shí)候我們依然可以采用熟悉的 iphone 7 的設(shè)計(jì)尺寸作為模板局扶，只是高度增加了290px恨统，設(shè)計(jì)尺寸為750*1624（@2x）。注意狀態(tài)欄的高度由原來(lái)的40px變成了88px详民，另外底部要預(yù)留68px的主頁(yè)指示器的位置延欠。
二、邊距和間距
在移動(dòng)端頁(yè)面的設(shè)計(jì)中沈跨，頁(yè)面中元素的邊距和間距的設(shè)計(jì)規(guī)范是非常重要的由捎，一個(gè)頁(yè)面是否美觀、簡(jiǎn)潔饿凛、是否通透和邊距間距的設(shè)計(jì)規(guī)范緊密相連狞玛，所以說(shuō)我們有必要對(duì)它們進(jìn)行了解软驰。
1. 全局邊距
全局邊距是指頁(yè)面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來(lái)進(jìn)行規(guī)范心肪，以達(dá)到頁(yè)面整體視覺效果的統(tǒng)一锭亏。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。
在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距硬鞍，讓邊距成為界面的一種設(shè)計(jì)語(yǔ)言慧瘤，常用的全局邊距有32px、30px固该、24px锅减、20px等等，當(dāng)然除了這些還有更大或者更小的邊距伐坏，但上面說(shuō)到的這些是最常用的怔匣，而且有一個(gè)特點(diǎn)就是數(shù)值全是偶數(shù)。
以 iOS 原生態(tài)頁(yè)面為例桦沉，「設(shè)置」頁(yè)面和「通用」頁(yè)面都是使用的30px的邊距每瞒。
再以微信和支付寶為例，他們的邊距分別是20px和24px纯露。
通常左右邊距最小為20px剿骨，這樣的距離可以展示更多的內(nèi)容，不建議比20還小苔埋，否則就會(huì)使界面內(nèi)容過(guò)于擁擠懦砂，給用戶的瀏覽帶來(lái)視覺負(fù)擔(dān)。30px是非常舒服的距離组橄，是絕大多數(shù)應(yīng)用的首選邊距。
還有一種是不留邊距罚随，通常被應(yīng)用在卡片式布局中圖片通欄顯示玉工，比如站酷APP（當(dāng)然站酷APP 也進(jìn)行了改版，首頁(yè)已經(jīng)采用了不通欄的卡片式設(shè)計(jì)）淘菩。這種圖片通欄顯示的設(shè)置方式遵班，更容易讓用戶將注意力集中到每個(gè)圖文的內(nèi)容本身，其視覺流在向下瀏覽時(shí)因?yàn)闆](méi)有留白的引導(dǎo)被圖片直接割裂潮改，造成在圖片上停留更長(zhǎng)時(shí)間狭郑。
2. 卡片間距
在移動(dòng)端頁(yè)面設(shè)計(jì)中卡片式布局是非常常見的布局方式，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來(lái)界定汇在，通常最小不低于16px翰萨，過(guò)小的間距會(huì)造成用戶的緊張情緒，使用最多的間距是20px糕殉、24px亩鬼、30px殖告、40px，當(dāng)然間距也不宜過(guò)大雳锋，過(guò)大的間距會(huì)使界面變得松散黄绩，間距的顏色設(shè)置可以與分割線一致，也可以更淺一些玷过。
以 iOS（750*1334px）為例爽丹，設(shè)置頁(yè)面不需要承載太多的信息，因此采用了較大的70px作為卡片間距辛蚊，有利于減輕用戶的閱讀負(fù)擔(dān)习劫，而通知中心承載了大量的信息，過(guò)大的間距會(huì)讓瀏覽變得不連貫和界面視覺松散嚼隘，因此采用了較小的16px作為卡片的間距诽里。
下面來(lái)看一下微信的卡片間距設(shè)置的是多少，以及顏色值飞蛹。
△ 卡片間距和顏色值是直接截圖測(cè)量和吸取的谤狡，可能不十分準(zhǔn)確
繼續(xù)舉例，下面的兩張截圖分別是巨劃算（卡片間距20px）和拼多多（卡片間距16px）的首頁(yè)截圖卧檐，這種電商類的 APP 因?yàn)樾枰休d大量的信息墓懂，所以一般間距設(shè)置的都比較小。
總結(jié)：卡片間距的設(shè)置是靈活多變的霉囚，一定要根據(jù)產(chǎn)品的氣質(zhì)和實(shí)際需求去設(shè)置捕仔，平時(shí)也可以多截圖測(cè)量一下各類 APP 的卡片間距都是怎么設(shè)置的，看的多了并融會(huì)貫通盈罐，卡片間距設(shè)置自然會(huì)更加合理榜跌，更加得心應(yīng)手。
3. 內(nèi)容間距
一款 APP 除了各種欄（狀態(tài)欄盅粪、導(dǎo)航欄钓葫、標(biāo)簽欄、工具欄）和控件 icon 就是內(nèi)容了票顾，內(nèi)容的布局形式多種多樣础浮，這里不去探討內(nèi)容具體應(yīng)該如何去布局，我們來(lái)說(shuō)一說(shuō)內(nèi)容的間距設(shè)置問(wèn)題奠骄。
先來(lái)介紹一下格式塔原則中的一個(gè)重要的原則就是鄰近性豆同，格式塔鄰近性原則認(rèn)為：?jiǎn)蝹€(gè)元素之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起，含鳞，互相靠近的元素看起來(lái)屬于一組影锈，而那些距離較遠(yuǎn)的則自動(dòng)劃分組外，距離近的關(guān)系緊密。來(lái)看下圖精居，左圖中的圓在水平方向比垂直距離近锄禽，那么，我們看到了4排圓點(diǎn)靴姿，而右圖則看成4列沃但。
在 UI設(shè)計(jì)中內(nèi)容布局時(shí)，一定要重視鄰近性原則的運(yùn)用佛吓，比如在下面這款輕芒閱讀APP 的主界面中宵晚，每一個(gè)應(yīng)用名稱都遠(yuǎn)離其他圖標(biāo)，與對(duì)應(yīng)的圖標(biāo)距離較近淤刃，保持親密的關(guān)系逸贾，也讓用戶的瀏覽變得更直觀铝侵，如果應(yīng)用名稱與上下圖標(biāo)距離相同，就分不出它是屬于上面還是下面疟丙，從而讓用戶產(chǎn)生錯(cuò)亂的感覺享郊。
再來(lái)看一個(gè)案例，日日煮APP，上面圖片與文字較近皇钞，下面圖片與文字較遠(yuǎn)夹界，所以我們清晰的知道文字是屬于上面的圖片的鸠踪。
三、內(nèi)容布局
在 APP 的設(shè)計(jì)中內(nèi)容的布局形式多種多樣评汰，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局惨缆。
1. 列表式布局
列表式布局方式非常普遍，隨便打開一個(gè) APP畅蹂，基本都存在這種布局方式液斜，其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息少漆，用戶通過(guò)上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式检访。
以我們最常用的微信和 QQ 為例，其「信息」頁(yè)面都是采用的列表式布局卖氨，在采用這種布局形式的時(shí)候要注意列表舒適體驗(yàn)的最小高度是80px筒捺，最大的高度要視內(nèi)容的多少而定五嫂。
繼續(xù)舉例，自如（列表高度110px）和唯品會(huì)（列表高度106px）的列表式布局。
2. 卡片式布局
形式非常靈活。其特點(diǎn)在于讥巡，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾抬驴，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容陕悬。而由于每張卡片都是獨(dú)立存在的胧卤，其信息量可以相對(duì)列表更加豐富。
在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣，有些是淺灰色偏藍(lán)等湿滓。
雙欄卡片的布局形式，比較常見于以圖片信息為主導(dǎo)的 App舌狗。例如一些商城的商品陳列頁(yè)面叽奥。這種形式與卡片式類似，但它能在一屏里顯示更多的內(nèi)容痛侍，至少4張卡片朝氓。同時(shí)，由于分開左右兩欄的顯示主届，用戶可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容赵哲。
四、界面圖片設(shè)計(jì)比例
在 UI設(shè)計(jì)中君丁，對(duì)于圖片的尺寸和比例沒(méi)有嚴(yán)格的規(guī)范枫夺，設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺設(shè)置一個(gè)看起來(lái)不錯(cuò)的尺寸，但事實(shí)上我們是有章可循的绘闷。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸橡庞，可以獲得最優(yōu)的方案，常見的圖片尺寸有16:9簸喂、4:3毙死、3:2、1:1和1:0.618（黃金比例）等喻鳄。
這些比例不無(wú)根據(jù)扼倘，它們都和圖片尺寸有關(guān)。16:9 是根據(jù)人體工程學(xué)的研究除呵，發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個(gè)長(zhǎng)寬比例為16:9的長(zhǎng)方形再菊，4:3 是勾三股四弦五，在攝影中非常常見……
五颜曾、建立統(tǒng)一風(fēng)格的圖標(biāo)
在應(yīng)用界面的設(shè)計(jì)中纠拔，功能圖標(biāo)不是單獨(dú)的個(gè)體，通常是由許多不同的圖標(biāo)構(gòu)成整個(gè)系列泛豪，它們貫穿于整個(gè)產(chǎn)品應(yīng)用的所有頁(yè)面并向用戶傳遞信息稠诲。
一套 APP圖標(biāo)應(yīng)該具有相同的風(fēng)格侦鹏，包括造型規(guī)則、圓角大小臀叙，線框粗細(xì)略水，圖形樣式和個(gè)性細(xì)節(jié)等元素都應(yīng)該具有統(tǒng)一的規(guī)范。
通過(guò)分析以上三組圖標(biāo)可以得出：他們具有統(tǒng)一的色彩劝萤，統(tǒng)一的圓角大小渊涝，統(tǒng)一的線框粗細(xì)，那綜合起來(lái)也就是具有統(tǒng)一的風(fēng)格床嫌，給用戶高度統(tǒng)一的視覺體驗(yàn)跨释。
六、APP版式設(shè)計(jì)規(guī)范
版式設(shè)計(jì)又叫做版面編輯厌处，即在有限的版面空間里鳖谈，將版面的構(gòu)成要素如文字、圖片嘱蛋、控件等根據(jù)特定的內(nèi)容進(jìn)行組合排列蚯姆。一個(gè)優(yōu)秀的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計(jì)美感，在 UI設(shè)計(jì)中版面設(shè)計(jì)的原則有哪些呢洒敏？
1. 對(duì)齊
對(duì)齊是貫穿版式設(shè)計(jì)的最基礎(chǔ)龄恋，最重要的原則之一，它能建立起一種整齊劃一的外觀凶伙，帶給用戶有序一致的瀏覽體驗(yàn)郭毕。
2. 對(duì)稱
對(duì)稱是宇宙間的設(shè)計(jì)哲學(xué)，是對(duì)立統(tǒng)一規(guī)律的本質(zhì)屬性函荣，呈現(xiàn)出一種和諧自然的美显押，在應(yīng)用界面的設(shè)計(jì)中，引導(dǎo)頁(yè)設(shè)計(jì)傻挂、注冊(cè)登錄輸入框和按鈕等無(wú)一不是對(duì)稱的設(shè)計(jì)乘碑。
3. 分組
物以類聚，人以群分金拒。分組是將同類別的信息組合在一起兽肤，直觀的呈現(xiàn)在用戶的面前，這樣的設(shè)計(jì)能夠減少用戶的認(rèn)知負(fù)擔(dān)绪抛，在移動(dòng)端界面的設(shè)計(jì)中最常見的分組方式就是卡片资铡，為用戶選擇提供專注而又明確的瀏覽體驗(yàn)。
七幢码、界面文字設(shè)計(jì)規(guī)范
文字是 APP 中最核心的元素笤休，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，所以說(shuō)文字在 APP 的設(shè)計(jì)中是非常重要的症副，那么店雅，文字的字體如何選擇政基，字號(hào)如何設(shè)定，是否加粗底洗，顏色如何設(shè)置腋么？
在一款 APP 中字號(hào)范圍一般在20-36之間（@2x）,當(dāng)然 iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計(jì)，字號(hào)還是要根據(jù)產(chǎn)品屬性酌情設(shè)定亥揖。另外需要注意的一點(diǎn)是所有的字號(hào)設(shè)置都必須為偶數(shù)，上下級(jí)內(nèi)容字號(hào)極差關(guān)系為2-4號(hào)圣勒。
關(guān)于字體：在 iOS 9推出之前設(shè)計(jì)師普遍采用華文黑體费变、谷歌思源、冬青等字體進(jìn)行設(shè)計(jì)圣贸，iOS 9推出了蘋果自己的字體——蘋方挚歧！自此之后蘋方字體被廣泛應(yīng)用于移動(dòng)端設(shè)計(jì)中。
關(guān)于字體顏色和是否加粗：字體的顏色設(shè)置我們一般很少用純黑色吁峻，一般用深灰色和淺灰色滑负、細(xì)體和粗體（注意要用字體本身的字重，不能用 PS 的加粗功能）來(lái)區(qū)分重要信息和次要信息用含，進(jìn)行信息層級(jí)的劃分矮慕。
八、設(shè)計(jì)適配
iOS 主流設(shè)備的分辨率分別是640x1136px（@2x）（iPhone SE）啄骇、750 x1134px（@2x）（iPhone6s/7/8）痴鳄、1242x2208px（@3x）（iPhone 6s/7/8 Plus）、1125x2436px（@3x）／750x1624px（@2x）（iPhone X）缸夹。
在設(shè)計(jì)設(shè)計(jì)中設(shè)計(jì)師需要設(shè)計(jì)一套基準(zhǔn)設(shè)計(jì)圖來(lái)達(dá)到適配多個(gè)分辨率的目的痪寻，我們可以選擇中間尺寸750 x1134px作為基準(zhǔn)，向下適配640x1136px虽惭，向上適配1242x2208px和750x1624px／1125x2436px橡类。
1. 750×1334向下適配640×1136
由于750x1334px和640x1136px兩個(gè)尺寸的界面都是2倍的像素倍率，因此它們的切片大小是相同的芽唇，即系統(tǒng)圖標(biāo)顾画、文字和高度都無(wú)需適配，需要適配的是寬度披摄。
為了讓大家了解適配的原則亲雪，我們以文字描述和圖示的方式進(jìn)行750x1334px到640x1136px的界面推導(dǎo)。
繪制一個(gè)750x1334px的設(shè)計(jì)圖疚膊，這是最常見的首頁(yè)設(shè)計(jì)圖义辕，從上至下分別是狀態(tài)欄、導(dǎo)航欄寓盗、首焦圖灌砖、主要入口璧函、分割、列表基显。
下面開始進(jìn)行適配蘸吓，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的圖標(biāo)撩幽、文字大小等都是相同的库继，所以我們不需要改變圖像大小，只需將畫布大小改成640x1136px即可窜醉，然后再改變橫向元素的間距以達(dá)到適配的目的宪萄。
首先打開750x1334px的設(shè)計(jì)稿，執(zhí)行 Command+Alt+C（改變畫布大小的快捷鍵）榨惰，鼠標(biāo)左鍵單擊「定位」的左上角的格子拜英，設(shè)置寬高為640和1136，點(diǎn)擊「確定」琅催。
改變畫布大小之后居凶，設(shè)計(jì)稿的右邊和下邊都被裁切（上面左圖中半透明蒙版覆蓋區(qū)域），畫布縮小成640x1136px藤抡。
上面左圖裁切到右圖適配完成侠碧，做了如下調(diào)整。
- 導(dǎo)航欄右邊的圖標(biāo)向左移動(dòng)保持和原來(lái)的右邊距一致杰捂，標(biāo)題居中舆床。
- 首焦圖高度除以1.17（750／640=1.17得到）后居中，寬度640px嫁佳。
- 主要入口右邊的圖標(biāo)向左移動(dòng)保持和原來(lái)的右邊距一致挨队，各圖標(biāo)的間距等寬。
2. 750×1334向上適配1242×2208
由于750x1334px界面是2倍的像素倍率蒿往，而1242x2208px是3倍的像素倍率盛垦，也就是說(shuō)1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍，所以我們?cè)谶M(jìn)行適配的時(shí)候直接將界面的圖像大小變?yōu)樵瓉?lái)的1.5倍瓤漏，然后調(diào)整畫布大小為1242x2208px腾夯，最后調(diào)整界面圖標(biāo)和元素的橫向間距的大小完成適配。
上面說(shuō)了整體思路蔬充，下面我們來(lái)說(shuō)說(shuō)具體怎么適配蝶俱。
首先對(duì)750x1334px的畫布執(zhí)行 Command+Alt+I 命令（調(diào)整圖像大小）饥漫，單位設(shè)置為百分比榨呆，寬高設(shè)置為150%，點(diǎn)擊「確定」庸队，調(diào)整之后的畫布大小為1125x2001px积蜻。
緊接著對(duì)1.5倍之后的1125x2001px界面執(zhí)行 Command+Alt+C（調(diào)整畫布大写掣睢），鼠標(biāo)單擊「定位」左上角的格子竿拆，調(diào)整寬高為1242和2208px宙拉，點(diǎn)擊「確定」。
上面左圖拓展畫布到右圖完成適配做了如下調(diào)整：
- 導(dǎo)航欄右邊的圖標(biāo)向右移動(dòng)保持和原來(lái)的右邊距一致丙笋，標(biāo)題居中谢澈。
- 首焦圖的高度乘以1.65（1242/750=1.65得到）后居中，寬度1242px不见。
- 主要入口右邊的圖標(biāo)向右移動(dòng)和原來(lái)的右邊距一致澳化，各圖標(biāo)的間距等寬。
注：分割線仍是1px稳吮。
3. 750×1334向上適配1125x2436px（@3x）
與蘋果之前發(fā)布的 iOS設(shè)備相比，iPhone X 的像素分辨率發(fā)生了變化井濒，為1125x2436px（@3x）灶似，在實(shí)際工作中為了方便向上和向下的適配，我們?nèi)匀豢梢赃x擇熟悉的 iPhone 7（750x1334px）的尺寸作為模版進(jìn)行設(shè)計(jì)瑞你，只是高度增加了290px酪惭；設(shè)計(jì)尺寸為：750x1624px（@2x）。設(shè)計(jì)完成之后將設(shè)計(jì)稿的圖像大小拓展1.5倍即可得到1125x2436px（@3x）尺寸的設(shè)計(jì)稿者甲。
在適配的時(shí)候需要注意春感，狀態(tài)欄由之前的40px增加到88px，標(biāo)簽底部預(yù)留68px用于放置主頁(yè)指示器虏缸，如下圖所示鲫懒。
關(guān)于主頁(yè)指示器的適配涉及到兩種情況：底部出現(xiàn)標(biāo)簽欄、工具欄等操作設(shè)計(jì)時(shí)刽辙，需要將底色下延68px并填充原有顏色窥岩，這樣的處理可以讓底部設(shè)計(jì)更佳簡(jiǎn)潔舒適，沒(méi)有功能操作時(shí)宰缤，頁(yè)面底部不需要填充顏色颂翼，只需蓋住主頁(yè)指示器即可。
對(duì)于大多數(shù)采用瀑布流的頁(yè)面來(lái)說(shuō)慨灭，僅僅是屏幕高度上的變化朦乏，可以無(wú)視。但對(duì)于如：新手引導(dǎo)頁(yè)氧骤、音樂(lè)播放器等需要單屏顯示的界面就需要重新布局呻疹。
九、切圖規(guī)范
當(dāng)界面設(shè)計(jì)定稿之后语淘，設(shè)計(jì)師需要對(duì)圖標(biāo)進(jìn)行切片提供給開發(fā)工程師诲宇，通常我們只需要對(duì) icon 進(jìn)行切圖即可际歼，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的姑蓝，例如搜索框只需要在標(biāo)注中描述它的尺寸鹅心、圓角大小、背景色值纺荧、不透明度即可旭愧，開發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。
1. 輸出切片
先將設(shè)計(jì)稿中的圖標(biāo)重新排列在一張新的畫布中宙暇，保證同樣尺寸的圖標(biāo)間距相同输枯，這樣做的好處是為圖標(biāo)建立一個(gè)控件庫(kù)，有利于圖標(biāo)的整理占贫。
給每一個(gè)圖標(biāo)建立好參考線之后桃熄，用 PS 自帶的切片功能，沿著建立好的每個(gè)圖標(biāo)的參考線畫框即可型奥，注意最后要輸出 PNG 格式的切片（PNG 格式擁有更多的顏色和細(xì)節(jié)并且支持透明）瞳收。
在具體操作時(shí)首先要將畫布背景色去掉，讓畫布變成透明厢汹，做好切片后執(zhí)行文件-存儲(chǔ)為 Web 所用格式螟深，在對(duì)話框中選擇 PNG 格式，點(diǎn)擊「存儲(chǔ)」即可烫葬。
注：圖中標(biāo)簽欄圖標(biāo)的底色塊是為了保證統(tǒng)一的切片尺寸界弧，可以根據(jù)色塊建立參考線，具體切圖時(shí)要將色塊去掉搭综。
2. 切片命名
切片命名的通用規(guī)范是垢箕，界面功能狀態(tài).png。名稱應(yīng)使用英文命名设凹，不要使用數(shù)字或者符號(hào)作為開頭舰讹，使用下劃線進(jìn)行連接，例如一個(gè)首頁(yè)處于正常狀態(tài)下的按鈕命名是 home_btn_nor@2x.png闪朱。其中界面首頁(yè)是 home月匣、空間按鈕是 btn、狀態(tài)正常是 normal奋姿。為了命名的正確性锄开，設(shè)計(jì)師需要先和合作的開發(fā)工程師進(jìn)行溝通確認(rèn)。
十称诗、設(shè)計(jì)稿標(biāo)注
當(dāng)界面設(shè)計(jì)定稿之后萍悴，設(shè)計(jì)師需要對(duì)界面進(jìn)行標(biāo)注給開發(fā)工程師在還原界面時(shí)進(jìn)行參考。借助一些專業(yè)的標(biāo)注工具有利于我們提高工作效率，常用的標(biāo)注工具有 Mark Man 或 PX Cook癣诱。
在一份設(shè)計(jì)稿中需要標(biāo)注的內(nèi)容是文字的字號(hào)大小计维、粗細(xì)、顏色撕予、不透明度鲫惶；界面的背景顏色、不透明度实抡；各個(gè)圖標(biāo)欠母、列表、文字之間的間距吆寨。
界面標(biāo)注的作用是給開發(fā)工程師提供參考赏淌，因此在標(biāo)注之前需要和開發(fā)工程師進(jìn)行溝通，了解他們的工作方式啄清，標(biāo)注完成之后宣講你的注意事項(xiàng)六水，以更快捷高效的完成工作，并且最大限度的完成視覺高的還原辣卒。
總結(jié)
本文整理匯總了包括界面尺寸缩擂、控件間距、版式設(shè)計(jì)規(guī)范添寺、文字設(shè)計(jì)規(guī)范、設(shè)計(jì)適配懈费、標(biāo)注计露、切圖等等一系列的移動(dòng)端UI設(shè)計(jì)規(guī)范，在此期間查閱了大量的資料憎乙，共耗時(shí)一周完成本文的編寫票罐，希望為剛剛從事 UI設(shè)計(jì)的設(shè)計(jì)師們提供入門級(jí)別的幫助。
至于為什么只總結(jié)了 iOS系統(tǒng)設(shè)計(jì)規(guī)范泞边，而沒(méi)有 Android系統(tǒng)的設(shè)計(jì)規(guī)范该押，在這里說(shuō)明一下，本來(lái)安卓系統(tǒng)設(shè)計(jì)規(guī)范也是要涵蓋的阵谚，但通過(guò)查閱資料發(fā)現(xiàn)安卓設(shè)計(jì)規(guī)范介紹少之又少蚕礼，并且標(biāo)準(zhǔn)不統(tǒng)一，借鑒意義不大梢什，所以省略了這部分規(guī)范的編寫奠蹬。
