設計教程 ·

ui界面設計入門教程(iOS篇)

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

一、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的倍數。

 

3、組件模塊

不同類型的app有不一樣的內容,但是總的來說無非就是圖標層與圖文排版層。這些小的元素可以組合成不同的模塊。圖標的規范,之前在文章《如何畫好一組線性圖標》中有寫,可以搜索來參考,在這里不作贅述。圖文排版層內要注意的是圖片的比例、信息層級區分、標題與內容之間的間距等等。

【結語】

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

多看、多學、多做。

 

原文作者:公眾號,牙線姐姐