设计师如何理解dpi 、ppi、dp、pt、sp这些单位

更多学习资源请关注微信公众号“黑马程序员武汉中心”

（本文档由武汉校区教研部薛老师提供）

dpi、ppi、dp、pt、sp 等等这些个单位我们天天接触，但是真正理解这些单位的设计师恐怕并不太多，毕竟真的有点儿复杂，别说学美术出身的设计师了，很多程序员都搞不太懂。但是作为一名 UI/UX/PD/etc. 设计师，因为不了解这些知识而闹笑话的事情几乎每天都在发生，不知道这些甚至连自己的做设计的电脑屏幕都不了解你觉得真的好吗？

DPI 和 PPI 是什么？

<font]是英文 Dots（点） PerInch 的缩写，在最早的时候，这个单位是用来描述打印机的性能的，意思就是这台打印机最多能用多少个墨点来打印一寸的内容。目前市面上常见的家用黑白打印机普遍都去到了 600 * 600dpi， 而家用彩色照片打印机则能去到5760 * 1440 dpi。DPI 越高，每英寸内的墨点就越多，你打印出来的东西就会越清晰锐利。

<font]是英文 Pixels Per Inch 的缩写，意味每寸能容纳多少颗像素<font]密度。我们上面提到的印刷物以无数多的墨点来构成图像，而屏幕同样也是以一定数量的发光点来构成图像。见过街上那些走红字的 LED 显示屏么？上面的那一颗颗的 LED 灯就是这块屏幕的发光点，我们使用的 MacBook 的 Retina 显示屏的原理也跟这些看起来十分粗糙的走红字显示屏是一样的，只不过 Retina 显示屏的发光点密度非常高，人眼已经看不出来颗粒感而已。对于屏幕来说PPI 是用于描述每英寸发光点数量的，它表明了一块屏幕发光点密度的高低，这些发光点我们更常称之为像素，一块屏幕宽高有几寸是在生产的时候就被定好的，而宽高各能容纳下多少颗像素，也是在生产的时候就被定好的，所以我们所说的 PPI 可以说是一个物理单位。

简单举个例子吧，我们手头上的 iPhone(6~7) 宽为 2.3 英寸，高为 4.1 英寸，根据勾股定理得出这块屏幕的尺寸（屏幕对角线距离）是 4.7 英寸。同时，iPhone(6~7)屏幕宽（每行）有 750 个像素（发光点），高（每竖）有 1334 颗像素（发光点）。

分辨率、像素和屏幕尺寸

<font]说的是像素密度，而分辨率说的是块屏幕的像素尺寸，譬如说 1334*750 就是 iPhone（6~7）的分辨率，说iPhone（6~7）的分辨率是 326 是错误的表述，326 是它的像素密度，单位是 PPI。询问别人一粒像素有多大是一个非常鸡贼的问题（小心面试遇到这样的题），虽然我们说像素是构成屏幕的发光的点，是物理的，但是像素在脱离了屏幕尺寸之后是没有大小可言的，你可以将 1920 * 1080 颗像素放到一台 40 寸的小米电视机里面，也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去，那么对于 40 寸的电视而言，每个像素颗粒当然会大于 5.5 寸的手机的像素。

所以光看屏幕的分辨率对于设计师来说是不具备多少实际意义的，通过分辨率计算得出的像素密度（PPI）才是设计师要关心的问题，我们通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度的。

再次使用 iPhone（6~7）作为例子。我们知道该屏幕的横向物理尺寸为 2.3 英寸 ，且横向具有 750 颗像素，根据下面的公式，我们能够算出 iPhone（6~7）的屏幕是 326PPI，意为每寸存在 326 颗像素。

其实不论我们怎么除，计算得出来的像素密度（PPI）都会是这个数，宽存在像素除以宽物理长度，高存在像素除以高物理长度，得数都接近于 326。

对设计会造成什么样的影响

一块 326*326px 的正方形色块在一台 iPhone 7 上面展现出来的物理尺寸将会会是 1*1 英寸。这是因为该屏幕每英寸能容纳 326 颗像素，所以 326px 凑在一起刚好就是 1 英寸。假设我们能将 iPhone 7 手机屏幕 PPI 调低 50% 变为 163，色块还是 326*326px,这个色块的物理尺寸会变成 2*2 英寸，同样多的像素，看起来却大了一倍。

因为我们的色块是 326*326px 大小的，而这台 163PPI 的假 iPhone 7 每英寸上面只有 163 颗像素，为了要展示 326*326px 的色块，它就要多用 1 英寸的屏幕，所以这个色块在屏幕上面看起来就“长大了”一倍。

总结：

• 像素本身没有尺寸，你可以将 1920 *1080 颗像素放到一台 40 寸的小米电视机里面，也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去。
• 只有跟屏幕尺寸一起的时候，谈论像素才有意义，因为我们能够算出该屏幕的 PPI。
• DPI 跟 PPI 虽然概念相近，但是我奉劝你还是不要拿着他们俩混用，虽然可能好多人告诉你这样没啥关系。
  

在设计过程中，我们并不见得真的要去计算各种东西的实际尺寸，但是对于原理的把握能让你心里有个底，或许就是我们常说的「意识」。别以为每个人的屏幕上显示的都会跟你屏幕上显示的是一样的。

谢谢分享~

谢谢舞酱~{:8_468:}

学习可乐