3、座舱字号与层级:字号系统与信息层级构建
好,咱们今天聊点实在的。座舱里的字,到底该设多大?
这个问题,我入行头三年都没完全搞明白。直到有一次,一个测试工程师半夜给我打电话,说「你那个24px的字,我在高速上根本看不清」。嗯,从那以后,我才真正开始认真研究字号这件事。
3.1 字号系统:12/14/16/20/24/32/48px
先给出一套我常用的字号系统。这套体系,说白了就是一套「刻度尺」。你照着用,基本不会出大问题。
| 字号 (px) | 典型用途 | 备注 |
|---|---|---|
| 12 | 辅助信息、角标、状态图标文字 | 仅限静态或短时注视场景 |
| 14 | 次要标签、列表副文本、仪表盘小字 | 驾驶中不建议作为主要阅读内容 |
| 16 | 正文、按钮文字、列表标题 | 这是座舱里的「基础字号」 |
| 20 | 次级标题、卡片标题、弹窗标题 | 视觉层级开始拉开 |
| 24 | 主标题、导航栏标题、大按钮 | 驾驶中快速扫读的起点 |
| 32 | 一级标题、欢迎语、关键数据 | 比如时速、续航里程 |
| 48 | 主视觉文字、警示信息、大屏标题 | 一眼就能看到 |
我个人习惯,把16px作为「锚点」。为什么?因为16px在大多数座舱屏幕的物理尺寸下,刚好对应人眼在70cm视距下的舒适阅读尺寸。你想想看,驾驶员看中控屏,大概就是手臂伸直的距离。
核心原则:字号不是随便选的。每一档之间,视觉重量要拉开至少20%的差距。12→14→16→20→24→32→48,每一跳都足够明显。
3.2 信息层级构建
有了字号,怎么搭层级?
我见过很多设计师,把字号用成了「调色盘」——这里大一点,那里小一点,最后整个界面像打翻了字号的抽屉。为什么会这样?因为没有层级思维。
信息层级,说白了就是「谁先被看到,谁后被看到」。在驾驶场景里,这个顺序直接决定了安全。
我一般把信息分成三层:
- 第一层(32-48px): 驾驶核心信息。时速、续航、导航指令、警告。这些必须在200ms内被捕获。
- 第二层(20-24px): 操作与反馈。按钮文字、当前状态、设置项。用户需要时能快速找到。
- 第三层(12-16px): 辅助与详情。时间、温度、版本号、说明文字。不需要主动关注。
我在项目中遇到过一个问题:客户要求把所有信息都放大,说「老年人看不清」。结果呢?所有字都一样大,驾驶员反而找不到重点。嗯,这就是典型的「没有层级」。
我的小技巧: 设计时,先把所有文字都设为16px。然后问自己:「哪个信息最重要?」把它放大到24px或32px。再问:「哪个最不重要?」把它缩小到12px或14px。一次只调整一个层级。
3.3 最小可读字号(驾驶场景)
这是今天最关键的硬知识。
最小可读字号,不是「能看清」,而是「在驾驶中,扫一眼就能准确理解」。这两个概念差远了。
我直接给结论:
- 静态场景(停车、充电): 最小可读字号为12px。但建议不低于14px。
- 低速驾驶(< 30km/h): 最小可读字号为14px。注意,这是底线。
- 高速驾驶(> 60km/h): 最小可读字号为16px。低于这个,就是在挑战驾驶员的反应极限。
警告: 我曾经见过一个项目,把导航的次要路名设成了11px。测试时,驾驶员在高速上为了看清那个路名,视线离开前方超过2秒。2秒,60km/h就是33米。这个距离,够发生很多事了。
为什么会这样?因为驾驶中,人的视觉注意力是「隧道化」的。你越努力去看清一个小字,你的周边视野就越窄。说白了,小字不仅看不清,还会让驾驶员「盯死」在那个点上。
所以,我的避坑指南是:
- 所有驾驶中需要阅读的文字,不要低于16px。
- 所有需要「理解」的文字(比如警告、提示),不要低于20px。
- 所有需要「立即反应」的文字(比如时速、限速),不要低于32px。
嗯,这里要注意:我说的「文字」,是指中文字体。英文字母因为结构简单,可以适当小1-2px。但中文不行,笔画太密了。
最后,分享一个我自己的测试方法:设计完成后,把界面截图发到手机上,然后开车时(副驾有人)让朋友帮你读一下。如果你需要「眯眼」才能看清,那这个字号就小了。相信我,这个测试比任何规范都管用。
公众号:蓝海资料掘金营,微信deep3321