目錄

界面設(shè)計尺寸及欄高度

邊距和間距

內(nèi)容布局

界面圖片設(shè)計比例

建立統(tǒng)一風格的圖標

APP版式設(shè)計規(guī)范

界面文字設(shè)計規(guī)范

設(shè)計適配

切圖規(guī)范

設(shè)計稿標注

一翰撑、界面設(shè)計尺寸及欄高度

目前主流的 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倍率的分辨率什往，無論是欄高度還是應(yīng)用圖標，設(shè)計師提供給開發(fā)人員的切片大小慌闭，前者始終是后者的1.5倍别威，并分別以@3x和@2x在文件名結(jié)尾命名，程序再根據(jù)不同分辨率自動加載@3x或者@2x的切片驴剔。

通過上面的講解和圖示我們了解了 iPhone 不同設(shè)備的物理尺寸省古，那么他們的像素分辨率又是多少呢？也就是說我們用 Photoshop 做設(shè)計新建畫布應(yīng)該設(shè)置多大呢丧失？另外豺妓，iOS應(yīng)用中的欄，包括狀態(tài)欄布讹、導(dǎo)航欄琳拭、標簽欄、工具欄等描验，它們的高度又分別是多少呢白嘁？（注意：iOS 嚴格規(guī)定了各個欄的高度，這個是必須遵守的）通過下面的表格和圖示來為你解答上面的問題膘流。

注意：在進行 iphone x 設(shè)計的時候我們依然可以采用熟悉的 iphone 7 的設(shè)計尺寸作為模板絮缅，只是高度增加了290px，設(shè)計尺寸為750*1624（@2x）睡扬。注意狀態(tài)欄的高度由原來的40px變成了88px盟蚣，另外底部要預(yù)留68px的主頁指示器的位置黍析。

二卖怜、邊距和間距

在移動端頁面的設(shè)計中，頁面中元素的邊距和間距的設(shè)計規(guī)范是非常重要的阐枣，一個頁面是否美觀马靠、簡潔奄抽、是否通透和邊距間距的設(shè)計規(guī)范緊密相連，所以說我們有必要對它們進行了解甩鳄。

1. 全局邊距

全局邊距是指頁面內(nèi)容到屏幕邊緣的距離逞度，整個應(yīng)用的界面都應(yīng)該以此來進行規(guī)范，以達到頁面整體視覺效果的統(tǒng)一妙啃。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀档泽。

在實際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計語言揖赴，常用的全局邊距有32px馆匿、30px、24px燥滑、20px等等渐北，當然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的铭拧，而且有一個特點就是數(shù)值全是偶數(shù)赃蛛。

以 iOS 原生態(tài)頁面為例，「設(shè)置」頁面和「通用」頁面都是使用的30px的邊距搀菩。

再以微信和支付寶為例呕臂，他們的邊距分別是20px和24px。

通常左右邊距最小為20px肪跋，這樣的距離可以展示更多的內(nèi)容诵闭，不建議比20還小，否則就會使界面內(nèi)容過于擁擠澎嚣，給用戶的瀏覽帶來視覺負擔疏尿。30px是非常舒服的距離，是絕大多數(shù)應(yīng)用的首選邊距易桃。

還有一種是不留邊距褥琐，通常被應(yīng)用在卡片式布局中圖片通欄顯示，比如站酷APP（當然站酷APP 也進行了改版晤郑，首頁已經(jīng)采用了不通欄的卡片式設(shè)計）敌呈。這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個圖文的內(nèi)容本身造寝，其視覺流在向下瀏覽時因為沒有留白的引導(dǎo)被圖片直接割裂磕洪，造成在圖片上停留更長時間。

2. 卡片間距

在移動端頁面設(shè)計中卡片式布局是非常常見的布局方式诫龙，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風格以及卡片承載信息的多少來界定析显，通常最小不低于16px，過小的間距會造成用戶的緊張情緒签赃，使用最多的間距是20px谷异、24px分尸、30px、40px歹嘹，當然間距也不宜過大箩绍，過大的間距會使界面變得松散，間距的顏色設(shè)置可以與分割線一致尺上，也可以更淺一些材蛛。

以 iOS（750*1334px）為例，設(shè)置頁面不需要承載太多的信息怎抛，因此采用了較大的70px作為卡片間距仰税，有利于減輕用戶的閱讀負擔，而通知中心承載了大量的信息抽诉，過大的間距會讓瀏覽變得不連貫和界面視覺松散陨簇，因此采用了較小的16px作為卡片的間距。

下面來看一下微信的卡片間距設(shè)置的是多少迹淌，以及顏色值河绽。

△ 卡片間距和顏色值是直接截圖測量和吸取的，可能不十分準確

繼續(xù)舉例唉窃，下面的兩張截圖分別是巨劃算（卡片間距20px）和拼多多（卡片間距16px）的首頁截圖耙饰，這種電商類的 APP 因為需要承載大量的信息，所以一般間距設(shè)置的都比較小纹份。

總結(jié)：卡片間距的設(shè)置是靈活多變的苟跪，一定要根據(jù)產(chǎn)品的氣質(zhì)和實際需求去設(shè)置，平時也可以多截圖測量一下各類 APP 的卡片間距都是怎么設(shè)置的蔓涧，看的多了并融會貫通件已，卡片間距設(shè)置自然會更加合理，更加得心應(yīng)手元暴。

3. 內(nèi)容間距

一款 APP 除了各種欄（狀態(tài)欄篷扩、導(dǎo)航欄、標簽欄茉盏、工具欄）和控件 icon 就是內(nèi)容了鉴未，內(nèi)容的布局形式多種多樣，這里不去探討內(nèi)容具體應(yīng)該如何去布局鸠姨，我們來說一說內(nèi)容的間距設(shè)置問題铜秆。

先來介紹一下格式塔原則中的一個重要的原則就是鄰近性，格式塔鄰近性原則認為：單個元素之間的相對距離會影響我們感知它是否以及如何組織在一起讶迁，连茧，互相靠近的元素看起來屬于一組，而那些距離較遠的則自動劃分組外，距離近的關(guān)系緊密梅屉。來看下圖值纱，左圖中的圓在水平方向比垂直距離近鳞贷，那么坯汤，我們看到了4排圓點，而右圖則看成4列搀愧。

在 UI設(shè)計中內(nèi)容布局時惰聂，一定要重視鄰近性原則的運用，比如在下面這款輕芒閱讀APP 的主界面中咱筛，每一個應(yīng)用名稱都遠離其他圖標搓幌，與對應(yīng)的圖標距離較近，保持親密的關(guān)系迅箩，也讓用戶的瀏覽變得更直觀溉愁，如果應(yīng)用名稱與上下圖標距離相同，就分不出它是屬于上面還是下面饲趋，從而讓用戶產(chǎn)生錯亂的感覺拐揭。

再來看一個案例，日日煮APP奕塑，上面圖片與文字較近堂污，下面圖片與文字較遠，所以我們清晰的知道文字是屬于上面的圖片的龄砰。

三盟猖、內(nèi)容布局

在 APP 的設(shè)計中內(nèi)容的布局形式多種多樣，這里介紹最常用的兩種布局形式换棚，列表式布局和卡片式布局式镐。

1. 列表式布局

列表式布局方式非常普遍，隨便打開一個 APP固蚤，基本都存在這種布局方式碟案，其布局形式的特點在于能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動的手勢能獲得大量的信息反饋颇蜡。而列表也是一種非常容易理解的展示形式价说。

以我們最常用的微信和 QQ 為例，其「信息」頁面都是采用的列表式布局风秤，在采用這種布局形式的時候要注意列表舒適體驗的最小高度是80px鳖目，最大的高度要視內(nèi)容的多少而定。

繼續(xù)舉例缤弦，自如（列表高度110px）和唯品會（列表高度106px）的列表式布局领迈。

2. 卡片式布局

形式非常靈活。其特點在于，每張卡片的內(nèi)容和形式都可以相互獨立狸捅，互不干擾衷蜓，所以可以在同一個頁面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨立存在的尘喝，其信息量可以相對列表更加豐富磁浇。

在使用卡片式布局的時候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色朽褪，當然不同產(chǎn)品風格顏色可能不一樣置吓，有些是淺灰色偏藍等。

雙欄卡片的布局形式缔赠，比較常見于以圖片信息為主導(dǎo)的 App衍锚。例如一些商城的商品陳列頁面。這種形式與卡片式類似嗤堰，但它能在一屏里顯示更多的內(nèi)容戴质，至少4張卡片。同時踢匣，由于分開左右兩欄的顯示告匠，用戶可以更加方便地對比左右兩欄卡片的內(nèi)容。

四符糊、界面圖片設(shè)計比例

在 UI設(shè)計中凫海，對于圖片的尺寸和比例沒有嚴格的規(guī)范，設(shè)計師往往憑借經(jīng)驗和感覺設(shè)置一個看起來不錯的尺寸男娄，但事實上我們是有章可循的行贪。運用科學的手段設(shè)置圖片的尺寸，可以獲得最優(yōu)的方案模闲，常見的圖片尺寸有16:9建瘫、4:3、3:2尸折、1:1和1:0.618（黃金比例）等啰脚。

這些比例不無根據(jù)，它們都和圖片尺寸有關(guān)实夹。16:9 是根據(jù)人體工程學的研究橄浓，發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個長寬比例為16:9的長方形，4:3 是勾三股四弦五亮航，在攝影中非常常見……

五荸实、建立統(tǒng)一風格的圖標

在應(yīng)用界面的設(shè)計中，功能圖標不是單獨的個體缴淋，通常是由許多不同的圖標構(gòu)成整個系列准给，它們貫穿于整個產(chǎn)品應(yīng)用的所有頁面并向用戶傳遞信息泄朴。

一套 APP圖標應(yīng)該具有相同的風格，包括造型規(guī)則露氮、圓角大小祖灰，線框粗細，圖形樣式和個性細節(jié)等元素都應(yīng)該具有統(tǒng)一的規(guī)范畔规。

通過分析以上三組圖標可以得出：他們具有統(tǒng)一的色彩局扶，統(tǒng)一的圓角大小，統(tǒng)一的線框粗細油讯，那綜合起來也就是具有統(tǒng)一的風格详民，給用戶高度統(tǒng)一的視覺體驗延欠。

六陌兑、APP版式設(shè)計規(guī)范

版式設(shè)計又叫做版面編輯，即在有限的版面空間里由捎，將版面的構(gòu)成要素如文字兔综、圖片、控件等根據(jù)特定的內(nèi)容進行組合排列狞玛。一個優(yōu)秀的排版要考慮到用戶的閱讀習慣和設(shè)計美感软驰，在 UI設(shè)計中版面設(shè)計的原則有哪些呢？

1. 對齊

對齊是貫穿版式設(shè)計的最基礎(chǔ)心肪，最重要的原則之一锭亏，它能建立起一種整齊劃一的外觀，帶給用戶有序一致的瀏覽體驗硬鞍。

2. 對稱

對稱是宇宙間的設(shè)計哲學慧瘤，是對立統(tǒng)一規(guī)律的本質(zhì)屬性，呈現(xiàn)出一種和諧自然的美固该，在應(yīng)用界面的設(shè)計中锅减，引導(dǎo)頁設(shè)計、注冊登錄輸入框和按鈕等無一不是對稱的設(shè)計伐坏。

3. 分組

物以類聚怔匣，人以群分。分組是將同類別的信息組合在一起桦沉，直觀的呈現(xiàn)在用戶的面前每瞒，這樣的設(shè)計能夠減少用戶的認知負擔，在移動端界面的設(shè)計中最常見的分組方式就是卡片纯露，為用戶選擇提供專注而又明確的瀏覽體驗剿骨。

七、界面文字設(shè)計規(guī)范

文字是 APP 中最核心的元素苔埋，是產(chǎn)品傳達給用戶的主要內(nèi)容懦砂，所以說文字在 APP 的設(shè)計中是非常重要的，那么，文字的字體如何選擇荞膘，字號如何設(shè)定罚随，是否加粗，顏色如何設(shè)置羽资？

在一款 APP 中字號范圍一般在20-36之間（@2x）,當然 iOS 11中出現(xiàn)了大標題的設(shè)計淘菩，字號還是要根據(jù)產(chǎn)品屬性酌情設(shè)定。另外需要注意的一點是所有的字號設(shè)置都必須為偶數(shù)屠升，上下級內(nèi)容字號極差關(guān)系為2-4號潮改。

關(guān)于字體：在 iOS 9推出之前設(shè)計師普遍采用華文黑體、谷歌思源腹暖、冬青等字體進行設(shè)計汇在，iOS 9推出了蘋果自己的字體——蘋方！自此之后蘋方字體被廣泛應(yīng)用于移動端設(shè)計中脏答。

關(guān)于字體顏色和是否加粗：字體的顏色設(shè)置我們一般很少用純黑色糕殉，一般用深灰色和淺灰色、細體和粗體（注意要用字體本身的字重殖告，不能用 PS 的加粗功能）來區(qū)分重要信息和次要信息阿蝶，進行信息層級的劃分。

八黄绩、設(shè)計適配

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è)計設(shè)計中設(shè)計師需要設(shè)計一套基準設(shè)計圖來達到適配多個分辨率的目的，我們可以選擇中間尺寸750 x1134px作為基準习劫，向下適配640x1136px咆瘟，向上適配1242x2208px和750x1624px／1125x2436px。

1. 750×1334向下適配640×1136

由于750x1334px和640x1136px兩個尺寸的界面都是2倍的像素倍率诽里，因此它們的切片大小是相同的袒餐，即系統(tǒng)圖標、文字和高度都無需適配谤狡，需要適配的是寬度灸眼。

為了讓大家了解適配的原則，我們以文字描述和圖示的方式進行750x1334px到640x1136px的界面推導(dǎo)墓懂。

繪制一個750x1334px的設(shè)計圖焰宣，這是最常見的首頁設(shè)計圖，從上至下分別是狀態(tài)欄捕仔、導(dǎo)航欄匕积、首焦圖盈罐、主要入口、分割闪唆、列表盅粪。

下面開始進行適配，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率悄蕾，界面的圖標票顾、文字大小等都是相同的，所以我們不需要改變圖像大小帆调，只需將畫布大小改成640x1136px即可奠骄，然后再改變橫向元素的間距以達到適配的目的。

首先打開750x1334px的設(shè)計稿番刊，執(zhí)行 Command+Alt+C（改變畫布大小的快捷鍵）含鳞，鼠標左鍵單擊「定位」的左上角的格子，設(shè)置寬高為640和1136撵枢，點擊「確定」民晒。

改變畫布大小之后精居，設(shè)計稿的右邊和下邊都被裁切（上面左圖中半透明蒙版覆蓋區(qū)域）锄禽，畫布縮小成640x1136px。

上面左圖裁切到右圖適配完成靴姿，做了如下調(diào)整沃但。

導(dǎo)航欄右邊的圖標向左移動保持和原來的右邊距一致，標題居中佛吓。

首焦圖高度除以1.17（750／640=1.17得到）后居中宵晚，寬度640px。

主要入口右邊的圖標向左移動保持和原來的右邊距一致维雇，各圖標的間距等寬淤刃。

2. 750×1334向上適配1242×2208

由于750x1334px界面是2倍的像素倍率，而1242x2208px是3倍的像素倍率吱型，也就是說1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍逸贾，所以我們在進行適配的時候直接將界面的圖像大小變?yōu)樵瓉淼?.5倍，然后調(diào)整畫布大小為1242x2208px津滞，最后調(diào)整界面圖標和元素的橫向間距的大小完成適配铝侵。

上面說了整體思路，下面我們來說說具體怎么適配触徐。

首先對750x1334px的畫布執(zhí)行 Command+Alt+I 命令（調(diào)整圖像大羞湎省），單位設(shè)置為百分比撞鹉，寬高設(shè)置為150%疟丙，點擊「確定」颖侄，調(diào)整之后的畫布大小為1125x2001px。

緊接著對1.5倍之后的1125x2001px界面執(zhí)行 Command+Alt+C（調(diào)整畫布大邢斫肌）发皿，鼠標單擊「定位」左上角的格子，調(diào)整寬高為1242和2208px拂蝎，點擊「確定」穴墅。

上面左圖拓展畫布到右圖完成適配做了如下調(diào)整：

導(dǎo)航欄右邊的圖標向右移動保持和原來的右邊距一致，標題居中温自。

首焦圖的高度乘以1.65（1242/750=1.65得到）后居中玄货，寬度1242px。

主要入口右邊的圖標向右移動和原來的右邊距一致悼泌，各圖標的間距等寬松捉。

注：分割線仍是1px。

3. 750×1334向上適配1125x2436px（@3x）

與蘋果之前發(fā)布的 iOS設(shè)備相比馆里，iPhone X 的像素分辨率發(fā)生了變化隘世，為1125x2436px（@3x），在實際工作中為了方便向上和向下的適配鸠踪，我們?nèi)匀豢梢赃x擇熟悉的 iPhone 7（750x1334px）的尺寸作為模版進行設(shè)計丙者，只是高度增加了290px；設(shè)計尺寸為：750x1624px（@2x）营密。設(shè)計完成之后將設(shè)計稿的圖像大小拓展1.5倍即可得到1125x2436px（@3x）尺寸的設(shè)計稿械媒。

在適配的時候需要注意，狀態(tài)欄由之前的40px增加到88px评汰，標簽底部預(yù)留68px用于放置主頁指示器纷捞，如下圖所示。

關(guān)于主頁指示器的適配涉及到兩種情況：底部出現(xiàn)標簽欄被去、工具欄等操作設(shè)計時主儡，需要將底色下延68px并填充原有顏色，這樣的處理可以讓底部設(shè)計更佳簡潔舒適惨缆，沒有功能操作時糜值，頁面底部不需要填充顏色，只需蓋住主頁指示器即可踪央。

對于大多數(shù)采用瀑布流的頁面來說臀玄，僅僅是屏幕高度上的變化，可以無視畅蹂。但對于如：新手引導(dǎo)頁健无、音樂播放器等需要單屏顯示的界面就需要重新布局。

九液斜、切圖規(guī)范

當界面設(shè)計定稿之后累贤，設(shè)計師需要對圖標進行切片提供給開發(fā)工程師叠穆，通常我們只需要對 icon 進行切圖即可，文字臼膏、線條和一些標準的幾何形狀是不需要切圖的硼被，例如搜索框只需要在標注中描述它的尺寸、圓角大小渗磅、背景色值嚷硫、不透明度即可，開發(fā)工程師可以用代碼實現(xiàn)這種效果始鱼。

參考文章：https://www.uisdc.com/mobile-ui-design-specifications