界面设计完工之后，导出切图这件事不能只瞅着图片能不能导出来，还得看尺寸对不对、格式有没有统一、文件名是不是规范的。Sketch这个工具呢，允许把图层、画板还有切片都设成可导出的对象，而且可以给同一个对象配上好几套导出规格。默认情况下，在Mac端会按原始尺寸导出一张1x的PNG格式图片，到了需要适配不同设备的时候，再去补充2x、3x或者直接导出矢量格式，这样交付给开发或者放到别的平台上去用，才不会乱套。

　　一、切图应该怎么导出来

　　在Sketch里导出切图，比较常见的有两种操作方式。如果图层本身的边界已经很精准了，那直接把那个图层标成可导出对象就好；要是你还想单独控制一下导出来的范围，那就再创建一个Slice切片，用它来框住想要的部分。

　　1、直接让图层变成可导出

　　在画布上选中你需要导出的那些图标、图片、组合好的图层（Group）或者整个Frame，然后在右侧检查器的最底下找到【Make Exportable】这个按钮，点一下就行。设好想要的规格之后，再点一下【Export Selected】就能把当前这个对象导出来了，或者也可以直接按一下快捷键【⌘】加【E】，这样操作起来会更快一些，省得来回倒腾鼠标。

　　2、给同一个对象配上多倍尺寸

　　在Export这块区域里，你会看到一个加号按钮，点一下就能给同一个对象增加另外几套导出规格。常用的搭配是1x、2x和3x的PNG格式，用来应对不同分辨率的屏幕。如果是矢量的图标，还可以再单独加一项SVG格式，让开发在需要的时候能拿到无限缩放的版本。Sketch的Size栏里，既支持直接填2x、3x这样的倍数，也支持写128w或者128h这种写法，意思是按指定宽度或者高度来导出，用起来很灵活，不用自己手算。

　　3、借用Slice切片来控制范围

　　要是图层本身不太好直接导出，比如边缘有透明留白、几个图标叠在一起不好拆，那就点一下【Insert】→【Slice】，或者直接按键盘上的【E】键，在画布上拖出你需要的那块范围。你也可以先点选一个现有的图层，让Sketch自己沿着图层边界帮你把Slice创建出来。Slice本身是可以移动、缩放、隐藏，也能分组的，所以处理那种带透明背景的组合图标，或者结构比较复杂的画面时，用它来框范围会更精准，不会切出多余的东西。

　　4、一次性把所有资源全部导出去

　　当整份设计稿里该标记的都标记完了，就可以不用一个一个点了，直接去点【File】→【Export】→【All Assets】，或者按【Shift】加【⌘】加【E】这个快捷键。这时候会弹出一个汇总窗口，里面会把所有之前被你标成可导出的图层、Frame和Slice都列出来，你再勾选一下到底要导哪些，选好保存到哪个目录，一下子就能全部出完，放在一起交给开发或放进项目资源库里，省时很多。

　　二、切图的命名规则要怎么定

　　Sketch里面并没有一个单独的全局命名规则设置面板，这点跟一些专业的资源管理工具有点不一样。它的文件名，主要是跟着图层或者Slice的名字走的，而多倍尺寸那份图的名字，则是通过Prefix（前缀）或者Suffix（后缀）来补充的，所以图层名字本身就成了命名的关键来源。

　　1、先把图层本身的名字改规范

　　在左侧那个图层列表里，提前给准备导出的每个对象都写一个清楚明白的名字，比如icon_search、btn_submit、banner_home这种一眼能认出来的。千万不要让名字长期停在Group 12或者Rectangle 8这种系统自动生成的编号上，不然等切上一大批图之后，光看文件名根本不知道哪张是哪个按钮，又得回头对着设计稿一个一个地找，效率全耗在辨认上了。

　　2、靠后缀来区分不同倍数的图

　　在右侧Export那栏的旁边，你会找到一个【Prefix/Suffix】的输入框，这里就是给不同倍数打标记的地方。给2x规格的那一项，后缀填上 2x，给3x规格的那一项，后缀填上 3x，这样导出来以后就会自动生成icon_search.png、icon_search 2x.png和icon_search 3x.png这样一整套完整的文件。Sketch的官方文档里也提到了，Prefix和Suffix就是专门用来区分同一张图的不同缩放版本的，靠这个，开发那边在代码里引用的时候也正好对得上命名习惯。

　　3、在Slice名称里用斜杠来建文件夹

　　如果你希望导出来的切图能按模块自动分开存放在不同的文件夹里，可以在给Slice取名的时候，直接在名字里面加上斜杠。比方说，你把它命名为icons/navigation/back，等导出以后，Sketch就会把icons和navigation自动识别成两层文件夹，把back当成最终的文件名。这种方式很适合拿来做按钮、图标、插画还有各个不同页面资源的分类，就不用导完再去手工整理文件夹了。

　　三、切图导完之后应该怎么检查

　　切图全部导出来以后，别直接就打包往开发那边扔过去，还得再抽查一下尺寸是不是对的、透明区域有没有多余的东西、以及文件夹的层级结构是不是跟约定的一样，因为资源数量一旦多起来，命名上的小错误和边界上的偏差是很容易被忽略过去的。

　　1、瞅瞅透明留白有没有处理干净

　　在你选中一个Slice之后，有一个叫【Trim Transparent Pixels】的选项，它可以帮你去掉内容四周那些多余的完全透明像素。如果发现导出来的图标在画布里看着特别大，但实际内容却缩在一个小角落里，或者是放到开发界面上之后怎么都对不齐，那多半是因为留白没有被裁干净，先回Sketch里查一下这个设置有没有打开。

　　2、看看组合内容的导出范围对不对

　　有时候Slice是放在一个Group里面的，那就要注意一下【Export Group Contents Only】这个选项了。一旦用了这个，它就只会导出当前这个组合里面包含的那几层内容，不会把Slice覆盖范围内的、属于外面其他图层的元素一起带出来。所以如果你发现导出来的画面里多了原本不该出现的背景或线条，过来查一下这里是不是没选对。

　　3、最后过一遍批量导出列表

　　在正式批量导出去之前，最好再对着列表最后扫一遍，看看每个文件的名字、格式还有尺寸是不是都跟当初想的一样，别让一些奇怪的文件名趁乱混进去。如果设计稿是要交给开发人员用的，也可以通过Sketch的Web端把文件传上去，让开发自己在网页上挑着下载。Web端那边同样支持选分辨率、改前后缀，还有选文件格式，甚至可以一次性把文档里的全部资源都导出去，开发自己操作起来也更自主，不用每次都等你重新单独导一批。

　　总结

　　关于Sketch里怎么导出切图，以及切图的命名规则要怎么设定，整体操作上的顺序可以这样概括：先在画布上选中需要导出的图层，点一下【Make Exportable】让它变成可导出状态，然后按照不同的屏幕需要，给它补上1x、2x、3x还有SVG这些规格，碰上范围不好控制的地方再单独建一个Slice把区域框出来；文件名这块，靠的是图层或Slice的名称，再用Prefix和Suffix去区分不同倍数的版本，文件夹的分类层级则直接在Slice名字里用斜杠切出来；在打完包交出去以前，别忘了回头检查一下透明区域有没有裁干净、组合内容的范围有没有遗漏，再对着批量导出列表做最后一次确认，这样到了开发那一边，东西就干净清楚得多了，也省得来回沟通和返工。