4. 视觉设计系统：色彩体系与字体图标
好，咱们进入视觉设计系统的核心部分。说实话，色彩、字体、图标这三样东西，是用户每天看得最多的。做不好，整个座舱的档次就拉下来了。我这些年踩过的坑，多半都跟这几个基础元素有关。
4.1 色彩体系：白天与黑夜的平衡术
智能座舱跟手机不一样。手机你爱用啥模式用啥模式，但车里不行。开车时光线变化太快——刚出隧道就是大太阳，傍晚又突然暗下来。所以色彩体系必须同时考虑日间和夜间两套方案。
4.1.1 日间模式：高对比度，抗眩光
白天开车，阳光直射屏幕是常态。我见过不少方案，在室内看着挺漂亮，一上车就废了——根本看不清。
核心原则：
- 背景色： 建议用 #F5F5F5 到 #FFFFFF 之间的浅色。纯白其实不太好，反光太强。
- 主文字色： #1A1A1A 或 #2C2C2C。别用纯黑 #000000，阳光下反而看不清。
- 辅助信息： #666666 到 #999999。比如仪表盘上的小字、提示信息。
- 强调色： 建议用饱和度适中的蓝色或绿色。我个人习惯用 #007AFF 或 #34C759，视觉上比较舒服。
避坑指南： 我曾经在日间模式下用了高饱和度的红色做警告图标，结果阳光一照，整个屏幕像在流血。后来改成了橙色系，视觉冲击力够了，也不刺眼。
4.1.2 夜间模式：低亮度，护眼优先
夜间模式不是简单地把颜色反过来。你想想看，深夜开车，眼睛已经适应了黑暗，突然亮起一块大屏幕，瞳孔得急剧收缩——这其实很危险。
核心原则：
- 背景色： #1A1A2E 到 #16213E 之间的深蓝灰色。纯黑 #000000 其实不好，因为跟周围环境完全没过渡。
- 主文字色： #E0E0E0 或 #D4D4D4。不要用纯白，太刺眼。
- 辅助信息： #7A7A8A。亮度要压下来，但不能看不清。
- 强调色： 饱和度降低30%。比如日间用 #007AFF，夜间就用 #4A90D9。
我的经验： 夜间模式下，所有颜色的亮度值建议控制在 20%-60% 之间。超过 60% 就会开始刺眼。我一般用 HSL 模型来调，把 L 值卡在 30%-50%。
4.1.3 自动切换策略
别让用户手动切。座舱应该根据光线传感器自动切换。但要注意——切换过程要有渐变，大概 300-500ms。我见过直接跳变的方案，用户会感觉「闪了一下」，体验很差。
| 场景 | 色温 | 亮度 | 对比度 |
|---|---|---|---|
| 日间强光 | 6500K | 80%-100% | 7:1 以上 |
| 阴天/黄昏 | 5000K | 50%-70% | 5:1 |
| 夜间 | 3000K | 20%-40% | 3:1 到 4:1 |
4.2 字体规范：可读性是底线
字体这块，我吃过不少亏。以前总觉得好看就行，结果上了车才发现——字太小看不清，字重太轻反光，字体太花哨识别慢。
4.2.1 字体选择
座舱里别用衬线体。宋体、Times New Roman 这些，在屏幕上一显示就糊。建议用无衬线体，比如：
- 中文： 思源黑体、Noto Sans CJK、PingFang SC
- 数字/英文： Roboto、DIN Pro、Helvetica Neue
我个人习惯用思源黑体做中文，DIN Pro 做数字。为什么？因为 DIN Pro 的数字等宽，时速显示的时候不会跳来跳去。
4.2.2 字号层级
座舱里信息层级多，字号必须拉开差距。我一般这样定：
| 用途 | 字号 | 字重 | 备注 |
|---|---|---|---|
| 主标题（导航、功能名称） | 24-28px | Medium | 一眼能看清 |
| 数据展示（时速、电量） | 20-24px | Bold | 数字要大，要粗 |
| 次级信息（温度、时间） | 16-18px | Regular | 够用就行 |
| 辅助文字（提示、标签） | 12-14px | Light | 别太小，至少12px |
注意： 座舱里最小字号不要低于 12px。我曾经试过 10px 的标签，结果在颠簸路段根本看不清。用户得眯着眼看，这很危险。
4.2.3 字重与可读性
字重不是越重越好。Light 字重在白天反光严重，Bold 字重在夜间又太刺眼。我建议：
- 日间： 用 Regular 到 Medium。Light 字重慎用。
- 夜间： 用 Regular 到 Bold。Light 字重可以用，但背景要深。
- 关键数据： 永远用 Bold。比如时速、续航里程、警告信息。
嗯，这里有个小技巧：同一行文字里，别混用超过两种字重。比如「时速 120 km/h」，120 用 Bold，其他用 Regular，这样视觉焦点自然落在数字上。
4.3 图标设计：简洁、统一、可识别
图标在座舱里承担的功能很重。用户开车时扫一眼，就得知道这是什么功能。所以图标设计的第一原则是——别让用户思考。
4.3.1 风格统一
一套图标里，线宽、圆角、填充方式必须统一。我见过最离谱的，一套图标里既有线性的又有面性的，用户看着就懵。
我的建议：
- 线宽： 统一用 2px 或 3px。别有的粗有的细。
- 圆角： 统一用 2px 圆角。直角太硬，大圆角又显得不专业。
- 尺寸： 基础网格 24x24px，大图标 32x32px，小图标 16x16px。
- 风格： 要么全线性，要么全面性。别混搭。
4.3.2 可识别性优先
别为了好看牺牲识别度。我曾经见过一个「空调」图标，设计得特别抽象，结果用户以为是「音乐」——这要是在开车时点错了，多危险。
常见图标设计要点：
- 导航： 用箭头或地图针，别用抽象符号。
- 音乐： 用音符或唱片，别用波形图。
- 电话： 用听筒，别用手机轮廓。
- 设置： 用齿轮，别用扳手。
我的习惯： 每个图标设计完后，我会找 5 个不相关的人看 1 秒钟，然后问他们这是什么功能。如果超过 2 个人猜错，就重新设计。
4.3.3 夜间模式下的图标处理
图标在夜间模式下不能简单变暗。因为图标面积小，变暗后可能看不清。我一般这样处理：
- 线性图标： 线条颜色从 #333 变成 #CCC，透明度保持 80%。
- 面性图标： 填充色从 #FFF 变成 #E0E0E0，背景色从 #F0F0F0 变成 #2A2A2A。
- 彩色图标： 饱和度降低 40%，亮度降低 20%。
4.4 实战：色彩与字体的配合
最后说个实际案例。我之前做的一个项目，日间模式用了蓝白配色，夜间模式用了深蓝灰。但有个问题——夜间模式下，蓝色强调色跟深蓝背景混在一起，看不清。
后来怎么解决的？我把夜间模式的强调色从蓝色改成了青色（#00D4AA）。青色在深色背景上特别跳，而且不刺眼。你看，有时候就是调一个色相的事。
总结一下我的经验：
- 色彩体系要两套，别偷懒只做一套。
- 字体大小至少 12px，字重别乱混。
- 图标风格统一，识别度优先。
- 每套方案都要在实车光线下测试。
好了，色彩、字体、图标这三板斧，你掌握好了，座舱的视觉基础就稳了。下一章咱们聊聊布局和交互手势，那才是真正让用户「用起来顺手」的关键。