知道做UI設(shè)計,這些事你知道嗎
100 2016-01-04
做一全套的APP設(shè)計,無非就是
1.界面設(shè)計:設(shè)計iOS界面,設(shè)計Android界面;
切圖:切iOS的2倍圖和3倍圖,切Android的hdpi,xhdpi,xxhdpi這三個尺寸的圖;
2.標(biāo)注:以px為單位標(biāo)注iOS界面的尺寸,以dp,sp為單位標(biāo)Android的尺寸。
iOS/Android
(一)屏幕尺寸
指實際的物理尺寸,為屏幕對角線的測量。
手機尺寸計算方式=對角線尺寸/2.54
目前,iPhone實際屏幕有3.5英寸/4英寸/4.7英寸/5.5英寸的屏幕大小,而為了簡單起見,Android把實際屏幕尺寸分為五個廣義的大小。
(二)分辨率與像素密度,倍率與邏輯像素
PPI(PixelsPerInch):像素密度,指屏幕上顯示的像素個數(shù),單位尺寸內(nèi)像素點越多,顯示的圖像就越清楚。Retina屏比普通屏清晰很多,就是因為它的像素密度翻了一倍。它不是一個測量物理大小的單位,這項指標(biāo)是連接數(shù)字世界與物理世界的橋梁。可以有一個2560*1440的屏幕可以跟墻一樣大,也可以跟腦袋一樣小。就像iPhone3gs的屏幕像素是320×480,iPhone4s的屏幕像素是640×960。剛好兩倍,然而兩款手機都是3.5英寸的。
DPI(DotsPerInch):指每英寸有多少個顯示點
市場上iOS分辨率有:640×960、640×1136、750×1334、1242×2208
目前iOS采用750×1334的分辨率來設(shè)計。(iPhone6/6s)
市場上Android主流分辨率有:480×800、720×1280、1080×1920(其他的早該淘汰了,忽略不計)。
目前,Android把像素密度分為了五個廣義的大?。?/p>
ldpi(low低密度)[0.75倍]~120dpi→1dp=0.75px
mdpi(medium標(biāo)準(zhǔn)密度)[1倍]~160dpi→1x→1dp=1px=1pt→@1x(iPhone3gs)
hdpi(high高密度)[1.5倍]~240dpi(480*800)→1dp=1.5px
(這里240dpi并不一定是480*800的分辨率,同樣的屏幕密度可以得到無數(shù)種分辨率,只需要改變屏幕尺寸就可以了。相同密度下不同分辨率只是在這個范圍內(nèi)共用一套資源切圖而已。設(shè)計效果圖時不用考慮這些,可以把480*800的分辨率“當(dāng)成”是在240dpi下的設(shè)計。)
xhdpi(extra-high超高密度)[2倍]~320dpi(720*1280)→2x→1dp=2px=1pt→@2x(iPhone4/4s/5/5c/5s/6/6s~326ppi)
目前Android采用720×1280的分辨率來設(shè)計。(目前為止720*1280的市場占有率還是比較高。但是由于技術(shù)水平的不斷提升,今后一定會采用1080*1920的來設(shè)計)
(在5種輸出的分辨率MDPI,HDPI,XHDPI,XXHDPI,XXXHDPI中按中間值XHDPI設(shè)計,讓開發(fā)進(jìn)行適配。即以720px*1280px為標(biāo)準(zhǔn),72像素英寸)
xxhdpi(extra-extra-high超清密度)[3倍]~480dpi(1080*1920)→3x→1dp=3px=1pt→@3x(iPhone6/6splus~401ppi)
(于設(shè)計來說,選取一個合適的尺寸作為正常大小和中等屏幕密度,然后向下和向上做小、大、特大和低、高、超高的尺寸與密度。)
(三)單位
PX:像素=DP×(DPI/160)
例如,在一個240dpi的屏幕里,1DP等于1.5PX。
PT:指點,PT用在Apple上,DP用在Android上,本質(zhì)相同。簡而言之,它們能定義獨立于設(shè)備的像素比的大小,這會包含在不同角色(如設(shè)計師與工程師)之間的討論規(guī)則中。
DP(Dip):指獨立于設(shè)備的像素點。android開發(fā)中用于描述尺寸和間距。相當(dāng)于一種比例換算單位,它可以保證控件在不同密度的屏幕上按照這個比例單位換算顯示相同的效果。
SP:和DP、PT用途上來講不同,工作方式相同,SP表示與比例無關(guān)的像素,只是用于描述字號和行距。同時也是為了保證文字在不同密度的屏幕上顯示相同的效果。
單位決定了我們的思考方式。在設(shè)計和開發(fā)過程中,應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計Android應(yīng)用時,有的設(shè)計師喜歡把畫布設(shè)為1080×1920,有的喜歡設(shè)成720×1280。給出的界面元素尺寸就不統(tǒng)一了。Android的最小點擊區(qū)域尺寸是48x48dp,這就意味著在xhdpi的設(shè)備上,按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上,則是144x144px。
無論畫布設(shè)成多大,我們設(shè)計的是基準(zhǔn)倍率的界面樣式,而且開發(fā)人員需要的單位都是邏輯像素。所以為了保證準(zhǔn)確高效的溝通,雙方都需要以邏輯像素尺寸來描述和理解界面,無論是在標(biāo)注圖還是在日常溝通中。不要再說“底部標(biāo)簽欄的高度是96像素,我是按照xhdpi做的”這樣的話了。
(四)切圖
iOS的切圖需要切二倍圖(@2x),三倍圖(@3x),命名需要注意,如btn_xxx_xxx@2x,btn_xxx_xxx@3x
(盡量用下劃線,命名規(guī)則遵照圖片類型_分類_用途_狀態(tài).png,比如:btn_share_facebook_normal.png)
Android的切圖需要切三個尺寸的:hdpi,xhdpi,xxhdpi,但是說起來只需要提供一套切圖即可。
(Android切圖只吃_,iOS切圖則是是-和_都吃,(Web沒差)。如果你常遇到切一次圖要給多個平臺使用,那就用_底線吧)
720*1280下的切圖資源基本可以適配其他機型,有些特殊的切圖需要單獨適配的,比如icon等。
適配480*800機型=720*1280下的切圖大小*0.75
適配1080*1920機型=720*1280下的切圖大小*1.5
(適配1080*1920的時候,不要單獨硬生生的將圖標(biāo)放大1.5倍。這就要求在720*1280下畫圖的時候,盡量采用矢量圖形來畫圖。比如在720*1280下圖圖標(biāo)是48px*48px的時候,適配1080*1920時候,48px*1.5=72px。把矢量圖形調(diào)整為72px即可。把切圖資源給開發(fā),開發(fā)會把切圖單獨放到xxhdpi的文件目錄下,就會自動適配1080*1920的了。同樣要是適配480*800的,48px*0.75=32px,把切圖給開發(fā),開發(fā)會把切圖資源單獨放到hdpi的目錄下,就會自動適配的。720*1280下的切圖資源,開發(fā)是放到xhdpi的目錄下的。)
掃一掃
獲取更多福利
獵學(xué)網(wǎng)企業(yè)微信
獵學(xué)網(wǎng)訂閱號
獵學(xué)網(wǎng)服務(wù)號