第二章 设计工具与工作流：Figma/Sketch基础操作、组件库搭建、设计规范制定、交付物标准
好，咱们直接进入正题。做车载仪表盘动效，工具选不对，后面全是坑。我个人习惯用 Figma，但 Sketch 也有它的铁粉。这一章，我把两个工具的核心操作、组件库怎么搭、规范怎么定、交付物长什么样，一次性讲清楚。
2.1 Figma 与 Sketch 的基础操作
先说 Figma。它最大的优势是「在线协作」。你想想看，一个仪表盘项目，UI 设计师、动效设计师、开发工程师，可能分在三地。Figma 打开一个链接，大家就能同时看、同时改。我去年做某新能源车企的项目，设计师在上海，我在北京，开发在深圳。没有 Figma，光传文件就能把人逼疯。
2.1.1 Figma 核心操作
- 画板（Frame）：仪表盘通常用 1920x1080 或 1280x720。我习惯先建一个「母画板」，再在里面嵌套子画板，比如「时速表区」、「转速表区」、「警示灯区」。
- 组件（Component）：这是灵魂。右键任意元素 → Create Component，快捷键
Ctrl+Alt+K。组件改一处，所有实例跟着变。 - 自动布局（Auto Layout）：仪表盘里的文字、数字、图标，经常要自适应。选中图层，按
Shift+A开启自动布局。嗯，这里要注意：别滥用，嵌套超过三层，性能会下降。 - 原型连线（Prototype）：动效设计需要「页面流转」。选中一个按钮，拖拽连线到目标画板，设置触发方式为「点击」或「拖拽」。过渡动画选「Smart Animate」，它能自动识别图层变化。
2.1.2 Sketch 核心操作
Sketch 虽然被 Figma 抢了不少风头，但它在「本地性能」上依然能打。尤其是处理超大画板（比如一整块仪表盘 4K 分辨率），Sketch 比 Figma 流畅得多。
- 符号（Symbol）：对应 Figma 的组件。选中图层 → Layer → Create Symbol。快捷键
Cmd+Y。 - 文本样式（Text Style）：仪表盘里的数字字体、大小、颜色，必须统一。选中文字 → Layer → Create New Text Style。之后改样式，所有引用自动更新。
- 插件生态：Sketch 的插件比 Figma 更成熟。我常用「Anima」做动效标注，「Runner」快速搜索图层。
2.2 组件库搭建
组件库不是「把元素拖进去就完事」。它是一套「设计语言」的物理载体。我见过太多团队，组件库建了 200 个组件，结果没人用。为什么？因为组件之间没有「约束关系」。
2.2.1 组件分类
| 类别 | 示例 | 说明 |
|---|---|---|
| 基础组件 | 按钮、输入框、滑块 | 最底层，不依赖任何业务 |
| 业务组件 | 时速表、转速表、油量表 | 由基础组件组合而成，有业务含义 |
| 布局组件 | 仪表盘网格、卡片容器 | 控制元素的位置和间距 |
| 动效组件 | 指针旋转、数字滚动、警示灯闪烁 | 包含动效预设，可直接复用 |
我个人习惯，在 Figma 里用「团队库（Team Library）」来管理。把组件库发布到团队空间，所有成员都能调用。而且，组件更新后，Figma 会提示「有可用更新」，点一下就能同步。
2.2.2 组件命名规范
命名乱，组件库就是垃圾堆。我推荐用「BEM 命名法」的变体：
类别/组件名/状态/尺寸
示例：
Button/Primary/Default/Large
Gauge/Speedometer/Normal/Full
Indicator/TurnSignal/Active/Small你想想看，如果命名是「按钮1」、「指针2」，三个月后你自己都找不到。用这种层级命名，搜索起来快得多。
2.3 设计规范制定
设计规范不是「写文档」，而是「定规则」。规则越清晰，开发还原度越高。我见过最惨的案例：设计师用 #FF0000 表示红色，开发用 #E60000。结果仪表盘上的警示灯，一个偏橙，一个偏正红。用户投诉说「颜色不对」。
2.3.1 色彩规范
- 主色：通常 1-2 种，用于核心信息。比如时速表指针、警示灯。
- 辅色：3-5 种，用于次要信息。比如转速表刻度、背景装饰。
- 中性色：黑、白、灰，用于文字、边框、背景。
- 语义色：红（危险）、黄（警告）、绿（正常）、蓝（信息）。
我建议，色彩值用 HSL 而不是 HEX。为什么？因为 HSL 可以直观调整「亮度」和「饱和度」。比如，夜间模式需要降低亮度，HSL 直接改 L 值就行，HEX 你得重新算。
2.3.2 字体规范
仪表盘字体，第一要求是「可读性」。别用花体字。我推荐：
- 数字：使用等宽字体（Monospace），比如 Roboto Mono、Fira Code。数字宽度一致，指针扫过时不会「跳动」。
- 中文：思源黑体（Noto Sans SC）或 阿里巴巴普惠体。注意字重：正文用 Regular，标题用 Medium，警示用 Bold。
- 字号：定义 6 级字号。比如：12px（辅助信息）、16px（正文）、24px（标题）、36px（主数据）、48px（警示）、64px（紧急）。
2.4 交付物标准
交付物是「设计到开发的最后一公里」。这一公里走不好，前面全白干。我总结了三类交付物：
2.4.1 设计稿交付
- 静态稿：每个页面的最终效果图。标注好尺寸、颜色、间距。
- 动效稿：用 Figma 的 Smart Animate 或 Protopie 导出动效演示。关键帧要标注时间（比如：指针从 0 到 100km/h 用时 0.3s）。
- 交互稿：页面跳转逻辑、手势操作说明。用流程图或原型链接展示。
2.4.2 标注与切图
以前用 Sketch 时，我常用「Zeplin」或「Measure」插件做标注。现在 Figma 自带「开发模式（Dev Mode）」，选中图层就能看到 CSS 代码、尺寸、间距。开发直接复制，不用再问「这个间距是多少」。
切图方面：
- 图标：导出 SVG 格式。不要用 PNG，否则放大就糊。
- 图片：导出 @2x 和 @3x 两套。仪表盘通常跑在嵌入式系统上，分辨率不高，@2x 就够了。
- 动效资源：Lottie 文件（JSON 格式）或视频文件（MP4）。Lottie 是首选，因为它体积小、可交互。
2.4.3 规范文档
最后，把设计规范整理成一份 PDF 或在线文档。内容包括：
- 色彩系统（色板 + 使用场景）
- 字体系统（字族 + 字号 + 行高）
- 间距系统（4px 网格基准）
- 组件库索引（每个组件的名称、状态、使用说明）
- 动效规范（缓动曲线、持续时间、触发条件）
好了，这一章的内容就这些。工具是死的，工作流是活的。你只要把 Figma/Sketch 的基础操作练熟，组件库搭好，规范定死，交付物做全，后面做动效设计时，你会发现——嗯，原来可以这么顺。