一、切图
App切图是实现设计效果的重要环节，开发工程师会在实现的过程中计算好各个图片、图标、版块的位置，然后会调用我们已经切好的图进行填充，切图的效率关系到产品的开发效率与团队协作。 1.1 命名规范
(1)常用界面
(2)系统控件
(3)功能命名
(4)常见状态
1.2 命名规则
命名规范并不是唯一的，唯一的目的是要清晰，能让开发者一看就懂。命名的规则就是告诉开发文件是什么，在哪里，第几页，什么状态。
组件：指的是App，如首页、发现、财富与朋友；
类别：指的是页面中的切图对象的种类，如图标、图片；
页面：指的是二级页面，如登录、设置；
功能：指的是页面中的图标和图片，如搜索、设置、删除、确定；
状态：指的是切图的图标所处的状态，如，_n:正常、_p:按下、_s:选中、_d:禁用、_h:点击；
(1)通用切图
组件_类别_功能_状态.png
例 : 标签栏_图标_主页_未选中状态(tabbar_icon_home_n.png)
(2)特有切图
页面_类别_功能_状态.png
例 : 发现_图标_搜索_选中状态(discover_icon_search_s.png)
(3)点九图
智能手机中有自动横屏功能，界面会随着手机中的方向传感器的参数不同而改变显示的方向，图片会因为长宽的改变而产生拉伸，造成图片失真变形。
由于Android平台有很多不同的分辨率，大部分控件的切图文件需要放大，那么点九图的制作变成了必要，点九图其实相当于把一张PNG图分成9个部分，分别为四个角、四条边以及一个中心区域，它可以在图片横向和纵向同时拉伸时，保持四个角不做拉伸，实现多分辨率下完美展示，只需采用一套界面切图适配不同的分辨率。
但点九图有一个特点，只能被拉伸放大，缩小容易造成图片像素分布不均匀。当标注一个48dp的按钮时，切记提供一个不大于48dp的图片资源。
那么如何制作点九图呢？
1、首先，用Photoshop沿着图片的边缘切好图；
2、调节画布大小，手动将上下左右各增加1px；
3、使用铅笔工具，颜色为纯黑(#000)，对图片四周1px区域进行填充；
4、存储为web所用格式，选择png-24，储存后手动将后缀名改为.9.png；
附注：Android系统下的切图，包括logo、按钮、图片、图标等图片格式为点九图(.9.png)，关于详细情况，可以百度了解一下。
1.3 注意事项
在image切图文件和切图命名中，应注意以下几点：
(1)不要出现大写，字母必须为小写；
(2)不要有中文、特殊符号和空格；
(3)同类切图，尺寸大小应保持一致；
(4)切完图后，记得压缩图片的大小，与App安装包的大小有关。其次，当jpg与png相差不大时，选用png-24格式，二者相差较大时，选用jpg格式；
(5)icon图标一定要用png格式；
1.4 命名方式
1.5切图工具
通用工具：Cutterman、墨刀、蓝湖、摹客、Assistor PS
1.6 管理方式
利用工具切图，为了提升平台版本更新迭代的效率。从开发时，就对组件、页面、模块、图标进行合理的分类，根据对应切图的分类创建不同类别的文件夹。
其中，图标可以按像素倍率进行分类。
二、标注
App标注可以让工程师及时了解界面开发元素的尺寸大小，Android和iOS标注的规范存在一定的差异性，特别是重点关注App设计稿的标注单位。目前，虽说安卓和苹果的@1x手机已经被淘汰，但是@2x和@3x设计师尺寸都需转为@1x工程师尺寸。
2.1 iOS与Android界面标注的区别
iOS标注：
(1)用750*1334px设计稿进行标注；
(2)距离和字号用pt/px；
Android标注：
(1)用720*1280px设计稿进行标注；
(2)距离用dp，字号用sp；
2.2 标注规范
(1)文字标注
文字属性，需要有颜色、字号、间距、位置等最基本的要素，在标注页面时，注意不要漏掉未标记的元素。
(2)图标标注
图标属性，需要有图标大小、位置、间隔、边距等最基本元素，在特殊情况下，需要为一些特殊图层创建引导框后再进行标注。
(3)段落标注
段落属性，需要有字体大小、字体颜色、行间距、字间距等；
(4)布局控件
控件属性，需要有控件宽高、背景色、透明度、描边、圆角大小等；
(5)位置标注
元素属性，需要有元素宽高、颜色、方位间距、侧边距以及与其他元素之间的相对距离等；
2.3 注意事项
(1)同类标注属性，标注的方向、大小、字号应保持一致；
(2)在文字标注过程中，由于部分文字间距较近，如果同页面中有相同元素，可以隔行标注；
(3)图标标注，有些图标需要加引导框，才能进行标注；
(4)页面中相同元素，无需重复标注；
2.4 标注管理
标注图可以与源文件、效果图、启动页、引导页、登录页、原型图、框架图等作为平级项目。在对应的版本文件夹内，建立相应的文件夹，便于产品后续运行管理，尤其是产品定位的转变、界面风格大改以及功能的新增与剔除。
2.5 标注工具
常用工具：
马克曼、Pxcook、蓝湖规范云、Sketch Measure、墨刀、摹客；
