APP - UI切图标注规范指南
APP - UI切图标注规范指南
上期讲了界面设计规范，我们设计完界面，就要开始切图和标注了。这里主要介绍我经常用到的切图和标注工具和一些原则规范。
一. 切图工具和标注工具
1. 切图工具：
Cutterman：一键切图，真正解放双手
它是一款运行在PS中的插件，切图很方便，只需要点击一个按钮,就能自动将你需要的图层进行输出，以替代传统的手工切图。快到没有朋友！ 它支持各种各样的图片尺寸、格式、形态输出，支持png、jpg、gif和支持选中多个图层合并输出，也可以逐一输出的哦！兼容安卓、iOS、WEB各种系统的一键输出。
但不支持绿色免安装版本PS，推荐安装官方完整版PS CC及以上版本。这个是用的比较多的切图工具，是现在最主流的设计师切图利器。
Cutterman官方地址：https://www.cutterman.cn/
2. 标注工具：
PxCook（像素大厨），是一款切图标注设计工具软件。自2.0.0版本开始，支持PSD文件的文字，颜色，距离自动智能识别。
优点在于将标注、切图这两项设计完稿后集成在一个软件内完成，支持Windows和Mac双平台。标注功能包括：支持长度，颜色，区域，文字注释；
标注也可以用其他的工具比如：Parker或者Mark Man。在选择上主要还是看个人的习惯，哪个用着顺手就选择哪个。
二. 界面切图
1. 设计切图的原则：
切图命名全部为小写英文字母；这样既能方便让程序员直接拿我们的切图进行使用，也避免他们随意修改名称，程序员的的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们还要更改的。所以命名全部用小写的英文字母是最基本的规则。
所有切图尺寸必须为双数；智能手机的屏幕大小都是双数值，比如我们通常做的设计稿iPhone 7的屏幕分辨率是750*1334 px。
切图资源尺寸必须为双数，是为了保证切图资源在程序员开发时是高清显示。因为1px是智能手机能够识别的最小单位，也就是说1像素不能在智能手机被分为两份。所以如果是单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，造成开发出来的APP界面效果与原设计效果会有差别。
2. 举例说明:
icon_setting.png→iPhone 1-3代的手机(现在已经不考虑了)
icon_setting@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸，这就是我们通常所说的2倍图
icon_setting@3x.png→iPhone6P/6SP/7P使用的尺寸，这就是3倍图
可以简单的理解为倍数关系，如果你使用750x1334px（iPhone 6/6S/7）尺寸做设计稿，那么切片输出就是@2x；@1x是@2x的一半，也就是缩小2倍的大小；扩大1.5倍就是@3x了。实际工作中，我们只需要切@2x和@3x就可以了。
三. 页面标注
标注是非常重要的，程序员能不能完美的还原设计稿，很大一部分取决于我们的标注；
根据我的经验和习惯，个人建议：不需要将每一张效果图都进行标注，多个页面共同的地方可以只标一次， 比如导航栏文字大小、颜色，左右边距，你标注的页面能保证程序员能把每个页面都能顺利进行就可以了。
以下是我做过的页面标注，举例示范：
通常我们需要标注的内容有：
文字：字体大小、字体颜色
段落文字：字体大小、字体颜色、行距
布局控件属性：控件宽高、背景色、透明度、描边、圆角大小
列表：列表高度、列表颜色、列表内内容上下左右间距
间距：控件之间的距离、左右边距
全部属性：如导航栏文字大小、颜色，左右边距，默认间距等
所有的页面标注总结起来就是：标文字，标间距，标大小，标区域
注：标注颜色格式是使用16进制（如：#f8f8f8）还是RGB（如：255,255,0）？一般采用16进制色值。
最后：如果你不清楚该怎么标标注和切图，一定要和程序员沟通！
