本文為 UI設(shè)計入門的***篇，主要講述移動端 iOS系統(tǒng)的發(fā)展史、設(shè)計規(guī)范。把 iOS 放在***篇的原因，是現(xiàn)在很多公司都采用一稿適配的原則，因此把 iOS 篇的知識點學(xué)好，就等于邁進(jìn)了 UI設(shè)計的大門(至少你可以通過這些理論嘗試做設(shè)計稿)。只有試著做設(shè)計稿，才會發(fā)現(xiàn)界面里不懂的內(nèi)容，一邊實踐一邊學(xué)習(xí)。本文中所用到的部分界面和素材圖片，版權(quán)均歸屬原作者，在此僅做學(xué)習(xí)使用，請勿商用。

目錄

• iOS 的發(fā)展歷史
• iOS 的屏幕分辨率
• iOS 的尺寸規(guī)范

一、iOS的發(fā)展歷史

關(guān)于 iOS 的發(fā)展歷史，網(wǎng)絡(luò)上有非常多的文章，想詳細(xì)了解的朋友可以去找相關(guān)資料看一下。在這里我們來想一個問題：UI設(shè)計師為什么要了解這個系統(tǒng)的歷史?？偨Y(jié)歸納后，無非三點：iOS 的尺寸變化、系統(tǒng)變化、風(fēng)格變化，都會影響 UI設(shè)計師做設(shè)計稿。下圖為針對以上三點所做的總結(jié)。 

二、iOS的屏幕分辨率

說到一稿適配，首先要了解 iOS 屏幕分辨率的幾個知識點。這些知識點方便我們理解設(shè)計稿為什么要分二倍圖、三倍圖。如果感覺理解起來困難，那么直接記住二倍圖和三倍圖的尺寸就好。做熟了再回頭看理論。

1. 像素

像素是一個單位，是一個小方格。它沒有固定的物理大小，它的物理大小是由載體的物理大小決定的。這個像素小方格里面包含了顏色，無數(shù)個小方格按照位置顯示顏色，就組成了畫面。(你可以理解為跟十字繡差不多)在同樣大小的屏幕上，像素格越多，顯像就越清晰。 

2. PPI與DPI

PPI 與 DPI 是一對經(jīng)常被人談?wù)摰男值?。它們都跟密度有關(guān)，都影響輸出質(zhì)量，但是 PPI 是像素密度，是每英寸包含多少像素點。DPI 是打印精度，是每英寸所能打印的點數(shù)。PPI 影響的是屏幕上顯示的精度，DPI 影響的是打印出來的精度。在 UI設(shè)計里面理解 PPI 的原理以及在界面中的應(yīng)用就好。 

3. 邏輯點

在上面所列舉的歷代機型里面，我們可以知道，屏幕的尺寸非常多。iOS系統(tǒng)的手機只有蘋果公司生產(chǎn)，但安卓的手機卻有非常多的公司生產(chǎn)，因此尺寸也很多。為此，定下了一個規(guī)則，以其中一個尺寸大小作為基準(zhǔn)，其它尺寸按照這個基準(zhǔn)尺寸比例來適配。iOS系統(tǒng)的基準(zhǔn)設(shè)計尺寸是375*667(也就是俗稱的一倍圖)，邏輯點單位叫做 pt。一倍圖里的1pt是1px，放到二倍圖就是2px，在三倍圖里是3px。所以我們提供給開發(fā)的一倍圖，他們能夠根據(jù) pt 這個單位，知道其余倍數(shù)的圖里面元素和組件的大小。下圖，同樣是44pt大小的圓形，在不一樣倍數(shù)的屏幕中的尺寸不一樣： 

4. 一倍圖、二倍圖、三倍圖

iOS的一倍、二倍、三倍圖定義

iOS 的一倍圖設(shè)計尺寸是375*667，二倍圖的設(shè)計尺寸是750*1334(iphone6、7、8的尺寸) ，三倍圖的設(shè)計尺寸是1242*2208。

如果按照二倍圖的1.5倍得出三倍圖的話，應(yīng)該是1125*2001，為什么三倍圖是1242*2208呢?這跟屏幕的 PPI 有關(guān)。iPhone6、7、8plus的 PPI 是401，而iPhone6、7、8的 PPI 是326。理論上，蘋果應(yīng)該用401/326*@2x=@2.46x的素材。但是這個數(shù)值有小數(shù)，也很難切圖，所以蘋果為了方便開發(fā)者，用的是@3x的素材，然后再縮放到@2.46x上，縮放的比例是83%，蘋果選取了一個大概的比例87%來作為最終的比例。這樣算的話，也就是蘋果plus 機型的物理分辨率尺寸占虛擬分辨率尺寸的87%。plus機型的物理大小是1080*1920，兩者分別除以87%，就得出這個虛擬的設(shè)計尺寸1242*2208。

以上是虛擬三倍圖，而 iPhone X 是真三倍，它的尺寸是1125*2436。所以在 iPhone X 上用的是三倍的切圖。

一倍、二倍、三倍圖的應(yīng)用

既然一稿可以適配，開發(fā)根據(jù)一倍圖的尺寸，來按比例做兩倍圖、三倍圖就可以了，那為什么還要分一倍圖、兩倍圖、三倍圖呢?其實這里的倍圖，主要是針對于切圖而言的(切圖就是界面中你畫的某些元素，比如圖標(biāo)、插畫類等等，它們要放在不同大小的屏幕上，就要配合適當(dāng)增大倍數(shù)，也就是@2x、@3x)。雖然設(shè)計稿只需要一套樣式給開發(fā)照著寫代碼，但切圖是需要給幾套的，不然在兩倍的界面上只用一倍的切圖去拉伸，就會很模糊(理論上來說，1個位圖像素對應(yīng)一個物理像素，圖片才能得到***的顯示。這個理論在普通屏幕下是沒問題的，但是現(xiàn)在有高清的 retina屏幕，如果還是用回原本像素的圖片，就會造成像素點不夠而導(dǎo)致模糊的情況)。 所以，一倍的界面用一倍切圖、兩倍的界面用兩倍的切圖、三倍的界面用三倍界面的切圖，以此類推。 

5. 一稿適配

現(xiàn)在的開發(fā)團(tuán)隊，一般都是根據(jù)一套設(shè)計稿，按照比例來做其他尺寸的適配。因此我們只需要提供一套設(shè)計稿就行，大大節(jié)省了我們的設(shè)計時間。至于要用一倍圖還是二倍圖，看個人習(xí)慣，兩者各有利弊。我個人習(xí)慣用二倍圖，也就是750*1334的尺寸，因為除了二倍圖自身的優(yōu)點外，還能夠方便開發(fā)使用。開發(fā)的適配方法也是根據(jù)個人習(xí)慣的，有的開發(fā)小伙伴用 js 來寫代碼，通過獲取屏幕的尺寸再除以一個數(shù)值得到最終結(jié)果，如果設(shè)計稿是按照750的二倍圖尺寸做的，他們就不用自己算，比較方便。

三、iOS尺寸規(guī)范

1. 定死的部分

在界面中，有些部分是定死的，除了那些部分外，其余的是可設(shè)計區(qū)域。我們所做的就是可設(shè)計區(qū)域的設(shè)計。 

2. 柵格布局

在可設(shè)計區(qū)域里面，我們在做設(shè)計稿的時候，需要有一個框架，也就是常說的柵格布局。有柵格布局規(guī)范著，設(shè)計稿里的內(nèi)容就會有一定的規(guī)律，組成界面的時候就有韻律感。界面是由行與列構(gòu)成的，這些行列的構(gòu)成規(guī)則，跟一開始定義最小單位有關(guān)。在這里以二倍圖尺寸來講述一下如何做柵格布局。我的習(xí)慣是最小單位為8px(如果你所設(shè)定的最小單位是其它數(shù)值，也可以代入以下的框架理論中)，所以框架中的尺寸設(shè)定是8的倍數(shù)。 

3. 組件模塊

不同類型的 app 有不一樣的內(nèi)容，但是總的來說無非就是圖標(biāo)層與圖文排版層。這些小的元素可以組合成不同的模塊。圖標(biāo)的規(guī)范，之前在文章《如何畫好一組線性圖標(biāo)?來看這份新手科普總結(jié)!》中有寫，可作參考，在這里不作贅述。圖文排版層內(nèi)要注意的是圖片的比例、信息層級區(qū)分、標(biāo)題與內(nèi)容之間的間距等等。 

結(jié)語

新手想要做好界面，首先要了解設(shè)計規(guī)范，定好界面骨骼。平時可以多研究各種類型的優(yōu)秀的 app：別人是怎么排版的、字號怎么使用、圖片的展示比例、icon 的樣式、交互方式等等。遇到一些界面設(shè)計得好的地方可以把界面保存下來，在旁邊備注。

多看、多學(xué)、多做。