UI新手必备！iOS+Android的切图与标注方法

iPhone方面我们从非retina显示屏的iPhone3G/S讲到iPhone7/Plus。苹果在推出iPhone4/S的时候首次为自己的智能手机产品配备retina显示屏。需要注意的是它的屏幕尺寸与iPhone3G/S一样，都是3.5寸，但分辨率却整整提升了四倍，也就是说...

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

• 苹果在推出 iPhone 4/S的时候首次为自己的智能手机产品配备 retina显示屏。需要注意的是它的屏幕尺寸与 iPhone 3G/S一样，都是 3.5寸，但分辨率却整整提升了四倍，也就是说同样大的屏幕塞进去了四倍的像素，PPI是前者的两倍，达到了 326，视网膜屏第一次被用在 iPhone之上。
• 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一样的画稿来做设计，是的老铁，你最好重开一稿重新设计。

（编辑：171手机网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!