4、色彩系统设计：座舱色彩心理学、主色/辅助色/警示色定义、深色模式与浅色模式、色彩对比度与可读性
色彩这东西，在座舱UI里可不是「好看就行」那么简单。
我做了这么多年座舱系统，见过太多因为颜色翻车的案例。有的车机白天看着还行，一到晚上开车，那刺眼的蓝光能把人眼睛晃瞎。还有的警示色选得太「温柔」，驾驶员根本注意不到——这可不是小事，搞不好要出安全问题。
所以这一章，咱们好好聊聊座舱里的色彩设计。说白了，就是让颜色既好看，又安全，还得让用户看着舒服。
4.1 座舱色彩心理学：颜色不是随便选的
你想想看，开车的时候，人的注意力本来就紧张。这时候屏幕上的颜色，会直接影响驾驶员的情绪和反应速度。
蓝色——我个人习惯用在信息展示区。蓝色让人冷静，不抢眼。我在做某款新能源车仪表盘时，把车速、续航这些核心信息都用了偏冷的蓝灰色，用户反馈说「看着不累」。
红色——这个要小心。红色天生带有「警告」属性。我见过有些设计把音乐播放器的图标也弄成红色，结果驾驶员总以为车出故障了。红色只适合用在紧急警示上，比如刹车故障、电池过热。
绿色——代表「安全」「正常」。比如自适应巡航开启、车道保持激活，用绿色就很合适。但注意，别用太亮的荧光绿，晚上开车会刺眼。
橙色/黄色——介于安全和危险之间。比如胎压偏低、油量不足，用橙色提示，既引起注意，又不至于让人紧张。
4.2 主色/辅助色/警示色定义
一套完整的座舱色彩体系，至少包含三类颜色：主色、辅助色、警示色。它们各司其职，不能乱用。
4.2.1 主色（Primary Color）
主色是界面的「底色」。它决定了整个座舱的视觉基调。
- 深色模式主色：我建议用 #0D1117 或 #1A1A2E 这类深灰蓝。纯黑（#000000）其实不好用，因为和周围黑色边框混在一起，层次感全没了。
- 浅色模式主色：用 #F5F5F5 或 #FAFAFA 这类暖白。纯白（#FFFFFF）太刺眼，尤其在阳光下开车时，反光严重。
4.2.2 辅助色（Secondary Color）
辅助色用来区分信息层级。比如卡片背景、分割线、图标底色。
- 深色模式下：辅助色用 #1E293B、#334155 这类比主色亮一点的颜色。
- 浅色模式下：辅助色用 #E2E8F0、#CBD5E1 这类比主色暗一点的颜色。
记住一个原则：辅助色和主色的亮度差，至少要达到 20%。不然看起来就像「糊在一起」了。
4.2.3 警示色（Alert Color）
警示色是座舱里最重要的颜色，没有之一。
| 类型 | 色值（深色模式） | 色值（浅色模式） | 使用场景 |
|---|---|---|---|
| 危险警示 | #FF3B30 | #D32F2F | 刹车故障、安全气囊异常 |
| 警告提示 | #FF9500 | #F57C00 | 胎压偏低、保养提醒 |
| 信息提示 | #007AFF | #1976D2 | 导航提示、系统通知 |
| 成功状态 | #34C759 | #388E3C | 功能开启、连接成功 |
4.3 深色模式与浅色模式
现在的座舱系统，基本都支持深色和浅色两种模式。但很多团队只是简单地把背景色反转一下，这其实不对。
4.3.1 深色模式设计要点
- 不要用纯黑背景：纯黑在 OLED 屏幕上虽然省电，但和周围黑色内饰混在一起，没有边界感。我习惯用 #121212 或 #1C1C1E。
- 文字用浅灰，不要用纯白：纯白文字在深色背景上对比度太高，看久了眼睛累。用 #E0E0E0 或 #D1D5DB 更舒服。
- 图标用半透明：比如 60% 白色透明度，比纯白图标更有层次感。
4.3.2 浅色模式设计要点
- 背景用暖白：纯白在阳光下反光严重。用 #F8F9FA 或 #F0F2F5 会好很多。
- 文字用深灰，不要用纯黑：纯黑文字在浅色背景上太「硬」。用 #333333 或 #4A4A4A 更柔和。
- 注意阳光可读性：浅色模式下，如果屏幕亮度不够，信息会看不清。我建议浅色模式的最低亮度要比深色模式高 30%。
核心原则：深色模式不是「浅色模式的反转」，而是两套独立的色彩体系。每个颜色都要单独定义，不能偷懒用取反操作。
4.4 色彩对比度与可读性
这是座舱UI里最容易被忽视，但也是最重要的部分。你想想看，驾驶员在开车时，可能只有 0.5 秒的时间扫一眼屏幕。如果对比度不够，信息根本看不清。
4.4.1 对比度标准
我一般遵循 WCAG 2.1 AA 标准：
- 正常文本：对比度 ≥ 4.5:1
- 大文本（18px 以上或加粗 14px 以上）：对比度 ≥ 3:1
- 图标和图形：对比度 ≥ 3:1
举个例子，深色模式下，背景 #121212，文字 #E0E0E0，对比度大约是 13.5:1，完全达标。但如果用 #666666 的文字，对比度只有 4.2:1，就不够安全了。
4.4.2 如何快速检查对比度
我习惯用这个公式自己算：
相对亮度公式（sRGB 转亮度）：
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
其中 R、G、B 需要先做 gamma 校正：
if (c <= 0.03928) {
c = c / 12.92
} else {
c = ((c + 0.055) / 1.055) ^ 2.4
}
对比度 = (L1 + 0.05) / (L2 + 0.05)
// L1 是较亮颜色的亮度，L2 是较暗颜色的亮度当然，现在有很多在线工具可以直接算。但我建议你至少理解这个原理，不然出了问题都不知道怎么排查。
4.4.3 实际项目中的坑
我记得有一次，设计师选了一组「高级灰」配色，看着确实有质感。结果拿到实车上一测，导航文字和背景的对比度只有 2.8:1。白天在阳光下，驾驶员根本看不清路名。后来我们连夜改了色值，把文字亮度提高了 15%，才勉强达标。
4.5 总结一下
色彩系统设计，说白了就是三个字：看得清。
- 主色定基调，辅助色分层次，警示色保安全。
- 深色模式别用纯黑，浅色模式别用纯白。
- 对比度是硬指标，别凭感觉选颜色。
我见过太多团队，花大把时间在「这个蓝色好不好看」上，却忽略了最基本的可读性。记住：座舱UI的第一优先级永远是安全，其次才是美观。
下一章，咱们聊聊字体和排版。那个坑也不少，到时候我慢慢跟你说。