Sketch导出二倍图实战指南：设计师必懂的开发协作基础
当设计师在Sketch中精心打磨界面,按下导出按钮那一刻，图像能否在开发环节完美还原？很多协作卡点，往往源于对倍图导出的理解偏差，掌握正确的二倍图导出方法，是提升设计落地效率的核心技能。
为何必须理解倍图？开发视角的关键需求
移动应用界面需要适配不同屏幕密度（如普通屏、Retina屏），1倍图（@1x）是设计稿中的基准尺寸，代表1个设计像素对应1个物理像素，2倍图（@2x）则意味着1个设计像素需要对应2×2=4个物理像素点来显示，确保在高清屏上清晰锐利。
Sketch导出二倍图：关键步骤详解
- 确认设计稿为1倍尺寸： 这是基石，检查你的画板（Artboard）尺寸是否为最终产品在普通密度屏幕（如iPhone 6/7/8）上的实际逻辑像素尺寸（如375x667pt），此尺寸即为1倍基准。
- 精确选择导出对象：
- 切片（Slice）： 最常用且推荐的方式，选中需导出的图层或编组，点击工具栏“切片”工具（或快捷键S），框选区域，切片区域会自动吸附到图层边界。
- 图层/编组本身： 直接选中图层或编组，在右侧检查器中找到“导出”区域。
- 配置导出格式与倍率：
- 在切片或图层/编组的检查器“导出”面板，点击“+”添加导出项。
- 选择格式： PNG（无损，图标/复杂图形）、JPG（有损，照片）、PDF（矢量，简单图形/图标）、SVG（矢量，图标/可缩放图形）等，PNG-24最常用。
- 关键设置：尺寸后缀与倍率：
- 在“尺寸”下拉菜单中选择“2x”。这是生成二倍图的核心操作。 Sketch会自动将设计稿尺寸乘以2（如100x100pt的设计导出为200x200px的图片）。
- 强烈建议勾选“文件名后缀”，Sketch会自动添加“@2x”到文件名后（如
icon_home@2x.png），这是开发者识别倍图的标准方式。
- 导出执行：
- 选中所有需要导出的切片或图层。
- 点击检查器底部“导出所选项…”按钮。
- 选择保存位置,确认格式和文件名无误，点击“导出”。
导出实战中的高频问题与解决方案
- 问题：导出的图片模糊？
- 检查源头： 确保设计稿中的位图素材（如图片、复杂渐变）本身分辨率足够高，低分辨率素材强行放大导出2x必然模糊。
- 验证导出设置： 务必确认导出项选择的是“2x”而非“1x”。
- 问题：开发说图片尺寸不对？
- 确认画板尺寸： 再次确认画板设置的是1倍逻辑尺寸（如375x667pt for iPhone）。
- 核对导出操作： 是否在导出面板正确选择了“2x”？检查最终导出的PNG文件的实际像素尺寸是否符合预期（应为设计尺寸的2倍）。
- 问题：是否需要导出所有倍率？
- 看项目需求： 通常iOS需提供@1x, @2x, @3x；Android需提供mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi等，但Sketch主要处理设计基准（1x）。
- 高效协作： 主流做法是：
- Sketch设计稿基于1倍尺寸。
- 导出提供@2x图（作为高清基准）。
- 利用自动化工具（如工程师通过脚本、或设计交付平台如Zeplin/Avocode）自动生成其他倍率图，手动导出所有倍率极其低效且易错。
- 问题：图标/图形边缘有白边或锯齿？
- 检查画布： 确保切片边界紧贴图形边缘，没有包含多余透明像素。
- 位图抗锯齿： 对于复杂位图，导出PNG时可尝试开启/关闭“修剪透明像素”选项对比效果。
- 矢量图导出： 简单图标优先导出SVG或PDF格式，避免倍率缩放导致的失真。
提升交付体验：设计师的必备意识
- 严格命名规范： 文件名清晰描述内容（如
btn_submit_active@2x.png），并包含@2x后缀，避免使用“最终版”、“new”等无效命名。 - 合理组织文件： 按功能模块或屏幕建立文件夹存放导出资源，与设计稿结构对应。
- 提供必要标注： 在交付物（如标注文档、Zeplin链接）中明确说明设计稿为1倍尺寸，导出图为2倍图，标注关键间距、字体、色值。
- 沟通确认： 与开发团队明确约定设计稿基准尺寸、导出倍率规则和命名规范。
理解并正确执行Sketch二倍图导出,远非机械操作，它体现了设计师对屏幕显示原理、开发工作流的深度认知，将1倍设计稿视为“源代码”，将精准的@2x导出视为编译后的“可执行文件”，这种工程化思维能显著减少沟通摩擦，提升产品界面最终呈现的像素级精度，设计交付的质量，直接影响着开发还原的效率与最终用户体验的流畅度。
