在了解市场各手机屏幕物理尺寸、各家出图方式后，整理出应该出现哪套iOS、Android手机视觉图，再进行扩版和切图。

设计流程的标准化：

（一）制定标准化的思路-

1. 制定出图流程的原则
2. 解决理解上的困难：“为什么6P有两个尺寸？”

（二）标准化流程的具体步骤-

1. 基准设计稿（简称基设）是750x1334px（设计图都是矢量的）
2. 在基准设计稿尺寸上标注
3. 再放大1.5倍1125x2001px进行切图。

（一）制定标准化的思路

也可参考http://www.ui.cn/detail/351621.html查看各机型尺寸归类总结。以下图为例：

制定出图流程的原则：

1 选择一种尺寸为设计和开发基准

2 定义一套适配准则,自动适配

3 特殊适配效果给出设计结果

因此，

1 选择 iPhone 6（750 x 1334 px 、326dpi）作为基准设计尺寸（简称基设）；

2 基设缩小1倍，得到163dpi的图（@1x），可以适配iPhone3~5s的视觉标准图；

3 基设放大1.5倍，资源缩小1.15倍，得到401dpi的图（@2x），可以适配iOS-6P以上、Android-XXHDPI 的视觉标准图（如：  iPhone6P、小米M3等机型）

ps：为什么6P有两个尺寸？

拿着6p，5.5寸 屏幕大小事1080x1920,可是截图发现他怎么是1242x2208px。那我要拿哪个尺寸设计，肿么办！！！

说法一：

• iphone6和6plus可以设置标准模式和放大模式。在放大模式下，6plus会退化为375x667，此时应该当成iphone6来做适配。而iphone6会退化为320x568，应该当作iphone5来适配。 
• iPhone6plus有两种显示模式，标准模式分辨率为1242x2208，放大模式分辨率为1125x2001（即iPhone 6的1.5倍）。

说法二：

• 苹果决定采用1242px×2208px的分辨率，以足够展现比iPhone 5S 和 iphone6 都丰富的界面内容。然而实际上，它仅仅体现在软件方面。硬件方面，苹果只能使用低分辨率1080p的面板来显示成像。

引用站酷上看到的一段话，解释一下为什么6P有两个尺寸：

之前的设计都是326，用@2x的素材。但是6+的实际ppi是401...理论上苹果应该用401/326 * @2x=@2.46x的

素材。但是这个奇葩的比例对开发者而言很难切图。所以苹果为方便开发者用的是@3x的素材，然后再缩放到

@2.46x上，实际上是缩放到2.46/3=83%。实际上苹果选取了一个接近比例的87%。这样算下来，物理分辨率和

虚拟分比率的比例是87%，也就是1920/0.87=2208，1080/0.87=1242.好处就是开发者更方便，比如准备素材

时，字号可以直接调成3x的

结合上述2个观点：

• 6P的标准模式虽然是1242px,462dpi这个奇葩尺寸，但硬件的物理成像使用的是1080px，401dpi，将基设图（750px，326dpi）扩大1.5倍，得到（1125px，489dpi）的屏宽图，在1125px的稿子里切图足以满足1080尺寸的适配，不会出现模糊的情况了。
• 同时，也是因为1080尺寸是5.5英寸屏的通用尺寸，iOS6P、Android XXHDPI密度屏幕共用这套尺寸的切图。

因此，

也可以理解为1125尺寸是一个6P的设计尺寸，是为了方便我们ui设计人员的一个虚拟尺寸，并没有什么实际意义。而实际研发时，还是使用低分辨率1080p的面板来显示成像，然后技术等比增加dpi实现1242这个尺寸的成像显示。

（二）标准化流程的具体步骤

一、 视觉设计阶段：

1 设计师用 AI / Sketch 按宽度750px做设计稿，然后输出标注图。

2 同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图（得到研发用的@3x切图资源）。

3 输出3个交付物：iPhone6视觉样稿、iPhone6宽度750px的实际标注图、@3x切图资源。

二、 研发实现阶段：

iOS研发拿到750px标注图和@3x切图资源，用auto layout完成iPhone 6（375pt）的界面开发，再到后期适配到其它尺寸。

三、 适配调试阶段：

基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。

基于XXHDPI（1080 x 1920 px）的界面效果，分别适配大中小三屏，特殊尺寸再专门出图。

只交付一套设计稿，默认用什么规则来适配？

1 文字流式的自适应：

设定最小字号限制后，根据缩屏/扩频比例，字体大小成等比例缩放。

2 控件弹性：

navigation、cell、bar等适配过程中垂直方向上高度不变；

水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。

这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。

3 图片等比缩放：

根据缩屏/扩频比例，图片大小成等比变化。