UI設(shè)計(jì)是現(xiàn)在非常熱門的一個(gè)職業(yè)，在進(jìn)行UI設(shè)計(jì)時(shí)是由終端所決定的，不同終端所用到的設(shè)計(jì)方法也有所不同，這就需要設(shè)計(jì)者學(xué)會(huì)靈活運(yùn)用，那么ios ui設(shè)計(jì)規(guī)范是什么？下面一起看下吧。
　

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

　　先來(lái)說(shuō)說(shuō)設(shè)計(jì)稿的尺寸，一般來(lái)說(shuō)在做IOS設(shè)計(jì)稿的時(shí)候，設(shè)計(jì)稿尺寸我們都是選擇650*1334這個(gè)尺寸，如果是1x的話，就是375*667。

　　我們從上到下以1x的規(guī)范來(lái)進(jìn)行了解，最上邊的就是狀態(tài)欄了，狀態(tài)欄的高度是20，寬度都是375。

　　那么狀態(tài)欄都是有哪些元素呢？實(shí)際上就是信號(hào)、網(wǎng)絡(luò)狀態(tài)、時(shí)間以及電量和通知等。

　　在信號(hào)欄下邊就是我們的導(dǎo)航欄，導(dǎo)航欄的高度為44px。

　　導(dǎo)航欄中肯定是有導(dǎo)航文字的，導(dǎo)航文字一般來(lái)說(shuō)我們都是居中對(duì)齊，并且導(dǎo)航文字的大小應(yīng)該為18px。

　　接下來(lái)就是最底部，最底部就是我們的標(biāo)簽欄了，標(biāo)簽欄中都是我們的切換圖標(biāo)，標(biāo)簽欄的高度為49px。

　　標(biāo)簽欄中的圖標(biāo)大小也是有規(guī)范的，最小的點(diǎn)擊區(qū)域我們必須保證為24px，低于這個(gè)范圍的話是不方便進(jìn)行操作的。

　　在圖標(biāo)的下方一般都還有文字，這里文字的大小比較小，可以根據(jù)圖標(biāo)大小來(lái)進(jìn)行調(diào)整，一般來(lái)說(shuō)文字大小為11、10px。

　　總的來(lái)說(shuō)著就我們IOS UI的設(shè)計(jì)規(guī)范了，其他還有就是內(nèi)容區(qū)域的文字大小規(guī)范了，一般來(lái)說(shuō)都是16、15、14、12這四個(gè)文字大小，具體根據(jù)需求進(jìn)行設(shè)計(jì)。

　　iOS的屏幕分辨率

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

　　1、像素

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

ios ui設(shè)計(jì)（圖片來(lái)自網(wǎng)絡(luò)）

　　2、PPI與DPI

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

　　3、邏輯點(diǎn)

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

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

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

　　iOS的一倍圖設(shè)計(jì)尺寸是375*667，二倍圖的設(shè)計(jì)尺寸是750*1334（Iphone6、7、8的尺寸） ，三倍圖的設(shè)計(jì)尺寸是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的素材。但是這個(gè)數(shù)值有小數(shù)，也很難切圖，所以蘋果為了方便開(kāi)發(fā)者，用的是@3x的素材，然后再縮放到@2.46x上，縮放的比例是83%，蘋果選取了一個(gè)大概的比例87%來(lái)作為最終的比例。這樣算的話，也就是蘋果plus機(jī)型的物理分辨率尺寸占虛擬分辨率尺寸的87%。plus機(jī)型的物理大小是1080*1920，兩者分別除以87%，就得出這個(gè)虛擬的設(shè)計(jì)尺寸1242*2208。

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

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

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

　　5、一稿適配

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

　　iOS尺寸規(guī)范

　　1、定死的部分

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

　　2、柵格布局

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

　　3、組件模塊

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

ios ui設(shè)計(jì)（圖片來(lái)自網(wǎng)絡(luò)）

　　ios ui設(shè)計(jì)需要嚴(yán)格按照要求來(lái)操作，根據(jù)規(guī)范來(lái)進(jìn)行設(shè)計(jì)，保證設(shè)計(jì)效果，當(dāng)然在設(shè)計(jì)做好規(guī)劃和方案整理也是很有必要的，希望本文對(duì)你有所幫助。