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的切图了。

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

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

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

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

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

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

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一样的画稿来做设计,是的老铁,你最好重开一稿重新设计。

dawei

【声明】:158手机网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。