最近关于切图的问题私信非常多，所以借此机会做一篇相关的介绍，分享一些标注和切图的必要知识点和交付经验。
老规矩，还是先扫盲一下切图（Slice）是什么，即将产品中需要应用到的位图、矢量图形按需导出，用于前端开发的界面样式实现。
切图是一个专业术语，这个词汇的来源应该是从中国互联网早期网页开发流程中继承下来的。
CSS 样式表虽然很早就存在了，但在 WEB1.0 时代并没有普及。彼时的网页实现方法，是通过表格（Table）布局形式，将一个页面切割成若干矩形的表格，然后再在里面填充图片、文字。
基于这样的实现模式，诞生了专门为网页设计而生的一代设计（切图）神器 Fireworks，它的核心目标就是针对表格布局来进行快速、有效的切图工作。
比如看下图，就是使用 Fireworks 实现表格布局切图的典型案例：
随着网页前端技术的普及，CSS 技术的应用，这种切图的方法逐渐没落了，并且因为其它功能和 PS 高度重叠，PS 中也加入了切片和 Web 格式导出模式，所以 Firework 在 13 年被停止更新。
理论上讲，现在使用的图片导出模式并不是完全由 ”切片“ 生成的，但我们把切图这个词汇长期保留了下来，它既是动词，又是名词。
切图在动词模式下，是指前端实现界面样式的视觉层编写工作；名词模式下，指的是导出的必要图片素材内容。
那什么才是必要的图片素材？它要满足下面这些条件：
前端无法通过代码写出来的图像、图形 ，如图标、LOGO等
内置到项目程序内的文件夹而不是从网上读取，例如用户上传头像、商品图就不是切图
通过代码实现成本过大，不如使用切图完成，如一些特殊的投影、模糊效果
虽然市面上现在涌现了不少切图交付工具，我们下面也会选用一款做解释，但不代表设计师完全不用考虑切图的问题。
设计师需要在设计流程中为切图流程提供一个良好的基础和环境，确保前端使用切图文件时的准确性和效率。
2.1 图标切图文件首先图标是我们切图中最常见的类型，但是图标的切图讲究也非常多。首先，我们要确保同一规格的图标，背后是有一层统一尺寸的透明矩形（View）的，而不是只有图形本身的边缘，
统一的尺寸，才能确保标注反应的间距是一致的，和谐的，而不是各成体系，在页面中四处流窜。
同时，图标的切图要确保多种状态的完整，很多图标会有点击、禁用等不同形式，需要提前做好。
如果图标出现了投影，并且投影一定要采用切图导出的情况，就一定要和开发先确定好投影的切图规则。务必保证切图包含了投影的区域，而不是只有主体部分。
针对图标，导出的格式也好几种，首先不考虑 Fonticon 形式，一般的图形格式可以使用 PDF、SVG、PNG 三种。
PDF、SVG 都有有各自的局限，PDF 只能在 iOS 中应用，SVG 在 Android 和 WEB 中应用，并且不能实现渐变和投影等复杂效果，而且需要确保切图的那个文件要合并路径（你们导出SVG出BUG的主要原因）。
所以，图标切图中，最稳定也最理想的格式始终都是 PNG 位图。
2.2 一般位图素材一般位图素材，即画面中使用的一些小视觉元素、特殊标题、卡片背景等，使用 PNG 格式并输出 1、2、3x 格式即可。
但是，我们同样要考虑到这些位图元素本身的尺寸和显示模式。比如下图我们展示的卡片中，如果背景作为一个固定位图素材，那么切图必然不是整个面板导出，或者保留圆角导出。而是给一张接近比例，但尺寸更大的直角图片，方便前端在进行适配的时候使用不同蒙版比例能正常显示。
任何涉及到适配和大小变化比较多，并且有不同圆角需要的非直角图形都可以只用这样的做法，不要在切图中应用圆角，而是留给前端通过代码来实现圆角蒙版。
2.3 全屏背景素材最后一种，就是类似启动页、注册登录页的背景大图了，它们不是一般的位图素材。我们知道常规位图需要输出 1、2、3x 倍率用来适配不同分辨率的机型，如果我们也这么导出，那么 iPhone 13pro 的全屏背景，就达到 1170*2532 的尺寸。这是一个大于 1080p 接近 2K 超大画布，使用 PNG 无损输出这样的位图，一个位图文件的体积就非常大。例如引导页的多张位图背景，就可以让整个安装包多几十 MB 的体积。所以，面对这类大型背景图，我们只需要导出 2x 尺寸即可，下图是两种倍率的体积对比。
并且，720p 以上的位图，在手机的显示上并不会有太明显的区分，我们需要为放弃一小部分的显示效果来降低位图的占用空间。
同时，这种大背景图同样涉及适配的问题，导出切图的实际办法并不是直接使用设计稿尺寸比例，而是给出更通用的规格，需要和你们的前端商量。如果条件合适，可以为这类素材放弃 PNG 格式而使用 JPG，通过 PS 的 WEB 格式导出进一步压缩图片尺寸，再应用到项目切图中去。
以上这些基本的切图类型的认识，是设计师必须掌握的基础知识点，然后，才是使用具体的切图工具，进行项目交付和团队协作。
这里，我们就来简单分享一下，如何在团队协作中正确使用切图工具进行交付。
这里的案例我们选择的是 Mockplus，中文叫摹客，我们在之前的 Figma 导出标注方法一文中已经提到过了。文章链接：
首先要确保你在 Mockplus 官网注册过账号（https://www.mockplus.cn/），然后在 Figma 的社区中搜索 Mockplus 的插件。或者你可以直接在摹客官网下载“Figma插件”并安装。https://www.mockplus.cn/download/figma-intergration/?hmsr=superman2020
常规的切图，就是把你设计好的界面画布选中，然后在插件中打开 Mockplus，点击创建项目，选中项目，再点击上传完事。
这么搞就完事了？那前面说那么多就白讲了。
工具提供给我们的只是一个方便的协作和存储平台，但该怎么有效的完成切图，是需要设计师有目的性进行准备的。在这里我们讲解几个直接这么操作的弊端：问题1：图标的不同状态往往没法直接显示在一个画布中，这时候另一个状态的图标要到别的页面找，才能凑出整套。问题2：同一页面包含多个不同状态，会输多个界面，穿插包含一些复用和不同的图标，那么这几个页面的切图应该怎么设置，就会变成一个难题。问题3：包含了蒙版的元素，直接从画布中导出，必然得不到我们想要的结果。问题4：切图本身的正确性，没有验证，尤其是涉及到包含投影的元素上，往往投影被裁切。专业的切图和导出必然要经过设计师的安排，而我在处理这类模式中，会做一件事，就是演示和切图分离，专门为切图提供一个独立的画布放置。
如果每个页面使用一个独立画布，或者整个大型项目使用一个独立画布，都是不现实的。这时候，我们就要灵活运用工具中提供的分组功能。
即将同模块、类型页面添加到一个分组中，每个分组添加一个切图的画板。这首先可以在设计软件中实现，每个分组添加一个独立的切图画板，放置切图元素。
然后，将这些内容上传进 Mockplus 以后，再进行相同的编组处理。这么处理的方式，不仅可以让我们自己在控制切图文件的时候能进行准确性检查，同时符合前端开发的习惯 （一个模块一个模块开发）。
并且，如果切图文件有什么细节上的调整更新，我们不需要每次重新上传页面，而是只在这个画布中更新即可，效率也会大大提升。
下面是我们演示的链接，可以复制在浏览器中查看：https://app.mockplus.cn/s/jPMymKb8u6U一定要记得，切图交付是需要设计师在理解切图需求、开发习惯后，尽可能贴合实际情况进行准备的过程。最终的目的是提高设计还原度，减少 BUG 的产生数量。
最后，简单讲解下切图交付工具的选择吧。类似 Measure 导出本地 HTML 的插件已经没有使用的必要了， 一定要选择云端实时更新、分享的工具。