第二章：设计工具与工作流——Figma/Sketch基础操作、组件库搭建、设计规范文档编写
好，咱们直接进入正题。车载HMI设计，工具选对了，事半功倍。我个人习惯用Figma，Sketch也用过几年。说实话，这两款工具在车载设计领域，核心逻辑是相通的——都是基于矢量、组件化、协同化。你选哪个都行，但必须把「组件库」和「设计规范」这两件事刻在骨子里。
2.1 Figma/Sketch 基础操作：别只会画矩形
很多新手打开Figma，第一件事就是拖几个矩形拼个界面。嗯，这没错，但车载设计远不止这些。我见过太多设计师把仪表盘上的时速表画成静态图片，结果开发那边根本没法用。
核心操作一：自动布局（Auto Layout）
这是Figma的灵魂功能，Sketch里叫「智能布局」。为什么重要？因为车载屏幕尺寸千变万化——中控可能是10.25寸，仪表可能是12.3寸，甚至还有HUD的投影区域。你不可能为每个尺寸重画一遍。
我的做法：所有控件都套上Auto Layout。比如一个按钮，文字变化时，按钮宽度自动撑开。间距、内边距、对齐方式，全部用参数控制。这样后期改尺寸，只需要改一个数值，整个界面自动重排。
核心操作二：组件（Components）与变体（Variants）
车载设计里，一个「按钮」可能有十几种状态：默认、按下、禁用、加载中、夜间模式、白天模式……你不可能画十几个图层。用变体，一个组件搞定。
// 举个例子：一个车载音量按钮的变体结构
// 属性1：状态（default / pressed / disabled）
// 属性2：模式（day / night）
// 属性3：尺寸（small / medium / large）
// 组合起来就是 3 x 2 x 3 = 18 种变体
// 但你在Figma里只需要维护一个组件我曾经在一个项目中，因为没用好变体，结果一个仪表盘上的警示图标，画了40多个重复图层。后来改需求，改到想哭。从那以后，我强制团队所有控件必须用变体。
核心操作三：约束（Constraints）与响应式
车载屏幕的布局，讲究「相对定位」。比如一个车速数字，永远固定在仪表盘中央偏上位置。用约束功能，设置好「左、右、上、下」的固定或拉伸关系，屏幕缩放时，元素位置自动适配。
小技巧：在Figma里，我习惯把「约束」和「Auto Layout」结合使用。Auto Layout管内部元素的排列，约束管组件在画板里的位置。两者不冲突，反而互补。
2.2 组件库搭建：从零到一，别偷懒
组件库是什么？说白了，就是一套「乐高积木」。你把所有常用的UI元素——按钮、滑块、进度条、仪表盘指针、警示图标——全部做成可复用的组件，统一管理。
为什么要搭？你想想看，一个车载HMI项目，少说几十个界面。如果没有组件库，每个界面都重新画一遍按钮，风格肯定不统一。开发那边也会疯掉——因为每个按钮的代码都得单独写。
搭建步骤（我自己的流程）：
- 先做原子级组件：颜色、字体、图标、间距。这些是最基础的「原子」。比如定义好「主色#007AFF」「警示色#FF3B30」「字体PingFang SC 16px Medium」。
- 再做分子级组件：把原子组合起来。比如一个「带图标的按钮」，就是「图标原子 + 文字原子 + 背景原子」的组合。
- 最后做组织级组件：把分子组合成更大的模块。比如「导航卡片」「音乐播放器控制条」「空调温度调节面板」。
- 建立命名规范：我习惯用「/」分层。比如「Button/Primary/Large」「Icon/Warning/Red」。这样在Figma的组件面板里，自动按文件夹归类。
注意：组件库不是一次建完就完事了。项目迭代过程中，你会发现有些组件设计不合理，或者需要新增。一定要及时更新组件库，并且通知团队所有人。我曾经因为没及时更新，导致两个设计师用了不同版本的按钮，最后开发那边对不上，返工了两天。
2.3 设计规范文档编写：让开发少骂你两句
设计规范文档，是设计师和开发之间的「契约」。你画得再漂亮，如果开发看不懂你的标注，一切都是白搭。
文档里必须包含的内容：
| 模块 | 内容 | 示例 |
|---|---|---|
| 颜色系统 | 主色、辅色、警示色、背景色、文字色，以及对应的深色模式值 | 主色：#007AFF / 深色模式：#0A84FF |
| 字体系统 | 字体家族、字号层级、字重、行高 | 标题：24px Bold / 正文：16px Regular |
| 间距系统 | 4px 网格基准、内边距、外边距、组件间距 | 卡片内边距：16px / 列表项间距：12px |
| 组件规范 | 每个组件的状态、尺寸、交互反馈、代码实现说明 | 按钮：默认/按下/禁用，高度48px，圆角8px |
| 布局规范 | 安全区域、触控热区、视觉层级、对齐方式 | 触控热区最小 44x44px（Apple HIG标准） |
| 动效规范 | 过渡时长、缓动函数、动画触发条件 | 页面切换：300ms ease-in-out |
文档怎么写才实用？
我个人习惯用Figma的「设计系统」功能直接生成规范页面。每个组件旁边，直接标注它的属性、代码变量名、以及使用场景。比如一个「音量滑块」，我会标注：
- 组件名：Slider_Volume
- 代码变量：$slider-volume
- 取值范围：0-100
- 步进值：1
- 交互反馈：拖动时触觉震动（Taptic Engine）
这样开发拿到手，直接复制变量名就能用，不用再问「这个滑块最大是多少」。说白了，规范文档写得越细，后期沟通成本越低。
避坑指南：我曾经写过一个规范文档，洋洋洒洒50页，结果开发根本没人看。后来我改成「一页纸原则」——每个组件一张卡片，正面是效果图，背面是参数。打印出来贴在工位上，反而效果更好。所以，文档不是越长越好，关键是「开发愿意看」。
2.4 工作流：从设计到开发的无缝衔接
工具和规范都准备好了，接下来就是工作流。我推荐用「Figma + Zeplin + Git」的组合。
- Figma：设计、原型、评审都在这里完成。
- Zeplin：自动生成标注、切图、代码片段。开发直接复制CSS或SwiftUI代码。
- Git：设计文件版本管理。别笑，真的有人用Git管理Figma文件。每次大版本更新，我会把Figma文件导出为.sketch或.fig格式，提交到Git仓库，方便回溯。
还有一个细节：设计交付时，一定要提供「设计标注」和「设计规范文档」两份文件。标注给开发看具体尺寸和位置，规范给开发看全局规则。两者缺一不可。
嗯，这一章内容不少。工具操作、组件库、规范文档、工作流，每一步都是实战中踩坑踩出来的。你把这些吃透了，车载HMI设计的基本功就算扎实了。下一章咱们聊「车载界面布局与信息层级」，那才是真正考验设计能力的地方。