4. 设计工具与流程：Figma/Sketch基础操作、设计系统与组件库搭建、从低保真原型到高保真原型的设计流程
说实话，很多刚入行的设计师问我：“做智能座舱HMI，到底该用什么工具？”我的回答一直很明确——工具只是手段，流程才是灵魂。但话说回来，选对工具确实能让你少走不少弯路。
我个人习惯用Figma，因为它跨平台、协作方便，而且组件库的管理方式特别适合车机这种需要大量复用控件的场景。Sketch也不错，但如果你团队里有人用Windows，那就别折腾了，直接上Figma吧。
4.1 Figma/Sketch基础操作：别只会画矩形
我记得刚带新人时，发现他们用Figma只会拖拽基础形状。嗯，这远远不够。做HMI设计，你至少得掌握这几个核心操作：
- Auto Layout（自动布局）：这是Figma的灵魂。车机界面要适配不同分辨率，没有Auto Layout，你改一个按钮位置就得手动调半天。
- 组件（Components）与变体（Variants）：一个按钮有默认态、按下态、禁用态，用变体管理，改一处全盘更新。
- 约束（Constraints）：控制元素在父级容器里的位置关系，比如“始终居中”或“贴底对齐”。
- 原型连线（Prototyping）：别只做静态图，连上交互流程，才能给开发讲清楚“按这里跳转到哪一页”。
4.2 设计系统与组件库搭建：别让设计变成“一次性”
你想想看，一个智能座舱有多少个界面？主控屏、仪表盘、HUD、空调控制、座椅调节……少说上百个页面。如果每个页面都从零开始画，那得累死。所以，搭建设计系统和组件库是必须的。
我曾经在一个项目里吃过亏——团队没有统一的组件库，结果三个设计师画出了三种不同风格的按钮。后来花了整整两周返工。从那以后，我定了个规矩：项目启动第一周，先把组件库搭起来。
4.2.1 设计系统的核心要素
| 层级 | 内容 | 举例 |
|---|---|---|
| 设计令牌（Design Tokens） | 颜色、字体、间距、圆角等基础原子 | 主色 #007AFF、字号 16px、间距 8px |
| 基础组件 | 按钮、输入框、滑块、开关等 | 包含默认、悬停、按下、禁用等状态 |
| 复合组件 | 卡片、列表项、导航栏、弹窗等 | 由多个基础组件组合而成 |
| 页面模板 | 典型页面布局，如主控屏首页、设置页 | 直接复用，减少重复劳动 |
4.2.2 组件库搭建步骤（以Figma为例）
- 创建样式库：先定义颜色样式、文本样式、效果样式。这是所有组件的基础。
- 制作基础组件：从最常用的按钮开始，用“组件”功能创建，并设置好变体（如不同尺寸、不同状态）。
- 建立组件层级：用“团队库”功能发布组件库，让整个团队都能调用。记得给组件起好名字，比如“Button/Primary/Large”，方便搜索。
- 编写使用文档：在组件旁边加注释，说明这个组件的使用场景、间距规则、交互逻辑。别指望别人能“看懂你的设计意图”。
- 版本管理：每次更新组件库，都要记录变更日志。我习惯用Figma的“版本历史”功能，配合一个简单的更新文档。
4.3 从低保真原型到高保真原型的设计流程
很多新手喜欢一上来就做高保真，觉得那样“看起来专业”。其实这是个大坑。为什么？因为高保真原型改起来太费劲了。你花三天画了个精美的界面，结果用户测试发现流程不对，得重画——那感觉，我经历过，太酸爽了。
正确的做法是：先低保真，再高保真，逐步细化。这就像盖房子，先搭骨架，再砌墙，最后装修。
4.3.1 低保真原型（Lo-fi）
低保真原型的核心目标是验证信息架构和交互流程。它不需要好看，只需要“能看懂”。
- 工具：纸笔、Figma的简单矩形框、或者Axure的线框图。
- 内容：只画主要功能模块、页面跳转关系、关键操作路径。
- 产出：一个可点击的线框图，用来做快速用户测试。
- 时间：通常1-2天完成。
我记得有一次做车载导航的HMI设计，低保真阶段我们画了5个不同的信息架构方案，让用户选。结果发现用户最习惯的方案，和我们团队内部认为“最好”的方案完全不一样。幸亏没直接做高保真，不然白费功夫。
4.3.2 中保真原型（Mid-fi）
中保真原型是在低保真基础上，加入视觉层级和基本排版，但还不做精细的视觉设计。
- 工具：Figma/Sketch，开始使用组件库。
- 内容：确定字体大小、颜色层级、间距规则。用灰度或单色表现视觉权重。
- 产出：一个看起来“像样”但还没上色的原型，用来做内部评审和开发沟通。
- 时间：通常2-3天。
4.3.3 高保真原型（Hi-fi）
高保真原型是最终交付物，它要无限接近真实产品。包括：
- 精确的视觉设计：颜色、图标、字体、阴影、动效，全部到位。
- 完整的交互逻辑：点击、滑动、长按、拖拽，所有手势都有反馈。
- 真实数据模拟：比如导航界面显示真实的地图数据，音乐界面显示真实的歌单。
- 多状态覆盖：加载中、空状态、错误状态、边界情况，一个都不能少。
高保真原型通常用于最终用户测试、开发参考、以及向老板汇报。它也是最耗时的阶段，一般需要1-2周。
4.3.4 流程总结
下面这张图展示了从低保真到高保真的完整流程，以及每个阶段的核心产出：
4.4 本章小结
这一章我们聊了三个核心话题：
- 工具基础：Figma/Sketch的Auto Layout、组件、约束、原型连线，这些是基本功，必须练熟。
- 组件库搭建：从设计令牌到页面模板，逐步构建可复用的设计系统。记住：组件库是团队资产，不是个人作品。
- 设计流程：低保真→中保真→高保真，每一步都有明确目标。别跳步，别偷懒。
我个人觉得，这一章的内容是整个课程的基础。后面的所有章节，都会用到这里讲到的工具和流程。所以，如果你现在还在犹豫“要不要先学一下Figma”，我的建议是：别犹豫了，直接上手。打开Figma，创建一个新文件，从画一个按钮开始。嗯，就这么简单。