iosui設(shè)計(jì)規(guī)范是什么？iosui設(shè)計(jì)怎么做

1、第 1 頁(yè) / 共 6 頁(yè)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ì)稿尺寸們都選擇 6501334 這個(gè)尺寸，如果1 的話，就 375667。們從上到下以1 的規(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)航欄的高度為44p。導(dǎo)航欄中肯定有導(dǎo)航文字的，導(dǎo)航文字一般

2、來(lái)說(shuō)們都居中對(duì)齊，并且導(dǎo)航文字的小應(yīng)該為 18p。接下來(lái)就部，部就們的標(biāo)簽欄了，標(biāo)簽欄中都們的切換圖標(biāo)，標(biāo)簽欄的高度為49p。標(biāo)簽欄中的圖標(biāo)小也有規(guī)范的，最小的擊區(qū)域們必須保證為24p，低于這個(gè)范圍的話不方便進(jìn)行操作的。在圖標(biāo)的下方一般都還有文字，這里文字的小比較小，可以根據(jù)圖標(biāo)小來(lái)進(jìn)行調(diào)整，一般來(lái)說(shuō)文字小為11、10p?？偟膩?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 的屏幕分辨率第 2 頁(yè) / 共 6 頁(yè)說(shuō)到一稿適配，首先要了解ios屏幕分辨率的幾個(gè)知識(shí)。這些知識(shí)方便們理解設(shè)計(jì)稿為什么

3、要分二倍圖、三倍圖。如果感覺(jué)理解起來(lái)困難，那么直接記住二倍圖和三倍圖的尺寸就好。熟了再回頭看理論。1、像素像素一個(gè)單位，一個(gè)小方格。它沒(méi)有固定的物理小，它的物理小由載體的物理小決定的。這個(gè)像素小方格里面包含了顏色，無(wú)數(shù)個(gè)小方格按照位置顯示顏色，就組成了畫面。（嗯的，你可以理解為跟十字繡差不多）在同樣小的屏幕上，像素格越多，顯像就越清晰。ios ui 設(shè)計(jì)2、ppi 與 dpi 第 3 頁(yè) / 共 6 頁(yè)ppi 與 dpi 一對(duì)經(jīng)常被人談?wù)摰男值堋Ｋ鼈兌几芏扔嘘P(guān)，都影響輸出質(zhì)量，但 ppi 像素密度，每英寸包含多少像素。dpi 打印精度，每英寸所能打印的數(shù)。ppi 影響的屏幕上顯示的精度，dp

4、i 影響的打印出來(lái)的精度。在ui 設(shè)計(jì)里面理解ppi 的原理以及在界面中的應(yīng)用就好。3、邏輯在上面所列舉的歷代機(jī)型里面，們可以知道，屏幕的尺寸非常多。ios系統(tǒng)的只有蘋果生產(chǎn)，但安卓的卻有非常多的生產(chǎn)，因此尺寸也很多。為此，定下了一個(gè)規(guī)則，以其中一個(gè)尺寸小作為基準(zhǔn)，其它尺寸按照這個(gè)基準(zhǔn)尺寸比例來(lái)適配。ios系統(tǒng)的基準(zhǔn)設(shè)計(jì)尺寸375667 （也就俗稱的一倍圖），邏輯單位叫pt。一倍圖里的1pt1p ，放到二倍圖就 2p，在三倍圖里 3p。所以們給發(fā)的一倍圖，他們能夠根據(jù)pt 這個(gè)單位，知道其余倍數(shù)的圖里面元素和組件的小。下圖，同樣44pt 小的圓形，在不一樣倍數(shù)的屏幕中的尺寸不一樣：4、一倍圖、

5、二倍圖、三倍圖a、ios 的一倍、二倍、三倍圖定義ios的一倍圖設(shè)計(jì)尺寸375667 ，二倍圖的設(shè)計(jì)尺寸7501334 （iphone6 、7、8 的尺寸） ，三倍圖的設(shè)計(jì)尺寸12422208 。如果按照二倍圖的1.5 倍得出三倍圖的話，應(yīng)該11252001 ，為什么三倍圖12422208 呢？這跟屏幕的 ppi 有關(guān)。 iphone6、7、8plus 的 ppi401，而 iphone6、7、8 的 ppi326。理論上，蘋果應(yīng)該用401/3262=2.46 的素材。但這個(gè)數(shù)值有小數(shù)，也很難切圖，所以蘋果為了方便發(fā)者，用的3 的素材，然后再縮放到2.46 上，縮放的比例 83%，蘋果選取了一

6、個(gè)概的比例87%來(lái)作為最終的比例。這樣算的話，也就蘋果plus 機(jī)型的物理分辨率尺寸占虛擬分辨率尺寸的87%。plus 機(jī)型的物理小 10801920 ，兩者分別除以87%，就得出這個(gè)虛擬的設(shè)計(jì)尺寸12422208 。第 4 頁(yè) / 共 6 頁(yè)以上虛擬三倍圖，而iphone 真三倍，它的尺寸11252436 。所以在 iphone 上用的三倍的切圖。b、一倍、二倍、三倍圖的應(yīng)用既然一稿可以適配，發(fā)根據(jù)一倍圖的尺寸，來(lái)按比例兩倍圖、三倍圖就可以了，那為什么還要分一倍圖、兩倍圖、三倍圖呢？其實(shí)這里的倍圖，主要針對(duì)于切圖而言的（切圖就界面中你畫的某些元素，比如圖標(biāo)、畫類等等，它們要放在不同小的屏幕上

7、，就要配合適當(dāng)增倍數(shù)，也就2、3）。雖然設(shè)計(jì)稿只需要給一套樣式給發(fā)照著寫代碼，但切圖需要給幾套的，不然在兩倍的界面上只用一倍的切圖去拉伸，就會(huì)很模糊（理論上來(lái)說(shuō)，1 個(gè)位圖像素對(duì)應(yīng)一個(gè)物理像素，圖片才能得到的顯示。這個(gè)理論在普通屏幕下沒(méi)問(wèn)題的，但現(xiàn)在有高清的retina 屏幕，如果還用回原本像素的圖片，就會(huì)造成像素不夠而導(dǎo)致模糊的情況）。所以，一倍的界面用一倍切圖、兩倍的界面用兩倍的切圖、三倍的界面用三倍界面的切圖，以此類推。5、一稿適配現(xiàn)在的發(fā)團(tuán)隊(duì)，一般都根據(jù)一套設(shè)計(jì)稿，按照比例來(lái)其他尺寸的適配。因此們只需要一套設(shè)計(jì)稿就行，節(jié)省了們的設(shè)計(jì)時(shí)間。至于要用一倍圖還二倍圖，看個(gè)人習(xí)慣，兩者各有利弊

8、。個(gè)人習(xí)慣用二倍圖，也就7501334 的尺寸，因?yàn)槌硕秷D自身的優(yōu)外，還能夠方便發(fā)使用。發(fā)的適法也根據(jù)個(gè)人習(xí)慣的，有的發(fā)小伙伴用js 來(lái)寫代碼，通過(guò)獲取屏幕的尺寸再除以一個(gè)數(shù)值得到最終結(jié)果，如果設(shè)計(jì)稿按照 750 的二倍圖尺寸的，他們就不用自己算，比較方便。ios 尺寸規(guī)范1、定死的部分在界面中，有些部分定死的，除了那些部分外，其余的可設(shè)計(jì)區(qū)域。們所的就可設(shè)計(jì)區(qū)域的設(shè)計(jì)。2、柵格布局第 5 頁(yè) / 共 6 頁(yè)在可設(shè)計(jì)區(qū)域里面，們?cè)谠O(shè)計(jì)稿的時(shí)候，需要有一個(gè)框架，也就常說(shuō)的柵格布局。有柵格布局規(guī)范著，設(shè)計(jì)稿里的內(nèi)容就會(huì)有一定的規(guī)律，組成界面的時(shí)候就有韻律感。界面由行與列構(gòu)成的，這些行列的構(gòu)成規(guī)則，跟一始定義最小單位有關(guān)。在這里以二倍圖尺寸來(lái)講述一下如何柵格布局。的習(xí)慣最小單位為8p（如果你所設(shè)定的最小單位其它數(shù)值，也可以代入以下的框架理論中），所以框架中的尺寸設(shè)定 8 的倍數(shù)。3、組件模塊不同類型的 app 有不一樣的內(nèi)容，但總的來(lái)說(shuō)無(wú)非就圖標(biāo)層與圖文排版層。這些小的元素可以組合成不同的模塊。圖標(biāo)的規(guī)范，之前在文章如何畫好一組線性圖標(biāo)中有寫，可以搜索來(lái)參