4、视觉设计基础：色彩心理学在车载环境中的应用、字体与可读性、图标设计规范

好，我们进入视觉设计这一块。说实话，很多工程师觉得视觉就是「美工」的事，跟逻辑无关。但车载仪表盘不一样——你设计的每一个像素，都可能影响驾驶员的反应速度。我做了这么多年，见过太多因为配色不当、字体太小、图标模糊导致的投诉。

这一章，我们重点聊三个核心：色彩、字体、图标。这三样东西，是HMI的「皮肤」。

4.1 色彩心理学：别让颜色「骗」了驾驶员

色彩在车载环境里，不是用来好看的。它是用来传递信息的。你想想看，红色为什么代表危险？因为人类进化过程中，红色就是血、火、危险的信号。这个本能反应，我们得好好利用。

4.1.1 色彩的三要素与车载适配

我个人习惯把色彩拆成三个维度：色相、饱和度、明度。在车载环境里，这三个维度都有特殊要求。

维度	白天要求	夜间要求	避坑点
色相	高辨识度，避免蓝紫色系	低色温，暖色为主	蓝色在夜间容易眩光
饱和度	中等偏高，保证阳光下可见	降低饱和度，减少视觉疲劳	高饱和红色在夜间刺眼
明度	高对比度，文字与背景明度差≥3:1	自动调暗，避免亮度过高	纯白背景在夜间是灾难

我在项目中遇到过一件事：某款车型的仪表盘用了深蓝色背景配白色文字，白天看着还行。结果夜间测试时，驾驶员说「眼睛快瞎了」。为什么？因为蓝色波长较短，在暗环境下会散射，造成眩光。后来我们把背景色改成了深灰色，问题解决了。

4.1.2 色彩的功能分区

我建议把色彩分成三个层级：

• 警示色（红/橙）：用于故障、报警、严重警告。使用面积要小，频率要低。用得太多，驾驶员会麻木。
• 信息色（蓝/绿/白）：用于正常状态、提示信息、功能状态。比如巡航开启、车道保持激活。
• 背景色（深灰/黑/深蓝）：用于承载信息，不能抢戏。明度控制在20%-40%之间。

4.2 字体与可读性：别让驾驶员「眯眼睛」

字体设计，说白了就是「让驾驶员在0.5秒内看清信息」。我见过很多仪表盘，字体设计得花里胡哨，结果驾驶员要盯着看2秒才能识别——这在高速上就是几十米的盲开距离。

4.2.1 字体选择：无衬线是底线

车载环境，只推荐无衬线字体。为什么？因为衬线字体（比如宋体）的笔画粗细变化大，在振动环境下容易模糊。而无衬线字体（比如思源黑体、Noto Sans）笔画均匀，辨识度高。

我个人常用的字体列表：

• 中文：思源黑体、阿里巴巴普惠体、华为鸿蒙字体
• 数字/英文：Roboto、DIN Pro、Helvetica Neue

4.2.2 字号与视距的关系

这里有个公式，我一直在用：

最小字号（mm） = 视距（mm） × tan(0.3°)

简单说，如果驾驶员眼睛到屏幕的距离是700mm，那么最小可读字号大约是：

700 × tan(0.3°) ≈ 3.7mm

换算成像素（假设屏幕PPI为150）：

3.7mm × (150 / 25.4) ≈ 22px

所以，关键信息（车速、档位）的字号不要小于22px。辅助信息（里程、温度）可以小到16px，但不能再小了。

4.2.3 行距与字间距

嗯，这里要注意：车载屏幕的字体间距要比手机大。因为振动环境下，字间距太小容易粘连。

• 字间距：建议设置为字体宽度的10%-15%
• 行距：建议为字体高度的1.5倍

我曾经在测试中发现，某款仪表盘的数字「1」和「2」在快速刷新时看起来像「12」。后来把字间距从默认的0调整到了2px，问题解决了。

4.3 图标设计规范：让图标「说话」

图标是车载HMI的「国际语言」。好的图标，驾驶员不用看文字就能理解。坏的图标，驾驶员要猜半天。

4.3.1 图标的设计原则

我总结了四个字：简、准、统、清。

• 简：去掉所有装饰细节，只保留核心特征。比如「油箱」图标，只需要一个油泵轮廓，不需要画加油枪。
• 准：符合用户认知。比如「设置」用齿轮，「信息」用感叹号，「导航」用箭头。不要自己发明。
• 统：同一套图标风格必须统一。线宽、圆角、填充方式都要一致。
• 清：在强光下也能看清。线条粗细建议≥2px，图标尺寸建议≥32×32px。

4.3.2 图标的尺寸与间距

我建议的图标尺寸规范：

图标类型	推荐尺寸（px）	间距（px）	说明
主功能图标	48×48	≥16	如导航、音乐、电话
状态图标	32×32	≥12	如蓝牙、信号、电量
警示图标	40×40	≥20	如故障灯、报警

4.3.3 图标的交互反馈

图标不能只是静态的。当用户触摸或点击时，要有反馈：

• 按下状态：图标缩小5%-10%，或者背景色变化
• 激活状态：图标高亮，或者增加外发光
• 禁用状态：降低透明度至40%，或者灰色显示

我习惯在图标周围保留至少8px的触控安全区域，防止误触。

4.4 实战：一个完整的视觉规范示例

最后，我分享一个我常用的视觉规范模板。你可以直接拿来用：

/* 色彩规范 */
:root {
  --color-danger: #FF3B30;
  --color-warning: #FF9500;
  --color-success: #34C759;
  --color-info: #007AFF;
  --color-bg-primary: #1C1C1E;
  --color-bg-secondary: #2C2C2E;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #AEAEB2;
}

/* 字体规范 */
:root {
  --font-family: 'Noto Sans SC', 'Roboto', sans-serif;
  --font-size-xl: 28px;   /* 主数据 */
  --font-size-lg: 22px;   /* 关键信息 */
  --font-size-md: 18px;   /* 辅助信息 */
  --font-size-sm: 14px;   /* 次要信息 */
  --line-height: 1.5;
  --letter-spacing: 0.5px;
}

/* 图标规范 */
:root {
  --icon-size-primary: 48px;
  --icon-size-secondary: 32px;
  --icon-stroke-width: 2px;
  --icon-border-radius: 8px;
  --icon-touch-area: 8px;
}

这套规范，我在三个量产项目里用过。效果不错，至少没出过因为视觉设计导致的投诉。

好，这一章就到这里。下一章我们聊「动效设计」——怎么让仪表盘「动」起来，又不让驾驶员晕车。