由 dawei 副标题#e#
我们自称 UI/UX/PD/etc. 设计师，但是我们对自己手头上设备的屏幕去一无所知 — 沃兹基·硕德
什么是 DPI，什么又是 PPI ？
dpi、ppi、dp、pt、sp 等等这些个单位我们天天接触，但是真正理解这些单位的设计师恐怕并不太多，毕竟真的有点儿复杂，别说学美术出身的设计师了，很多程序员都搞不太懂。但是作为一名 UI/UX/PD/etc. 设计师，因为不了解这些知识而闹笑话的事情几乎每天都在发生，不知道这些甚至连自己的做设计的电脑屏幕都不了解你觉得真的好吗？
本次分享将在尽量不涉及数学，尽量用最简单的语言，尽量使用最贴近生活的例子来为在座各位患者朋友将心头这些个疑虑全部消除。
DPI 是英文 Dots（点） Per Inch 的缩写，在最早的时候，这个单位是用来描述打印机的性能的，意思就是这台打印机最多能用多少个墨点来打印一寸的内容。目前市面上常见的家用黑白打印机普遍都去到了 600*600 dpi 而家用彩色照片打印机则能去到 5760*1440 dpi。DPI 越高，每英寸内的墨点就越多，你打印出来的东西就会越清晰锐利。
PPI 是英文 Pixels Per Inch 的缩写，意味每寸能容纳多少颗像素，用于描述屏幕的像素密度。我们上面提到的印刷物以无数多的墨点来构成图像，而屏幕同样也是以一定数量的发光点来构成图像。见过街上那些走红字的 LED 显示屏么？上面的那一颗颗的 LED 灯就是这块屏幕的发光点，我们使用的 MacBook 的 Retina 显示屏的原理也跟这些看起来十分粗糙的走红字显示屏是一样的，只不过 Retina 显示屏的发光点密度非常高，人眼已经看不出来颗粒感而已。对于屏幕来说 PPI 是用于描述每英寸发光点数量的，它表明了一块屏幕发光点密度的高低，这些发光点我们更常称之为像素，一块屏幕宽高有几寸是在生产的时候就被定好的，而宽高各能容纳下多少颗像素，也是在生产的时候就被定好的，所以我们所说的 PPI 可以说是一个物理单位。
简单举个例子吧，我们手头上的 iPhone(6~7) 宽为 2.3 英寸，高为 4.1 英寸，**根据勾股定理得出这块屏幕的尺寸（屏幕对角线距离）是 4.7 英寸。**同时，iPhone(6~7)屏幕宽（每行）有 750 个像素（发光点），高（每竖）有 1334 个像素（发光点）。
分辨率、像素和屏幕尺寸
PPI 说的是像素密度，而分辨率说的是块屏幕的像素尺寸，譬如说 1334*750 就是 iPhone（6~7）的分辨率，说 iPhone（6~7）的分辨率是 326 是错误的表述，326 是它的像素密度，单位是 PPI。
询问别人一粒像素有多大是一个非常鸡贼的问题（小心面试遇到这样的题），虽然我们说像素是构成屏幕的发光的点，是物理的，但是像素在脱离了屏幕尺寸之后是没有大小可言的，你可以将 1920px * 1080px 颗像素放到一台 40 寸的小米电视机里面，也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去，那么对于 40 寸的电视而言，每个像素颗粒当然会大于 5.5 寸的手机的像素。所以光看屏幕像素尺寸对于设计师来说是不具备多少实际意义的，通过分辨率计算得出的像素密度（PPI）才是我们设计师要关心的问题，我们通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度的。
再次使用 iPhone（6~7）作为例子。我们知道该屏幕的横向物理尺寸为 2.3 英寸 ，且横向具有 750 颗像素，根据下面的公式，我们能够算出 iPhone（6~7）的屏幕是 326 PPI，意为每寸存在 326 颗像素。
其实不论我们怎么除，计算得出来的像素密度（PPI）都会是这个数，宽存在像素除以宽物理长度，高存在像素除以高物理长度，得数都接近于 326。
对设计会造成什么样的影响
一块 326*326px 的正方形色块在一台 iPhone 7 上面展现出来的物理尺寸将会会是 1*1 英寸。这是因为该屏幕每英寸能容纳 326 颗像素，所以 326px 凑在一起刚好就是 1 英寸。假设我们能将 iPhone 7 手机屏幕 PPI 调低 50% 变为 163，那么这个色块的物理尺寸就会变成 2*2 英寸，同样多的像素，看起来却大了一倍。咦！这是为啥？
因为我们的色块是 326*326px 大小的，而这台 163PPI 的假 iPhone 7 每英寸上面只有 163 颗像素，为了要展示 326*326px 的色块，它就要多用 1 英寸的屏幕，所以这个色块在屏幕上面看起来就“长大了”一倍。
小结像素本身没有尺寸，你可以将1920px * 1080px 颗像素放到一台 40 寸的小米电视机里面，也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去。只有跟屏幕尺寸一起的时候，谈论像素才有意义，因为我们能够算出该屏幕的 PPI。DPI 跟 PPI 虽然概念相近，但是我奉劝你还是不要拿着他们俩混用，虽然可能好多人告诉你这样没啥关系。在设计过程中，我们并不见得真的要去计算各种东西的实际尺寸，但是对于原理的把握能让你心里有个低，或许就是我们常说的“意识”。别以为每个人的屏幕上显示的都会跟你屏幕上显示的是一样的。什么是 dp、pt、sp？
DP 或者说 DiP 是 Device independent Pixel 的缩写，而 PT 是 Point 的缩写，DP 用于安卓系统开发，而 PT 用于 iOS 系统开发。但从根本来讲它们都是一个意思。
上一篇文章我们仔细地对屏幕最基础的几个属性——分辨率、PPI、和物理尺寸，似乎我们只要知道了这几个东西那我们的设计就怎么样也不会错。但是聪明的童鞋可能发现了一些不对，我们不可能对每一块屏幕都进行了解，然后专门针对这块屏幕再进行一次设计吧？世界上那么多屏幕，那一个界面我要画多少个稿啊！！
没错，假如真是这样的话，那么面对不同的屏幕，不仅要从新设计，连程序都可能要重新写一回，这显然是不可能的事情。不过这个问题不仅我们想到了，那些计算机、智能手机的生产商也想到了，为了让广大程序员和设计师朋友能够更加容易地解决适配问题，让更多的开发者来来为他们开发软件，他们使用了一种很聪明的方法，同时这也是为什么我们又多了 DP、PT、SP 等那么多“杂七杂八”的单位的原因。
解析这几个单位的必要，可能要从开发的角度来讲会比较清晰一点。
#p#副标题#e#
有些小伙伴可能会留意到，无论是 iPhone 还是 iPad,好几代了屏幕的参数好像没怎么变化过，PPI 不是越高越好吗？苹果是好久没升级自己屏幕，一块祖传屏幕忽悠消费者？不是的，因为人眼对于像素密度的要求会根据人眼距离屏幕的距离变化而变化，RMBP 的 PPI 是 109，被手机完爆，但是我们平时用起来还是觉得非常清晰锐利，因为我们用电脑的时候眼睛距离屏幕会比手机远，不需要那么高的像素密度也可以消除颗粒感。**相应的使用距离配制相应的 PPI，所谓够用就好。**过高的 PPI 并不会带来多大的画质提升，反而会导致一连串不好的后果，加大处理器渲染负担，加大电池负担，不利于设计开发人员设计，屏幕的制造成本也会增加。早年安卓阵营出现了一些 2K 屏甚至 4K 屏的产品，现已销声匿迹，消费者根本需要这么高分辨率的屏幕。苹果在相应的设备（无论从电脑到智能手机再到智能手表）上维持一个稳定的 PPI 是很明智的选择，稳定的屏幕参数非常非常有助于设计开发人员工作的开展，这种稳定性对开发者造成的便利恐怕超过了所有人的想象的。
标注与切图——以 Chrome 浏览器为例
在苹果尚未推出 Plus 机型的那段时间里设计师们一般都只需要输出一倍图和二倍图。一倍图针对的是没有配备 retina 显示屏的 iPhone 而二倍图针对的是配备 retina 显示屏的 iPhone。Plus 机型推出后就开始要输出三倍图了，切不配备 retina 显示屏的 iPhone 已经过于老旧，不再需要考虑。一般我们会在文件名后面加上 @2X 或 @3X 的后缀以标明文件的尺寸，就如上图所示，这是 iOS 的规范，还是值得准守一波的。
至于 iPad 版本，规则也差不太多，只是 iPad 不需要三倍切图。
小结@2X，@3X，相应的素材请务必加上相应的后缀。针对目前市面上的的屏幕尺寸而言，一倍图已经没有必要再输出了，而二倍、三倍图则必须要输出。二倍三倍图的文件名必须是一样的，不然会被开发砍死。以一倍画稿做设计，以一倍画稿输出标注文档，最后输出二倍、三倍图。如无特殊情况，请确保文件都是 .png 格式。一倍画稿输出的标注文档的单位应该为 pt，而不是 px。Android 的切图与标注MDPI、HDPI、 XHDPI、 XXHDPI 以及 XXXHDPI
大家都知道 Android 是一个开源系统，不像 iOS 只有苹果自家的机器能跑，屏幕尺寸一直以来也比较稳定，而运行 Android 系统的设备的屏幕却各式各样非常跳脱，这也就是以往大家经常说 Android 设备碎片化严重的原因之一。不过这种碎片化严重的情况来到今天已经改善了非常之多，纵使 Google 对于 Andorid 开源的策略重来没有变过，但 OEM 们开始不约而同地开始使用不那么“奇形怪状”的屏幕了，且某些低分辨率的机型随着时日变迁也已经被淘汰殆尽了。倒是 iOS 在推出 Plus 机型之后 iOS 屏幕碎片化的问题也开始凸显起来了，个人认为目前两大平台的屏幕碎片化问题都存在且大家都差不多，大家在对 Android 产品进行设计的时候大可不必那么担心。
与 iOS 相似的是，设计师们同样也是需要输出不同倍率的切图，只不过需要输出的倍率更多罢了。程序员将会把所有不同倍率的切图都装在同一个安装包里面，在运行的时候系统会根据屏幕的分辨率来自动选用正确倍率的切图。
#p#分页标题#e#
坦率地讲，假如我们要纠结到每块屏幕的逻辑分辨率的话，那么Android 阵营的碎片化真的是无比严重，但是我们知道，只要逻辑分辨率差的不太远的话，我们能够用同一个稿来进行设计、输出切图，其中的误差必不可能避免但将会在一个可接受的范围之内。对于Android 产品来说，一般我们都使用 360*640px 作为一倍稿进行设计。
#p#副标题#e#
目前为止还需要我们输出切图的分辨率有五种：代表 1 倍的 MDPI, 1.5 倍的 hdpi, 2 倍的 xhdpi, 3 倍的 xxhdpi 以及 4倍的 xxxhdpi（三星最近发布的 S8 就是这个倍率）。ldpi 和 tvdpi 以及可以不予考虑了。有一点需要提出的是，被淘汰的 tvdpi 这种分辨目前被很广泛地使用到了 运行 Android 系统的可穿戴设备上，例如前阵子很火的 Moto 360 智能手边，假如要设计手表上面的产品的话那么就得输出这个倍率的切图。
下面给出一张图，让大家看看各个档次的 DPI 的代表机型，某些机型年轻一点的小同学（例如我自己）可能连听都没过，大家看看就好，开拓开拓眼界，无需过分在意。
标注与切图——以 Chrome 浏览器为例
与 iOS 一样，我还是建议大家使用一倍稿进行设计，然后再输出各种倍率的切图就好，但是 Android 系统要求图片资源的命名与管理图片资源的方式是和 iOS 是完全不同的。
上篇我们简单的介绍了下 iOS 的图片资源的命名方式，很简单，就是文件名加上 @2X、@3X 这样的小标记。然而来到了 Andorid 平台我们就不这样命名了。
以下这张长图是 Android 工程文件管理图片资源的方式，我们可以看到里面有从 drawable-hdpi 到 drawable-xxxhdpi 数个文件夹，你没猜错，这些文件夹里面就放着设计师们精心设计出来的各种 .png 切图。
Android 系统会自动根据屏幕的属性来选则使用哪个文件夹里面的那套切图。譬如说在新出的盖乐世 S8 上面运行的话，那么系统就会自动选择使用 drawable-xxxhdpi 文件夹里面的图，新出的小米 6 的话，就会自动选用 drawable-xxhdpi 文件夹里面的图。
#p#副标题#e#
并且，我们输出的图片的名字全部都要是一样的，安装不同的倍率进行导出，并且不能带有后缀或其他标记，同个图切出来不同倍率五张资源，分别被放入了相应的文件夹里面。使用神奇 Sketch Measure 进行批量导出，程序员会跪着感谢你的。
看起来可能会是这样的：
drawable-mdpi/[文件名].png
drawable-xhdpi/[文件名].png
drawable-xxhdpi/[文件名].png
drawable-xxxhdpi/[文件名].png
以下拿运行于 Android 平板 Nexus9 上的 Chrome 浏览器作为例子。Chrome 的安装包里面带有了这五种倍率的切图，然而运行在 Nexus9 这台平板电脑之上的时候，它选用了 xhdpi 这一档分辨率的切图来对自己进行适配。
这里有个非常重要的点大家一定要注意一下。1.5 倍倍率切出来的图片必然带有小数，如 33pt * 1.5 = 49.5px ，如此之大的小数会让图片的边缘非常模糊，简直不能忍。所以遇到这两个倍率，我们要手动将小数去掉，譬如就将尺寸改变为 50px，不过刚刚提到的神奇能够自动地进行这一项工作。为了你的身体健康，请千万别把 49.5*49.5px 的图片输出出来交给程序员。
太长了不想看说是说有七种分辨率的图要切，但是就目前市面上的设备来讲你只要关注 mdpi、hdpi、xhdpi、xxhdpi、 xxxhdpi 这五种已经够了。如针对可穿戴设备的话，那可能会用到 tvdpi。360*640px 作为一倍稿进行设计。做标注时使用 dp 作为单位（iOS 使用的是 pt，但实际上差不多一个意思）如果尺寸出现小数，那么请手动将小数去掉。使用 Sketch Measure 进行导出的话就不用手动去撸，插件会代劳。输出 .png 格式的图片资源。记住命名规则，同个图片资源的各个倍率的文件名都是一样。
作者：Zhuyuxuan，知乎专栏： 「DesignCoder」 设计是一项工程；追波：Zhuyuxuan
文章作者系 @Zhuyuxuan 未经许可，禁止转载。