Sketch Measure 插件使用完全指南：从安装到设计标注全流程

插件概述

Sketch Measure 是一款专为 Sketch 设计软件打造的强大标注插件，它能够帮助设计师快速生成精确的设计标注，极大提升设计稿交付效率。该插件集成了尺寸标注、间距测量、属性标注、颜色命名等实用功能，并能一键生成可交互的 HTML 规格文档。

安装步骤

1. 获取插件压缩包并解压
2. 双击打开解压后的 Sketch Measure.sketchplugin 文件
3. 插件将自动安装到 Sketch 中

安装完成后，你可以在 Sketch 的插件菜单中找到 Sketch Measure 的相关功能。

核心功能详解

1. 工具栏快速访问

Sketch Measure 提供了一个便捷的工具栏，集成了所有常用功能：

• 快捷键：⌃ + ⇧ + B 可快速调出工具栏
• 工具栏包含：覆盖标记、尺寸标注、间距测量、属性标注、注释添加、导出设置等图标按钮

2. 分辨率设置

在设计开始前，建议先设置文档的设计分辨率：

• 支持多种单位设置（px, dp/sp 等）
• 设置后会影响后续的标注和导出结果
• 特别适合需要适配多设备的设计项目

3. 覆盖标记功能

用于高亮显示特定图层：

1. 选择需要高亮的图层
2. 点击工具栏中的覆盖按钮或使用 ⌃ + ⇧ + 1
3. 图层将被半透明色块覆盖，便于在复杂设计中突出显示

4. 尺寸标注功能

精确标注图层的宽度和高度：

1. 选择一个或多个图层
2. 点击工具栏中的尺寸按钮或使用 ⌃ + ⇧ + 2
3. 按住 ⌥ 键点击可单独标注宽度或高度

5. 间距测量功能

测量图层与画板或图层之间的间距：

1. 选择画板内的一个图层或任意两个图层
2. 点击工具栏中的间距按钮或使用 ⌃ + ⇧ + 3
3. 按住 ⌥ 键点击可单独显示上、右、下、左间距

6. 属性标注功能

显示图层的详细属性信息：

• 形状图层：填充色、边框色、描边、不透明度等
• 文本图层：字体族、字号、行高、颜色等
• 支持自定义显示特定属性（按住 ⌥ 键点击）

7. 注释添加功能

在设计稿中添加说明性文字：

1. 插入文本图层并输入内容
2. 选择文本图层
3. 点击工具栏中的注释按钮或使用 ⌃ + ⇧ + 5
4. 注释将在规格导出中显示

8. 导出设置功能

快速设置图层导出选项：

1. 选择一个或多个图层
2. 点击工具栏中的导出按钮或使用 ⌃ + ⇧ + s
3. 设置 Android 资源导出时，会根据分辨率设置自动转换单位
4. 按住 ⌥ 键点击可创建切片图层

9. 颜色命名管理

为设计中的颜色定义名称并导出：

1. 点击工具栏中的颜色按钮或使用 ⌃ + ⇧ + c
2. 选择形状或文本图层
3. 在颜色管理界面添加颜色名称
4. 支持导出为 .xml 文件供开发使用

规格导出与查看

一键生成 HTML 规格文档

1. 选择需要导出的画板
2. 点击工具栏中的导出按钮或使用 ⌃ + ⇧ + e
3. 取消勾选"高级模式"可为每个画板生成单独 HTML 文件

规格查看器功能

生成的 HTML 规格文档支持以下交互操作：

• 悬停查看图层间距
• 点击颜色区域切换颜色格式
• ⌘ + +/- 缩放画布
• 按住空格键拖动滚动画布
• 切换显示/隐藏注释

最佳实践建议

1. 标注顺序：建议先设置分辨率，再进行各项标注
2. 图层命名：保持图层有意义的命名，便于后期维护
3. 注释使用：复杂交互或特殊说明使用注释功能
4. 定期导出：设计过程中定期导出规格文档检查标注准确性
5. 团队协作：统一标注规范，确保开发人员理解一致

通过掌握 Sketch Measure 的各项功能，设计师可以大幅提升设计交付物的专业性和准确性，减少与开发团队的沟通成本，确保设计实现的高保真度。