序

如何输出设计稿，交接资料是否齐全(切图、标注、规范、稿件版本号等)都决定了处于工作流下游的前端工程师们的工作顺利与否。

不像做纸质媒体那样，设计好了打印输出即可，设计稿仅仅扮演一个展示宣传的目的，作为电子媒体的设计人员，你的设计不光有展示作用，大多涉及到和用户的交互，所以，掌握精准的切图规则是输出你作品的重要一步。

一：锁定哪些地方需要切图：

要想输出一份相对精准的切图，首先要知道哪些元素是需要切图，哪些元素是代码可以实现的。比如文字、单色背景或是规律性渐变的背景、边框和一些标准的集合图形（圆，椭圆，矩形等）是不需要提供切图的。例如：一个带有圆角的搜索框只需要在标注中标好尺寸大小、圆角大小、描边粗细、色值即可，程序员会根据这些参数去复现它。
例1：

输入框.png

这张图，需要的切图有2个地方：1）锁， 2）五角星；其他代码可以实现。

要切的位置.png

例2：

某设计图头部.png

这张图：需要的切图有3个地方：icon（如下）

要切的位置.png

注意：这里再切图时候，要把背景层隐藏，也就是皮粉色这层。也就是尽量保证切出来的图是不受到其他视觉层的影响，纯净的状态，以后设计稿微调了，这个icon的背景色变化时候，这份切图依然是能用的，不用从新切。

二：怎么切

切图时候注意的几点

1：划分动静态：

从视觉上大致划分出哪些要切的以外后，还要从语义上进一步划分下，即找出哪些是一成不变的，哪些是动态变化的。举个列子：

移动端电商页局部.png

为了看的清晰，隐藏掉所有不涉及切图的文本

隐藏文本后.png
这时候，很明显会发现，页面上的所有视觉区域中这类商品图（内容填充型的图片）是会变化的，所以它虽然满足第一步中的切图条件，但是这里要对它放行不处理。

2：尺寸

切图时候边界时候清晰不夹杂多余像素

3：偶数倍像素输出

移动端的屏幕大小都是双数值，所以如果是单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，尤其在小的icon上或是小的点击区域体现明显。这里附上网上找的一个例图：

单双倍切图的影响.png

这里为什么拿44px举例呢，顺便说下，这个尺寸是人为可点击的最为合适的范围，对应的物理可点击尺寸是7-9mm，对应到屏幕上的像素：1倍屏幕：44px，2倍屏幕：88px；

4：格式的选择：

一般所切视觉元素不是矩形的或是含有半透明状态的，保存时候格式为.png，支持透明。其他保存成.jpg即可。

5: 尽量降低图片质量。

在肉眼识别不出来的基础上降低图片大小，有时候在你切完图片后，文件大小比较大，比如一个小的icon可能几十KB，一个背景、装饰类图片大小几百KB快达到MB级别了，这个时候要稍微注意了，看看压一下。

ps:
这里也注意下是PC端设计还是移动端设计，大家都知道移动端的流量是很宝贵的，不要用户访问一下你家的
网站，小半个月的流量包就用完了，一个普通小页面就是几兆甚至十几兆的走，我想他上完这家网站，流量
报警了得哭。PC端的用户一般是宽带网络，一般流量上不是大问题，但是这个又影响到我们的服务器的带宽，这点在用户群小的站点上体现不明显，如果是淘宝等大的互联网站点上，由于你一个切图上一次不留神，多了一像素，导致百万级用户向我淘宝服务器请求这个页面上的这张切图时浪费了不少流量，这个值还是不可小觑的，所以综上，不管是图片质量还是切图时候边界时候清晰不夹杂多余像素都很重要。

三：补充说明

1：图片分类不同，要求不同

按照交互规格来看，设计稿上的图片元素大致分为三类：装饰类，展示类，功能类。前两类基本都是静态的视觉元素，功能类基本都是和用户发生动作交互的视觉元素，比如按钮。处理这三类的视觉元素时候，原则略有不同，比如:装饰类的一般是背景以及一些规则或是不规则的图案底纹等，这类输出一般都是比较大的切图，但是又不会抢用户视觉的地方，所以在压缩时候做清晰度和文件大小上做取舍时候，质量上可以衰减许多都没关系的。展示类：一般是要给用一个清晰良好的呈现状态，压缩时候清晰度优先。功能类一般是和用户发生互动的点击、滑动、拖拽等区域，这个区域的一般是规则图形（圆角矩形居多），背景上一般都是单色或是规则的渐变，所以不需要切图，如果有背景图或是不规则的渐变（多个渐变层的叠加），那么此时需要整块区域切出来，清晰度优先。

2：什么时候需要做雪碧图

雪碧图，又称精灵图，把所有的小图标拼接在一张图片中。
目的：
从工程角度看，减少了网络请求的次数，属于优化处理范畴。

何时出雪碧图：
当页面上出现icon大小级别的视觉元素并且出现数量大于2个的时候，就有必要考虑做成雪碧图，说白了就是把无数个小图做到一张大画布上。

按照什么规则出：
1：格式：png支持透明的格式
2：排布：从上到下依次排开，每张图间留有一定间距，5-10px左右。

使用雪碧图注意什么：
对于采用rem布局的项目，使用雪碧图时候，涉及到对应的缩放处理，这里不要使用：background：cover或是contain,他们此时是无法满足你需求的了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。这时我们要给background-size取具体值，其值为雪碧图的大小。
示例代码：
比如我们以iPhone5为例，此时dpr为2，页面scale为0.5，基准字体大小为100px。比如我们的元素为50 * 50px，sprite图片为200 * 50px，那css应该如下：

div{
    width: 0.5rem;
    height: 0.5rem;
    background-image: url(sprite.png);
    background-size: 2rem 0.5rem;
}

3: 设计稿尺寸说明：

一份尺寸合适的设计稿是切图的工作进行前的基础，那么选择几倍屏的设计稿呢。

市面上由于安卓手机的屏幕尺寸五花八门，我们不大会按照他们的尺寸，而苹果机相对正规许多，另外考虑苹果手机端retina屏（视网膜屏），为了能在视网膜屏下清晰显示，一般我们跟谁iPhone的机型尺寸，所以也有的我们约定成俗的“几倍屏的说法”；出一倍屏设计稿宽度就是：375，出二倍屏就是750，plus系列对应的dpr是3所以如果让设计在其机型上完美显示，设计稿出3倍屏。当然我们还要考虑安卓市场上大多数的dpr在什么等级上，为了折中，我们一般采用的是2倍屏，大体上能保证所有设备清晰显示。