UI | 详解pxptdpsp等单位

html-css013

UI | 详解pxptdpsp等单位,第1张

前言:作为一名UI设计师,在工作中不可避免会遇到px/pt/dp等基础单位,这些并不是一成不变的,场景的不同决定了其所承载的职能也不同,本文将根据查阅到的资料加上作者的理解对这些单位做出较为浅显易懂的解释,百密之中难免一疏,如有解释的不恰当的地方,望指正。

px : 像素,由三个发光管RGB组成的最小基本单元。

常见场景:视觉稿单位/分辨率单位/css常用单位(网页、web应用等)。

pt :点,绝对长度单位。密度无关像素,是IOS开发的基本单位。

常见场景:印刷行业常用单位/IOS开发基本单位/PS中的字体单位。

总结 :虽然印刷行业单位与IOS开发基本单位都叫pt,但是两者无论是概念还是数值都不尽相同,此pt非彼pt。

思考 :为什么要单独设定pt与dp为开发单位,而不是用px呢?

PPI:(pixels per inch)每英寸含有的像素值,又称像素密度。

使用场景:屏幕。

DPI:(dots perinch)每英寸含有的点数。又称点密度。

使用场景:印刷设备/屏幕。

我们知道,一张图片的真正大小是由分辨率所决定的。图片的分辨率决定了所承载的细节内容。那么DPI有什么用呢?

屏幕场景:这里要提到一个“设备的最大解析能力”。有72DPI的设备,也有300DPI的设备。这里的72和300决定了设备的最大解析能力。在72DPI屏幕上我们只能看到最高72DPI的图片。如果将一张300DPI的图片用72DPI的设备进行显示,会怎么样呢?设备会进行“栅格处理”。

栅格处理就是在图片尺寸不变的情况下,对图片DPI进行处理,图片的信息量会受到影响。一张300DPI的图片明显超过了72DPI屏幕的最大解析能力,所以屏幕会将其栅格成72DPI的图片。UI设计师在导出视觉稿1倍图时,在电脑屏幕(96DPI)上看好像没有问题,但是放在手机(300PPI)上预览就会显得模糊了。这是因为手机屏幕将其栅格成300DPI的图片,其缺少很多细节,所以就显得模糊了。

打印机场景:DPI还有一个重要作用就是作为电子屏幕与打印机沟通的桥梁。同等分辨率的图片,一张72DPI,一张300DPI,在显示上可能不会有太大的差别,但是打印出来差别很大。例如72DPI的图片用300DPI的设备打印出来就是模糊的。

物理分辨率/逻辑分辨率 :在日常生活中我们所提到的手机分辨率指的就是物理分辨率。如上图中的640*960、1242*2208等,由于尺寸规格不一,为了方便设计师做视觉稿,诞生了逻辑分辨率。物理分辨率除以缩放因子进行缩放得到逻辑分辨率,逻辑分辨率之间差别不大,例如用320*480的尺寸做的视觉稿同样可以适配320*568。

(结合第一部分:以px为单位的是物理分辨率,以pt为单位的是逻辑分辨率)

结尾:以上就是作者对于用户界面设计中经常会遇到的一些单位做出的归纳总结。个人总结难免有疏忽以及理解不到位的地方,不足之处望指正。谢谢!

End

iOS开发过程中使用pt(point)。1pt代表1个逻辑像素。

如果是1x屏幕(最老的非视网膜苹果设备,已经慢慢淘汰了)则1pt=1px;

如果是2x屏幕(从iPhone4到iPhone6之间所有的iPhone,及iPad3至今所有的iPad)则1pt=2px;

如果是3x屏幕(iPhone6 Plus及后面可能出现的更新的设备)则1pt=3px。