Sketch切图终极指南：从基础到高效交付，打造完美设计资产28

在UI/UX设计流程中，“切图”是设计稿从视觉创意走向实际产品落地的关键一环。它不仅仅是将设计图导出为图片那么简单，更是一门关于效率、精度和开发协作的艺术。作为一名设计软件专家，我深知Sketch作为一款以矢量设计为核心的工具，在切图方面拥有无与伦比的优势和灵活度。今天，我们就来深入探讨Sketch中的切图哲学，从最基础的操作到高级技巧，帮助你将设计资产完美交付给开发者，确保产品在各种屏幕上都能呈现出像素级的完美。

切图的本质在于将设计稿中的UI元素、图标、图片等转化为开发者可以直接使用的图片资源或矢量图形。一个高效、规范的切图流程不仅能提升团队协作效率，减少沟通成本，还能确保最终产品的视觉一致性和性能表现。Sketch凭借其直观的界面、强大的导出预设和灵活的图层管理，成为了众多设计师的首选切图工具。

一、理解Sketch切图的基础：从“可导出”开始

Sketch的切图功能高度集成在图层和画板（Artboard）中，核心概念是“Make Exportable”（设为可导出）。

1. 图层可导出设置：

任何一个图层（Layer）、编组（Group）或者符号（Symbol）实例，都可以在右侧的“Inspector”面板中找到“Make Exportable”选项。点击加号“+”按钮，即可为当前选中的元素添加一个导出预设。
尺寸（Scale）：这是最常用的设置。你可以选择标准的倍率，如`1x`、`2x`、`3x`，以适应不同DPI（每英寸点数）的屏幕，比如Retina显示屏。你也可以自定义尺寸，输入如`50%`、`200w`（宽度200像素）、`150h`（高度150像素）等。
前缀/后缀（Prefix/Suffix）：用于在导出的文件名中添加前缀或后缀。例如，设置后缀为`@2x`，导出的文件将自动命名为`icon_name@`，这对于区分不同倍率的资源至关重要，也是iOS/Android开发的标准命名规范。
格式（Format）： Sketch支持多种导出格式，包括：

PNG：适用于需要透明背景的图标、插画、UI元素。无损压缩，但文件相对较大。
JPG：适用于照片、背景图等不需要透明背景的位图。有损压缩，文件较小，可调整压缩质量。
SVG：矢量图形格式，适用于图标、Logo。无损、可缩放且文件极小，是Web和部分移动端开发的理想选择。
WebP：现代图片格式，由Google开发，具有优秀的压缩效率（比JPG和PNG更小），同时支持透明度。逐渐被更多浏览器和平台支持。
PDF：适用于打印或高精度预览。

背景颜色（Background Color）：对于PNG和SVG格式，可以选择是否包含背景色。默认是透明。对于JPG，则必须有背景色。

2. 画板可导出设置：

当选中一个画板时，“Make Exportable”选项同样可用。这允许你将整个屏幕或页面作为一个完整的图像导出，通常用于交付设计稿预览或生成全屏截图。

3. 批量导出：

你可以在左侧图层列表中选中多个图层或画板，然后统一设置它们的导出参数。或者，在完成所有元素的导出设置后，点击菜单栏的“文件”>“导出...” (File > Export...)，或使用快捷键`⌘ + E`，Sketch会列出所有标记为可导出的资产，你可以在这里一次性导出所有或部分资产。

二、Sketch高效切图的进阶技巧

掌握了基础操作后，让我们深入了解一些能显著提升效率的进阶技巧。

1. 利用“切片工具”（Slice Tool）导出自定义区域

“切片工具”位于工具栏，通常隐藏在矩形工具下方。它的独特之处在于，它不依赖于任何一个图层或编组，你可以直接在画布上拖动创建一个切片区域。这个工具在以下场景中非常有用：
导出非矩形区域的背景图：例如，一个背景图由多个不规则形状的元素组成，且这些元素不是一个整体编组。你可以用切片工具圈出你想要导出的矩形区域。
导出多个图层组合的局部：有时你可能需要导出由多个图层（甚至不同编组）组合而成的某个区域，而不是其中任何一个单独的图层。
导出画布空白区域：例如，你需要导出UI之外的某个特定图形区域。

创建切片后，它会作为一个独立的“Slice”图层出现在左侧图层列表中，你可以像对待普通图层一样，为其设置导出参数。

2. 灵活运用导出预设（Export Presets）

频繁地为每个图标或图片设置`@1x, @2x, @3x PNG`或者`SVG`会非常耗时。Sketch允许你创建并保存自定义的导出预设。

在Inspector面板中，当你为某个图层设置好一套导出参数（例如：`1x PNG`, `2x PNG`, `3x PNG`）后，点击`+`按钮旁边的齿轮图标，选择“Create Preset From Current”。给预设一个有意义的名称（例如“iOS Icons”），之后你就可以一键将这套预设应用到其他任何图层上。

导出预设是保证团队切图规范和效率的利器，尤其是在大型项目中，能够确保所有设计资产的导出标准一致。

3. 符号（Symbols）与切图的完美结合

Sketch的符号功能是其强大之处，它与切图结合使用能发挥出巨大的效能。
符号Master切图：如果你希望某个符号的实例都能以相同的方式导出，你可以在符号的Master（源符号）上设置导出参数。当你在设计稿中插入该符号的实例时，它们将自动继承Master的导出设置。
覆盖实例切图：有时，你可能需要导出符号的某个特定实例，且该实例有自己的文本或颜色覆盖（Overrides）。你可以在该实例上直接添加导出设置，它将优先于Master的设置。
导出图标库：将所有图标制作成符号，然后为每个符号Master设置好`@2x`, `@3x PNG`和`SVG`的导出预设。在导出时，你只需选中所有图标符号的Master，即可批量导出完整的图标库。

4. 智能的命名规则与文件组织

规范的命名是高效切图和良好协作的基础。Sketch的导出功能允许你自定义文件名，结合前缀/后缀功能，可以实现非常智能的命名。
图层/编组命名：在Sketch中，你图层或编组的名称将直接作为导出的文件名（除非你在导出设置中明确指定了其他名称）。因此，务必在设计阶段就养成良好的命名习惯。例如，`icon_home`, `button_primary`, `bg_onboarding_welcome`。
平台特定后缀：对于iOS平台，通常会在`2x`和`3x`的图片名称后添加`@2x`和`@3x`。Android平台则使用`drawable-hdpi`, `drawable-xhdpi`, `drawable-xxhdpi`等文件夹来区分密度，但文件名本身通常不带倍率后缀。了解目标平台的命名规范，并利用Sketch的后缀功能进行适配。

示例：如果你的图层命名为`icon_search`，并设置了`@2x PNG`和`@3x PNG`导出，最终会得到`icon_search@`和`icon_search@`。

三、切图的最佳实践与交付流程

1. 文件格式选择指南

PNG：适用于所有带有透明度的UI元素，如图标、Logo、插画。保持无损，但文件大小相对较大。
JPG：适用于照片、大面积背景图等不需要透明度的位图。可通过调整质量来平衡文件大小与视觉效果。
SVG：矢量图标、Logo的首选。文件小、可无限放大不失真、支持CSS样式修改，是Web和现代移动开发的趋势。
WebP：在对文件大小有极致要求且支持WebP的场景下使用。它在保持较高图像质量的同时，能提供比PNG和JPG更小的文件。

2. 应对多倍率屏幕（Retina & 高DPI）

现代设备屏幕DPI越来越高，设计时通常会以`1x`或`@1x`为基准（如Web端），或以`@2x`为基准（如iOS，iPhone 6/7/8）。导出时，为了兼容不同设备，需要导出多个倍率的图像。
Web：通常提供`1x`和`2x`（用于Retina屏幕）。使用`srcset`或`background-image`的`image-set`属性来按需加载。
iOS：默认`@1x`（老设备）、`@2x`（iPhone标准）、`@3x`（Plus系列、部分Pro系列）。在Sketch中直接设置`1x`, `2x`, `3x`后缀`@2x`, `@3x`即可。
Android： Android使用ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi等密度分类。通常提供`mdpi(1x)`, `hdpi(1.5x)`, `xhdpi(2x)`, `xxhdpi(3x)`, `xxxhdpi(4x)`。Sketch可以自定义比例，例如`1.5x`，来满足Android的密度要求。或者只提供`2x`, `3x`，让Android自行缩放。

3. 与开发者的协作与交付

切图的最终目的是为了交付给开发者。良好的交付方式能极大提高效率。
文件夹组织：将不同倍率、不同类型的切图分类放置在清晰的文件夹结构中。例如：`assets/images/icons/`，`assets/images/backgrounds/`。
使用设计协作工具： Zeplin、Abstract、Figma（虽然不是Sketch工具，但作为协作平台值得提），这类工具可以自动解析Sketch文件，生成测量标注、代码片段和可下载的切图资产，极大简化了设计师和开发者的工作流。
明确沟通：在交付前，与开发者沟通切图的命名规范、文件格式、尺寸标准等，确保双方理解一致。对于特殊需求，如SVG的内联使用、CSS Sprites等，也应提前沟通。
版本管理：使用Abstract等工具进行版本管理，或者定期归档不同版本的切图，以防万一。

四、常见问题与解决方案

1. 导出图片边缘模糊或有杂边

问题原因：图层不是像素对齐（pixel-perfect），或者尺寸不是整数。位图在非整数像素上渲染时，容易出现模糊。

解决方案：确保所有图层的位置坐标（X, Y）和尺寸（W, H）都是整数。Sketch的“对齐到像素网格”功能（View > Canvas > Show Pixels / Pixel Grid）和“对齐到半像素”功能（Align to Pixel Grid / Half Pixel）可以帮助你做到这一点。对于矢量图形，确保路径锚点和控制柄也对齐到像素网格。

2. 导出图片尺寸不符

问题原因：导出倍率设置错误，或者图层本身包含超出实际可见范围的隐藏内容。

解决方案：仔细检查导出设置中的`Scale`参数。如果图层有内容溢出，可以将其放入一个`Mask Group`（遮罩组）中，或者使用`Slice Tool`精确选择导出区域。

3. 导出文件过大

问题原因： PNG格式用于照片；JPG质量设置过高；SVG中包含不必要的元数据或复杂路径。

解决方案：
对于照片，优先使用JPG并适当降低质量（例如70%-80%），而非PNG。
对于SVG，导出时可以勾选“Trim透明像素” (Trim Transparent Pixels) 或“使用Artboard区域” (Use Artboard Bounds)。导出后，可以使用在线SVG优化工具（如SVGO）进一步压缩。
考虑使用WebP格式，它通常能提供比JPG/PNG更小的文件。