4、视觉层级构建：字体大小与权重、色彩对比度、间距与留白的节奏感

好，咱们接着聊。上一章讲了信息怎么归类，这一章咱们要解决一个更实际的问题——怎么让用户一眼就看到他想看的东西。

说白了，视觉层级就是给信息排个「主次顺序」。你想想看，开车的时候，用户扫一眼屏幕的时间可能不到一秒。这一秒里，他得知道：我现在在哪？下一个路口怎么走？还有多远？

如果所有信息都「平铺直叙」，那跟看报纸没什么区别。但在车上，这很危险。

4.1 字体大小与权重：别让用户眯眼睛

我个人习惯，先把字体大小分成三个等级：主信息、次信息、辅助信息。

• 主信息：比如当前车速、下一个转弯距离、导航箭头。这些是「必看」的，字体要大，权重要高。我一般用 24px-32px，甚至更大。
• 次信息：比如道路名称、预计到达时间。这些是「想看就看」的，16px-20px 就够了。
• 辅助信息：比如设置按钮、音乐播放状态。这些是「偶尔才看」的，12px-14px，别喧宾夺主。

我在项目中遇到过一个问题：设计师把「当前车速」和「剩余里程」用了几乎一样大的字体。结果用户反馈说，开车时总把剩余里程当成车速看。嗯，这就是权重没分清楚。

另外，字体权重也很关键。我建议主信息用 Bold（700），次信息用 Medium（500），辅助信息用 Regular（400）。别全用 Bold，那样看起来像在吵架。

4.2 色彩对比度：不是越鲜艳越好

色彩这块，很多新手容易犯一个错——觉得颜色越多越好看。其实在车机上，对比度比色彩丰富度重要得多。

为什么？因为开车时环境光变化很大。大太阳底下，屏幕反光严重；晚上进隧道，屏幕又显得刺眼。如果对比度不够，信息根本看不清。

我一般遵循这个原则：

• 背景色：深色模式为主（#1A1A2E 或 #0F0F1F），浅色模式为辅。深色背景能减少眩光。
• 主信息：用高亮色，比如 #00D4AA（青绿色）或 #FF6B6B（警示红）。对比度至少 7:1。
• 次信息：用灰色系，比如 #B0B0B0 或 #8A8A8A。对比度 4.5:1 左右。
• 辅助信息：用更浅的灰色，比如 #5A5A5A。对比度 3:1 就够了。

我曾经踩过一个坑：用了蓝色和紫色做区分。结果在黄昏时分，用户根本分不清哪个是导航路线，哪个是普通道路。后来我改用「青绿 + 深灰」的组合，问题就解决了。

4.3 间距与留白的节奏感：呼吸感很重要

间距和留白，说白了就是给信息「喘口气」的空间。你想想看，如果所有信息都挤在一起，用户会感到焦虑。这在驾驶场景下尤其危险。

我习惯用「8px 网格系统」来规划间距。什么意思呢？就是所有间距都是 8 的倍数：8px、16px、24px、32px、48px……

具体来说：

• 同一组内的信息：间距 8px-12px。比如「当前车速」和「单位（km/h）」之间，靠得近一点，让用户知道它们是一体的。
• 不同组之间的信息：间距 24px-32px。比如「导航信息区」和「音乐控制区」之间，留出明显的空白，让用户知道这是两个不同的功能块。
• 屏幕边缘：留白至少 16px。别把信息贴到屏幕边上，那样看起来像「没穿衣服」。

节奏感怎么体现？举个例子：

导航信息区（间距 32px）
├── 下一个转弯距离（字号 28px，Bold）
├── 转弯方向图标（间距 8px）
├── 道路名称（字号 18px，Medium，间距 16px）
└── 剩余时间 & 距离（字号 14px，Regular，间距 8px）

间距 48px（明显分隔）

音乐控制区（间距 24px）
├── 歌曲名称（字号 16px，Medium）
├── 进度条（间距 12px）
└── 控制按钮（间距 16px）

你看，这样一排列，视觉上就有「先看导航，再看音乐」的节奏感。用户不需要思考，眼睛会自动跟着走。

4.4 实战避坑指南

最后，分享几个我踩过的坑：

• 别用纯白色做背景：纯白色（#FFFFFF）在夜间开车时太刺眼。我一般用 #F5F5F5 或 #E8E8E8。
• 别让字体小于 12px：除非是极不重要的信息。开车时没人会眯着眼睛看小字。
• 别把「间距」和「留白」混为一谈：间距是元素之间的距离，留白是整体区域的空白。两者都要有，但作用不同。
• 别忽视「动态对比度」：比如导航箭头在转弯时会变大变亮，这就是利用动态变化来强化视觉层级。

我曾经做过一个项目，把所有信息都塞进一个卡片里，间距只有 4px。结果用户测试时，所有人都说「看着头晕」。后来我把卡片拆成三个独立区域，间距拉到 24px，问题就解决了。嗯，有时候「少即是多」。

好了，这一章就到这里。下一章咱们聊聊「动效与反馈」——怎么让用户知道他的操作被响应了。