Sketch 如何用一套设计稿较快速地做 iOS 和 Android 两个版本 app?

先做的ios 6p尺寸,发现不知道如何去兼容android的分辨率了。。。
关注者
370
被浏览
17728
有两种做法:
第一种做法,以屏幕渲染像素(Rendered Pixels)尺寸做, iOS iPhone 6,750x1334px 开始设计。
750x1334px 这个尺寸是iPhone 6 的渲染像素尺寸,也就是用iPhone 6截图后看到的图片尺寸。iOS 这个尺寸设计完成后,再用这个尺寸适配Android 渲染像素 720x1280px,因为两个尺寸相近,切图资源可以用一套,适配Android 720px时只用横向调整间距即可。
这也是现在大多数UI 设计师做App 时的常用做法。

标注

推荐Sketch 插件,Sketch Measure。 在第一次标注时,会让选择设计尺寸的界面分辨率,750x1334px 是Retina @2x 的尺寸,所以我们选择此项,标注的尺寸得到的实际上是pt(point),也就是缩小2倍的尺寸。(图中正方形尺寸是200x200px,选择Retina @2x (pt) 选项后标注的尺寸是100x100pt)



这里要说一下渲染像素(Rendered Pixels)尺寸。渲染像素尺寸是iOS 里的一种说法,对应的还有点(Point)、物理像素(Physical Pixels)。

早期的iPhone3GS的屏幕分辨率是320*480(PPI=163),iOS绘制图形(CGPoint/CGSize/CGRect)均以point为单位(measured in points):

1 point = 1 pixel(Point Per Inch=Pixel Per Inch=PPI)

后来在iPhone4中,同样大小(3.5 inch)的屏幕采用了Retina显示技术,横、纵向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326), 显像分辨率提升至iPhone3GS的4倍(1个Point被渲染成1个2x2的像素矩阵)。

但是对于开发者来说,iOS绘制图形的API依然沿袭point(pt,注意区分印刷行业的“磅”)为单位。在同样的逻辑坐标系下(320x480):

1 point = scale*pixel(在iPhone4~6中,缩放因子scale=2;在iPhone6+中,缩放因子scale=3)。


所以,即使我们在Sketch 里是以实际像素设计的UI,但开发者在实现时都是以pt为单位绘制图形的。
至于有些知友说,我们一直都是用px 直接标注的啊。我之前也是这么做的,但在看上面一些文章的时候(上方的引用),才发现pt 才是一种标准的标注方式。开发者在拿到我们的标注资源后应该会自己做一些换算工作。

切图
以750x1334px 尺寸设计的UI,icon 直接输出1x(原始大小),后缀是@2x,因为750px就是以@2x 大小做的,@2x大小的资源供iPhone 4, 5,6使用,输出1.5x 大小,后缀@3x,资源供iPhone 6 Plus 使用。因为现在已经没人用3G,3GS 手机里,所以也就不输出@1x 的资源。

05.29 更新



第二种做法是以开发者在开发App时的尺寸为基准,也就是1x 大小的尺寸设计。


iOS iPhone 6 1x 尺寸是375x667pt。这个尺寸的单位是pt(点),也就是开发者在开发时的尺寸。适配安卓时,选择 xhdpi 360x640dp,(第二种做法是以开发者绘制图形的单位为基准,所以这里用了dp,但由于是以1x 的标准做,所以可以把px 看作是dp)


标注

iOS:以这个尺寸完成 UI 设计之后,同样使用Sketch Measure标注。在第一次标注时,选择Points @1x(pt) 选项,标注出来的pt=px。

Android:适配 Android 360x640dp 的尺寸,横向调整相应的元素,标注时同样会提示选择设计时的界面分辨率,LDPI、MDPI、XHDPI、XHDPI、XXHDPI、XXXHDPI 是供 Android 设计选择的,我们选择 XHDPI,生成的标注单位都是pt(尺寸) 和 sp(文字)。



切图

iOS:可以直接输出@2x 资源用在iPhone 4-6,@3x 资源用在iPhone 6plus 上。

Android:Android 的分辨率很多,但通过【友盟+】全域指数 最新的 Android 设备分辨率排名可以看出主要的分辨率集中在 HDPI、XHDPI 和 XXHDPI,并且向大屏发展,所以我们在输出切图的时候,可以输出这几个 DPI 的资源即可,或者根据不项目具体要求。



Android 360x640dp 设计,输出@1.5倍作为 HDPI 资源,输出@2x作为 XHDPI 资源,输出@3倍大小作为 XXHDPI 资源。有没有感觉特别晕?如果可以理解最好,理解不了,推荐一个 Sketch 插件,sketch-android-assets 可以自动导出标准的 Android 切图资源,iOS 的资源是全部放在一起,以后缀@2x、@3x(1x 资源当然就没有后缀) 的形式输出,而 Android 是把不同 DPI 下的资源放在相应的文件夹下,文件名是相同的。



这里再来解释一下 iOS 和 Android 在开发 App 时的单位问题,以及适配 Android 所选的分辨率。上面的引文里介绍了在 iOS 中,绘制图形是以 point 为单位,而在 Android 中,是以 dp 为单位。关于 iOS 和 Android 上的单位问题可以查看这篇文章。建议大家多读几遍。

从下面的表格中Most popular screen sizes/resolutions on Android phones可以看出,Android 基础单位 dp,1x 的屏幕密度,Android 160dpi = iOS 160ppi,1x基础单位pt。

2x 大小360x640dp,也是对应第一种做法里的屏幕渲染像素尺寸720x1280px。360x640dp 与 375x667pt 尺寸很接近,适配起来很方便。



思考第二种做法,首先是因为用 Sketch 的时候发现模版里给出的资源iOS都是375x667,但问了些朋友,却都是以750x1334尺寸设计,也就是第一种做法,当时就很奇怪为什么?后来在思考以1x的尺寸设计的时候发现 Android 的模版也是1x的,再回头看新建画布给出的设备默认尺寸也都是1x大小的,有点恍然大悟的感觉。
虽然很少有人用1x的尺寸设计,但我想 Sketch 给出1x 的模版资源和画布尺寸还是有意图的,不会是随便给的。


PS:
之前也并没有按照750px 的尺寸设计UI,但最近要开始新的项目,也在思考题这个题目,想把一些碎片知识、概念系统的捋清楚,也在网上看了些资料,回答中难免有些概念说的不是很清楚或者出错,比如 第二种做法中适配 Android 后输出切图的倍数我想了几遍也还有些晕,sketch-android-assets 插件我自己用的时候也还有些问题(based resolution)。
各位知友如果发现答案中有错误或者描述不是很准确的地方请提出讨论,谢谢!
两种做法的有缺点我会再思考,有心得再来更新。

推荐相关文章:
用 Sketch 做 iOS 设计时,一般选用哪个尺寸? - Sketc
Design at 1x - It's Factmedium.com
iPhone屏幕尺寸、分辨率及适配
Android屏幕适配全攻略(最权威的官方适配指导)
iPhone 6 / 6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸? - pigtwo 的回答
知识解答:基础知识学起来!为设计师量身打造的DPI指南(下)
Supporting Multiple Screens:https://developer.android.com/guide/practices/screens_support.html