构建 Honda 中国地区统一用户体验设计系统
这个项目并不只是简单的建立设计系统，而是把分散在不同产品、屏幕和团队中的 HMI 设计决策，转化为可复用、可扩展，并能持续演进的体验基础设施。
我的职责
产品设计负责人
项目周期
2024 年 1 月–6 月
工具
Figma
在六个月内，我们从 0 到 1 建立了这套系统：统一的设计语言、可复用资源、跨设备规则，以及支持中国地区协作的基础。
系统从 0 到 1 建立
来自项目记录；具体组织覆盖范围仍待核实。
组件复用率
基于三个车载项目的人工抽样；估算误差约为 ±5–10%。
设计生产成本及相关工作量降低
基于供应商报价与项目工作量的统一测算。
2024 Honda Technical Forum
项目成果通过 Honda 全球总部内部技术论坛进行分享。
问题浮现
随着本田全球数字化产品持续发展，各地区团队长期独立设计，逐渐形成不同的视觉规范与交互方式，导致用户体验不一致，设计资产无法复用，团队协作成本不断增加。这些问题不是模糊的感受。我们通过对 4 个已上线产品进行 UI Audit，抽样 200+ 个组件实例，发现不足 30% 的组件存在复用关系——换言之，超过 70% 的 UI 元素在每个项目中都被重复设计和实现。将所有问题逐一拆解后发现：表面上看是公司、团队、用户三类角色的不同抱怨，本质上是同四个问题在不同层面的投射。
| 维度 | 公司 | 团队 | 用户 |
|---|---|---|---|
| 效率 | 成本失控 | 重复造轮子 | 功能交付更慢 |
| 一致性 | 品牌表达碎片化 | 设计产出不一致 | 学习成本更高 |
| 协作与质量 | 战略响应更慢 | 对齐与返工成本 | 体验质量不稳定 |
| 交互与情感 | 留存与满意度风险 | 设计价值难以衡量 | 信心与信任降低 |
为什么是这样的设计系统？
我们研究了汽车系统，也研究了 Material Design、Ant Design 与跨设备适配方法。目标不是模仿成熟组件库，设计系统作为解决方案本身也并不新鲜，但关键问题是：从影响追溯到根因，推导可衡量维度，并明确什么样的系统能够因地制宜地、高效地解决不同阶段的问题。
基于当前项目的影响范围、问题紧迫性和可验证性，我们选择在 1.0 阶段优先大幅改善一致性、效率与易用性。其中，易用性属于交互与情感维度，并通过统一基础交互模式，帮助用户更容易理解和预测 HMI 行为。
研究调研与设计决策基础
在确定系统的基本形态之前，我们先通过内部审计、外部参考、关键页面验证和场景覆盖分析，建立设计决策的依据。目标不是直接套用一套成熟系统，而是判断哪些方法可以借鉴、哪些结构需要针对 Honda HMI 场景重新设计。
1. 设计系统参考调研
我们首先通过内部审计建立完整的组件清单，再研究汽车行业及其他跨平台设计系统。调研帮助我们明确了三点：第一，没有现成的设计系统能够直接适配 Honda 的 HMI 场景；第二，Token 架构和组件组织方式可以借鉴，但必须根据汽车场景进行裁剪；第三，市场上两层和三层 Token 架构各有支持者，因此需要通过实际测试决定哪一种更适合本项目。
- — 没有现成系统可以直接适配 Honda HMI 场景。
- — Token 架构和组件组织方式可以借鉴，但需要结合汽车场景裁剪。
- — 两层与三层 Token 架构需要通过实际测试后再做选择。
2. Home 页面效果先行确认
在开始批量搭建组件之前，我们先确认 Home 页面的最终视觉效果。Home 是用户接触频率最高的页面，也是设计系统视觉语言最集中的体现。如果 Home 页面的视觉效果能够通过内部评审并获得品牌方认可，就可以将它作为后续组件风格推导与验证的视觉基准。
3. 组件选型方法论
组件范围不是从现有组件库中直接复制，而是通过审计、场景覆盖与外部参考逐步确定，在覆盖核心 HMI 场景的同时控制系统规模与维护成本。
Step 1
现有组件审计
盘点当前产品与项目中的组件，识别重复、差异和缺口。
Step 2
场景覆盖分析
根据高频任务、屏幕形态与车辆配置判断组件需要覆盖的实际场景。
Step 3
外部参考补充
用行业和跨平台设计系统补充内部样本中尚未覆盖的模式，但不直接照搬。
三个决策定义了系统的基本形态
关键选择包括：视觉语言是重新创造还是从品牌中提炼；增加第三层 Token 是否值得其治理成本；组件应该只服务固定屏幕，还是提前编码未来的适配能力。
1. 从品牌中提炼视觉语言
我们没有从零创造一种风格，而是从 Honda 0 Series 的方向中提炼出暮光紫、圆润与锐利几何的共存，以及光感。图标断点概念：假设 icon 是立体的，光照射下来产生阴影的地方就是断点。这个思路被内部团队认可后推广到整个系统的视觉设计中，成为连接品牌基因与系统表达的一条暗线。
2. 构建稳固且灵活的设计系统架构
该架构连接 HMI 交互框架、设计哲学和设计平台。在平台内部，Global → Style → Semantic 的 Token 层级负责管理基础值、主题、渐变和稳定的设计意图。额外层级增加了治理成本，但也使 Honda 大量使用渐变的视觉语言具备可维护性。
Honda HMI Design System
选择三个系统层级中的任意一个查看详细结构。
默认展开 Design Platform，便于直接查看资源、规范与适配规则；也可以切换至另外两个系统层级。
3. 层层嵌套的Auto-layout增添适配的可能性
嵌套 Auto Layout 与约束使组件能够响应横竖屏、不规则显示器、产品配置和不同语言。这在尚非刚需时增加了构建成本，但后来让同一套结构可以支持变化的容器与更广泛的移动出行场景。
验证与项目影响
每个根因都对应一项成功指标，再进一步展开为详细度量、方法、证据状态与改进方向。第一阶段保留了两项方向性 ROI 记录；其余维度仍需要持续审计与用户研究。团队的工作方式随之改变：从'重做'转向'组合'——设计师不再从空白画布开始，而是从已有的构建块组装体验。
| 成功指标 | 定义 | 测量方法 | 当前状态 |
|---|---|---|---|
| 一致性 | 衡量品牌与交互体验的一致性提升 | 视觉审计 · 跨产品抽样 · 可用性研究 | 方法已定义；完整数据待补充 |
| 效率 | 衡量设计与开发的生产效率是否提升 | 组件实例 · 交付记录 · 工作量对比 | 已有 85%+ 复用率与 45%+ 相关工作量估算 |
| 协作与质量 | 团队内部协作以及产出物质量 | 采用记录 · 设计开发一致度 · 治理检查 | 方法已定义；完整数据待补充 |
| 交互与情感 | 用户的整体体验 | 任务测试 · CSAT/NPS · 错误与信任度量 | 方法已定义；完整数据待补充 |
Design System 1.0
基础已交付第一阶段聚焦一致性、效率与易用性——这些是在项目周期内可以验证的紧迫基础。
统一设计语言 · Design Token · 可复用组件与模式 · 基础交互模式 · 清晰的使用指南
组件复用率
从项目开始前的30%到每个项目抽样 15 个以上核心页面的85%+组件复用率；人工加权统计。
人工估算误差约为 ±5–10%。
设计生产成本及相关工作量降低
供应商报价与项目工作量对比：此前约 7–8 人日，之后约 3–4 人日。
综合供应商报价与项目工作量进行测算。
Design System 2.0
规划中未来阶段将建设依赖长期组织采用与体验成熟度的能力。
设计治理 · 评审与反馈系统 · 品牌表达 · 动效系统 · 无障碍
我将设计知识转化为系统化框架，构建了可扩展的 HMI 体验基础设施。它不是组件库，而是一套决策系统：1.0 建立秩序、用标准化换来效率，2.0 走向体验智能与组织能力——让团队在保持体验质量的同时更快地移动。