3、视觉层级核心要素：大小、颜色、对比度、位置、留白
好，咱们直接切入正题。视觉层级这东西，说白了就是「引导视线」。你希望用户先看哪里，再看哪里，最后看哪里。这五个要素，就是我这些年做HMI设计时，反复打磨的「五把刀」。
3.1 大小：最粗暴的优先级声明
人眼天生会被大的东西吸引。这是本能，改不了的。所以，大小是建立视觉层级最直接的手段。
我在项目中遇到过一个问题：仪表盘上的续航里程数字，客户要求「显眼」。结果设计师把字号放得巨大，跟车速数字差不多大。我一看就摇头——你想想看，开车时最需要一眼扫到的是什么？是车速。续航里程是次要信息。把两者做成一样大，视觉上就「打架」了。
我的习惯是：关键信息比次要信息大2-3倍。比如车速用48px，续航用20px，温度用16px。这样一眼扫过去，视觉重心自然落在车速上。
核心原则：大小差异要足够明显。差个4px、6px，人眼根本分辨不出层级。至少差1.5倍以上，才能形成清晰的视觉跳跃。
3.2 颜色：情绪与层级的双重载体
颜色这东西，比大小更微妙。它不仅能区分层级，还能传递情绪。
我一般把颜色分为三类：
- 主色（高优先级）：用于警告、关键状态。比如红色用于碰撞预警，黄色用于车道偏离。
- 辅色（中优先级）：用于次要信息。比如蓝色用于续航、绿色用于节能模式。
- 中性色（低优先级）：用于背景、装饰、刻度线。灰色、深灰色是主力。
举个例子，一个典型的仪表盘配色方案：
| 信息类型 | 颜色 | 色值（示例） | 优先级 |
|---|---|---|---|
| 碰撞预警 | 红色 | #FF3B30 | 最高 |
| 车道偏离 | 黄色 | #FFCC00 | 高 |
| 车速/转速 | 白色 | #FFFFFF | 中 |
| 续航/温度 | 浅灰 | #8E8E93 | 低 |
| 背景/刻度 | 深灰 | #1C1C1E | 最低 |
避坑指南：我曾经在一个项目中，把「自适应巡航开启」和「碰撞预警」都用了蓝色。结果测试时，驾驶员把预警误认为是巡航状态，差点出事。从那以后，我定了个死规矩：警告色（红/黄）绝对不能用于正常状态。
3.3 对比度：看不见的设计等于没设计
对比度不够，再好的设计也是白搭。尤其是在车载场景下——阳光直射、戴偏光镜、屏幕反光，这些都会让对比度「打折」。
我个人习惯遵循WCAG 2.0的AA标准：正常文本对比度至少4.5:1，大文本至少3:1。但在车载HMI里，我建议更激进一点——关键信息对比度做到7:1以上。
怎么算对比度？有个简单公式：
对比度 = (L1 + 0.05) / (L2 + 0.05)
其中 L = 0.2126 * R + 0.7152 * G + 0.0722 * B
（R、G、B 需要先做 gamma 校正）
嗯，公式看着有点复杂。但实际工作中，我直接用工具测。比如Figma里的对比度检查插件，或者在线工具。记住一个经验值：白底黑字对比度约21:1，灰底白字可能只有3:1。所以别用浅灰背景配白字，那是给自己挖坑。
小技巧：如果你不确定对比度够不够，把屏幕亮度调到50%，戴上偏光太阳镜看一眼。如果还能清晰辨认，那就没问题。这是我在路测时学到的土办法，但很管用。
3.4 位置：视线流动的「交通规则」
位置决定了用户视线移动的路径。在车载HMI里，位置设计要遵循两个原则：
- F型或Z型扫描：人眼阅读习惯是从左到右、从上到下。所以最重要的信息放在左上角或正中央。
- 驾驶安全优先：驾驶相关信息（车速、导航提示）放在视线中心或偏上位置。娱乐信息（音乐、空调）放在下方或副驾侧。
我举个例子。一个典型的HUD（抬头显示）布局：
- 正中央上方：车速、限速标识（最优先）
- 正中央下方：导航箭头、距离提示（次优先）
- 左侧：ADAS信息（车道保持、前车距离）
- 右侧：多媒体信息（歌曲名、来电）
为什么会这样？因为驾驶员视线从道路前方（中央）开始，然后向左扫视后视镜，再回到中央。所以左侧放ADAS信息，符合视线自然流动。
3.5 留白：不是空白，是呼吸感
留白是很多新手容易忽略的要素。他们总觉得「屏幕空间有限，能塞多少塞多少」。结果呢？信息挤在一起，视觉层级全乱套了。
我个人的经验是：留白本身就是一种层级暗示。信息周围的留白越多，它看起来就越重要、越独立。
举个例子：
// 错误示范：没有留白
[车速120km/h][续航350km][温度26°C][音乐-晴天]
// 正确示范：有留白
[车速120km/h] [续航350km] [温度26°C]
[音乐-晴天]
你看，同样的信息，加了留白之后，车速和续航的「组关系」就清晰了。音乐信息被单独放在下面，层级自然降低。
我的黄金比例：关键信息周围留白至少16px，次要信息至少8px，装饰元素可以4px甚至更少。记住，留白不是浪费，是投资。
3.6 五要素的协同作战
这五个要素不是孤立的。它们需要配合使用，才能形成清晰的视觉层级。
我总结了一个「优先级矩阵」：
| 优先级 | 大小 | 颜色 | 对比度 | 位置 | 留白 |
|---|---|---|---|---|---|
| 最高 | 大（48px+） | 红/黄 | 高（7:1+） | 中央/左上 | 多（24px+） |
| 中 | 中（24-36px） | 白/蓝 | 中（4.5:1） | 偏下/右侧 | 中（12-16px） |
| 低 | 小（12-18px） | 灰 | 低（3:1） | 边缘/角落 | 少（4-8px） |
你看，最高优先级的信息，五个要素都要「拉满」：大、红、高对比、中央、多留白。低优先级的信息，五个要素都「收敛」：小、灰、低对比、边缘、少留白。
实战建议：下次设计时，先别急着画界面。拿张纸，列出所有信息，按优先级排序。然后问自己：这个信息，我打算用哪几个要素来强调？如果五个要素都用上了，那它是不是真的那么重要？
嗯，这五个要素，说起来简单，但真正用好需要大量实践。我做了这么多年，每次评审还是会发现可以优化的地方。别怕犯错，关键是每次迭代都让视觉层级更清晰一点。