精通Sketch导出：高分辨率多倍图资产的高效策略55

在当今数字设计领域，高分辨率屏幕（如Retina显示器）已成为主流，用户对图像清晰度的要求也随之水涨船高。设计师不仅需要创建精美的UI界面，更需要确保这些界面元素在各种设备和屏幕密度下都能呈现出完美的视觉效果。这意味着，仅仅导出一张“标准”尺寸的图片已经远远不够，我们需要掌握如何高效地导出“多倍图”（如2倍图、3倍图甚至更多）。

Sketch作为一款广受欢迎的矢量设计工具，其强大的导出功能正是为此而生。本文将作为一份详尽的指南，帮助您从零开始，逐步精通Sketch的导出机制，特别是如何轻松应对2倍图及更复杂的多倍图导出需求，让您的设计资产交付流程如丝般顺滑。

一、理解多倍图的必要性：为什么我们需要2倍图？

在深入Sketch的导出操作之前，我们首先要理解多倍图（Multi-Scale Assets）背后的原理和它在不同平台上的应用。所谓“倍图”，指的是相对于基准尺寸（通常是1倍图，即@1x）而言，按比例放大或缩小的图像。例如，2倍图（@2x）的宽度和高度都是1倍图的两倍，像素总量是1倍图的四倍。

1.1 像素密度与设备无关像素（DP/Point）

现代设备的屏幕像素密度差异巨大。例如，iPhone X的物理像素是375x812，但其逻辑分辨率（或称“点数”，Points）也是375x812。这意味着一个“点”在iPhone X上是由2x2个物理像素来渲染的。这就是我们常说的Retina显示屏。为了在这种高密度屏幕上显示清晰的图像，我们需要提供更高像素密度的图片，即2倍图或3倍图。

Web端： 浏览器通常通过“设备像素比”（Device Pixel Ratio, DPR）来判断。如果DPR为2，浏览器会优先加载@2x的图片以获得更清晰的显示。
iOS平台： iOS使用“点”（Points）作为设计单位。通常提供@1x、@2x、@3x三种尺寸的图片。iPhone 8 Plus等设备需要@3x图，而较旧的非Retina设备或模拟器可能使用@1x图。
Android平台： Android使用“dp”（Density-independent Pixel）作为设计单位。其屏幕密度分类更为细致，包括mdpi (1x)、hdpi (1.5x)、xhdpi (2x)、xxhdpi (3x)、xxxhdpi (4x)等。通常以xhdpi (2x)作为Sketch设计稿的基准尺寸。

1.2 不使用多倍图的后果

如果您的设计资产没有提供足够倍数的图片，在高分辨率屏幕上就会出现模糊、锯齿甚至过小（如果系统试图缩放）的问题，严重影响用户体验。因此，为不同像素密度的屏幕提供适配的多倍图是高质量设计交付不可或缺的一环。

二、Sketch导出基础：标记可导出对象

在Sketch中，任何图层（Layer）、编组（Group）或画板（Artboard）都可以被标记为可导出对象。这是导出流程的第一步。

2.1 如何标记可导出对象

1.

选择目标对象： 在画布上选中您想要导出的图层、编组或画板。2.

打开右侧检查器（Inspector）面板： 在其最底部，您会找到“Make Exportable”（标记为可导出）区域。3.

点击“Make Exportable”按钮或“+”号： 这会为选中的对象添加一个默认的导出设置。

一旦标记为可导出，该对象将在其右上角显示一个小小的导出图标（箭头），表示它已准备好被导出。

三、核心技能：导出2倍图及更多倍数

Sketch的导出功能强大且灵活，可以满足您各种多倍图的需求。

3.1 添加导出预设

在您标记了可导出对象后，可以在“Make Exportable”区域看到一个导出设置列表。每个设置包含“Scale”（缩放倍数）、“Suffix”（后缀）、“Format”（格式）和可选的“Preset”（预设）。

1.

Scale (缩放倍数): 这是设置倍图的关键。

数值加“x”： 例如，输入2x表示导出原始尺寸的两倍图。如果您希望导出0.5倍图，可以输入0.5x。

特定宽度/高度： 您也可以指定导出的固定宽度或高度，例如w100（宽度100像素）或h50（高度50像素）。Sketch会自动计算另一个维度以保持比例。

百分比： 同样支持百分比，如200%。

2.

Suffix (后缀): 用于在导出的文件名后添加标识，方便区分不同倍数或不同用途的图片。这是实现文件命名规范的重要部分。

2倍图后缀： 通常设置为@2x。例如，一个名为icon_home的图层，导出2倍图后将生成icon_home@。

其他倍数： 3倍图通常使用@3x。

Android平台： 对于Android，后缀通常根据密度类型来命名，如-mdpi、-hdpi、-xhdpi、-xxhdpi、-xxxhdpi。

3.

Format (格式): 选择导出图片的格式。

PNG： 适用于图标、背景透明的元素。支持透明度。

JPG： 适用于照片、复杂背景的位图。不支持透明度，但文件大小通常较小，可通过质量设置调整压缩比。

SVG： 矢量图形，无限放大不失真，适用于图标、Logo。文件大小通常很小。

PDF： 矢量格式，适用于打印或跨平台文档。

3.2 实例：导出2倍图和3倍图

假设您有一个尺寸为50x50点的图标，您想同时导出1倍图、2倍图和3倍图：

1.

选择图标图层。2.

在右侧检查器底部，点击“Make Exportable”旁边的“+”按钮三次，添加三个导出设置。3.

第一个设置：

Scale: 1x

Suffix: （留空或根据项目约定，通常不加后缀）

Format: PNG

4.

第二个设置：

Scale: 2x

Suffix: @2x

Format: PNG

5.

第三个设置：

Scale: 3x

Suffix: @3x

Format: PNG

完成设置后，您可以通过以下方式导出：

快速导出： 选中已标记的图层，点击右侧检查器底部的“Export [图层名称]”按钮。

批量导出： 如果您有多个可导出对象，可以点击顶部菜单栏的“文件 (File)” > “导出 (Export...)” (快捷键：⌘E)。在弹出的窗口中，您会看到所有已标记为可导出的对象及其预设。选择您想导出的对象，点击“Export”按钮。

导出的文件将自动以您设置的后缀命名，例如、icon_name@、icon_name@。

3.3 针对特定平台的导出策略

Sketch允许您灵活配置，以适应不同平台的导出需求。

3.3.1 iOS平台导出

设计基准： 通常以@1x（即逻辑点尺寸）进行设计。

导出设置： 为每个对象添加1x (无后缀或@1x)、2x (@2x) 和3x (@3x) 三个导出预设。

示例： 一个30x30点的图标，导出后会得到 (30x30px)、icon@ (60x60px)、icon@ (90x90px)。

3.3.2 Android平台导出

Android的密度分类比iOS更复杂，但Sketch的灵活缩放可以很好地应对。

设计基准： 通常以xhdpi (2x)为基准进行设计。例如，一个在Sketch中设计为48x48dp的图标，其实际像素尺寸是96x96px（因为xhdpi是2倍）。

导出设置： 根据Android的密度比例进行设置。

mdpi (1x) = 0.5x （基于xhdpi的0.5倍）

hdpi (1.5x) = 0.75x （基于xhdpi的0.75倍）

xhdpi (2x) = 1x （Sketch中的原始尺寸，即设计尺寸）

xxhdpi (3x) = 1.5x （基于xhdpi的1.5倍）

xxxhdpi (4x) = 2x （基于xhdpi的2倍）

后缀： 分别设置为-mdpi, -hdpi, -xhdpi, -xxhdpi, -xxxhdpi。

示例： 一个在Sketch中设计为96x96px的图标（相当于48x48dp的xhdpi尺寸），导出后会得到：

(48x48px)

(72x72px)

(96x96px)

(144x144px)

(192x192px)

3.3.3 Web平台导出

设计基准： 通常以1倍图进行设计。

导出设置： 通常只需要导出1x (无后缀) 和2x (@2x) 两种尺寸的PNG或JPG格式。对于图标等矢量元素，可以直接导出SVG格式。

示例： 一个50x50px的按钮图标，导出 (50x50px) 和button@ (100x100px)。

四、高级导出技巧与最佳实践

除了基础的倍图导出，Sketch还提供了一些高级功能和最佳实践，可以进一步提升您的工作效率和导出质量。

4.1 Slice 工具的使用

在某些情况下，您可能需要导出画布上不对应任何单个图层或编组的特定区域，或者需要导出带透明背景的复杂区域。这时，“Slice”（切片）工具就派上用场了。

添加切片： 在工具栏中选择“Slice”工具 (快捷键：S)，然后在画布上拖动，框选出您想要导出的区域。

属性设置： 切片也像普通图层一样，可以在右侧检查器中设置其尺寸、位置。同样，切片也可以被“Make Exportable”，并为其添加多倍图导出预设。

用途： 适用于导出不规则形状、背景纹理、或需要从整个画板中提取特定视觉元素的场景。

4.2 保存和应用导出预设

如果您经常需要以相同的倍数和格式导出，可以保存常用的导出预设。

在“Make Exportable”区域的某个导出设置右侧，点击齿轮图标。

选择“Make Preset...”来保存当前设置。

下次您可以在“Add Preset...”中选择已保存的预设，一键应用到新的可导出对象上，大大节省时间。

4.3 命名规范与文件夹结构

一致的命名规范和合理的文件夹结构对于设计资产的管理和开发者集成至关重要。

图层命名： 在Sketch中，养成良好习惯，为所有图层、编组和画板赋予清晰、语义化的名称（例如：btn_primary_normal, icon_user_profile）。导出的文件名会直接继承这些名称。

后缀一致性： 确保所有相同类型的资产使用相同的后缀规则（例如，iOS始终使用@2x、@3x）。

文件夹： 导出时，可以将不同倍数的图片导出到不同的子文件夹中，或者让开发者根据后缀进行自动分类。

4.4 优化导出图片大小

虽然Sketch导出的图片质量很高，但有时文件大小可能过大，影响网页加载速度或应用包体大小。

JPG质量： 导出JPG时，可以调整其“Quality”设置，在画质和文件大小之间找到平衡点。通常70%-85%的质量就能满足大部分需求。

PNG压缩： 对于PNG图片，可以考虑使用第三方压缩工具（如TinyPNG、ImageOptim等）进行进一步无损或有损压缩，在不明显降低视觉质量的情况下显著减小文件大小。

移除背景： 如果图片有大面积透明区域但实际可以没有，考虑导出为JPG而非PNG。

4.5 结合Handoff工具

在实际工作中，通常会将Sketch文件交给开发者。利用Sketch与Zeplin、Abstract、Figma等Handoff工具的集成，可以更高效地完成设计资产交付。

Zeplin/Avocode： 这些工具可以直接解析Sketch文件，并为开发者提供所有图层的导出切图（通常会提供1x、2x、3x等多种倍数），尺寸标注、颜色代码等，极大地简化了切图和标注流程。

Abstract： 作为版本控制工具，Abstract也能管理Sketch文件的导出切图，并确保团队成员都能访问最新版本的资产。

虽然这些工具可以自动处理很多导出细节，但理解Sketch本身的导出机制，仍能让您更好地控制输出质量和优化工作流程。

五、常见问题与排查

在Sketch导出过程中，可能会遇到一些问题。这里列出常见问题及其解决方案。

导出的图片模糊：

检查Sketch画布中的原始尺寸是否太小，应以1x或xhdpi为基准进行设计。

确认导出时的“Scale”设置是否正确。如果是导出2倍图，确保设置了2x。

确保图层没有被意外地栅格化为低分辨率位图。

导出的图片文件过大：

如果是JPG，尝试降低“Quality”设置。

如果是PNG，且包含复杂渐变或大量颜色，可以考虑使用第三方压缩工具。

检查是否导出了不必要的透明背景，如果不需要透明度，可以考虑导出为JPG。

部分图层没有被导出：

确认该图层是否已在右侧检查器底部被“Make Exportable”。

确认在“文件”>“导出”菜单中是否选中了该图层。

检查图层是否被隐藏或锁定，有时会影响导出。

导出边界不准确：

使用“Slice”工具时，确保切片区域精确包裹住目标元素。

检查图层或编组的尺寸和位置是否带有小数，可能会导致像素对齐问题。尽量使设计元素在Sketch中对齐到整数像素。

六、总结与展望

掌握Sketch的高效导出策略，特别是多倍图的生成，是现代UI/UX设计师的必备技能。通过理解像素密度、灵活运用Sketch的“Make Exportable”功能、合理配置缩放倍数和后缀、以及遵循良好的命名规范，您将能够轻松地为Web、iOS和Android等各种平台提供高质量的视觉资产。

持续学习和实践是提升技能的关键。Sketch不断更新其功能，周边生态工具也在不断演进，保持对这些变化的关注，将使您的设计工作更加高效、专业。愿本文能助您在Sketch导出之路上披荆斩棘，游刃有余！

2025-10-07

---

上一篇：告别破解版：SketchUp 2015合法获取、升级与替代方案全面指南

下一篇：Sketch 组件重命名：告别混乱，提升效率的全面指南