第3章：色彩与品牌——汽车HMI色彩心理学、品牌色应用、深色模式设计规范
色彩这东西，在汽车HMI里从来不是「好看就行」那么简单。我做了这么多年设计，见过太多项目因为颜色没调好，最后被用户吐槽「看着累」「看不清」「跟品牌气质不符」。说白了，色彩是HMI的「第一印象」，也是品牌和用户之间最直接的沟通方式。
这一章，咱们就聊聊色彩在汽车HMI里的那些门道。我会结合自己踩过的坑，把色彩心理学、品牌色落地、深色模式设计这些事儿讲透。
3.1 色彩心理学：为什么红色不能乱用？
先问个问题：你开车时看到红色，第一反应是什么？
大部分人都会想到「危险」「刹车」「警告」。这就是色彩心理学在起作用。红色波长长，穿透力强，人眼对它最敏感。所以几乎所有汽车都把红色留给刹车、报警、严重故障这类信息。
但你知道吗？红色用多了反而会出问题。我之前参与过一个项目，客户非要把运动模式的主题色做成亮红色，连仪表盘背景都带红色渐变。结果呢？用户反馈「开车时总觉得有警报在响，心里发毛」。后来我们改成了暗红色搭配灰色背景，问题才解决。
这里我总结了几种常见颜色在HMI里的「性格」：
| 颜色 | 心理暗示 | HMI常见用途 | 避坑提醒 |
|---|---|---|---|
| 红色 | 危险、紧急、停止 | 刹车报警、故障灯、限速提示 | 别大面积使用，会引发焦虑 |
| 橙色 | 警告、注意、中等紧急 | 低电量、保养提醒、车道偏离 | 别跟红色混用，容易混淆 |
| 绿色 | 安全、正常、通行 | 自适应巡航开启、电量充足、导航路线 | 色弱用户可能看不清，加图标辅助 |
| 蓝色 | 科技、冷静、信息 | 蓝牙连接、温度显示、背景色 | 别用在警告信息上，太冷 |
| 灰色/黑色 | 高级、沉稳、背景 | 深色模式背景、次要信息、分割线 | 纯黑太压抑，用深灰更好 |
3.2 品牌色应用：从VI到HMI的「翻译」
品牌色在HMI里落地，是我见过翻车最多的环节。很多品牌方直接把VI手册里的主色拿过来用，结果在屏幕上亮得刺眼，或者跟深色背景搭在一起根本看不清。
为什么会这样？因为VI色是给印刷、网页、线下物料用的，而HMI是「发光屏幕」，而且是在强光、暗光、震动环境下看的。你得做一次「翻译」。
我习惯的做法是这样的：
- 拿到品牌色后，先做「屏幕适配」——把CMYK转成RGB，然后调亮度、饱和度。一般品牌主色在HMI里要降低10%-20%的饱和度，不然太扎眼。
- 建立HMI专属色板——品牌色只占20%，剩下80%是辅助色、中性色、功能色。比如品牌主色是蓝色，那你的警告色、成功色、信息色都得跟这个蓝「搭得上」。
- 做「深色模式」和「浅色模式」两套——品牌色在不同背景下的表现完全不同。我见过一个项目，浅色模式下的品牌色很好看，一换深色模式就糊成一团。后来我们给深色模式单独调了一版品牌色，亮度提高了15%。
举个例子： 某新能源品牌的VI主色是「科技蓝」#0066FF。在HMI里，我们把它拆成三档：
- 主色（按钮、高亮）：#007AFF（比VI色亮一点）
- 强调色（进度条、图标）：#3399FF（更亮，适合小面积使用）
- 背景色（卡片、面板）：#E5F0FF（极浅蓝，适合浅色模式）
嗯，这里要注意：品牌色在HMI里不要「独占」所有重要信息。我见过有些设计把导航路线、警告图标、按钮全用品牌色，结果用户分不清哪个更重要。品牌色应该只用在「品牌想让你记住」的地方，比如启动画面、主菜单图标、品牌专属功能。
3.3 深色模式设计规范：不只是「把背景变黑」
深色模式现在几乎是汽车HMI的标配了。但很多人以为深色模式就是把白色背景换成黑色，文字反白就完事了。我告诉你，这么做出来的深色模式，开车时根本看不清。
我曾经踩过一个坑：一个项目赶工期，我们直接把浅色模式的配色「反转」了一下，结果在阳光下屏幕反光严重，用户根本看不清导航信息。后来我们花了整整两周重新调色。
深色模式的核心原则，我总结成三条：
3.3.1 不要用纯黑背景
纯黑（#000000）在OLED屏幕上虽然省电，但跟周围环境对比太强，眼睛容易疲劳。我建议用深灰色，比如 #121212 或 #1E1E1E。这样既保留了深色模式的「沉浸感」，又不会让眼睛太累。
3.3.2 文字层级要重新设计
浅色模式下，黑色文字在白色背景上对比度很高。但深色模式下，白色文字在黑色背景上其实没那么清晰。我习惯这样定：
- 主文字：纯白 #FFFFFF（但字号要稍微大一点）
- 次要文字：浅灰 #B0B0B0（别用太暗的灰，看不清）
- 禁用/提示文字：中灰 #707070
你想想看，如果次要文字用 #666666，在深色背景上几乎跟背景融为一体了。我测试过，至少要有 4.5:1 的对比度才安全。
3.3.3 图标和图片要「降噪」
浅色模式下的图标，在深色模式里直接反白会显得很「愣」。我建议给图标加一层半透明底色，或者降低饱和度。图片的话，可以加一个深色蒙版，透明度30%左右，这样图片不会太抢眼。
3.4 实战：一套完整的色彩系统搭建
说了这么多理论，咱们来点实际的。我一般会这样搭建一套HMI色彩系统：
/* 品牌色 - 以某新能源品牌为例 */
--brand-primary: #007AFF; /* 主色，用于按钮、高亮 */
--brand-secondary: #3399FF; /* 辅助色，用于次要元素 */
--brand-accent: #66B2FF; /* 强调色，用于小面积点缀 */
/* 功能色 - 跟品牌色协调 */
--success: #34C759; /* 绿色，成功/正常 */
--warning: #FF9500; /* 橙色，注意/提醒 */
--danger: #FF3B30; /* 红色，警告/故障 */
--info: #5AC8FA; /* 浅蓝，信息提示 */
/* 中性色 - 深色模式 */
--bg-primary: #121212; /* 主背景 */
--bg-secondary: #1E1E1E; /* 卡片/面板背景 */
--bg-tertiary: #2C2C2C; /* 更深一层背景 */
--text-primary: #FFFFFF; /* 主文字 */
--text-secondary: #B0B0B0; /* 次要文字 */
--text-tertiary: #707070; /* 禁用/提示文字 */
--border: #3A3A3A; /* 分割线/边框 */
/* 中性色 - 浅色模式 */
--bg-primary-light: #FFFFFF;
--bg-secondary-light: #F5F5F5;
--text-primary-light: #1A1A1A;
--text-secondary-light: #666666;
--border-light: #E0E0E0;
这套系统的好处是：品牌色、功能色、中性色各司其职，不会打架。而且深色模式和浅色模式共用同一套品牌色和功能色，只是中性色不同，维护起来也方便。
最后说一句：色彩设计没有「标准答案」，但有「最佳实践」。你可以在我的框架上做调整，但核心原则别丢——信息层级清晰、品牌调性一致、驾驶安全第一。做到这三点，你的HMI色彩设计就及格了。