如何一稿适配 iOS、Android

如何一稿适配 iOS、Android

添加一点:

我是非常赞同分开平台设计,毕竟平台间的设计语言还是有差别。但并非所有团队都有足够的时间和人力去搭建两个平台设计团队,这时候就需要一个更优的方案去提高效率。我们只能在有限的资源去尽量保持平台各自的设计语言。所以在与开发交接时候,我除了制定常规的规范之外,还会列出 iOS 与 android 相同功能但设计不同的控件,如图:


另外,即便你不需要同时适配两个平台,也是可以按照这个方式(逻辑像素)去设计页面的,这并不冲突的。


——原文——

在很多公司都是一个设计稿去适配两个平台。作为设计师往往会很头痛,如何打通两个平台不同的尺寸、字体单位?还有如何适配各种各样的分辨率?
首先写下自己的观点:使用 375x667 px作为设计尺寸

不需要转换 px\pt\dp 单位。和两边开发沟通好(iOS:设计稿是1倍图。android:设计稿是 mdpi 尺寸的)。1:1输出一个标注稿即可~


why?
首先我们来了解一下像素密度、倍率、逻辑像素这几个概念。

像素密度

每英寸长度的像素点数量。像素密度越大显示则越清晰。iOS单位为PPI,安卓单位为DPI。



倍率用于划分不同像素密度的屏幕

Android 严格来说不是倍率,是像素密度等级。为了阐述方便以下统称“倍率”




iOS:
1倍(163 ppi、1~3gs)
2倍(326 ppi、4~6s)
3倍(401 ppi、plus系列)
题外话:可以看出,401 ppi 不是 163 ppi 的3倍(实际2.4倍)。为啥要假装是3倍呢?这是因为 Apple 为了避免@x1 \@x2\@2.4这样不规则的倍率导致设计、开发适配麻烦,所以才把2.4倍说成3倍,但系统在实现时候会自动缩小至2.4倍。所以我们一起假装它是3倍的ppi就好了。

Android:
mdpi (160 dpi、1倍)
hdpi (240 dpi、1.5倍)
xhdpi (320 dpi、2倍 )
xxhdpi (480 dpi、3倍)
xxxhdpi (640 dpi、4倍)
由于安卓开源特性,导致多机型、多分辨率。所以安卓的像素密度划分只能是一个大约数的范畴,例如160dpi 左右的都归纳在 hdpi 。

逻辑像素是一个抽象的概念

逻辑像素也有叫抽象、绝对像素等,但意义都是一样。它的存在是为了解决在一定的物理尺寸屏幕内不断提高像素密度带来的问题,简单来说就是手机屏幕尺寸一般在4、5寸,但分辨率却成倍的增加,像素密度越来越高。如果继续用传统的像素(px)方式去适配屏幕的话,界面设计师则没法预估每个屏幕的设计效果,导致字体的可读性、控件的点击体验不一。如图:

显然设计师、开发者根据不同的屏幕来设计、实现界面是不现实的。所以 iOS、android 为了解决这个问题,都提出了抽象像素的概念。iOS 的单位: pt(point ,显示点),android 的单位: dp(device independent pixel,设备无关像素),安卓字体单位:sp (scale-independent pixel)
dp和pt的原理一样,只是两个平台的单位名称不同。为阐述方便,以下统称为:pt)。

它并非传统意义上的屏幕像素 (px),像素就是物理屏幕上面的像素点,非常好理解。而逻辑像素是基于现实物理尺寸的,在1倍(160ppi )情况下,1pt等于1px,也就是说160pt = 160px =1英寸,在倍率为2( 320 ppi),1pt 等于2px ,160pt = 320px =1英寸。注意看其中的逻辑像素 160pt 无论在哪个像素密度屏幕,物理尺寸都是保持不变的,也就是说可以把逻辑像素理解成显示的物理尺寸。下面有个更加直观的例子,其中的100pt 在不同像素密度的屏幕,物理尺寸也是大约一致的,如图:

那么接下来回到我们一开始的问题:

如何能一稿适配两个平台?

接下来我们要选一个兼顾性强的尺寸,因为一稿适配意味着只能一个尺寸,那么看下现在的市场上分辨率的分布情况以及占有率。

iOS活跃设备排名:




安卓分辨率排名:

安卓的设备过非常多,参数对比意义不大就不列出了。至于没有列出 iOS的活跃分辨率,是因为活跃分辨率和设备数据不匹配,所以我就只列出了iOS活跃设备。(数据来源:友盟 / 2016年7月数据)

Anyway
目前 iOS 设备占有率最多的是:iPhone 6,750x1334(326 ppi)
android 目前分辨率最多的是:720x1280 (一般为 320 dpi)

可以看出两者的像素密度也是差不多,倍率都是2。而且750x1334、720x1280的长宽比几乎一样的(0.5622、0.5625)。而且它们还有一个共同点就是,都是处于大多数设备的中间范畴,意味着可以最大程度的兼顾更小、更大的分辨率屏幕。所以在这里基本上可以确定用这个分辨率范畴去作为我们的设计尺寸。然后我个人觉得,在安卓众多的分辨率情况下,即便我使用 720x1280 分辨率去设计,也没办法完美的适配屏幕。而 iOS 因为设备少可控性则会大很多,几乎完美适配。

所以我会选择 iPhone 6 的尺寸作为设计画板。
iPhone 6 的分辨率是 750x1334,单位为 px。回到前面的逻辑像素,我们都知道不能以传统的像素 px 去设计。所以我们需要把 750x1334 转化为逻辑像素。 逻辑像素=像素➗ 倍率。如图:
所以 iphone 6 分辨率 750x1334 px的逻辑像素为:375x667 pt

(若果你的画板单位依旧px,不用纠结怎么把px变成pt、dp,在1倍图下1px=1pt=1dp 的)

目前开发尺寸也是基于逻辑像素去开发的,所以我们设计稿用同样的尺寸就可以避免换算单位、尺寸这些。设计与iOS、安卓开发就几乎可以无缝对接。需要注意一点是, banner 之类的位图需要另外以最大的尺寸去设计(因为位图由小放大会模糊,只能由大缩小去适配)。

最后总结一下使用1倍图的优点:
1.与开发尺寸同步
2.无须换算平台单位,1px=1pt 约=1dp
3.大大减少设计文件的大小

End


Thanks
JP 2016.06.19

参考资料:
oschina.net/translate/u
colachan.com/post/3435
material.google.com/lay
designcode.io/iosdesign
umindex.com/devices/and

编辑于 2016-08-24