Sketch 高清适配指南：图片如何高效导出为两倍图（@2x）318

在当今数字世界，高清屏幕（如Apple的Retina显示屏，以及各种Android设备上的HiDPI屏幕）已成为主流。作为一名UI/UX设计师，确保您的设计在这些高分辨率屏幕上呈现出清晰、锐利的效果至关重要。这意味着您不仅要设计常规尺寸的图稿（通常称为@1x图），更需要准备其对应的两倍图（@2x）、三倍图（@3x）甚至更高倍率的图。这正是许多Sketch用户会遇到的问题：“[sketch怎么改成两倍图]？”这个问题背后，隐藏着对像素密度、导出策略以及设计流程的深刻理解。

本文将作为您的Sketch高清适配专家指南，详细解析如何在Sketch中设计、处理并高效导出两倍图（@2x），确保您的作品在任何高分辨率设备上都尽显专业与精致。我们将从基础概念讲起，逐步深入到实际操作，并分享一些专家级的技巧和常见问题的解决方案。

一、理解“两倍图”（@2x）及其重要性

在深入操作之前，我们必须首先理解什么是“两倍图”以及它为何如此重要。这涉及到物理像素（Physical Pixels）与逻辑像素（Logical Pixels/Points）的概念。

1. 物理像素 vs. 逻辑像素 (Physical Pixels vs. Logical Pixels/Points)

传统意义上，一个屏幕像素就是显示器上的一个最小发光点。然而，随着技术发展，高分辨率屏幕（如Retina）的出现，使得在一个传统的“点”（point，或称为dp、pt）的物理空间内，可以显示更多的实际像素。
逻辑像素（Logical Pixels / Points / DP）： 这是我们在设计软件中通常操作的单位，例如，Sketch默认的画板尺寸通常是基于逻辑像素的。它是一个抽象的单位，用于保持UI元素在不同屏幕密度下拥有相同的物理尺寸观感。例如，一个iOS按钮的推荐高度是44pt。
物理像素（Physical Pixels）： 这是屏幕实际显示的最小发光点。一个高分辨率屏幕在同样大小的物理区域内，拥有更多的物理像素。

2. 什么是“两倍图”（@2x）、“三倍图”（@3x）？

当一个设备宣称是“Retina显示屏”或“HiDPI”时，通常意味着它的“设备像素比”（Device Pixel Ratio, DPR）大于1。

@1x： 表示1个逻辑像素对应1个物理像素（DPR=1）。这是标准分辨率。
@2x： 表示1个逻辑像素对应2x2=4个物理像素（DPR=2）。这意味着一个逻辑像素单位需要用2个物理像素的宽度和2个物理像素的高度来显示，总共是4个物理像素。为了在高分辨率屏幕上清晰显示，一个100x100pt的元素，需要提供200x200px的图像资源。
@3x： 表示1个逻辑像素对应3x3=9个物理像素（DPR=3）。同样，100x100pt的元素，需要提供300x300px的图像资源。

3. 重要性：清晰度与用户体验

如果在一个DPR为2的设备上，只提供@1x的图片资源，系统会将该图片放大2倍来适应显示。这个放大过程是插值计算，会导致图片变得模糊、像素化，严重损害用户体验。提供@2x、@3x等高质量的图片资源，可以确保UI元素在高分辨率屏幕上保持清晰、锐利，提升应用的专业度和用户满意度。

二、Sketch 的设计哲学与两倍图策略

Sketch作为一款为现代UI/UX设计而生的工具，其核心设计理念就是“矢量优先”和“可伸缩性”。这意味着Sketch本身就非常适合处理不同倍率的图像导出。

1. 默认设计在 @1x 画板

Sketch强烈推荐您的主画板（Artboard）尺寸保持在@1x（逻辑像素）单位。例如，如果您在设计一个iOS应用，通常会选择iPhone 13 Pro (390 x 844)这样的画板预设，这390pt就是逻辑像素宽度。这样做的好处是：
统一基准： 所有设计元素都基于一个统一的逻辑尺寸，方便不同屏幕尺寸的适配。
灵活性： 从@1x向@2x、@3x或任何其他比例导出，都非常方便。
文件大小： 设计文件本身不会因为包含高倍率的图而变得过于臃肿。

2. 矢量图的优势

在Sketch中，形状（Shapes）、文本（Text）和路径（Paths）都是矢量图。矢量图最大的优势在于其无限缩放而不失真。这意味着，无论您将它们导出为@1x、@2x、@3x，它们都会保持像素完美。因此，对于图标、Logo、按钮背景等元素，尽量使用Sketch内置的矢量工具进行绘制。

3. 位图（Bitmap）的处理

对于照片、复杂的纹理或从外部导入的位图（如PNG、JPG），它们是基于像素的，因此在放大时会失真。处理位图是实现两倍图的关键，也是本文的重点。

三、在 Sketch 中将图片“改成两倍图”的两种核心场景

“[sketch怎么改成两倍图]”这个问题，可以分为两种主要的场景：一是您需要从Sketch中“导出”一个元素的@2x版本；二是您需要“导入”并“使用”一个高质量图片，使其在未来能被导出为@2x。

场景一：从 Sketch 中导出元素的 @2x 版本（最常见）

这通常是用户最想知道的操作。您的设计已经在Sketch中完成，现在需要为开发者提供@2x的图片资源。Sketch提供了非常直观和强大的导出功能。

核心理念：不要手动放大设计元素！

这是一个常见的误区。许多新手设计师可能会尝试将一个100x100pt的图标，手动放大到200x200pt，然后再导出。这样做是错误的，特别是对于位图。Sketch的导出功能会自动处理放大并生成像素完美的图片。

步骤详解：

1. 选择要导出的图层或组

在您的画板上，选择您想要导出为图片资源的单个图层（如图标、插画）或一个图层组（如一个带有文字的按钮）。

2. 添加导出预设 (Make Exportable)
在右侧的属性面板中，找到最底部的“Make Exportable”区域。
点击“+”按钮，添加一个导出预设。

3. 设置导出尺寸与倍率

这是生成@2x图的关键步骤。在添加的导出预设中，您会看到几个选项：
Size（尺寸）：

使用预设倍率（推荐）： 最简单和推荐的方法是直接选择下拉菜单中的`2x`。Sketch会自动计算并导出为原始逻辑尺寸的2倍大小。
使用百分比： 您也可以输入`200%`。这与`2x`的效果相同。
使用固定尺寸： 如果您需要精确控制像素尺寸，例如原始元素是100x100pt，您想导出200x200px的图，可以直接输入`200w 200h`。但通常情况下，使用倍率更方便。
使用自定义后缀： 在`Suffix`字段中，输入`@2x`。这是一个约定俗成的命名规则，方便开发者识别。


Format（格式）：

PNG： 适合图标、Logo、带有透明背景的插画。PNG支持无损压缩和透明度。
JPG： 适合照片、背景图等不需要透明度的复杂位图，文件体积相对较小。
SVG： 适合矢量图标、Logo。SVG本身就是矢量格式，可以无限缩放，通常无需生成@2x版本（除非特定开发要求）。
WebP： 现代图片格式，提供更好的压缩率和质量，但并非所有浏览器和平台都完全支持。

4. 批量导出
单个导出： 如果只需要导出少量图片，可以直接点击导出预设旁的“Export Selected”按钮。
批量导出： 当您为多个图层或组都设置了导出预设后，可以通过以下方式批量导出：

点击顶部菜单栏的 `File > Export...` (快捷键 `⌘E`)。
在弹出的对话框中，您会看到所有已设置导出预设的图层或切片。您可以选择要导出的项目，然后点击“Export Selected”或“Export All”。
Sketch会自动将这些图片导出到您指定的文件夹，并按照您设置的后缀命名（例如：`icon_home@`）。

高级技巧：使用 Slices（切片）

切片工具（`Insert > Slice`）允许您定义一个区域，并将其作为独立的图片导出，即使它不是一个单一的图层或组。这对于导出画板上的特定区域或多个元素组成的复杂UI块非常有用。切片也支持设置`2x`、`@2x`后缀等导出选项，与图层导出类似。

场景二：导入并使用高质量图片，确保能导出 @2x

这个场景主要针对您需要将外部提供的位图（如照片、复杂的插画）引入Sketch，并确保它们在导出@2x时依然清晰。

核心理念：提供足够大的原始图片！

Sketch无法“创造”不存在的像素。如果您导入一张本身只有100x100px的图片，无论您在导出设置中选择多少倍率，最终得到的@2x图（200x200px）都会是模糊的，因为它只是将原始的100x100px图片放大了一倍。因此，关键在于源文件。

操作步骤：

1. 获取高质量的原始图片

在设计之初，就应该向客户或内容提供方索要至少是您最终所需@2x尺寸的图片。例如，如果您的设计中有一个图片元素，它在@1x画板上显示为100x100pt，那么您需要导入一张至少200x200px（最好是更大，以便未来可能需要@3x或局部裁剪）的图片。

2. 导入图片到 Sketch

直接将图片文件拖入Sketch画板，或使用 `Insert > Image...`。

3. 调整图片尺寸（关键！）

当您导入一张高质量大图时，它可能比您在@1x画板上预期的逻辑尺寸要大。例如，您导入了一张200x200px的图片，但它在设计中应显示为100x100pt。
正确做法： 选中导入的图片，在右侧属性面板中，将其`Width`和`Height`设置为您期望的@1x逻辑尺寸（例如，100w 100h）。Sketch会以像素密度为2（即200x200物理像素的图片显示为100x100逻辑像素）的方式显示它。
错误做法： 导入100x100px的图片，并尝试导出@2x。

Sketch会记住这张图片有足够的原始像素来支持更高的倍率导出。当您稍后按照“场景一”的方法导出时，选择`2x`，Sketch会从原始的200x200px图片中生成高质量的200x200px @2x图片。

4. 使用 Mask（蒙版）或裁剪（Trim）

如果导入的图片比您需要的区域大得多，可以使用蒙版将其裁剪到所需形状，或使用Sketch的`Image > Trim`功能裁剪掉多余部分。这些操作不会影响图片内部的像素信息，只要原始图片质量够高，导出@2x依然清晰。

四、其他关键技巧与最佳实践

1. 统一命名规范

与开发者沟通并确定一套统一的图片命名规范。例如：``, `icon_home@`, `icon_home@`。Sketch的`Suffix`功能可以自动为您添加`@2x`等后缀。

2. 建立组件库（Symbols）

对于经常重复使用的UI元素（如按钮、图标），将其制作成Symbol。Symbols在整个设计文件中保持一致性，并且所有Symbol实例都可以统一设置导出预设，极大提高效率。

3. 检查导出预览

在导出之前，可以通过点击导出预设旁的`Preview`按钮，查看图片导出的实际效果，确保没有模糊或其他问题。

4. 与开发人员沟通

清晰地告知开发人员您提供的图片资源的倍率规则。例如，告诉他们您所有的图稿都基于@1x逻辑尺寸设计，并提供了@2x、@3x等倍率的资源，他们需要根据设备DPR自行选择使用。

5. 使用插件

有一些Sketch插件（如"Zeplin"、"Abstract"的导出功能，或一些专门的切图插件）可以进一步简化和自动化导出流程，并生成详细的设计标注，方便与开发团队协作。

五、常见问题与解决方案

1. 为什么我导出的@2x图片还是模糊的？

原因： 您在Sketch中使用的原始位图资源质量不足。例如，您导入了一张100x100px的图片，并将其用作一个100x100pt的元素。当您尝试将其导出为@2x时，Sketch会尝试将100x100px的图片放大到200x200px，这必然导致模糊。

解决方案： 确保您导入到Sketch的位图资源本身就具有足够高的分辨率。对于一个@1x尺寸为N x M逻辑像素的元素，其@2x资源至少需要2N x 2M物理像素，@3x资源至少需要3N x 3M物理像素。

2. 我应该在@1x画板上设计，还是直接在@2x画板上设计？

建议： 强烈推荐在@1x画板上进行设计。这是Sketch的默认推荐，也是最灵活、最不容易出错的方法。它允许您轻松导出所有倍率的图片，并且在不同屏幕尺寸之间进行适配时也更加方便。除非有非常特殊的开发要求（例如，某些旧版Android开发流程），否则请坚持在@1x画板上设计。

3. 除了@2x，我还需要导出@3x吗？

答案： 取决于您的目标平台和设备。例如，许多最新的iPhone设备（如iPhone X及更新型号）的DPR是3，所以需要提供@3x资源。Android设备也有DPR为3甚至4的。为了全面适配，通常建议同时提供@1x、@2x和@3x的资源。操作方法与导出@2x类似，只需在导出预设中选择`3x`并添加`@3x`后缀即可。

4. 我可以直接复制粘贴为图片，然后放大吗？

答案： 不建议。直接复制粘贴为图片通常只获取当前画板的屏幕截图分辨率（@1x），再手动放大会导致模糊。始终使用Sketch的“Make Exportable”功能进行导出，才能保证图片质量。

5. SVG格式是否需要导出@2x？

答案： 通常不需要。SVG（Scalable Vector Graphics）是矢量图形格式，它本身就具有无限缩放的特性，不会失真。开发者可以直接在代码中使用SVG，由浏览器或系统根据需要自动缩放。只有在特定情况下（例如，开发框架不支持SVG或需要将其作为位图处理），才可能需要导出PNG或JPG的@2x版本。

掌握Sketch中“两倍图”的导出策略，是现代UI/UX设计师的必备技能。理解逻辑像素与物理像素的区别，以及Sketch的导出机制，能够帮助您高效地生成高质量的、适应各种高清屏幕的图片资源。

核心要点回顾：
设计在@1x画板： 这是您的设计基准。
矢量优先： 尽可能使用矢量图形，它们天然支持高清。
位图源文件要高分辨率： 导入的位图必须足够大，以支持@2x甚至@3x的导出。
使用“Make Exportable”： 不要手动放大元素，通过导出预设选择`2x`或`200%`，并添加`@2x`后缀。
保持沟通： 与开发团队明确图片资源的倍率和命名规范。

通过遵循这些指南，您将能够自信地在Sketch中处理各种图片适配需求，确保您的设计无论在何种设备上，都能以最清晰、最锐利的面貌呈现给用户，从而大大提升您的专业水准和项目成功率。

2025-11-23

下一篇：Illustrator文件高效导入Sketch：矢量图形转换与优化全攻略