第二章：设计系统基础
好，咱们正式开始聊设计系统。说实话，我刚入行那会儿，根本不知道什么叫设计系统。那时候做HMI，就是设计师画一套图，开发照着切。结果呢？同一个按钮，三个界面三个样式。你说崩溃不崩溃？
2.1 设计系统的定义
设计系统是什么？我个人的理解很简单——它就是一套可复用的组件库，加上使用这些组件的规则。
你想想看，一个车载HMI里有多少个按钮？多少个弹窗？多少个列表？如果每个界面都重新设计一遍，不仅效率低，而且用户体验割裂。设计系统就是来解决这个问题的。
我在项目中遇到过最典型的场景：客户要求所有警告弹窗统一风格。如果没有设计系统，你得一个一个改。有了设计系统，改一个组件，全局生效。嗯，这就是设计系统的价值。
设计系统的核心三要素：
- 组件库：可复用的UI元素，比如按钮、输入框、列表
- 设计Token：底层的设计变量，比如颜色、间距、字体
- 使用规范：什么时候用这个组件，怎么用，不能怎么用
2.2 原子设计方法论
说到设计系统，就绕不开Brad Frost提出的原子设计方法论。这个方法把UI拆成了五个层级。我刚开始学的时候觉得有点抽象，后来做项目用上了，真香。
2.2.1 五个层级
| 层级 | 定义 | 车载HMI示例 |
|---|---|---|
| 原子 | 最小的、不可再分的UI元素 | 颜色Token、字号、图标 |
| 分子 | 由原子组合而成的简单组件 | 按钮（文字+背景色+圆角） |
| 组织 | 由分子组合而成的复杂模块 | 导航栏（返回按钮+标题+图标） |
| 模板 | 由组织构成的页面布局框架 | 设置页面模板（列表+标题栏） |
| 页面 | 填充了真实内容的模板实例 | 具体的“蓝牙设置”页面 |
为什么叫原子设计？说白了，就像化学里的原子组合成分子，分子组合成有机物。UI也是一样。我习惯从最小的原子开始搭，这样后面组合起来特别灵活。
我的经验：在车载HMI中，原子层级的定义尤其重要。比如“警告红”这个颜色Token，一旦定下来，所有警告相关的组件都引用它。改一次，全改。我曾经因为颜色Token没定义好，导致后期改了30多个页面...那叫一个酸爽。
2.3 设计Token的概念与分类
设计Token，英文叫Design Token。说白了，它就是设计系统中的变量。就像编程里的变量一样，你定义一个值，然后到处引用它。
2.3.1 为什么需要Token？
你想想看，如果设计师说“这个按钮用#FF0000”，开发写代码时也写#FF0000。但下次想改成#E60000呢？你得一个一个找。有了Token，你只需要改一个地方。
我在项目中遇到过最典型的场景：某主机厂要求白天模式和夜间模式一键切换。如果没有Token，你得改几百个颜色值。有了Token，改两个变量就搞定了。
2.3.2 Token的分类
我个人习惯把Token分成三类，这样管理起来最清晰：
| 分类 | 说明 | 示例 |
|---|---|---|
| 全局Token | 最底层的原始值，不依赖任何上下文 | color-red-500: #FF0000 |
| 别名Token | 语义化的命名，引用全局Token | color-warning: {color-red-500} |
| 组件Token | 特定组件的样式变量 | button-warning-bg: {color-warning} |
举个例子你就明白了：
// 全局Token
--color-red-500: #FF0000;
--color-blue-500: #0066FF;
// 别名Token
--color-warning: var(--color-red-500);
--color-primary: var(--color-blue-500);
// 组件Token
--button-warning-bg: var(--color-warning);
--button-primary-bg: var(--color-primary);
注意：千万不要把全局Token直接用在组件上。我曾经见过有人直接写--button-bg: var(--color-red-500)。结果后来想统一改所有警告按钮的颜色，发现根本没法批量改。正确的做法是再加一层别名Token。
2.3.3 Token的命名规范
命名这事，看似简单，其实坑很多。我建议用这样的格式：
{类别}-{属性}-{状态}-{序号}
示例：
color-bg-primary-default
color-text-secondary-hover
spacing-padding-sm
border-radius-md
为什么要加状态？你想想看，一个按钮有默认态、悬停态、按下态、禁用态。如果不加状态，你就要写四个不同的Token名，那命名就乱套了。
2.4 实战：搭建你的第一个Token体系
光说不练假把式。咱们直接上手，搭一个车载HMI最基础的Token体系。
// 1. 颜色Token
--color-brand-primary: #0066FF; // 品牌蓝
--color-brand-secondary: #00CC66; // 品牌绿
--color-functional-warning: #FF6600; // 警告橙
--color-functional-error: #FF0000; // 错误红
--color-functional-success: #00CC66; // 成功绿
// 2. 字体Token
--font-size-display: 48px; // 大标题
--font-size-headline: 32px; // 标题
--font-size-body: 24px; // 正文
--font-size-caption: 20px; // 辅助文字
// 3. 间距Token
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
// 4. 圆角Token
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 16px;
--border-radius-full: 50%;
避坑指南：我曾经在项目初期只定义了颜色和字体Token，觉得间距和圆角没必要。结果后期发现，不同设计师给的间距值五花八门，有的用6px，有的用8px。最后不得不统一成4的倍数。所以，一开始就把间距Token定好，省得后面返工。
2.5 小结
这一章咱们聊了设计系统的定义、原子设计方法论、以及设计Token的概念与分类。说白了，设计系统就是一套可复用的组件+规则。原子设计帮你把UI拆成可管理的层级。Token则是让这些层级之间能够灵活联动。
下一章，咱们会深入聊组件库的搭建。到时候你会看到，这些Token是怎么真正用起来的。嗯，敬请期待。