作为一个新人,在做移动端UI设计的时候,往往对px,pt,ppi,dpi,dp,sp不是十分清楚,一倍图二倍图三倍图如何换算,导致切图时不知如何导出,本人在学习过程中整理汇总了一些相关知识,并尽量用最简单得语言解释。设计师在设计时可以进行参考。(如发现文中出现错误,请联系我更正)。
名词解释:
点pt: point,印刷行业常用单位,等于1/72英寸
像素px:pixel,电子屏幕上影像成像的基本单位。
长度单位dp: dip,Density-independent pixel, 是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度
字体大小sp: scale-independent pixel,安卓开发用的字体大小单位。
点密度dpi: dot per inch,每英寸多少点,值越高图片越细腻。属于谷歌旗下第一款Android设备为160dpi,规定一倍图为160dpi。
像素密度ppi:pixel per inch,每英寸像素数,值越高屏幕越细腻。
面积相等的区域里,塞进了多少个像素,就代表像素密度有多大,塞进的像素越多即像素密度越大,肉眼所见细腻。如图1个方块代表1个像素,同一个区域里,100X100px的区域塞进去像素更多,显示时也会更清晰细腻。
3*3px计算公式及关系:
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,肉眼就已经分辨不出其区别。
以iphone3GS(320*480px/3.5 inch)为例 ,为ios1倍图
接下来,我将用部分主流机型举例:由得,
iPhone 8 (750*1334px/4.7inch)326163*2 为2倍图
iPhone xr (828*1792px/6.1inch)319163*2 为2倍图
iPhone xs (1125*2346/5.8inch)462163*3 为3倍图
用这个公式,就可以大致判断每个机型应该是几倍图。其他就不在详细计算了,以1倍的mdpi为基准,像素密度更高或者更低的设备,只需乘以相应的倍率,就能得到与基准倍率相近的显示效果。上图:
px和dp: 1dp=(屏幕ppi/ 160)px,即1dp定义为屏幕密度值为160ppi时的1px
以WVGA屏为例,该屏幕为480px*800px,按3.8寸屏算,点密度 √ (480^2 + 800^2) / 3.8 = 245,约等于240,对应于hdpi屏幕,所以该屏幕1dp=1.5px。安卓端屏幕大小各不相同,根据其像素密度,分为以下几种规格:
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:都是安卓的开发单位,dp是长度单位,sp是字体单位,可根据用户字体大小进行缩放,一般认为1dp=1sp。
Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等,当文字尺寸是“正常”时1sp=1dp,而当文字尺寸是“大”或“超大”时,1sp>1dp。
总结:
1.在画布分辨率=72ppi时,1pt=1px
2.ppi=dpi,计算公式(√ (屏幕横向像素点x^2 + 屏幕纵向像素点y^2)/屏幕尺寸inch)
3. 1dp=(屏幕ppi/ 160)px
4.1dp=1sp
网友评论