设备屏幕全解：设计师，你不该对你的屏幕一无所知(3)

有些小伙伴可能会留意到，无论是 iPhone 还是 iPad,好几代了屏幕的参数好像没怎么变化过，PPI 不是越高越好吗？苹果是好久没升级自己屏幕，一块祖传屏幕忽悠消费者？不是的，因为人眼对于像素密度的要求会根据人眼距离屏幕的距离变化而变化，RMBP 的 PPI 是 109，被手机完爆，但是我们平时用起来还是觉得非常清晰锐利，因为我们用电脑的时候眼睛距离屏幕会比手机远，不需要那么高的像素密度也可以消除颗粒感。**相应的使用距离配制相应的 PPI，所谓够用就好。**过高的 PPI 并不会带来多大的画质提升，反而会导致一连串不好的后果，加大处理器渲染负担，加大电池负担，不利于设计开发人员设计，屏幕的制造成本也会增加。早年安卓阵营出现了一些 2K 屏甚至 4K 屏的产品，现已销声匿迹，消费者根本需要这么高分辨率的屏幕。苹果在相应的设备（无论从电脑到智能手机再到智能手表）上维持一个稳定的 PPI 是很明智的选择，稳定的屏幕参数非常非常有助于设计开发人员工作的开展，这种稳定性对开发者造成的便利恐怕超过了所有人的想象的。

在苹果尚未推出 Plus 机型的那段时间里设计师们一般都只需要输出一倍图和二倍图。一倍图针对的是没有配备 retina 显示屏的 iPhone 而二倍图针对的是配备 retina 显示屏的 iPhone。Plus 机型推出后就开始要输出三倍图了，切不配备 retina 显示屏的 iPhone 已经过于老旧，不再需要考虑。一般我们会在文件名后面加上 @2X 或 @3X 的后缀以标明文件的尺寸，就如上图所示，这是 iOS 的规范，还是值得准守一波的。

至于 iPad 版本，规则也差不太多，只是 iPad 不需要三倍切图。

大家都知道 Android 是一个开源系统，不像 iOS 只有苹果自家的机器能跑，屏幕尺寸一直以来也比较稳定，而运行 Android 系统的设备的屏幕却各式各样非常跳脱，这也就是以往大家经常说 Android 设备碎片化严重的原因之一。不过这种碎片化严重的情况来到今天已经改善了非常之多，纵使 Google 对于 Andorid 开源的策略重来没有变过，但 OEM 们开始不约而同地开始使用不那么“奇形怪状”的屏幕了，且某些低分辨率的机型随着时日变迁也已经被淘汰殆尽了。倒是 iOS 在推出 Plus 机型之后 iOS 屏幕碎片化的问题也开始凸显起来了，个人认为目前两大平台的屏幕碎片化问题都存在且大家都差不多，大家在对 Android 产品进行设计的时候大可不必那么担心。

与 iOS 相似的是，设计师们同样也是需要输出不同倍率的切图，只不过需要输出的倍率更多罢了。程序员将会把所有不同倍率的切图都装在同一个安装包里面，在运行的时候系统会根据屏幕的分辨率来自动选用正确倍率的切图。

坦率地讲，假如我们要纠结到每块屏幕的逻辑分辨率的话，那么Android 阵营的碎片化真的是无比严重，但是我们知道，只要逻辑分辨率差的不太远的话，我们能够用同一个稿来进行设计、输出切图，其中的误差必不可能避免但将会在一个可接受的范围之内。对于Android 产品来说，一般我们都使用 360*640px 作为一倍稿进行设计。

目前为止还需要我们输出切图的分辨率有五种：代表 1 倍的 MDPI, 1.5 倍的 hdpi, 2 倍的 xhdpi, 3 倍的 xxhdpi 以及 4倍的 xxxhdpi（三星最近发布的 S8 就是这个倍率）。ldpi 和 tvdpi 以及可以不予考虑了。有一点需要提出的是，被淘汰的 tvdpi 这种分辨目前被很广泛地使用到了 运行 Android 系统的可穿戴设备上，例如前阵子很火的 Moto 360 智能手边，假如要设计手表上面的产品的话那么就得输出这个倍率的切图。

下面给出一张图，让大家看看各个档次的 DPI 的代表机型，某些机型年轻一点的小同学（例如我自己）可能连听都没过，大家看看就好，开拓开拓眼界，无需过分在意。

与 iOS 一样，我还是建议大家使用一倍稿进行设计，然后再输出各种倍率的切图就好，但是 Android 系统要求图片资源的命名与管理图片资源的方式是和 iOS 是完全不同的。

上篇我们简单的介绍了下 iOS 的图片资源的命名方式，很简单，就是文件名加上 @2X、@3X 这样的小标记。然而来到了 Andorid 平台我们就不这样命名了。

以下这张长图是 Android 工程文件管理图片资源的方式，我们可以看到里面有从 drawable-hdpi 到 drawable-xxxhdpi 数个文件夹，你没猜错，这些文件夹里面就放着设计师们精心设计出来的各种 .png 切图。

Android 系统会自动根据屏幕的属性来选则使用哪个文件夹里面的那套切图。譬如说在新出的盖乐世 S8 上面运行的话，那么系统就会自动选择使用 drawable-xxxhdpi 文件夹里面的图，新出的小米 6 的话，就会自动选用 drawable-xxhdpi 文件夹里面的图。

（编辑：ASP站长网）