UI系列干货 - 切图&命名
我们都知道UI设计切图是最重要的设计输出物，切图输出的命名规范不规范也直接影响到工程师对设计效果的还原度。网上也有很多这样的教程，大多比较笼统，今天我们就从两个方面0基础教你学会切图和命名的方法。
切 图
一、设计切图的原则
设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中，首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求。
其次，切图输出应该尽可能降低工程师的开发工作量，避免因切图输出而导致不必要的工作量。所以我们要在程序里放置多套切图，然后让程序判断「主人」的手机是什么型号，显示不同的切图。这样才能够完美地呈现给用户最好的体验。最后，输出的切图应当尽可能的压缩大小，以降低APP的总大小，提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。
1. 切图资源尺寸必须为偶数
众所周知，智能手机的屏幕大小都是偶数值，比如iPhone 7的屏幕分辨率是750*1334 px。切图资源尺寸必须为双数，是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机上被分为两份各0.5px。
所以如果是单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，造成开发出来的APP界面效果与原设计效果差距甚远。
2. 图标切图输出多个平台尺寸
在切图资源输出中，图标切图输出是至关重要的部分。在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。
为了适配大分辨率手机（例如iPhone 7plus），图标在切图的时候需要输出@2x和@3x的切图，其中@2x的切图可以满足双平台大部分机型的适配要求，@3x是用来适配iPhone手机的各种plus版本（后边会有文章专门讲解关于适配的问题）。@3x是@2x尺寸的1.5倍，例如一个图标切图@2x尺寸是44px，那么@3x尺寸是66px。
3. 为提升APP加载，尽量降低图片大小
在切图资源输出中，图标切图是很重要的部分，比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大，不利于用户在使用app过程中加载页面，因此图片切图要尽量压缩图片文件的大小。
4. 可点击部件注意点击区域不小于88px
44px的点击区域数值是在iPhone 3 （320×480px）普通显示屏下制定出来的，在手机分辨率大幅提升的现在，这个数据自然要与时俱进。
在iPhone7 （750*1334px）的Retina 显示屏下44px点击区域就变为了88px。但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px，换算成物理尺寸后大致是在7mm-9mm之间。所以在@2x中就是44pt（88px）。苹果的导航条、列表、工具栏都充满了44pt（88px）这个神秘数字。我们在设计时一定也要考虑到手指的点击区域。所以在iOS官方的空间尺寸也经常出现88px的数值，比如菜单栏的高度便是88px。
无处不见的44pt（88px）
5. 按钮部件要把相关状态都切图输出
在切图过程中，不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图，比如正常状态、点击状态、不可点击状态。这个也是设计师经常会出现的失误，比如在按钮切图的过程中可能会忽略点击切图的状态。所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来，避免后期切图的时候遗漏状态。
二、切图输出类型
1.桌面应用图标切图输出
App的桌面图标会被运用在很多不同的地方展示，比如手机桌面、APP store、手机的设置列表，所以app桌面图标需要很多个不同尺寸的切图输出。两个平台对相应桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。
2.系统图标切图输出
一套图适配双平台：
iOS平台（iPhone 6plus版本除外）和安卓平台公用44*44px切图素材，即可实现一套切图适配两个平台的开发。
适配大屏幕：
为了适配iPhone 6plus、iPhone 7plus，单独切一套比原有44*44px切图大1.5倍的切图，即66*66px大小的切图。
2.图片类切图输出
图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。
同一类型的图片切图，一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大，在切图过程中需要控制切图文件的大小。
全屏切图类：
局部切图类：
空白页提示案例图：
3.动效元素切图输出
动效元素切图一般是指在app中加载动效所需要的切图元素，比如QQ 的下拉加载动效就是由若干张切图连续播放形成的。
这些图片按照序号排序播放我们页把他们叫做序列切图。序列切图是在做UI设计的过程中必然会遇到的问题，这种切图要求要保证动效播放时的流畅自然，是需要设计师仔细斟酌的。
序列图切图：
序列图实现效果：
4.可拉伸元素切图输出
可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。这些元素通过瘦身压缩，可以极大地见效图片的大小提升用户在使用app中的加载速度。在iOS中这种切图方式叫做平铺切图，在安卓中这种切图方式叫做点九切图法。
横向拉伸切图：
竖向拉伸切图：
5.无需切图的部分
再设计切图输出中很多元素是不需要输出的，直接使用系统原生的设计元素修改参数即可。
作为设计师需要知道哪些元素是需要切图，哪些元素是使用系统自带的避免不必要的切图。比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的。
例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可，工程师会根据设计效果通过代码实现这种效果。
三、降低切图大小的方法
1. 点九切图法
点九切图是安卓平台独有的图片处理方式，因为文件扩展名为.9.png所以被称为点九切图法。点九切图的作用主要是为了适配安卓多种多样的手机机型适配，这种方法可以将图片进行横向和竖向的随意拉伸，并且不会损坏图片效果。另一个重要的作用就是可以减少不必要的图片文件大小，极大提升页面加载速度。是安卓平台重要的切图方法。
制作点九的软件是“DRAW9PATCH”可以很方便的制作点九图并且可以预览切图后的开发效果十分方便。设计师的话也可以在PS中用铅笔工具绘制点就图。
draw9patch下载：
下载链接:https://pan.baidu.com/s/1L49b-3ugkARJkyJIFD5Mhw
点九切图方法：
http://uicool123.com/detail/96
案例示意：
横向拉伸只需在可拉伸区域内做黑色标记即可，外围投影标记黑色线即可：
横向竖向拉伸只需在可拉伸区域内做黑色标记即可，外围投影标记黑色线即可：
2.Tinypng
利用“Tinypng”智能png和jpg在线压缩工具，将较大的图片切图在不影响图片质量的情况下压缩。Tinypng在线压缩工具可以在图片质量和文件大小上找到一个完美的平衡，基本不会降低图片视觉质量但却会极大的压缩图片切图大小。Tinypng是非常值得推荐的图片压缩利器，也是现在被运用最广广泛的在线压缩工具。
一张透明png图片原大小57kb在经过压缩后变为15kb，图片大小直接减少74%，但是图片效果用肉眼基本分辨不出区别。不得不说Tinypng的智能压缩效果是如此神奇。
使用方法简述
1. 在红色框内点击去本地选择你想要压缩的图片文件，每次最多上传20张图片，每张图片总大小不超过5mb
2.点击红框内的下载按钮下载单个已经压缩过的图片，如果你有上传多张图片你可以选择点击全部下载按钮一次性下载所有压缩的图片。在下方现实的是本次压缩的大小占比，你就可以很明确的知道它的作用了。
3. 恭喜，你已经完成压缩了。
3.Cutterman（PS插件）
Cutterman是现在最主流的设计师切图利器，能够自动将你需要的切图进行输出。极大的减轻了设计师的工作量，提升了切图效率。它支持各种图片格式、尺寸、形态输出， 兼容安卓、iOS、WEB各种系统的一键输出。以下是Cutterman的使用方法简介，下载链接这里就不放了，直接在PS扩展功能免费下载安装。
1. 一键切图，真正解放双手
Cutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，快到没有朋友！
2.支持iOS 平台
输出支持IOS 平台的单倍图、双倍图，支持iPhone 6/6P尺寸比例。
3. 支持Android平台
输出支持Android平台的各种分辨率大小图片，什么XXHPDI，XHDPI，HDPI啊之类的，通通自动化输出，为你节省出更多的时间陪小伙伴好好玩耍。
4. 支持各种图片格式输出
什么png、jpg、gif通通不在话下，还可以自己缩放、压缩大小呢。从此，就告别那个所谓的“存储为web所用格式”的功能啦~~
5. 多个图层合并、单独输出
图层太多？木关系！可以多选嘛！支持选中多个图层合并输出，也可以逐一输出的哦，简直方便到爆！
6. 固定尺寸输出
想要输出固定尺寸的ICON，多种姿势让你选择，秒秒钟的事情~~
4.Sketch Measure
Sketch Measure是最新的Sketch切图插件使用方法非常简单，能够一键生成Html标注文件，并且自动生成设计规范文件十分高端。
下载链接：
https://pan.baidu.com/s/1cHEf8q
双击 Sketch Measure.sketchplugin 完成安装
命 名
关于切图命名的规范，这是UI 设计师最基础的知识之一，但作用非常大，可以帮你和同事、开发高效对接，提升整体工作效率。建议学习。
关于切图命名的规范，我个人觉得关键是在于团队必须有一个统一的规则，所有成员严格遵守并且和所有开发全盘拉通，不然一切都是空谈。
不同的团队使用的软件都不一样，如果经常使用sketch软件中Symbols 的同学，可能在命名的时候会考虑更多内容，但是照顾到还有很多同学在使用PS 作图，所以这里只介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路，仅供参考。
一、为什么要制定规范的命名规则
1. 自身层面
对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。
2. 团队层面
如果命名不统一，大家就很难达成共识，任务交接时需要很大的学习成本，所以规范的命名对于团队协同也有极大的推动作用。
3. 开发层面
这一点是最重要的，可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，因为只要我们的命名足够规范，并且和开发达成共识，他们完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。
二、所有命名全部为小写英文字母
这一点的理由很简单，我们的目标是让开发直接拿我们的切图进行使用，不能够随意修改名称，但是我们要知道，开发哥哥的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会每一个去更改的。你想让他凌晨一点还加班吗？你想让他扛着4米大刀在上班路上堵你吗？所以为了保命全部用小写的英文字母
！
三、命名格式
众所周知，一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。
通用切片命名格式：
组件_类别_功能_状态@2x.png
举例：tabbar_icon_home_default@2x.png
（对应中文：标签栏_图标_主页_默认@2x.png）
模块特有切图命名规则：
模块_类别_功能_状态@2x.png
举例：mail_icon_search_pressed@2x.png
（对应的中文为：邮件_图标_搜索_ 默认@2x.png）
当然这两个例子都是比较基本的情况，有很多时候可能一个单词并不能清楚的描述功能，比如有两个名字相同的搜索图标，大小不一，那这种情况你就可以这样命名：mail_icon_search_big_default@2x.png，我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称，希望大家能够活学活用。（大家要注意，命名中不能含有空格！）
常用英文单词表：
如果所有命名都写为全称，名字就会特别长，所以我们可以将一些常用的英文单词进行缩写，减少工作成本与开发代码资源。至于怎么缩写，只要整个团队能够达成共识并且输出一份缩写清单，任何缩写规则都是可以的。
下面提供一些命名时常用的英文单词列表（有些是已经缩写过的，仅供参考）
bg（backgrond 背景）
nav（navbar 导航栏）
tab（tabbar 标签栏）
btn（button 按钮）
img（image 图片）
del（delete 删除）
msg（message 提示信息）
pop（pop up 弹出）
icon（图标）
selected（选中）
disabled（不可点击）
default（默认）
pressed（按下）
back（返回）
edit（编辑）
content（内容）
left/center/right（左/中/右）
logo（标识）
login（登录）
refresh（刷新）
banner（广告）
link（链接）
user（用户）
download（下载）
note（注释）
有些人会觉得写这么多英文太麻烦，但其实为了自己专业能力的提高，这种规范的命名方式是必须要经历的过程，当你习惯了这样的命名方式后就会发现非常方便！
总 结
最后还是想和大家说，有什么不懂得地方，真的要多去咨询开发的同事，不能站在自己角度去思考问题，因为每个公司架构都不太一样，所以人家的切图命名方式可能稍微都不太相同，建议切图之前都可以想和开发沟通一下，你需要哪些类型？给你这样行不？苹果和安卓开发的切图文件管理机制是怎样的？有什么区别？如果这么基础的问题你都不知道，而是拿着别人的规范直接套用，那结果就是被别人牵着走。