iOS 的切图与标注

译文

前面两篇说了好些基础的概念，这篇与下篇**（Android 的切图与标注）**将会结合之前我们讲到的数个概念来谈谈图为什么要这样切，标注为什么要这样做。

跑 iOS 的设备主要两种，iPhone 和 iPad。（iPod thouch就不讨论了，基本上跟 iPhone 一样。）

iPhones

iPhone 方面我们从非 retina 显示屏的 iPhone3G/S 讲到 iPhone 7/Plus。

  • 苹果在推出 iPhone 4/S 的时候首次为自己的智能手机产品配备 retina 显示屏。需要注意的是它的屏幕尺寸与 iPhone 3G/S 一样，都是 3.5 寸，但分辨率却整整提升了四倍，也就是说同样大的屏幕塞进去了四倍的像素，PPI 是前者的两倍，达到了 326。

  • iPhone 5/S/C 的屏幕达到了 4 英寸。值得注意的是，iPhone 5/S/C 屏幕横向还是与 iPhone 4/S 一样保持有 640 颗像素，横向物理尺寸也没变，同样都是 2.0 英寸，变的是纵向的尺寸。屏幕边长了一点点，PPI 维持不变。

  • iPhone 6/7（Plus）屏幕分别为 4.7 英寸和 5.5 英寸。前所未有的尺寸，前所未有的分大小屏，前所未有逻辑分辨率，同时也是前所未有的物理分辨率。非 Plus 机型维持了 326 PPI，而 Plus 则去到了 401 PPI。更大的屏幕，更高的分辨率，iOS的设计师也是从这个时候开始需要输出 @3x 的切图了。

关于 Plus 机型，不得不仔细说说它的一个小特点。

上篇文章（没有看的小伙伴建议还是先看了会比较好）说到在 iPhone 6/7 上，系统会根据 350*667pt 的逻辑画布进行一个二倍渲染，变成 750*1334 之后再将界面投射到屏幕上面去。Plus 机型也差不多，它的逻辑画布的最佳大小是 414*736pt（由于与非 Plus 机型的逻辑分辨率并不太悬殊，所以平时我们只是用一倍画稿进行设计也没有产生太大的问题，误差将由程序员使用一些技术上的布局手段减小） 然后系统进行了一次三倍的渲染变为 1242*2208px。但 Plus 机型的分辨率是 1080*1920px 的，逻辑画布渲染出来的大小怎么跟这个不一样，那还怎么准确投射，充满整个屏幕啊！

在 Plus 机型上，渲染出来的 1242*2208px 会先降低采样变成 1080*1920px 然后再投射到屏幕上面去。我们还是来看图吧。

1080*1920px 相较于 1242*2208px 大约缩小了 15%，那么很多尺寸都会出现小数，比如说 131.3244px 这样恶心数字，出现小数的话图片的边缘就会出现模糊的状况，而 Plus 机型上几乎所有图片都不是整数的，但得益于高分辨率的 retina 显示屏，我们的肉眼可能看不出来端倪（凑近一点看的话有可能能够看得出来大家不妨试试）。绝大部分情况下 Plus 的降低采样机制不会对我们的设计造成什么太过巨大的影响，记得输出 @3X 图即可，不过要说的是，越是细小的元素影响就会越大。

iPads

iPad 方面我们从非 retina 显示屏的第一代 iPad 到想要代替电脑的 12.9寸的 iPad Pro 再到 iPad mini 1/2/3/4。

  • 苹果在推出第二代 iPad 的时候为 iPad 配备上了 retina 显示屏。iPad 2/Air/Air 2/Pro 都维持了 2048*1536 的分辨率，PPI 一直保持在 264。7.9英寸的 iPad 的屏幕一直维持了这样的配置。

  • 说出来你可能不信，除了第一代的 iPad mini 是非 retina 显示屏之外，其他（2 至 4 代）mini 的屏幕的分辨率都跟 7.9 英寸的 iPad 一模一样，物理分辨率都是 2048*1536，逻辑分辨率都是 768*1024，而由于屏幕变成了 7.9 英寸，所以 PPI 去到了 326。

  • 12.9 英寸的 iPad Pro 配备的超大屏幕的物理分辨率为 2732*2048，逻辑分辨率为 1366*1023 ，而 PPI 则去到了 264。由于逻辑分辨率与其他机型实在太过悬殊，我们没办法还用跟普通 iPad 一样的画稿来做设计，是的老铁，你最好重开一稿重新设计。

有些小伙伴可能会留意到，无论是 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 不需要三倍切图。

太长了不想看

  1. @2X，@3X，相应的素材请务必加上相应的后缀。

  2. 针对目前市面上的的屏幕尺寸而言，一倍图已经没有必要再输出了，而二倍、三倍图则必须要输出。

  3. 二倍三倍图的文件名必须是一样的，不然会被开发砍死。

  4. 以一倍画稿做设计，以一倍画稿输出标注文档，最后输出二倍、三倍图。

  5. 如无特殊情况，请确保文件都是 .png 格式。

  6. 一倍画稿输出的标注文档的单位应该为 pt，而不是 px。

本人才疏学浅，如文章出现纰漏，敬请各位前辈大方指出，感谢🙏。

相关阅读：什么是 DPI，什么又是 PPI ？ 什么是 dp、pt、sp？

参考链接：Designer's guide to DPI

欢迎关注

  • 知乎专栏 「极光日报」，每天为 Makers 导读三篇优质英文文章；

  • 个人专栏： 「DesignCoder」 设计是一项工程；

  • 我的追波：Zhuyuxuan