移动UI设计切图是UI设计师非常重要的设计输出物，切图资源输出是否规范直接影响到开发工程师对设计效果的还原度。说白了，切图就仿佛把做好的设计稿切成一片片的拼图，然后工程师就对照着效果图把拼图拼好。因此，合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。
如果说精准的切图是考验设计师的能力，那么规范的命名则可以提高整个设计团队，包括后期工程师的工作效率，避免重复性工作，对于团队协作有巨大的推动作用。
一，切图与规范命名的原则
1.工程师在实现我们效果图的过程中，需要计算好每一个元素的位置，然后再调用我们切好的图进行填充，那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求；
2.切图输出应该尽可能的降低工程师的开发工作量，避免因切图输出而导致的不必要的工作量，养成良好的命名习惯，比如可以利用版本命名，亦或时间命名都可以更清晰地标明。
3.一个团队之间应该统一标准，制定并遵循规范，这样不管是后期版本的跟新迭代或者是设计师之间的交接，都会方便快捷很多。
二，切图的注意事项
1.切图资源尺寸必须为双数
大家都知道，我们智能手机的屏幕大小都是双数值，比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊，进而造成开发出来的APP界面效果与原设计效果差距甚远。
2.注意可点击区域
按照界面规范，iOS的可点击区域是不小于88*88像素，安卓不小于96*96像素，但是在实际的切图应用中，有时候两个图标离得特别近，如果这时可点击区域还是按照88像素来切的话，两个图标的可点击区域就会重合，容易产生误操作。
因此，我们在切图输出时，可以把可点击区域缩小到44*44像素，这个区域也是可以被手指点击到的，不足44*44像素的图标在切图时把画布大小改为44*44像素，这样就算两个图标离的近，也不会产生误操作啦～
3.可点击部件要把相关状态都切图输出，比如正常状态、点击状态。
在切图过程中不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图。这个也是设计师经常会出现的失误，比如在按钮切图的过程中可能会忽略点击切图的状态。所以我们在做设计图时最好尽量把页面中会出现的各种状态展示出来，避免后期切图的时候遗漏状态。
4.桌面图标切图
app的桌面图标会被运用在很多不同的地方展示，比如手机桌面、APP store、手机的设置列表，所以app桌面图标需要很多个不同尺寸的切图输出。iOS与安卓两个平台对相应桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，工程师后台会自动生成圆角效果。
5.不需要切图的部分
在切图输出中很多元素是不需要输出的，工程师可以直接使用系统原生的设计元素修改参数。作为设计师需要知道哪些元素是需要切图，哪些元素是使用系统自带的避免不必要的切图。比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的。例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可，工程师会根据设计效果通过代码实现这种效果。
三，命名格式
其实，每个公司的命名格式都不是完全一样的，在命名的时候应该跟开发工程师多沟通，提高团队的工作效率。在互联网公司，一个项目通常会分很多模块，有可能由同一个设计师来完成，或者每个模块由不同的设计师来独立完成，有的公司还有人会专门管理公共的组件，如tabbar、navigationbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。
通用切片命名格式：
组件_类别_功能_状态@2x.png
举例：tabbar_icon_home_default@2x.png
（对应中文：标签栏_图标_主页_默认@2x.png）
模块特有切图命名规则：
模块_类别_功能_状态@2x.png
举例：news_icon_search_pressed@2x.png
（对应的中文为：新闻_图标_搜索_ 默认@2x.png）
当然这两个例子都是比较基本的情况，有很多时候可能一个单词并不能清楚的描述功能，比如有两个名字相同的搜索图标，大小不一，那这种情况你就可以这样命名：mail_icon_search_big_default@2x.png，我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称，希望大家能够活学活用。（大家要注意，命名中不能含有空格！）
附上一些常用的英文单词供大家参考：
各种常用模块和组件
bg（backgrond 背景） nav（navigationbar 导航栏）
tab（tabbar 标签栏） btn（button 按钮）
banner（广告） msg（message 提示信息）
login（登录） avatar（头像）
line（线条） logo（标识）
各种状态
del（delete 删除） pop（pop up 弹出）
selected（选中） disabled（不可点击）
default（默认） highlighted（高亮）
edit（编辑） on（开启）
off（关闭）
四，切图实际操作
可能看了这么多，有些小白同学还是没明白到底怎么切图，在这里像素妹就教给大家iOS端使用ps切图的方法。
1.在自己找的到的地方新建一个切图文件夹，等会所有的切图都放在这个文件夹中，便于整理；
2.之前做过界面的同学可以随意打开一张自己的界面psd源文件，没做过界面的同学就画个小图标试着练练手，重要的是掌握方法就好，像素妹就随意找一张界面啦～
3.找到这个小图标的图层，如果小图标是分图层画的，就给这些图层编一个组。像素妹这次要切的小图标是红线框住的这个message图标。
4.给这个小图标的图层（或者编好的组）换一个规范的命名，像素妹这个是message图标，在这里用到之前讲的“模块特有切图命名规则”，命名就是homepage_icon_message_default@2x.png，翻译成中文就是首页_图标_消息_默认@2x，命名不需要完全相同，只要跟开发沟通好即可，大家活学活用哦；（再强调一次，命名必须是英文哦，中间的分隔线也必须是英文状态）
5.选中图层鼠标右击，选择“导出为…”，会弹出一个如下图的面板；
6.从图像大小可以看出，这个图标不足44*44像素，按照我们之前说的，可点击区域不能小于44*44像素，那么我们就把画布大小手动改为44*44像素，如下图；
7.点击全部导出，会出现如下图的面板，选择刚才新建的切图文件夹，再点击导出，就好了；
8.这是2倍图的切图方法，那么3倍图要怎么切呢？
（1）同样还是右击刚才的图层选择“导出为…”；
（2）在弹出的面板中，把缩放改为150%，如下图；
（3）既然图像大小缩放了150%，那么画布大小也要跟着缩放，则从刚才的44*44像素改为66*66像素，如下图；
（4）因为现在切的是三倍图，点击全部导出后，在弹出的面板，就把之前命名中的@2x改为@3x，存在同一个文件夹，如下图。
9.现在切图文件夹中就有一个2倍图，一个3倍图啦，可以把它们拉入ps中，比照之前的图标，看看有无虚边，是否出错；
10.如果可点击区域超过44*44像素，就按照原来的大小直接导出即可，不用再去更改画布大小啦～
好啦，关于iOS切图像素妹就先讲到这里，安卓比iOS稍微复杂一些，像素妹下期再教给大家哦～大家可以试着操作一下，加深一下记忆，以后在公司里切图的时候上手就更容易啦！