4. 色彩系统设计：车载HMI色彩心理学、深色模式设计规范、高对比度与可读性设计

色彩，在车载HMI里，从来不只是「好不好看」的问题。

它直接关系到驾驶安全。你想想看，一个刺眼的按钮颜色，或者一段看不清的文字，在高速行驶时可能就是一次事故的导火索。我做了这么多年车载设计，见过太多因为色彩翻车的案例。今天咱们就把这块硬骨头啃下来。

4.1 车载HMI色彩心理学：别让颜色「骗」了你的眼睛

先说个基础认知。人眼在驾驶状态下，对色彩的感知和坐在电脑前是完全不同的。

为什么？因为驾驶时，你的余光要扫路况，你的瞳孔要适应从隧道到阳光的剧烈变化。这时候，色彩的心理暗示会被放大。

• 红色： 代表警告、危险、停止。用在报警灯上没问题。但如果你把音乐播放器的按钮也搞成红色，驾驶员会下意识紧张。我在项目中遇到过，用户反馈说「一看到红色就心慌」，后来我们把娱乐区域的红色全换成了暖橙色。
• 蓝色： 代表冷静、科技、信息。适合用在背景、仪表盘、导航路径上。但注意，纯蓝色在强光下容易看不清，而且长时间盯着会让人产生冷感。
• 绿色： 代表安全、确认、节能。比如电量充足、功能开启。但绿色和红色放在一起，对色盲用户不友好。这个坑我踩过，后来我们强制要求所有红绿配对必须加图标辅助。
• 黄色/橙色： 代表注意、中等警告。比红色温和，比绿色醒目。适合用在限速提醒、车道偏离等场景。

4.2 深色模式设计规范：不是简单的「黑底白字」

现在几乎所有车厂都在推深色模式。但很多人以为就是把背景色从白变成黑。嗯，这里要注意，没那么简单。

我个人的习惯是，深色模式要解决三个核心问题：

1. 对比度不能太高，也不能太低。 纯黑背景(#000000)配纯白文字(#FFFFFF)，对比度太高，长时间看眼睛会累。而且OLED屏幕下，纯黑虽然省电，但容易产生「黑场拖影」。
2. 层次感要靠「灰度」来区分。 深色模式下，背景、卡片、按钮、文字，应该用不同的灰度层级来拉开距离。比如背景用#121212，卡片用#1E1E1E，文字用#E0E0E0。
3. 色彩饱和度要降低。 深色模式下，高饱和度的颜色会显得刺眼。我建议把主色饱和度降低20%-30%。比如蓝色从#007AFF降到#0A84FF。

给你一个我常用的深色模式色彩层级表：

层级	用途	色值（推荐）	说明
背景层	主背景	#121212	最底层，不发光区域
表面层	卡片、弹窗	#1E1E1E	比背景亮一级，有浮起感
元素层	按钮、输入框	#2C2C2C	可交互区域，需有明确边界
主文字	正文、标题	#E0E0E0	高可读性，不刺眼
辅助文字	提示、次要信息	#A0A0A0	弱化视觉权重
强调色	品牌色、状态色	#0A84FF	饱和度降低后的蓝色

4.3 高对比度与可读性设计：让信息「一目了然」

高对比度模式，说白了就是给那些视力不太好，或者环境光特别刺眼的情况准备的。

但高对比度不是简单地把所有颜色都调亮。那样反而会丢失信息层级。我建议遵循以下原则：

• 文字与背景的对比度至少达到7:1。 这是WCAG AA级标准。你可以用在线工具测一下。我习惯在Figma里直接装一个对比度检查插件。
• 图标与背景的对比度至少达到3:1。 图标不需要像文字那么高，但也要能清晰辨认。
• 不要依赖颜色作为唯一的信息传递方式。 比如，状态指示除了用颜色，还要加文字或图标。这是为了照顾色盲用户。我记得有一次测试，一个色盲用户完全分不清红色和绿色的充电状态，后来我们加了「已充满」「充电中」的文字标签。

给你一个高对比度模式的配色参考：

元素	正常模式	高对比度模式
背景	#121212	#000000
文字	#E0E0E0	#FFFFFF
强调色	#0A84FF	#00BFFF
警告色	#FF9500	#FF4500

4.4 实战：如何搭建车载色彩系统

好了，理论说完了。咱们来点实际的。我一般会这样搭建一个车载色彩系统：

1. 定义品牌色。 这是你的主色调，比如蔚来的蓝、特斯拉的红。但记住，品牌色只能用在品牌标识和少数强调元素上。
2. 定义功能色。 比如警告红、确认绿、信息蓝。这些颜色要严格遵循行业习惯，别乱创新。
3. 定义中性色。 就是黑白灰。这是占比最大的颜色，决定了整体的可读性和层次感。
4. 定义深色模式色板。 基于中性色和功能色，生成一套深色模式专用的色值。
5. 定义高对比度模式色板。 再生成一套高对比度专用的色值。

最后，把这些色值整理成一个色彩变量文件。比如在Figma里，我会建一个「Color Styles」页面，把所有颜色都定义成变量。这样后期改起来，只需要改一个地方，所有组件自动更新。

嗯，这一章就到这里。下一章咱们聊聊「字体与排版系统」，那也是个大坑。