前段时间看了一本关于移动应用UI设计的书,但看完以后对设计时用到的那些比较抽象的单位间的关系和概念仍是一脸懵逼,于是又查了许多相关资料和大神的经验贴才逐渐理清楚了一点,在此根据自己的理解对这些知识做了详细的说明,希望能够与初学的童鞋相互学习交流,也欢迎经验丰富的老司机的指正,潜心学习中。
英寸(Inch):手机屏幕的大小一般以英寸作为计量单位,1英寸=2.54厘米。以屏幕斜对角线的长度为准,则可根据屏幕的宽高利用勾股定理计算出屏幕的大小,比如屏幕宽为a厘米,高为b厘米,那么当前屏幕的尺寸=√a²+b²,再除以2.54就可以换算成英寸,如图。
像素(Pixel):简称px,我们在电脑或手机等电子设备中显示屏幕中看到的图像就是由像素作为基本单位组成的,换句话说你在屏幕中看到的图像都是由一个个小点组成的,但这些小点并没有物理意义上固定的大小,而是作为一种表示组成图像的基本单位的抽象概念。为了便于理解我们通常把这种抽象单位看作是小点或是小方块。
(像素构成了屏幕中的图像)
分辨率:相信大家经常会听到说某某手机的分辨率是750x1334、1080x1920等等。这里说的分辨率实际上是指屏幕宽度像素数乘以屏幕高度像素数,单位为px(像素)。我们也常常听到分辨率越高屏幕显示的图像越清晰的说法,但事实上这种说法是建立在固定的屏幕尺寸上的。这里以下图为例。
(iPhone 3GS与iPhone 4s的屏幕尺寸相同,分辨率分别为320x480、640x960,屏宽与屏高像素数都为2倍关系。在如上图为例的相同物理大小的屏幕中,iPhone 3GS填充了1个像素,iPhone 4s填充了2x2个像素,也就是说原本用一个像素表现的细节现在用2x2个像素表现,因此显示的图像会更加细腻。)
像素密度:即每英寸屏幕由多少像素点组成,此英寸与手机屏幕的尺寸一样,也是对角线的长度,因此像素密度可以理解为是在一个对角线长度为一英寸的矩形内所包含的像素数。对于手机来说,清晰度是由分辨率和尺寸共同决定的,但能准确衡量屏幕清晰度的是像素密度(根据下面的像素密度计算公式能够看出这一点)。因为手机屏幕的尺寸是固定的,那么像素密度越高意味着每英寸物理屏幕中填充的像素点数也越多,画面看起来也就越细腻。据此我们也就明白了为什么说像素没有固定的大小,只是抽象的概念。
iOS的单位一般为PPI(Pixel Per Inch,即每英寸像素点数)。利用物理分辨率和屏幕尺寸可以计算屏幕像素密度。公式:ppi=√屏幕横向像素点数²+屏幕纵向像素点数²/屏幕尺寸。
Android一般以DPI(Dot Per Inch,即每英寸点数)为单位。实际在传统意义上(纸质媒介中)DPI是用来表示打印精度的,例如设置打印分辨率为96DPI,则表示打印出来的东西每英寸会有96个点,每英寸点数越多,图片看起来会越细腻。后来DPI的概念被用在手机屏幕上时,则表示手机屏幕上每英寸显示的像素点数。从这个意义上来说PPI与DPI表示同一概念,只是在设计开发时被分别用在iOS和Android。
常见iOS与Android手机屏幕像素密度:
iOS:相较于Android来说,iOS的屏幕规格较少,因此逻辑分辨率也是固定的。而Android因为屏幕分辨率种类过多,理论上有很多种逻辑分辨率。
Android:Android的屏幕碎片化严重,尺寸实在是多,因此划分了几个像素密度区间,MDPI、HDPI、XHDPI、XXHDPI、XXXHDPI,也就是说在某一像素密度区间下,可能有多种屏幕分辨率和像素密度。并给不同范围分辨率的设备定义了不同的像素倍率,以保证后续开发出的产品在不同分辨率上的显示效果相近。
逻辑分辨率与像素倍率:我们上面谈到的分辨率是指物理分辨率,即硬件支持的分辨率,也就是说屏幕本身固定的分辨率,物理分辨率除以固定的像素倍率可以得到逻辑分辨率。逻辑分辨率是指软件可以达到的分辨率,也就是说你原本设计的产品UI界面的尺寸要跟随逻辑分辨率的大小,大于手机的逻辑分辨率会导致显示不全,小于逻辑分辨率太多也会造成显示效果的比例不好和对屏幕的浪费。至于逻辑像素存在的意义在之后的说明中大家自然能够体会到。
DIP:称为设备独立像素(可译为设备独立像素device independent pixels、密度独立像素density independent pixels,简称dp,注意区别于DPI),一般是用于Android系统开发的一种抽象像素尺寸标注单位(iOS开发以pt为单位),也被称为逻辑像素,也就是程序员在开发中用到的尺寸标注单位。逻辑像素是一个相对值,在不同屏幕密度的手机上,一个逻辑像素会由不同个数的物理像素表示。
dp与px的关系:
公式:px=dp*(dpi/160)。若以dp为尺寸标注单位,Android系统中规定以160DPI(像素密度)为基准,即为在屏幕密度为160DPI时,1dp=1px;屏幕密度为240DPI时,1dp=1.5px;屏幕密度为320DPI时,1dp=2px,以此类推。
也可以用屏幕的倍率计算物理像素px,px=dp*倍率。例如在倍率为@1x的屏幕下,1dp=1px;在倍率为@1.5的屏幕下,1dp=1.5px,以此类推。
至于为什么要以逻辑像素为设计或是开发中的单位是为了更好的适配不同密度的屏幕,保证用户界面元素的物理尺寸(显示比例合理),不至于出现在低密度屏幕上看起来较大,高密度屏幕上看起来较小的问题。
例:若以px为像素单位,如画一条320px的横线,在320x480的手机屏幕上则占满了全屏宽度,在480x800的手机屏幕上只能显示为2/3的屏幕宽度。若以dp表示为单位,在320x480的屏幕上,160dp=160px,一个逻辑像素的宽由一个物理像素的宽表示;在480x800的屏幕上,160dp=240px,一个逻辑像素的宽由1.5个物理像素的宽表示,160dp的横线在上述两种屏幕中都占屏宽的1/2,这就意味着相同尺寸不同像素密度的屏幕显示的图像效果看上去会相对一致,因此也可说真正决定显示效果的是逻辑像素。
pt:point,简称pt,原本是用在印刷中的,1pt=1/72英寸。iOS开发以pt为单位,在开发中表示的是独立像素,是绝对长度,不随屏幕密度的变化而变化。同样表示逻辑像素,与dp是一回事。只不过分别用在Android与iOS的开发中。
pt与px的关系:
若以pt为标注单位,在iOS系统中,规定在iPhone 3gs(163ppi)为基准,1pt=1px;在326ppi的屏幕上,1pt=2px;在401ppi的屏幕下,1pt=3px。也可以看屏幕的倍率计算物理像素px。
对于上述基础知识的理解是参与设计和适配的必要不充分条件。以上是我在查阅各种资料后的比较详细(啰嗦)的理解说明。当然还有很多需要我们去深入学习的相关知识,就像成甲在《好好学习》这本书里谈到的临界知识,对于接近底层原理的知识的掌握程度会直接影响到我们在具体情况下的实操,因此绝不可以忽视这些最基础的内容。