最新iOS APP界面设计和APP切图适配思路解析

自从iPhone 6/6+出现后，iOS版上的APP界面设计尺寸又发生了翻天覆地的变化。让ios一下子跟安卓看齐了。进入了移动“杂屏”时代。

之前我们知道的，在移动app开发设计中，需要解决多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。

如今随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。如下图：

25学堂的建议就是，APP设计师必须考虑移动APP应用尽量适配大、中、小三种屏幕。

必须以选择中间尺寸的iPhone 6（750px/375pt）作为基准设计或切图。

更详细的ios8界面设计的规范可以移步这里：

iPhone 6/6Plus APPui界面设计规范以及界面适配

以后我们做ios版的ui界面设计的时候，可以采用手机淘宝介绍的这样的一个思路进行。

基本思路是：

1、选择一种尺寸作为设计和开发基准（选择中间尺寸的iPhone 6（750px/375pt）作为基准）

2、定义一套适配规则，自动适配剩下两种尺寸；（规则包括：文字流式，控件弹性，图片等比缩放）

3、特殊适配效果给出设计效果。

具体的解决方案如下：

第一步  APPUI视觉设计阶段，设计师按宽度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）的界面效果。由此完成大中小三屏适配。