ui設(shè)計(jì)現(xiàn)在app常用的設(shè)計(jì)尺寸是多少？

時(shí)間：2024-02-14 22:20:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-14 22:20:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

ui設(shè)計(jì)現(xiàn)在app常用的設(shè)計(jì)尺寸是多少？：很多新人在開(kāi)始做移動(dòng)端UI設(shè)計(jì)的時(shí)候，確實(shí)往往對(duì)界面的一些尺寸規(guī)范不是十分清楚，很多時(shí)候都是憑借自己的感覺(jué)和經(jīng)驗(yàn)去繪制界面，心里并沒(méi)有一個(gè)清晰的概念，導(dǎo)致做出來(lái)的頁(yè)面總是不那么盡如人意。所以我就想著干脆整理一篇詳細(xì)的吧～

本文主要整理匯總了一些界面設(shè)計(jì)（iOS系統(tǒng)）中常用的一些尺寸規(guī)范和方法，如控件間距、適配、標(biāo)注、切圖等，設(shè)計(jì)師在設(shè)計(jì)時(shí)并不一定要嚴(yán)格遵守，但對(duì)這些規(guī)范應(yīng)有所了解，并融會(huì)貫通。

目錄

• 1. 了解iphone
• 2. 邏輯像素
• 3. PPI
• 4. 界面設(shè)計(jì)尺寸及欄高度
• 5. 邊距和間距
• 6. 布局
• 7. 圖片比例
• 8. 設(shè)計(jì)方式
• 9. 狀態(tài)欄和導(dǎo)航欄
• 10. 大標(biāo)題導(dǎo)航欄
• 11. 導(dǎo)航欄圖標(biāo)
• 12. 標(biāo)簽欄
• 13. 工具欄
• 14. 閃屏資源
• 15. 安全距離
• 16. 色彩
• 17. 字體
• 18. 啟動(dòng)圖標(biāo)
• 19. 控件
• 20. 標(biāo)注

一、了解iphone

每次蘋(píng)果發(fā)布會(huì)UI設(shè)計(jì)師可能是最睡不著覺(jué)的人。 每次發(fā)布會(huì)蘋(píng)果推出全新 iPhone 時(shí)，我們?cè)?iPhone 平臺(tái)上的 APP應(yīng)用程序必須跟隨 iPhone 的尺寸、規(guī)范等特性調(diào)整設(shè)計(jì)稿。也就是說(shuō)，幾乎每次蘋(píng)果發(fā)布會(huì)都是UI設(shè)計(jì)師加班的通知書(shū)！作為一個(gè)移動(dòng)端 UI設(shè)計(jì)師或者剛要進(jìn)入U(xiǎn)I這個(gè)行業(yè)，您必須對(duì)蘋(píng)果所有生產(chǎn)過(guò)和現(xiàn)役的 iPhone 有所了解。

初代iPhone：iPhone（一代）、iPhone3G（二代）、iPhone3GS（三代） iPhone 初代產(chǎn)品在2007年1月9日由史蒂夫·喬布斯在蘋(píng)果發(fā)布會(huì)上正式發(fā)布。初代的 iPhone 產(chǎn)品的共同特點(diǎn)是：玻璃屏、屏幕清晰度普通、3.5英寸屏。i為了讓大眾習(xí)慣直接在手機(jī)上點(diǎn)圖標(biāo)（在此之前人機(jī)互動(dòng)都是間接輸入的：比如實(shí)體鍵盤(pán)、鼠標(biāo)、觸控筆等），喬布斯發(fā)布了革命性的操作系統(tǒng)iOS，手機(jī)的所有圖標(biāo)都是圓角：這樣可以避免用戶認(rèn)為會(huì)刺到手指。所有圖標(biāo)和界面全部是擬物設(shè)計(jì)，這樣可以更好地讓用戶理解哪些是可以點(diǎn)擊操作的。按鈕在手機(jī)上呈現(xiàn)的大小都是7mm左右，這是因?yàn)槿祟?lèi)手指點(diǎn)擊區(qū)域大概是7mm – 9mm。系統(tǒng)充分地應(yīng)用了多點(diǎn)觸控的功能，你不僅僅可以點(diǎn)手機(jī)里的按鈕，還可以進(jìn)行長(zhǎng)按、滑動(dòng)、捏等手勢(shì)操作。這些用戶體驗(yàn)和人性化的設(shè)計(jì)在當(dāng)時(shí)具有劃時(shí)代的意義。隨后，第二代產(chǎn)品 iPhone 3G、第三代產(chǎn)品 iPhone3GS 先后由喬布斯發(fā)布。這塊3.5英寸屏的手機(jī)截圖出來(lái)后的實(shí)際分辨率是480x320px，所以如果你在當(dāng)時(shí)做 UI設(shè)計(jì)的話，那么做 APP界面建圖的尺寸就應(yīng)該是480x320px。

iPhone 4相關(guān)產(chǎn)品：iPhone 4（四代）、iPhone 4s（五代） iPhone 4于2010年6月8日發(fā)布。iPhone 4延續(xù)了 iPhone一代的多點(diǎn)觸摸（Multi-touch）屏界面，并首次加入視網(wǎng)膜屏幕、前置攝像頭、陀螺儀、后置閃光燈，相機(jī)像素提高至500萬(wàn)。對(duì)我們?cè)O(shè)計(jì)師最重要的就是加上了視網(wǎng)膜屏Retina。Retina 是蘋(píng)果提出的標(biāo)準(zhǔn)，它的含義就是在應(yīng)用場(chǎng)景的視距內(nèi)讓人無(wú)法看清單個(gè)像素。我們都知道如果你貼的夠近，一般的屏幕上都會(huì)出現(xiàn)一格一格的像素矩陣。屏幕是由這些矩陣組成的。這種屏幕的問(wèn)題就是稍微近一些我們就能看到那些網(wǎng)格和矩陣。如果我們希望用戶得到最好的體驗(yàn)，自然是讓用戶看不到格子，那怎么辦？答案就是：加大屏幕的密度。如果屏幕的密度到達(dá)一個(gè)指定的水平（當(dāng)然也要取決于用戶的視距，即用戶與屏幕通常離多遠(yuǎn)），那么用戶的眼睛就無(wú)法分辨出細(xì)小的像素顆粒了。這種屏幕就被稱為 Retina屏，也叫視網(wǎng)膜屏。這是用戶體驗(yàn)的巨大進(jìn)步，但是也是UI設(shè)計(jì)師的噩夢(mèng)。原先的設(shè)計(jì)稿統(tǒng)統(tǒng)需要放大才可以在 iPhone4 里顯示得完美：比如原來(lái)我們一個(gè)界面的尺寸是480x320px，現(xiàn)在因?yàn)槠聊幻芏仍黾恿艘槐?，我們就需要設(shè)計(jì)640x960px才夠用。而且3GS并沒(méi)有完全被淘汰，那么如何讓一個(gè) APP 適配兩個(gè)不同尺寸的手機(jī)呢？于是每個(gè) APP 內(nèi)預(yù)裝了兩套切圖，一套480x320px尺寸，也就是一倍圖（@1x）；一套960x640px尺寸，也就是二倍圖（@2x）。這兩套圖像資源的命名完全一樣，只是二倍圖結(jié)尾需要加上@2x標(biāo)記它是高清尺寸，比如 home_icon@2x.png。

iPhone 5：iPhone 5（六代）、iPhone 5s和iPhone 5c（七代） iPhone 5于2012年9月13日正式發(fā)布。iPhone5在設(shè)計(jì)上帶來(lái)了很多爭(zhēng)議，因?yàn)?iPhone5沒(méi)有采用喬布斯認(rèn)為人類(lèi)最合適的手機(jī)尺寸3.5英寸屏，而是用了4英寸的屏幕。寬度沒(méi)變而高度加長(zhǎng)了。這樣做的原因是市場(chǎng)上越大的手機(jī)越受歡迎。當(dāng)時(shí)設(shè)計(jì)師也幾近崩潰，因?yàn)橛忠氵m配了。原來(lái)960x640px的尺寸變?yōu)榱?136x640px，但是這個(gè)變化其實(shí)不大，就是高了點(diǎn)兒。于是@2x高清圖的設(shè)計(jì)稿就變成了640x1136px。因?yàn)?iPhone4的手機(jī)看著也就是長(zhǎng)了點(diǎn)兒，滑動(dòng)就好了。除了閃屏這樣的界面需要單獨(dú)做 iPhone4、iPhone5、3GS尺寸之外，其他界面仍然維持兩套設(shè)計(jì)稿即可。

iPhone 6/7/8 和iPhone Plus 從iPhone6到iPhone8這段時(shí)間蘋(píng)果新手機(jī)的物理像素都是750x1334px。而所有Plus手機(jī)的物理像素都是1242x2208px。如果按照邏輯像素來(lái)計(jì)算，那么iPhone6/7/8的邏輯像素就是375 x 667 pt（就是750x1334除以2）；而iPhone Plus的邏輯像素就是414 x 736 pt（就是1242x2208除以3，因?yàn)檫@個(gè)屏幕太大了視距不同所以屏幕密度更高）。歷史到這個(gè)時(shí)候，原來(lái)的手機(jī)全部被淘汰了。也就是說(shuō)iPhone6/7/8成為了我們的設(shè)計(jì)標(biāo)準(zhǔn)，它的切圖就是@2x，iPhone Plus（1242x2208）使用@3x。從此沒(méi)有@1x倍圖了，只存在一個(gè)假想的概念。

iPhone X：iPhone X（十一代） 蘋(píng)果采用方案「齊劉?！?，把四周處理成圓角的方式。IPhone X 和后續(xù)三款全面屏我們?cè)O(shè)計(jì)師需要注意的就是齊劉海。因?yàn)樾枰?guī)避攝像頭和麥克風(fēng)聽(tīng)筒，所以狀態(tài)欄比其他 iPhone 系列產(chǎn)品要高；而底部Tab欄因?yàn)樽钕路接袌A角同樣比其他 iPhone 系列要高。而且這兩個(gè)邊界是不應(yīng)該放置任何操作功能的。也就是說(shuō)只有看的份兒。 iPhone X 的物理像素是1125 x 2436 px，而邏輯像素是375 x 812 pt。也就是說(shuō)如果你使用 Sketch 或者 Adobe XD 等工具設(shè)計(jì)界面的話，iPhone X 的寬度和iPhone 6/7/8是相同的；只是高了一些。那么如果需要出一套 iPhone X 效果圖只需要把頭和尾巴替換成新版即可。

iPhone XS Max：iPhone XS、iPhone XS Max、iPhone XR（十二代） 這三款產(chǎn)品的像素分辨率聽(tīng)上去會(huì)比較眼暈： iPhone XS Max：1242 x 2688 px iPhone XS：1125 x 2436 px iPhone XR：828 x 1792 px 但是如果我們用點(diǎn)的單位看就會(huì)得到： iPhone XS Max：414 x 896 pt （iPhone Plus分辨率寬度） iPhone XS：375×812 pt （iPhone 6/7/8分辨率寬度） iPhone XR：414 x 896 pt （iPhone Plus分辨率寬度） 所以此次的 iPhone 都是比較友好的，如果使用矢量界面工具那么只需要調(diào)整設(shè)計(jì)稿頭和尾巴即可，而切圖其實(shí)和之前沒(méi)有變化，不管用什么工具設(shè)計(jì)還是得出兩套切圖：@2x（750x1334px）、@3x（1242x2208px）即可。

二、 像素

邏輯像素（logic point）：邏輯像素的單位是 PT，它是按照內(nèi)容的尺寸計(jì)算的單位。比如 iPhone 4的邏輯像素是480x320pt。但是由于每個(gè)邏輯的點(diǎn)因?yàn)橐暰W(wǎng)膜屏密度增加了一倍，即1pt=2px，那么其實(shí) iPhone 4的物理像素是960x640px。iOS 開(kāi)發(fā)工程師和使用 Sketch 和 AdobeXD 軟件設(shè)計(jì)界面的設(shè)計(jì)師使用的單位都是PT。 物理像素的單位就是我們常說(shuō)的 pixel，簡(jiǎn)寫(xiě)成 PX。它是我們?cè)?Photoshop 和切圖中使用的單位，屏幕設(shè)計(jì)中最小的單位就是1px不可再分割。使用 Photoshop 設(shè)計(jì)移動(dòng)端界面和網(wǎng)站的設(shè)計(jì)師使用的單位是 PX。如果您使用Photoshop 設(shè)計(jì)界面，那么只需要記住所有 px 單位的數(shù)值和支持 Photoshop 的工具，如果使用 Sketch 或 Adobe XD 設(shè)計(jì)界面，那么只需要記住所有 pt 單位的數(shù)值和對(duì)應(yīng)的工具即可。

三、 PPI

PPI（pixels per inch）指的是屏幕分辨率的單位，表示的是每英寸顯示的像素密度。屏幕的 PPI 值越高，那么這個(gè)屏幕每英寸能容納的像素顆粒也就越多，那這個(gè)產(chǎn)品的畫(huà)面的細(xì)節(jié)度也就越豐富。PPI 值大于300一般我們就無(wú)法用肉眼察覺(jué)出屏幕上的「馬賽克」格子了。但是如果屏幕很大，那么需要呈現(xiàn)視網(wǎng)膜屏的 PPI 值也需要更大，所以 iPhone Plus 系列的 PPI 值比 iPhone6/7/8要大。PPI 在我們?cè)O(shè)計(jì)的工作中其實(shí)關(guān)系不大，但理解它對(duì)于幫助我們理解為什么 iPhone4比 iPhone3GS實(shí)際像素大一倍有幫助。

四、界面設(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ì)師提供給開(kāi)發(fā)人員的切片大小，前者始終是后者的1.5倍，并分別以@3x和@2x在文件名結(jié)尾命名，程序再根據(jù)不同分辨率自動(dòng)加載@3x或者@2x的切片。


通過(guò)前面的講解和圖示我們了解到 iPhone 不同設(shè)備的物理尺寸，那么他們的像素分辨率又是多少呢？也就是說(shuō)我們用 Photoshop 做設(shè)計(jì)新建畫(huà)布應(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è)面整體視覺(jué)效果的統(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ù)。

2. 卡片間距

在移動(dòng)端頁(yè)面設(shè)計(jì)中卡片式布局是非常常見(jiàn)的布局方式，至于卡片和卡片之間的距離的設(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ì)讓瀏覽變得不連貫和界面視覺(jué)松散，因此采用了較小的16px作為卡片的間距。

3、內(nèi)容間距

一款A(yù)PP除了各種欄（狀態(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ò)亂的感覺(jué)。

六、布局

1、列表式布局

以我們最常用的微信和 QQ 為例，其「信息」頁(yè)面都是采用的列表式布局，在采用這種布局形式的時(shí)候要注意列表舒適體驗(yàn)的最小高度是80px。而自如app和唯品會(huì)app信息列表分別為110px和106px。


2、卡片式布局

其特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣，有些是淺灰色偏藍(lán)等。 雙欄卡片的布局形式，比較常見(jiàn)于以圖片信息為主導(dǎo)的 App。例如一些商城的商品陳列頁(yè)面。這種形式與卡片式類(lèi)似，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片。同時(shí)，由于分開(kāi)左右兩欄的顯示，用戶可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容。

七、圖片比例

界面圖片比例 對(duì)于圖片的尺寸和比例沒(méi)有嚴(yán)格的規(guī)范，設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺(jué)設(shè)置一個(gè)看起來(lái)不錯(cuò)的尺寸，但事實(shí)上我們是有章可循的。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸，可以獲得最優(yōu)的方案，常見(jiàn)的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。

八、設(shè)計(jì)方式

在 iPhone6/7/8存量仍然很大的情況下，我們做設(shè)計(jì)稿仍然需要以 iPhone6/7/8為尺寸來(lái)建圖。從蘋(píng)果官網(wǎng)下載好 UIKit，上面有我們需要的一切元素。這些元素有 PSD、Sketch 以及 XD版本，不管用什么設(shè)計(jì)軟件均可找到對(duì)應(yīng)版本。打開(kāi)之后你會(huì)發(fā)現(xiàn)蘋(píng)果已經(jīng)將我們所需要的規(guī)范元素準(zhǔn)備好了。如果你需要一些彈窗或者控件，那么就在 UI Elements 里找。如果需要界面的尺寸模板，就在 Design Templates 找。所有文件都有兩份，結(jié)尾帶有iPhoneX 的是為 iPhone X系列設(shè)計(jì)的模板。沒(méi)有標(biāo)識(shí)的是為 iPhone6/7/8設(shè)計(jì)的模板。

九、狀態(tài)欄和導(dǎo)航欄

狀態(tài)欄（Status Bars）就是 iPhone 最上方用來(lái)顯示時(shí)間、運(yùn)營(yíng)商信息、電池電量的那個(gè)很窄的區(qū)域。

導(dǎo)航欄（Navigation Bars）就是狀態(tài)欄之下的區(qū)域，一般來(lái)說(shuō)導(dǎo)航欄中間是頁(yè)面標(biāo)題，左右是放置功能圖標(biāo)的區(qū)域。

在 iPhone6/7/8設(shè)計(jì)中，狀態(tài)欄的高度為20pt（40px）。導(dǎo)航欄的高度是44pt（88px）。這兩個(gè)區(qū)域在 iOS7代之后就進(jìn)行了一體化設(shè)計(jì)。所以它們加起來(lái)的高度是64pt（128px）。

在 iPhoneX 設(shè)計(jì)中，狀態(tài)欄的高度為44pt（132px）。導(dǎo)航欄的高度也是44pt（132px）。這兩個(gè)區(qū)域同樣要進(jìn)行一體化設(shè)計(jì)。所以它們加起來(lái)的高度是84pt（264px）。

這里注意一下，因?yàn)?iPhone X 的 PPI值為458，所以并不是如 iPhone6/7/8一樣1pt=2px換算。

十、大標(biāo)題導(dǎo)航爛

在最新的蘋(píng)果設(shè)計(jì)中導(dǎo)航出現(xiàn)了一種新形式：大標(biāo)題。出現(xiàn)這種形式就是為了減少視覺(jué)噪音，讓內(nèi)容更加突出。很明顯大標(biāo)題的設(shè)計(jì)很像報(bào)紙的版式設(shè)計(jì)，在第一眼我們就會(huì)明白頁(yè)面的主題。大標(biāo)題導(dǎo)航欄的高度一般為116pt（232px）：這包括了20pt（40px）狀態(tài)欄的高度，同時(shí)也能放得下34pt（68px）的大標(biāo)題和輔助信息（如返回等圖標(biāo)）。但是注意一下，大標(biāo)題并不應(yīng)該像傳統(tǒng)導(dǎo)航一樣常駐在頁(yè)面之上，因?yàn)樗伎臻g了。所以在滑動(dòng)頁(yè)面時(shí)大標(biāo)題會(huì)變成正常導(dǎo)航欄的64pt（128px）的高度。當(dāng)然如果設(shè)計(jì)稿為 iPhone X 那么數(shù)值需要另外換算。

十一、導(dǎo)航欄圖標(biāo)

圖標(biāo)作為文字的補(bǔ)充，在移動(dòng)端中應(yīng)用非常廣泛。在導(dǎo)航欄區(qū)域上的功能諸如搜索、添加、更多、返回等均需要用圖標(biāo)來(lái)表達(dá)。說(shuō)明：@2x和@3x在邏輯像素單位是一樣的，如果您使用如 Sketch、Adobe XD 等矢量工具設(shè)計(jì)，可以參照邏輯像素?cái)?shù)值設(shè)計(jì)即可。但是如果您用 Photoshop 工具以 iPhone6/7/8尺寸進(jìn)行設(shè)計(jì)，就需按照@2x下的 px 單位數(shù)值設(shè)計(jì)。

十二、標(biāo)簽欄

Tab 就是點(diǎn)擊的意思，Tab欄（也叫標(biāo)簽欄）指的是 APP 底部的區(qū)域，如微信底部常駐有聊天、通訊錄、發(fā)現(xiàn)、我的四個(gè)圖標(biāo)。iOS 規(guī)范中 Tab欄一般有五個(gè)、四個(gè)、三個(gè)圖標(biāo)的形式。也就是把寬度平分為五、四、三份。

iPhone6/7/8設(shè)計(jì)中，標(biāo)簽欄的高度為49pt（98px）。Tab欄的操作是最常用的，因?yàn)槭种缸罘奖泓c(diǎn)擊而且這個(gè)欄是常駐在頁(yè)面之上的。所以 Tab欄的圖標(biāo)至關(guān)重要，因?yàn)楹芏嘤脩艨赡芤驗(yàn)榭床欢畧D標(biāo)而找不到重要功能的入口，通常我們會(huì)在 Tab欄圖標(biāo)之下加上10pt（20px）的注釋文字，這個(gè)注釋文字一般來(lái)說(shuō)都是非常淺的淺灰色。

標(biāo)簽欄圖標(biāo) 我們?cè)跇?biāo)簽欄上的圖標(biāo)一般來(lái)說(shuō)30pt（60px）大小左右，蘋(píng)果給出了四種不同形狀標(biāo)簽欄圖標(biāo)的尺寸參考供大家設(shè)計(jì)時(shí)參考。其意義是讓不同外形的圖標(biāo)看上去是差不多大的，保證圖標(biāo)的平衡。標(biāo)簽欄圖標(biāo)的選中態(tài)應(yīng)該是一個(gè)彩色，來(lái)區(qū)別于非選中狀態(tài)。

十三、工具欄

我們?cè)谔O(píng)果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當(dāng)前任務(wù)相關(guān)的操作和按鈕，在滑動(dòng)時(shí)可以收起。工具欄同 Tab欄一樣都是位于底部，但是高度略窄，它的高度是44pt（88px）。

十四、閃屏資源

由于閃屏是一張完整的靜態(tài)滿屏圖片，而不是諸如其他頁(yè)面一樣是由切圖和文本拼成的，所以閃屏的適配更簡(jiǎn)單粗暴：我們需要提供不同尺寸的閃屏效果。閃屏資源就是滿尺寸的一張 png，上端不需要狀態(tài)欄里的信息，程序會(huì)在開(kāi)發(fā)完畢時(shí)自動(dòng)在閃屏中補(bǔ)上狀態(tài)欄里的信息。

十五、安全距離

作為 iPhone 全面屏系列手機(jī)，齊劉海無(wú)疑是一個(gè)特征。但是全面屏給我們帶來(lái)了使用上的問(wèn)題：上下左右是圓角、頂部齊劉海使屏幕凹下一塊。所以在帶有圓角和齊劉海的紅色標(biāo)注區(qū)域不應(yīng)該放置任何功能，僅可在上端放置狀態(tài)欄，底部圓角區(qū)域留白。我們界面豎屏使用時(shí)左右臨近手機(jī)邊緣的區(qū)域不建議放任何操作，應(yīng)留出一定的邊距（Margin）。這個(gè)邊距是多少呢？沒(méi)有明確嚴(yán)格的規(guī)定，但是一般的 APP 會(huì)留出8pt-24pt不等的邊距防止用戶在屏幕邊緣不好點(diǎn)擊。不過(guò)內(nèi)容展現(xiàn)卻可以呈現(xiàn)在邊距里。如果我們橫屏使用手機(jī)時(shí)，左右同樣不好點(diǎn)對(duì)吧？橫屏同時(shí)還有令人鬧心的「齊劉海」，所以同樣左右需留出一定的邊距來(lái)。所以我們就得到一個(gè)安全距離的矩形，內(nèi)容可以完整地呈現(xiàn)在這個(gè)安全距離內(nèi)。

十六、色彩

其實(shí)在 iPhone 上顯示的色域要比我們作圖時(shí)的 RGB 色域要廣。所以在 iPhone 上設(shè)計(jì)怎樣的顏色都可以。只要符合產(chǎn)品氣質(zhì)并且在色彩心理學(xué)理論上思考，用什么顏色是設(shè)計(jì)師的自由。官方建議的系統(tǒng)色彩如下：

十七、字體

iOS 中英文使用的是 San Francisco（SF）字體。（下載地址：https://developer.apple.com/fonts），中文使用的是蘋(píng)方黑體。安裝好以后你會(huì)發(fā)現(xiàn)中文蘋(píng)方的字族有不少可供選擇的粗細(xì)，那么我們?cè)O(shè)計(jì)界面時(shí)需要根據(jù)信息的邏輯權(quán)重分配粗細(xì)：標(biāo)題應(yīng)該較粗，而說(shuō)明字體應(yīng)該較細(xì)并且可以設(shè)計(jì)成灰色。其實(shí)字體的設(shè)計(jì)最重要的考量就是信息層級(jí)。蘋(píng)果認(rèn)為 APP 的字體信息層級(jí)有：大標(biāo)題（Large Title）、標(biāo)題一（Title 1）、標(biāo)題二（Title 2）、標(biāo)題三（Title 3）、頭條（Headline）、正文（Body）、標(biāo)注（Callout）、副標(biāo)題（Subhead）、注解（Footnote）、注釋一（Caption 1）、注釋二（Caption 2）這幾種。


注意一下，以上 HIG 的建議全部是針對(duì)英文SF字體而言的，中文字體需要我們靈活運(yùn)用，以最終呈現(xiàn)效果為基準(zhǔn)調(diào)整。在設(shè)計(jì)具體界面時(shí)我們一定要以用戶的使用情景來(lái)考慮，把設(shè)計(jì)稿導(dǎo)入手機(jī)去思考行高與字體大小是否是可讀的。10pt（20px）是手機(jī)上顯示的最小字體，最大的應(yīng)該是目前的大標(biāo)題字體了，達(dá)到了34pt（68px）。

十八、啟動(dòng)圖標(biāo)

在設(shè)計(jì)模板還沒(méi)有如今這么發(fā)達(dá)時(shí)，設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)（1024x1024px）之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如，在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px，在@2x情況下為120x120px；在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px；這個(gè)工作太煩人了，好在現(xiàn)在我們只需要專(zhuān)注在啟動(dòng)圖標(biāo)設(shè)計(jì)本身上了。在蘋(píng)果給我們的這套資源中，有 Template-AppIcons-iOS 這個(gè)文件。打開(kāi)這個(gè)文件，用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉智能對(duì)象里的內(nèi)容，你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。然后我們把背景隱藏，切出這些圖標(biāo)即可。圖標(biāo)設(shè)計(jì)建議使用 AI 等矢量軟件，然后使用規(guī)范切出圖像資源。


十九、控件

控件包括：輸入框、按鈕、滑桿、頁(yè)卡、開(kāi)關(guān)等，在設(shè)計(jì)模板中已經(jīng)全部列出。這里格外說(shuō)明一下，為了讓設(shè)計(jì)更符合整體產(chǎn)品品牌調(diào)性，這些控件都可以做成自定義的設(shè)計(jì)樣式。但是會(huì)增加工作量和切圖資源，所以一般我們?cè)谥T如設(shè)置界面這些無(wú)需太體現(xiàn)設(shè)計(jì)感的頁(yè)面中都使用系統(tǒng)默認(rèn)控件，而在一些品牌感需要強(qiáng)調(diào)的頁(yè)面或產(chǎn)品（諸如白噪音產(chǎn)品、游戲等）則會(huì)使用自定義的樣式。如果我們想自己設(shè)計(jì)控件，那么注意兩件事：

第一，點(diǎn)擊區(qū)域基本符合44pt（88px）原則，也就是在手機(jī)上大小大概是7mm-9mm，適合手指點(diǎn)擊。

第二，要設(shè)計(jì)操作的不同狀態(tài)，不要只設(shè)計(jì)一種狀態(tài)。

二十、標(biāo)注

當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)界面進(jìn)行標(biāo)注給開(kāi)發(fā)工程師在還原界面時(shí)進(jìn)行參考。在一份設(shè)計(jì)稿中需要標(biāo)注的內(nèi)容是文字的字號(hào)大小、粗細(xì)、顏色、不透明度；界面的背景顏色、不透明度；各個(gè)圖標(biāo)、列表、文字之間的間距。


常用的標(biāo)注工具有藍(lán)湖、 Mark Man 、PX Cook像素大廚

1.藍(lán)湖平臺(tái)自動(dòng)標(biāo)注功能 將 Sketch 和 Adobe XD、Photoshop 的設(shè)計(jì)稿上傳至藍(lán)湖后，在藍(lán)湖平臺(tái)每個(gè)頁(yè)面左側(cè)有一個(gè)類(lèi)似分享的圖標(biāo)，點(diǎn)擊會(huì)獲取一個(gè)網(wǎng)址，這個(gè)網(wǎng)址就是系統(tǒng)生成的自動(dòng)標(biāo)注。它會(huì)自動(dòng)識(shí)別設(shè)計(jì)稿中字體大小和間距等，甚至有代碼參考。

2.使用Px像素大廚標(biāo)注 像素大廚同樣提供了自動(dòng)標(biāo)注、手動(dòng)標(biāo)注兩種標(biāo)注方法。自動(dòng)標(biāo)注需要上傳設(shè)計(jì)稿，手動(dòng)標(biāo)注需要設(shè)計(jì)師使用「尺子」來(lái)測(cè)量距離、「吸管」來(lái)吸取色號(hào)。在界面上部有單位選擇，如果我們給 iOS 開(kāi)發(fā)做標(biāo)注，那么單位最好選擇 PT，與開(kāi)發(fā)環(huán)境一致。

總結(jié)

到這里我們就已經(jīng)把ios設(shè)計(jì)規(guī)范全部講完啦，希望對(duì)大家有幫助。覺(jué)得有用的話，就動(dòng)動(dòng)你的小手，關(guān)注+點(diǎn)贊吧！