iphone6出现后,如何将一份设计稿支持多个尺寸

iPhone6 出 现后,如何将一份设计稿支持多个尺寸？ 2014-11-04 阿 门 庞门正道 移 动 app 开发中多种设备尺寸适配问题，过去只属于 Android 阵营的头疼事儿，只是很多设计 师选择性地忽视 android 适配问题，只出一套 iOS 平台 设计稿。随着苹果发布两种新尺寸的大 屏 iPhone 6，iOS 平台尺寸适配问题终于还是来了，移动设计全面进入“ 杂屏”时代。看看下面三 款 iPhone 尺寸和分辨率数据就知道屏幕有多杂了。 加上 Android 生态中纷繁复杂的各种奇葩尺寸，现在 APP 设计开发必须考虑适配大、中、小三 种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么 协作模式？一个基本思路是： 1、选择一种尺寸作为设计和开发基准； 2、定义一套适配规则，自动适配剩下两种尺寸； 3、特殊适配效果给出设计效果。 手机淘宝的 iPhone 6/iPhone 6 Plus 适配版本即将提交 App store 审核。先晒一下我们采用的协作 模式，再慢慢说明原委。 第一步，视觉设计阶段，设计师按宽度 750px（iPhone 6）做设计稿，除图片外所有设计元素用 矢量路径来做。设计定稿后在 750px 的设计稿上做标注，输出标注图。同时等比放大 1.5 倍生 成宽度 1125px 的设计稿，在 1125px 的稿子里切图。 第二步，输出两个交付物给开发工程师：一个是程序用到的3x 切图资源，另一个是宽度 750px 的设计标注图。 第三步，开发工程师拿到 750px 标注图和3x 切图资源，完成 iPhone 6（375pt）的界面开发。 此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺 寸。 第四步，适配调试阶段，基于 iPhone 6 的界面效果，分别向上向下调试 iPhone 6 plus（414pt ） 和 iPhone 5S 及以下（320pt）的界面效果。由此完成大中小三屏适配。 为什么选择 iPhone 6 作为基准尺寸？ 当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。 第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的 iPhone 6（750px/375pt）作为基准，基于几个原因： 1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt 下的设计效果适配到 414pt 和 320pt 偏差不会太大。假设以 414pt 为基准做出很优雅的设计，到 320pt 可能元素之间比例就 不是那么回事了，比如图片和文字之间视觉比例可能失调。 2、 iPhone 6 plus 有两种显示模式，标准模式分辨率为 1242x2208，放大模式分辨率为 1125x2001（即 iPhone 6 的 1.5 倍）。可见官方系统里 iPhone 6 和 iPhone 6 plus 分辨率之间就存 在 1.5 倍的倍率关系。很多情况下这两种尺寸可以用 1.5 倍直接等比适配。 3、1242x2208 这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算 栅格。640x1136 虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不 合时宜，设计师会停留在小屏的视角做设计。 所以，iPhone6 的 750x1334 是最适合基准尺寸。 只交付一套设计稿，默认用什么规则来适配？ 前文提到适配策略是先选择 iPhone 6 作为基准设计尺寸，然后通过一套适配规则自动适配到另 外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放。 控件弹性指的是，navigation 、cell 、bar 等适配过程中垂直方向上高度不变；水平方向宽度变化 时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显 示更多内容，发挥大屏幕的优势。 按 照上述默认适配规则，大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容， 需要设计出特殊适配效果。比如 App store 首页焦点图，从 iPhone 6 适配到 iPhone 6 plus 时焦点 图尺寸和排版