作為一個新人,在做移動端UI設(shè)計的時候,往往對px,pt,ppi,dpi,dp,sp不是十分清楚,一倍圖二倍圖三倍圖如何換算,導(dǎo)致切圖時不知如何導(dǎo)出,本人在學習過程中整理匯總了一些相關(guān)知識,并盡量用最簡單得語言解釋。設(shè)計師在設(shè)計時可以進行參考。(如發(fā)現(xiàn)文中出現(xiàn)錯誤,請聯(lián)系我更正)。
名詞解釋:
????點pt: point,印刷行業(yè)常用單位,等于1/72英寸
? ??像素px:pixel,電子屏幕上影像成像的基本單位。
? ??長度單位dp: dip,Density-independent pixel, 是安卓開發(fā)用的長度單位,1dp表示在屏幕像素點密度為160ppi時1px長度
? ? 字體大小sp: scale-independent pixel,安卓開發(fā)用的字體大小單位。
? ? 點密度dpi:?dot per inch,每英寸多少點,值越高圖片越細膩。屬于谷歌旗下第一款A(yù)ndroid設(shè)備為160dpi,規(guī)定一倍圖為160dpi。???
? ??像素密度ppi:pixel per inch,每英寸像素數(shù),值越高屏幕越細膩。
面積相等的區(qū)域里,塞進了多少個像素,就代表像素密度有多大,塞進的像素越多即像素密度越大,肉眼所見細膩。如圖1個方塊代表1個像素,同一個區(qū)域里,100X100px的區(qū)域塞進去像素更多,顯示時也會更清晰細膩。


計算公式及關(guān)系:
px與pt:1pt= (DPI / 72) px
即ps中,當畫布分辨率為72時,pt=1px; 當新建畫布分辨率為72*2=144ppi時,1pt=2px
dpi與ppi:安卓1倍圖(163dpi)=ios1倍圖(160ppi),dpi=ppi
?注意:當ppi計算出來>=300,肉眼就已經(jīng)分辨不出其區(qū)別。
?以iphone3GS(320*480px/3.5 inch)為例 ,為ios1倍圖
接下來,我將用部分主流機型舉例:由得,
iPhone 8 (750*1334px/4.7inch)326
163*2?????為2倍圖
iPhone xr (828*1792px/6.1inch)319
163*2????為2倍圖
iPhone xs (1125*2346/5.8inch)462
163*3?????為3倍圖
用這個公式,就可以大致判斷每個機型應(yīng)該是幾倍圖。其他就不在詳細計算了,以1倍的mdpi為基準,像素密度更高或者更低的設(shè)備,只需乘以相應(yīng)的倍率,就能得到與基準倍率相近的顯示效果。上圖:

px和dp:?1dp=(屏幕ppi/ 160)px,即1dp定義為屏幕密度值為160ppi時的1px
以WVGA屏為例,該屏幕為480px*800px,按3.8寸屏算,點密度 √ (480^2 + 800^2) / 3.8 = 245,約等于240,對應(yīng)于hdpi屏幕,所以該屏幕1dp=1.5px。安卓端屏幕大小各不相同,根據(jù)其像素密度,分為以下幾種規(guī)格:

1dp定義為屏幕密度值為160ppi時的1px,即在mdpi時,1dp = 1px。 以mdpi為標準,這些屏幕的密度值比為:ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即,在xhdpi的密度下,1dp=2px;在hdpi情況下,1dp=1.5px。其他類推。
dp和sp:都是安卓的開發(fā)單位,dp是長度單位,sp是字體單位,可根據(jù)用戶字體大小進行縮放,一般認為1dp=1sp。
Android系統(tǒng)允許用戶自定義文字尺寸大小(小、正常、大、超大等等,當文字尺寸是“正?!睍r1sp=1dp,而當文字尺寸是“大”或“超大”時,1sp>1dp。
總結(jié):
1.在畫布分辨率=72ppi時,1pt=1px
2.ppi=dpi,計算公式(√ (屏幕橫向像素點x^2 + 屏幕縱向像素點y^2)/屏幕尺寸inch)
3.?1dp=(屏幕ppi/ 160)px
4.1dp=1sp