UI | 详解px/pt/dp/sp等单位

UI笔记(一)

---

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

---

01-PX (pixel)   

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

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

1.  视觉稿单位。UI设计师设计界面，无论设计工具是PS、sketch还是XD，其基本单位都是px。当我们完成视觉稿交付给开发，开发会根据场景进行单位换算。

2.  分辨率单位。我们经常会看到”xx手机屏幕的分辨率1920*1080”这里1920*1080的单位即是px。

3.  css常用单位。web端开发html+css直接采用px为基本单位。

---

02-PT(point)

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

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

1. 印刷行业常见单位。查字典可知，pt翻译过来并不是“点”，而是“磅”。在印刷行业，pt是一个绝对单位，是可用标准测量工具测出尺寸的。1pt=1/72(inch)。

2. IOS开发基本单位。UI设计师与平面设计师不同，由于市面上存在各种各样屏幕尺寸的手机，分辨率碎片化，为了能够一稿适配，苹果官方设定了pt为IOS基本单位。在这里，它代表着密度无关像素(独立像素)(逻辑像素)，意味着它不会随着屏幕密度(PPI)的改变而改变。它也是一个绝对尺寸，我们可以用iphone3GS(1px=1px)的尺寸与屏幕密度(PPI)得出1pt=1/163(inch)。

3. PS中的字体单位。假如PS设定72PPI的背景，此时的pt约等同于场景1的pt，PS默认使用1pt=1/72(inch)的标准。为什么PS中的pt和IOS开发单位含义不同呢？因为PS中的字体大小单位pt是服务于印刷行业的(PS更偏向于平面设计)。所以如果用PS设计视觉稿，需要将字体大小单位调为px方便开发。

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

---

03-dp/sp   

dp/sp:(device independent pixels)密度无关像素，是Android开发的基本单位。

使用场景：移动端开发。

dp：Google设定dp为Android开发基本单位，其效果与IOS中的pt类似，同样是为了一稿适配不同的移动端设备而创定的。1dp=1/160(inch)。

sp：Android开发中文字的基本单位。

dp和sp的区别：

 32dp的文字与32sp的文字在默认显示上并没有区别。sp最重要的作用是可以跟随系统文字一起调整(例如系统文字从中字号变成大字号，用sp为单位的文字会变成大字号，但以dp为单位的文字则不会改变)。对于一些视觉性的文字，需要固定其大小时，使用dp单位。其他情况，使用sp为单位。

dp和pt的异同点：

1.    都是屏幕密度无关像素，为了适配不同的设备尺寸、不同的分辨率而设计出来的单位。

2.    使用场景不同，一个是IOS开发单位，一个是Android开发单位。

3.    绝对尺寸不同。1pt=1/163(inch)，1dp=1/160(inch)。

思考：为什么要单独设定pt与dp为开发单位，而不是用px呢？

---

04-PPI/DPI

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

使用场景：屏幕。

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

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

PPI场景解读：

屏幕：我们常用PPI来衡量一块屏幕细腻程度。PPI越高，屏幕越精细，能显示的细节就越多，给人的视觉感受也更好。我们以iPhone3GS和iPhone4为例子，屏幕尺寸同样是3.5英寸，其物理分辨率却并不相同。iPhone4的PPI是iPhone3GS的两倍。

问题：为什么要单独设定pt与dp为开发单位，而不是用px呢？

可以得出：像素(px)是一个相对单位，如果以像素为单位开发移动端，在iPhone4上一个按钮尺寸40px刚刚好，放在iPhone3GS中40px就过大了。为了适配各种分辨率的屏幕，设计了绝对单位pt/dp，不会随着屏幕密度的改变而忽大忽小。

例：一个10cm*2cm的长方形，是一个绝对尺寸，可以被标准测量工具测出尺寸的，这10cm*2cm的长方形里包含了多少像素都与其无关，不会随着屏幕密度的改变而改变。

DPI场景解读：

印刷设备：在印刷中，是以DPI为参考印刷，点(pt)是最小单位。例：打印一张分辨率为1920*1080且DPI为72的图片。

屏幕：在屏幕设备中，并没有对DPI和PPI做出详细区分。我们常说电脑屏幕的DPI为96，这里的DPI和PPI相同，指的是像素密度。但是DPI就是PPI吗？不尽然，这需要参考上下文语境。DPI的最小单位是点，PPI的最小单位是像素，当一个点等于一个像素的时候，我们可以说DPI与PPI相同。但是在一些特殊屏幕如Mac retina(我们常说的2k屏、4k屏)，一个像素等于很多个点，这时候DPI就不等同于PPI了。例：一个150ppi的图片在600dpi的设备上显示，每个pixel有16个dot。

PS：一般电脑屏幕用DPI，手机屏幕用PPI。

场景扩展：“栅格处理”

我们知道，一张图片的真正大小是由分辨率所决定的。图片的分辨率决定了所承载的细节内容。那么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