很多新人在開始做移動端UI設計的時候，往往對界面的一些尺寸規(guī)范不是十分清楚，很多時候都是憑借自己的感覺和經驗去繪制界面，心里并沒有一個清晰的概念，導致做出來的頁面總是不那么盡如人意。本文整理匯總了一些界面設計(iOS系統(tǒng))中常用的一些尺寸規(guī)范和方法，如控件間距、適配、標注、切圖等，設計師在設計時并不一定要嚴格遵守，但對這些規(guī)范應有所了解，并融會貫通。

目錄

• 界面設計尺寸及欄高度
• 邊距和間距
• 內容布局
• 界面圖片設計比例
• 建立統(tǒng)一風格的圖標
• APP版式設計規(guī)范
• 界面文字設計規(guī)范
• 設計適配
• 切圖規(guī)范
• 設計稿標注

一、界面設計尺寸及欄高度

目前主流的 iOS 設備主要有 iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸)，它們都采用了 Retina 視網膜屏幕，其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，無論是欄高度還是應用圖標，設計師提供給開發(fā)人員的切片大小，前者始終是后者的1.5倍，并分別以@3x和@2x在文件名結尾命名，程序再根據不同分辨率自動加載@3x或者@2x的切片。 

通過上面的講解和圖示我們了解了 iPhone 不同設備的物理尺寸，那么他們的像素分辨率又是多少呢?也就是說我們用 Photoshop 做設計新建畫布應該設置多大呢?另外，iOS應用中的欄，包括狀態(tài)欄、導航欄、標簽欄、工具欄等，它們的高度又分別是多少呢?(注意：iOS 嚴格規(guī)定了各個欄的高度，這個是必須遵守的)通過下面的表格和圖示來為你解答上面的問題。 

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

二、邊距和間距

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

1. 全局邊距

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

在實際應用中應該根據不同的產品氣質采用不同的邊距，讓邊距成為界面的一種設計語言，常用的全局邊距有32px、30px、24px、20px等等，當然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的，而且有一個特點就是數值全是偶數。

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

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

通常左右邊距最小為20px，這樣的距離可以展示更多的內容，不建議比20還小，否則就會使界面內容過于擁擠，給用戶的瀏覽帶來視覺負擔。30px是非常舒服的距離，是絕大多數應用的***邊距。

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

2. 卡片間距

在移動端頁面設計中卡片式布局是非常常見的布局方式，至于卡片和卡片之間的距離的設置需要根據界面的風格以及卡片承載信息的多少來界定，通常最小不低于16px，過小的間距會造成用戶的緊張情緒，使用最多的間距是20px、24px、30px、40px，當然間距也不宜過大，過大的間距會使界面變得松散，間距的顏色設置可以與分割線一致，也可以更淺一些。

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

下面來看一下微信的卡片間距設置的是多少，以及顏色值。 

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

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

總結：卡片間距的設置是靈活多變的，一定要根據產品的氣質和實際需求去設置，平時也可以多截圖測量一下各類 APP 的卡片間距都是怎么設置的，看的多了并融會貫通，卡片間距設置自然會更加合理，更加得心應手。

3. 內容間距

一款 APP 除了各種欄(狀態(tài)欄、導航欄、標簽欄、工具欄)和控件 icon 就是內容了，內容的布局形式多種多樣，這里不去探討內容具體應該如何去布局，我們來說一說內容的間距設置問題。

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

在 UI設計中內容布局時，一定要重視鄰近性原則的運用，比如在下面這款輕芒閱讀APP 的主界面中，每一個應用名稱都遠離其他圖標，與對應的圖標距離較近，保持親密的關系，也讓用戶的瀏覽變得更直觀，如果應用名稱與上下圖標距離相同，就分不出它是屬于上面還是下面，從而讓用戶產生錯亂的感覺。 

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

三、內容布局

在 APP 的設計中內容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

1. 列表式布局

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

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

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

2. 卡片式布局

形式非常靈活。其特點在于，每張卡片的內容和形式都可以相互獨立，互不干擾，所以可以在同一個頁面中出現不同的卡片承載不同的內容。而由于每張卡片都是獨立存在的，其信息量可以相對列表更加豐富。

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

雙欄卡片的布局形式，比較常見于以圖片信息為主導的 App。例如一些商城的商品陳列頁面。這種形式與卡片式類似，但它能在一屏里顯示更多的內容，至少4張卡片。同時，由于分開左右兩欄的顯示，用戶可以更加方便地對比左右兩欄卡片的內容。 

四、界面圖片設計比例

在 UI設計中，對于圖片的尺寸和比例沒有嚴格的規(guī)范，設計師往往憑借經驗和感覺設置一個看起來不錯的尺寸，但事實上我們是有章可循的。運用科學的手段設置圖片的尺寸，可以獲得***的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618(黃金比例)等。

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

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

在應用界面的設計中，功能圖標不是單獨的個體，通常是由許多不同的圖標構成整個系列，它們貫穿于整個產品應用的所有頁面并向用戶傳遞信息。

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

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

六、APP版式設計規(guī)范

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

1. 對齊

對齊是貫穿版式設計的最基礎，最重要的原則之一，它能建立起一種整齊劃一的外觀，帶給用戶有序一致的瀏覽體驗。 

2. 對稱

對稱是宇宙間的設計哲學，是對立統(tǒng)一規(guī)律的本質屬性，呈現出一種和諧自然的美，在應用界面的設計中，引導頁設計、注冊登錄輸入框和按鈕等無一不是對稱的設計。 

3. 分組

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

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

文字是 APP 中最核心的元素，是產品傳達給用戶的主要內容，所以說文字在 APP 的設計中是非常重要的，那么，文字的字體如何選擇，字號如何設定，是否加粗，顏色如何設置?

在一款 APP 中字號范圍一般在20-36之間(@2x),當然 iOS 11中出現了大標題的設計，字號還是要根據產品屬性酌情設定。另外需要注意的一點是所有的字號設置都必須為偶數，上下級內容字號極差關系為2-4號。 

關于字體：在 iOS 9推出之前設計師普遍采用華文黑體、谷歌思源、冬青等字體進行設計，iOS 9推出了蘋果自己的字體——蘋方!自此之后蘋方字體被廣泛應用于移動端設計中。

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

八、設計適配

iOS 主流設備的分辨率分別是640x1136px(@2x)(iPhone SE)、750 x1134px(@2x)(iPhone6s/7/8)、1242x2208px(@3x)(iPhone 6s/7/8 Plus)、1125x2436px(@3x)/750x1624px(@2x)(iPhone X)。

在設計設計中設計師需要設計一套基準設計圖來達到適配多個分辨率的目的，我們可以選擇中間尺寸750 x1134px作為基準，向下適配640x1136px，向上適配1242x2208px和750x1624px/1125x2436px。 

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

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

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

繪制一個750x1334px的設計圖，這是最常見的首頁設計圖，從上至下分別是狀態(tài)欄、導航欄、首焦圖、主要入口、分割、列表。

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

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

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

上面左圖裁切到右圖適配完成，做了如下調整。

導航欄右邊的圖標向左移動保持和原來的右邊距一致，標題居中。

首焦圖高度除以1.17(750/640=1.17得到)后居中，寬度640px。

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

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

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

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

首先對750x1334px的畫布執(zhí)行 Command+Alt+I 命令(調整圖像大小)，單位設置為百分比，寬高設置為150%，點擊「確定」，調整之后的畫布大小為1125x2001px。 

緊接著對1.5倍之后的1125x2001px界面執(zhí)行 Command+Alt+C(調整畫布大小)，鼠標單擊「定位」左上角的格子，調整寬高為1242和2208px，點擊「確定」。 

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

• 導航欄右邊的圖標向右移動保持和原來的右邊距一致，標題居中。
• 首焦圖的高度乘以1.65(1242/750=1.65得到)后居中，寬度1242px。
• 主要入口右邊的圖標向右移動和原來的右邊距一致，各圖標的間距等寬。

注：分割線仍是1px。

3. 750×1334向上適配1125x2436px(@3x)

與蘋果之前發(fā)布的 iOS設備相比，iPhone X 的像素分辨率發(fā)生了變化，為1125x2436px(@3x)，在實際工作中為了方便向上和向下的適配，我們仍然可以選擇熟悉的 iPhone 7(750x1334px)的尺寸作為模版進行設計，只是高度增加了290px;設計尺寸為：750x1624px(@2x)。設計完成之后將設計稿的圖像大小拓展1.5倍即可得到1125x2436px(@3x)尺寸的設計稿。

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

關于主頁指示器的適配涉及到兩種情況：底部出現標簽欄、工具欄等操作設計時，需要將底色下延68px并填充原有顏色，這樣的處理可以讓底部設計更佳簡潔舒適，沒有功能操作時，頁面底部不需要填充顏色，只需蓋住主頁指示器即可。 

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

九、切圖規(guī)范

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

1. 輸出切片

先將設計稿中的圖標重新排列在一張新的畫布中，保證同樣尺寸的圖標間距相同，這樣做的好處是為圖標建立一個控件庫，有利于圖標的整理。

給每一個圖標建立好參考線之后，用 PS 自帶的切片功能，沿著建立好的每個圖標的參考線畫框即可，注意***要輸出 PNG 格式的切片(PNG 格式擁有更多的顏色和細節(jié)并且支持透明)。

在具體操作時首先要將畫布背景色去掉，讓畫布變成透明，做好切片后執(zhí)行文件-存儲為 Web 所用格式，在對話框中選擇 PNG 格式，點擊「存儲」即可。 

注：圖中標簽欄圖標的底色塊是為了保證統(tǒng)一的切片尺寸，可以根據色塊建立參考線，具體切圖時要將色塊去掉。

2. 切片命名

切片命名的通用規(guī)范是，界面_功能_狀態(tài).png。名稱應使用英文命名，不要使用數字或者符號作為開頭，使用下劃線進行連接，例如一個首頁處于正常狀態(tài)下的按鈕命名是 home_btn_nor@2x.png。其中界面首頁是 home、空間按鈕是 btn、狀態(tài)正常是 normal。為了命名的正確性，設計師需要先和合作的開發(fā)工程師進行溝通確認。

十、設計稿標注

當界面設計定稿之后，設計師需要對界面進行標注給開發(fā)工程師在還原界面時進行參考。借助一些專業(yè)的標注工具有利于我們提高工作效率，常用的標注工具有 Mark Man 或 PX Cook。

在一份設計稿中需要標注的內容是文字的字號大小、粗細、顏色、不透明度;界面的背景顏色、不透明度;各個圖標、列表、文字之間的間距。 

界面標注的作用是給開發(fā)工程師提供參考，因此在標注之前需要和開發(fā)工程師進行溝通，了解他們的工作方式，標注完成之后宣講你的注意事項，以更快捷高效的完成工作，并且***限度的完成視覺高的還原。

總結

本文整理匯總了包括界面尺寸、控件間距、版式設計規(guī)范、文字設計規(guī)范、設計適配、標注、切圖等等一系列的移動端UI設計規(guī)范，在此期間查閱了大量的資料，共耗時一周完成本文的編寫，希望為剛剛從事 UI設計的設計師們提供入門級別的幫助。

至于為什么只總結了 iOS系統(tǒng)設計規(guī)范，而沒有 Android系統(tǒng)的設計規(guī)范，在這里說明一下，本來安卓系統(tǒng)設計規(guī)范也是要涵蓋的，但通過查閱資料發(fā)現安卓設計規(guī)范介紹少之又少，并且標準不統(tǒng)一，借鑒意義不大，所以省略了這部分規(guī)范的編寫。