ui标注androidios,IOS+ANDROID的UI切图与标注方法

之前的知识科普说了好些基础的概念&＃xff0c;本篇将会结合之前我们讲到的数个概念来谈谈图为什么要这样切&＃xff0c;标注为什么要这样做。

iOS 的切图与标注

跑 iOS 的设备主要两种&＃xff0c;iPhone 和 iPad。(iPod touch就不讨论了&＃xff0c;基本上跟 iPhone 一样。)

iPhones

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

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

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

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

关于 Plus 机型&＃xff0c;不得不仔细说说它的一个小特点

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

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

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

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 的分辨率&＃xff0c;PPI 一直保持在 264。7.9英寸的 iPad 的屏幕一直维持了这样的配置。

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

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

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

标注与切图——以 Chrome 浏览器为例

版权申明&＃xff1a;本站部分文章来自互联网&＃xff0c;如有侵权&＃xff0c;请联系小编微信zwcnwnet&＃xff0c;我们收到后立即删除 谢谢

看了这篇文章的人还看了