UI设计中如何切图？切图标准是什么？

一、界面切图

切图之前务必要和你的工程师搭档沟通一下，该如何去切才能配合他的开发。

所有设计尺寸，都应该尽量使用偶数。技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用PS 设计页面使用了24px 的字体，技术那边就是设置为12px，所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现0.5 像素的虚边。

输出两套切图：为了达到最好的视觉效果，切图输出两套尺寸即@2x 和@3x。如果你使用IPhone 6 尺寸做设计稿，那么切片输出就是@2x，扩大1.5 倍就是@3x 了。

@2x @3x 是开发工具Xcode 软件需要的UI 资源，命好名称后，IOS 设备会自动的选取合适尺寸。

共用资源：输出一张切图即可。

切片的输出格式：位图格式：PNG 24，PNG 8，JPG。在JPG 和PNG 两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大小相差很大，使用JPG，尽量节省文件大小。在PS 中，文件菜单→存储为Web 所用格式。

二、图标切图

精确切图: 沿着图标四周自身大小切图。

交互切图：图标元素较小时，保证操作的有效性，需将点击范围和图标一起切出。

由于图片图标在界面中受到交互效果影响，如果有不同状态，每一种不同的状态都需要进行切片输出。

三、命名规则

由于输出的切图较多，所以需要一个有序的命名规则。命名规则并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，只要方便自己查找，也能使开发者看得懂即可。

个人习惯的命名方式是：“界面或者功能+ 控件名+ 状态.png”名称应使用英文命名( 中文不识别，推荐小写字母)，不要以数字或者符号当作开头，使用下划线进行连接；举个例子：一个主页的处于正常状态的确定按钮：home_sure_normal@2x.png

按钮（btn）有几种状态：

一般（normal）：btn_xxx_normal.png

点击（pressed）：btn_xxx_pressed.png

不能点击（disabled）：btn_xxx_disabled.png

选中（selected）：btn_xxx_selected.png

常见控件名称：

icon（图标） img（图片） list（列表） menu（菜单） bar（栏） statusbar（状态栏） navbar（导航栏）

tabbar（标签栏） toolbar（工具栏）

switch（切换开关） radio（单选框） checkbox（复选框）

bg（背景）