激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

帶你輕松入門UI設(shè)計(jì)

發(fā)布時(shí)間：2024-01-02 09:14:16 瀏覽量：199次





關(guān)于iOS的發(fā)展史，網(wǎng)絡(luò)上有非常多的文章，想詳細(xì)了解一下的朋友可以去找資料看一下。在這里我們來想一個(gè)問題：UI設(shè)計(jì)師為什么要了解這個(gè)系統(tǒng)的歷史？總結(jié)歸納后，無非三點(diǎn)：iOS的尺寸變化、系統(tǒng)變化、風(fēng)格變化，都會(huì)影響UI設(shè)計(jì)師做設(shè)計(jì)稿。下圖為針對(duì)以上三點(diǎn)所做的總結(jié)。




二、iOS的屏幕分辨率


說到一稿適配,首先要了解iOS屏的幾個(gè)知識(shí)點(diǎn)。這些知識(shí)我們理解設(shè)計(jì)稿為什么要分、三倍圖。如果感覺理解起,那么直接記住二倍圖和三的尺寸就好。做熟了再回頭看。

1、像素

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



2、PPl與DPI

PPI與DPI是一對(duì)經(jīng)常被人談?wù)摰男值?。它們都跟密度有關(guān),都影響輸出質(zhì)量,但是PP是像素密度,是每英寸包含多少像素點(diǎn)。DPI是印精度,是每英寸所能打印的點(diǎn)數(shù)。PP影響的是屏幕上顯示的精度,DP影響的是打印出來的精度。在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)尺寸比例來適配。iOS系統(tǒng)的基準(zhǔn)設(shè)計(jì)尺寸是375*667(也就是俗稱的一倍圖),邏輯點(diǎn)單位叫做pt一倍圖里的1pt是1px,放到二倍圖就是2px,在三倍圖里是3px所以我們提供給開發(fā)的一倍圖,他們能夠根據(jù)pt這個(gè)單位,知道其余倍數(shù)的圖里面元素和組件的大小。

下圖,同樣是44pt大小的圓形,在不一樣倍數(shù)的屏幕中的尺寸不一樣：



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

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

375*667,二倍圖的設(shè)計(jì)尺寸是750*1334( phone6、7、8的尺寸),三倍圖的設(shè)計(jì)尺寸是1242*2208。

如果按照二倍圖的1.5倍得出三倍圖的話,應(yīng)該是1125*2001,為什么三倍圖是1242*2208呢?這跟屏幕的PP有關(guān)。 iPhone6、7、8p|us的PP|是401,而 iPhone6、7、8的PP是326。理論上,蘋果應(yīng)該用401/326*@2×=@246×的素材。但是這個(gè)數(shù)值有小數(shù),也很難切圖,所以蘋果為了方便開發(fā)者,用的是3x的素材,然后再縮放到@246上,縮放的比例是83%,蘋果選取了一個(gè)大概的比例87%來作為最終的比例。這樣算的話,也就是蘋果pus機(jī)型的物理分辨率尺寸占虛擬分辨率尺寸的87%。plus機(jī)型的物理大小是1080*1920,兩者分別除以87%,就得出這個(gè)虛擬的設(shè)計(jì)尺寸1242*2208。

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

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

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



5、一稿適配

現(xiàn)在的開發(fā)團(tuán)隊(duì)一般都是根據(jù)一套設(shè)計(jì)稿，按照比例來做其他尺寸的適配。因此我們只需要提供一套設(shè)計(jì)稿就行，大大節(jié)省了我們?cè)O(shè)計(jì)時(shí)間。

至于要用一倍圖還是二倍圖,看個(gè)人習(xí)慣,兩者各有利弊。我個(gè)人習(xí)慣用二倍圖,也就是750*1334的尺寸,因?yàn)槌硕秷D自身的優(yōu)點(diǎn)外,還能夠方便開發(fā)使用。

開發(fā)的適配方法也是根據(jù)個(gè)人習(xí)慣的,有的開發(fā)小伙伴用js來寫代碼,通過獲取屏幕的尺寸再除以一個(gè)數(shù)值得到最終結(jié)果,如果設(shè)計(jì)稿是按照750的二倍圖尺寸做的,他們就不用自己算,比較方便。


3、iiOS尺寸規(guī)范


1、定死的部分

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







2、柵格布局

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





3、組件模塊

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





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

多看、多學(xué)、多做。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定