3. 设计系统搭建：颜色系统定义、字体排版规范、图标与控件库
好，咱们进入第三章。说实话，这一章是整个车机界面设计的“地基”。
你想想看，一个车机系统里，可能有上百个界面。如果没有统一的设计系统，每个界面各玩各的，那做出来的东西就像拼凑出来的——颜色不统一、字体大小乱飞、图标风格各异。用户一上车，第一感觉就是“这车机好山寨”。
我在做某款量产车型的项目时，就吃过这个亏。前期赶进度，没来得及搭设计系统，结果后期光统一颜色就返工了三次。嗯，从那以后，我再也不敢跳过这一步了。
3.1 颜色系统定义
车机颜色系统和手机APP不一样。驾驶场景下，光线变化剧烈，而且用户注意力必须集中在路上。所以颜色设计的第一原则是：安全第一，美观第二。
3.1.1 主色与强调色
我个人习惯把颜色分成三层：
- 主色（Primary）：品牌色，占比约10%。比如蔚来的蓝色、小鹏的橙色。用在关键操作按钮、品牌标识上。
- 中性色（Neutral）：占比约70%。包括背景、卡片、文字。车机里我强烈推荐深色背景，因为夜间驾驶时，亮色背景会严重干扰视线。
- 强调色（Accent）：占比约20%。用于状态提示、警告、进度条等。
核心原则：车机界面中，颜色数量控制在3-5种以内。超过这个数，驾驶员的认知负荷会急剧上升。
3.1.2 深色模式与自适应亮度
车机必须支持深色模式，而且最好是自动切换。我见过有些车机只有浅色模式，白天还行，一到晚上，那个亮啊，简直像在车里开了个探照灯。
颜色值建议用HSB模式来定义，而不是RGB。为什么？因为HSB更符合人眼感知。举个例子：
// 深色背景
背景色: H: 220°, S: 5%, B: 8% // 接近纯黑，但带一点点蓝
卡片色: H: 220°, S: 5%, B: 15% // 比背景亮一点，形成层次
// 文字颜色
主文字: H: 0°, S: 0%, B: 95% // 近乎白色
次要文字: H: 0°, S: 0%, B: 60% // 灰色
小技巧：定义颜色时，一定要标注“对比度”。WCAG标准要求文字和背景的对比度至少4.5:1。车机场景下，我建议做到7:1以上，因为阳光直射时屏幕会反光。
3.1.3 语义色定义
车机里有很多状态需要颜色来传达：
| 状态 | 颜色 | 使用场景 |
|---|---|---|
| 正常/确认 | 绿色 (#00C853) | 导航路线、功能开启、充电完成 |
| 警告 | 黄色 (#FFD600) | 油量低、胎压异常、保养提醒 |
| 危险/错误 | 红色 (#FF1744) | 故障报警、碰撞预警、刹车异常 |
| 信息 | 蓝色 (#2979FF) | 系统提示、连接状态、更新通知 |
我曾经犯过一个错：把警告色和危险色都用了红色，结果用户分不清“提醒一下”和“赶紧停车”的区别。后来我们专门做了用户测试，才把黄色和红色彻底分开。
3.2 字体排版规范
车机上的字体，第一要求是可读性。别整那些花里胡哨的艺术字体，驾驶员没时间欣赏。我一般只用无衬线字体，比如Noto Sans、PingFang SC。
3.2.1 字号层级
车机屏幕距离驾驶员大约60-80厘米，比手机远，比电视近。所以字号要比手机大一号。我常用的层级是这样的：
| 层级 | 字号 | 字重 | 用途 |
|---|---|---|---|
| H1 | 48px | Bold | 主标题、大数字（车速、续航） |
| H2 | 36px | SemiBold | 页面标题、功能名称 |
| Body | 24px | Regular | 正文、列表项、按钮文字 |
| Caption | 18px | Regular | 辅助信息、时间、温度 |
注意：车机里不要用小于16px的字号。我见过有些设计把免责声明写成12px，结果用户根本看不清，最后被投诉了。安全相关的文字，至少24px起步。
3.2.2 行高与字间距
车机屏幕有震动，而且驾驶时视线会晃动。所以行高要比常规设计大一些。我一般用1.5倍行高。字间距可以稍微宽松一点，0.5px到1px之间。
举个例子：
/* 字体排版规范 */
body-text {
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
font-size: 24px;
line-height: 1.5;
letter-spacing: 0.5px;
}
.heading-primary {
font-size: 48px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0px;
}
3.2.3 多语言适配
车机经常要出口，所以字体要支持多语言。中文、英文、阿拉伯文、泰文……每种语言的排版规则都不一样。我建议用可变字体（Variable Font），一个字体文件就能覆盖所有字重，省空间。
3.3 图标与控件库
图标在车机里特别重要。因为驾驶时，用户没空读文字，看到图标就能秒懂。但图标设计有个坑：不要自创隐喻。
3.3.1 图标规范
我一般用线性图标，线宽统一为2px。圆角统一为2px。这样看起来整齐划一。图标尺寸建议用8的倍数：24px、32px、40px、48px。
举个例子，导航相关的图标：
- 目的地：用旗帜图标，全球通用
- 加油站：用油泵图标，别用油桶（有人看不懂）
- 充电站：用闪电图标，但要加个插头，不然有人以为是“危险”
避坑指南：我曾经设计过一个“洗车”图标，用了水滴加泡沫。结果用户测试时，有人以为是“漏水报警”。后来我们改成了刷子加汽车，识别率瞬间从30%升到90%。图标一定要做用户测试！
3.3.2 控件库
控件是界面的“积木”。车机里常用的控件有这些：
| 控件 | 尺寸 | 交互说明 |
|---|---|---|
| 按钮（主） | 64px高 | 圆角8px，点击有触感反馈 |
| 按钮（次） | 48px高 | 边框样式，用于次要操作 |
| 滑块 | 轨道4px，滑块24px | 用于音量、亮度调节 |
| 开关 | 48px宽，28px高 | 带颜色变化，绿色表示开启 |
| 列表项 | 64px高 | 左侧图标，中间文字，右侧箭头 |
每个控件都要定义四种状态：默认、悬停（触摸时高亮）、按下、禁用。车机里悬停状态其实很少用，因为手指在屏幕上滑动时，更多是触摸反馈。我一般用0.2秒的动画过渡，让交互感觉更跟手。
3.3.3 控件库的组织
我习惯把控件库按功能分组：
- 导航控件：地图缩放、路线选择、目的地输入
- 媒体控件：播放/暂停、上一首/下一首、音量调节
- 车辆控件：空调调节、座椅加热、车窗控制
- 系统控件：返回、主页、设置、通知
每个控件都要标注清楚：最小触摸区域是44x44pt（Apple推荐），但车机上我建议做到48x48pt以上，因为手指可能戴手套或者有油污。
总结一下：设计系统不是一次性的工作。它需要随着项目迭代不断更新。我每做完一个项目，都会把设计系统整理一遍，把踩过的坑、学到的经验都加进去。这样下一个项目就能直接复用，效率翻倍。
好了，这一章的内容就这些。下一章咱们聊聊“导航与信息架构设计”，那可是车机交互的重头戏。到时候我会分享一个我踩过的巨坑——导航层级设计错了，导致用户开车时迷路了……嗯，到时候细说。