IOS系統(tǒng)UI設(shè)計時，需要注意的UI設(shè)計規(guī)范是什么？

UI設(shè)計是現(xiàn)在非常熱門的職業(yè)，在進行UI設(shè)計的時候，將是由終端來決定設(shè)計套路，不同的終端使用不同的設(shè)計方法，這就要求設(shè)計師能哦股學會靈活使用，下面就一起看看那些需要注意的IOS UI設(shè)計規(guī)范？

IOS UI的設(shè)計規(guī)范:

先說設(shè)計稿的大小,一般來說，在制作IOS設(shè)計稿時，我們總是選擇650*1334的尺寸，如果是1x，就是375*667。

我們按照1x規(guī)范從上到下理解，最上面是狀態(tài)欄，高20，寬375。

那么狀態(tài)欄有哪些元素呢？其實就是信號，網(wǎng)絡(luò)狀態(tài)，時間，電量，通知。

信號欄下面是我們的導航條，高度44px。

導航欄中必須有導航字符。一般來說，我們是居中對齊的，導航字符的大小應(yīng)該是18px。

接下來是底部。底部是我們的標簽欄，里面裝滿了我們的切換圖標。標簽欄的高度為49px。

標簽欄中圖標的大小也是標準化的。我們必須確保最小點擊面積為24px。如果低于這個范圍，就不方便操作。

圖標下面一般都有字符，尺寸比較小，可以根據(jù)圖標的大小進行調(diào)整。一般來說，字符的大小是11和10px。

一般來說，一是基于我們IOS的設(shè)計規(guī)范，二是內(nèi)容區(qū)的文字大小規(guī)范。一般來說是16，15，14，12，根據(jù)要求設(shè)計。

iOS的屏幕分辨率

說到原稿改編，首先要了解iOS屏幕分辨率的一些知識點。這些知識點便于我們理解為什么設(shè)計稿要分雙圖和三圖。如果很難理解，直接記住雙三圖的大小就好了。熟了再回頭看理論。

1.像素

像素是一個單位和一個小正方形。它沒有固定的物理大小，它的物理大小由載體的物理大小決定。這個像素小方塊包含顏色，無數(shù)個小方塊根據(jù)位置顯示顏色，從而形成一幅畫面。(是的，你可以理解為類似于十字繡。)在同樣大小的屏幕上，像素越多，圖像就會越清晰。

2.PPI和DPI

PPI和DPI是經(jīng)常被談?wù)摰男值?。都和密度有關(guān)，影響輸出質(zhì)量，但是PPI是每英寸的像素，也就是每英寸的像素數(shù)。DPI是打印精度，即每英寸點數(shù)。PPI影響屏幕顯示的準確性，DPI影響打印的準確性。了解PPI的原理及其在UI設(shè)計中的應(yīng)用是有好處的。

3.邏輯點

在上面列出的型號中，我們可以知道屏幕很多。ioS手機只有蘋果生產(chǎn)，安卓手機很多公司生產(chǎn)，所以尺寸很多。為此，建立了一個規(guī)則，其中一個尺寸作為參考，而其他尺寸根據(jù)參考尺寸比率進行調(diào)整。iOS系統(tǒng)的基準設(shè)計尺寸為375*667(俗稱雙圖)，邏輯點單元稱為pt。1pt在雙圖中是1px，在雙圖中是2px，在三圖中是3px。因此，我們?yōu)殚_發(fā)人員提供了一個雙圖，他們可以根據(jù)單位pt知道其他多個圖中元素和組件的大小。下圖也是一個44pt大小的圓，在不同倍數(shù)的屏幕上有不同的大小:

4.雙圖，雙圖，三倍圖

A.iOS一次、二次、三次圖的定義

iOS的設(shè)計尺寸是375*667，iOS的設(shè)計尺寸是750*1334(iPhone6、7、8的尺寸)，iOS的設(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*@[email protected]材質(zhì)。但是這個數(shù)字是十進制的，很難切圖。所以為了方便開發(fā)者，蘋果使用@3x素材，然后縮放到@2.46x，縮放比例為83%。蘋果選擇了一個大概87%的比例作為最終比例。這樣，Appleplus型號的物理分辨率大小占虛擬分辨率大小的87%。plus型號的物理尺寸是1080*1920。除以87%，虛擬設(shè)計尺寸為1242*2208。

上面是虛擬的三重圖，而iPhoneX是真正的三重圖，大小是1125*2436。所以iPhoneX上用的是三倍的截止圖像。

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

既然一個稿可以改編，那么按照一個雙畫面的大小來做一個雙畫面和三畫面就夠了，那為什么要分雙畫面、雙畫面和三畫面呢？其實這里的雙圖主要是用來切圖的(切圖是你在界面上畫的一些元素，比如圖標、插圖等。，應(yīng)該放在不同尺寸的屏幕上，所以需要適當增加倍數(shù)，即@2x，@3x)。設(shè)計稿雖然根據(jù)開發(fā)只需要給一套樣式寫代碼，但是需要給幾套裁剪圖，否則在雙界面上只用一次裁剪圖拉伸就會模糊(理論上一個位圖像素對應(yīng)一個物理像素才能完美顯示圖片。這個理論在普通屏幕下是沒問題的，但是現(xiàn)在有了高清視網(wǎng)膜屏幕，如果還用原來的像素圖像，會導致像素不足，模糊。).所以雙界面是雙切切，雙界面是雙切，三界面是三切，以此類推。

5.初稿的改編

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

IOS尺寸規(guī)格。

1，固定的部分

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

2.網(wǎng)格布局

在可設(shè)計區(qū)域，我們在做設(shè)計稿的時候，需要有一個框架，這個框架通常叫做網(wǎng)格布局。如果網(wǎng)格布局標準化，設(shè)計稿中的內(nèi)容會有一定的規(guī)律，形成界面時會有節(jié)奏感。界面由行和列組成，這些行和列的形成規(guī)則與開始時最小單位的定義有關(guān)。在這里，我們就來談?wù)勅绾巫鲭p倍圖形尺寸的網(wǎng)格布局。我的習慣是最小單位是8px(如果你設(shè)置的最小單位是其他值，也可以代入下面的框架理論)，所以框架中的大小設(shè)置為8的倍數(shù)。

3.組件模塊

不同類型的應(yīng)用程序有不同的內(nèi)容，但一般來說，它們只不過是圖標層和圖形布局層。這些小元素可以組合成不同的模塊。圖標的規(guī)范，之前寫在《如何畫一組線性圖標》一文中的，可以搜索參考，此處不再贅述。在圖形布局層，要注意圖片的比例，信息層次的區(qū)分，標題與內(nèi)容的距離等等。

IOS設(shè)計需要嚴格按照要求相應(yīng)的規(guī)范進行操作和設(shè)計，并保證其設(shè)計效果，當然在設(shè)計中需要對方案再進行合理的規(guī)劃和整理，才最終輸出一份完整且系統(tǒng)的規(guī)范文檔。