原來如此: UI設計入門之iOS篇

文章摘要：本文為UI設計入門的第一篇，主要講述移動端iOS系統的發展史、設計規範。把iOS放在第一篇的原因，是現在很多公司都採用一稿適配的原則，因此把iOS篇的知識點學好，就等於邁進了UI設計的大門（至少你可以通過這些理論嘗試做設計稿）。只有試著做設計稿，纔會發現介面裡

【前言】

本文為UI設計入門的第一篇，主要講述移動端iOS系統的發展史、設計規範。把iOS放在第一篇的原因，是現在很多公司都採用一稿適配的原則，因此把iOS篇的知識點學好，就等於邁進了UI設計的大門（至少你可以通過這些理論嘗試做設計稿）。只有試著做設計稿，纔會發現介面裡不懂的內容，一邊實踐一邊學習。本文中所用到的部分介面和素材圖片，版權均歸屬原作者，在此僅做學習使用，請勿商用。

【目錄】

1、iOS的發展歷史

2、iOS的螢幕解析度

3、iOS的尺寸規範

【正文】

一、iOS的發展歷史

關於iOS的發展歷史，網路上有非常多的文章，想詳細瞭解的朋友可以去找相關資料看一下。在這裏我們來想一個問題：UI設計師為什麼要了解這個系統的歷史。總結歸納後，無非三點：iOS的尺寸變化、系統變化、風格變化，都會影響UI設計師做設計稿。下圖為針對以上三點所做的總結。

二、iOS的螢幕解析度

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

1、畫素

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

2、PPI與DPI

PPI與DPI是一對經常被人談論的兄弟。它們都跟密度有關，都影響輸出質量，但是PPI是畫素密度，是每英寸包含多少畫素點。DPI是列印精度，是每英寸所能列印的點數。PPI影響的是螢幕上顯示的精度，DPI影響的是列印出來的精度。在UI設計裏面理解PPI的原理以及在介面中的應用就好。

3、邏輯點

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

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

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

iOS的一倍圖設計尺寸是375*667，二倍圖的設計尺寸是750*1334（Iphone6、7、8的尺寸），三倍圖的設計尺寸是1242*2208。

如果按照二倍圖的1.5倍得出三倍圖的話，應該是1125*2001，為什麼三倍圖是1242*2208呢？這跟螢幕的PPI有關。iPhone6、7、8plus的PPI是401，而iPhone6、7、8的PPI是326。理論上，蘋果應該用401/326*@[email protected]的素材。但是這個數值有小數，也很難切圖，所以蘋果爲了方便開發者，用的是@3x的素材，然後再縮放到@2.46x上，縮放的比例是83%，蘋果選取了一個大概的比例87%來作為最終的比例。這樣算的話，也就是蘋果plus機型的物理解析度尺寸佔虛擬解析度尺寸的87%。plus機型的物理大小是1080*1920，兩者分別除以87%，就得出這個虛擬的設計尺寸1242*2208。

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

b、一倍、二倍、三倍圖的應用

既然一稿可以適配，開發根據一倍圖的尺寸，來按比例做兩倍圖、三倍圖就可以了，那為什麼還要分一倍圖、兩倍圖、三倍圖呢？其實這裏的倍圖，主要是針對於切圖而言的（切圖就是介面中你畫的某些元素，比如圖示、插畫類等等，它們要放在不同大小的螢幕上，就要配合適當增大倍數，也就是@2x、@3x）。雖然設計稿只需要給一套樣式給開發照著寫程式碼，但切圖是需要給幾套的，不然在兩倍的介面上只用一倍的切圖去拉伸，就會很模糊（理論上來說，1個位影象素對應一個物理畫素，圖片才能得到完美的顯示。這個理論在普通螢幕下是沒問題的，但是現在有高清的retina螢幕，如果還是用回原本畫素的圖片，就會造成畫素點不夠而導致模糊的情況）。所以，一倍的介面用一倍切圖、兩倍的介面用兩倍的切圖、三倍的介面用三倍介面的切圖，以此類推。

5、一稿適配

現在的開發團隊，一般都是根據一套設計稿，按照比例來做其他尺寸的適配。因此我們只需要提供一套設計稿就行，大大節省了我們的設計時間。至於要用一倍圖還是二倍圖，看個人習慣，兩者各有利弊。我個人習慣用二倍圖，也就是750*1334的尺寸，因為除了二倍圖自身的優點外，還能夠方便開發使用。開發的適配方法也是根據個人習慣的，有的開發小夥伴用js來寫程式碼，通過獲取螢幕的尺寸再除以一個數值得到最終結果，如果設計稿是按照750的二倍圖尺寸做的，他們就不用自己算，比較方便。

三、iOS尺寸規範

1、定死的部分

在介面中，有些部分是定死的，除了那些部分外，其餘的是可設計區域。我們所做的就是可設計區域的設計。

2、柵格佈局

在可設計區域裏面，我們在做設計稿的時候，需要有一個框架，也就是常說的柵格佈局。有柵格佈局規範著，設計稿裡的內容就會有一定的規律，組成介面的時候就有韻律感。介面是由行與列構成的，這些行列的構成規則，跟一開始定義最小單位有關。在這裏以二倍圖尺寸來講述一下如何做柵格佈局。我的習慣是最小單位為8px（如果你所設定的最小單位是其它數值，也可以代入以下的框架理論中），所以框架中的尺寸設定是8的倍數。