一、为什么要规范
1、设计师的设计效果被快速理解和使用，降低设计和开发之间的交流成本，节省开发时间和效率。
2、移动设计全面进入“杂屏”时代，开发中多种设备尺寸适配问题，不同分辨率不同大小的屏幕很纷杂，故此要有一套规范约束适配，达到最终的呈现效果。
二、设计师设计原则和输出
原则：
APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是：
1、选择一种尺寸作为设计和开发基准；
2、定义一套适配规则，自动适配剩下两种尺寸；
3、特殊适配效果给出设计效果。
输出：
1、效果图（呈现给用户的效果）
2、标注图（间距、字体大小颜色、控件、背景色）
3、切图（命名规范、适配）
三、详细规范
1****、效果图
就是最终呈现给用户的效果，输出给开发人员，便于开发人员有明显的参考标准。
2****、标注图
a) 间距
1、标注单位px
2、边缘控件离上下左右栏的间距
3、非边缘控件离上下左右控件的间距
b) 字体大小颜色
1、标注单位px
2、字体大小、样式
3、字体颜色（十六进制#000000）
备注：在iOS中默认字体分为三类：
第一类：STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字体，常用的方正 黑体简体（不能商用）和微软雅黑（不能商用），也可以是冬青黑体简体（暂不详版权）和思源雅黑（免费）。
第二类：_H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及数字字体，常用的字体Helvetica
第三类：LockClock.ttf代表的是锁屏时间字体
中文字体：Mac下黑体、微软雅黑、华文黑体、方正黑体简体、思源雅黑、冬青黑体简体等（，看个人习惯，具体设计需求也可以是不常见字体）
英文字体：HelveticaNeue , Arial Bold(Regular)(具体设计需求也可以是不常见字体），在选用不常见字体要在后面切图中：相关的字体要有图片形式导出.png图片，以及如有需要要有文字的字体包，当然还有使用版权的许可。
c) 控件
1、标注单位px
2、控件高度宽度、位置（或者自适应或者居中靠左靠右等等）
3、控件一些特殊属性（背景色、圆角等）
d)****背景色
1、整个界面的主色调即背景色
2、整个界面某一块的背景色
image.png
image.png
image.png
3****、切图
a)****文件命名规范
文件包命名规则是：项目名字＋切图＋作者名字＋日期
例如：蚂蚁金服基金3.5.8.5版本迭代-H5页面设计切图李笑_20170321
文件包压缩一直采用.zip格式
文件包要包括：image，效果图＋标注图，切图简单说明（word等文件）。
说明：效果图必须是要有的，对于标注图可以根据技术需求，沟通必不可少
image.png
b)****切图命名规范
iOS切图文件要有二倍像素适配（750px1334px）iphone6，iphone7和三倍像素适配（1242px2208px）iphone6 plus，iphone7 plus。需要在名字后面分别加 @2x 和 @3x。具体命名方法是：
模块类别功能状态@2x／@3x.png （状态会有：点击状态，点击压下状态，禁用状态，选中状态等）
如：me_bg_nologin@3x.png和me_bg_nologin @2x.png
image.png
切图注意事项
在image中切图文件和切图命名中：
l 不要出现大写，
l 不要有中文、特殊符号以及空格
l 首字母必须是小写字母
l 同类切图大小一致
l 图片命名要求语义化，格式为png；
切图命名常用词
image.png
Icon****切图（桌面图标）
image.png
image.png
iPhone****图标尺寸及整理
image.png
image.png
c)****适配
iPhone有10种型号，5种屏幕尺寸，再加上6plus的“降采样”（Downsampling）（1080-1920），还有iPhone6和6+上的放大模式（1125-2001）和默认模式（1242-2208），是不是感觉好恐怖？
UI交付给开发的资料有
1、 标注图（以640为宽度尺寸为基准标注）
2、 2x切图（以640为宽度尺寸为基准切图）
3、 3x切图（以1280为宽度尺寸为基准切图）
image.png
三、问答
1.****为什么3x切图要以1280来为宽度？
其实iPhone6+的尺寸12422208作为3X，怎么算都又难记又不能整除，我们直接6402得到1280跟1242相差也没几十个像素，最重要的是不虚边啊，放在真机上看（处女座除外）看不出差别的。
2.****为什么只设宽度？
为了保持长宽比例。iPhone的这几个尺寸不是正好的，宽度放大后高度总差那么几个像素，这不要紧，千万别去改高度，手机屏幕是可以上下滑动的嘛。不可以滑动必须保证一屏显示的除外，手动去调整好了。
3.****为什么开发不是乘以2而是乘以1.5来算尺寸和字号？
因为大屏手机就是要显示更多内容而存在的。纯等比放大界面看起来傻大傻大的，实验证明1.5倍是正好的。
网友评论