4. 排版与字体：车载字体选择、字号层级、信息可读性设计
好，咱们进入第四讲。排版和字体，说实话，这是很多刚入行的设计师容易忽略的环节。大家往往把精力都放在图标好不好看、动效炫不炫上，结果一上车，字看不清，信息层级乱成一锅粥。我当年刚做HMI时也犯过这毛病，后来被测试工程师追着改了好几版，才彻底明白——在车上，看得清比什么都重要。
4.1 车载字体的特殊要求
车载字体和手机字体，完全是两码事。你想想看，手机你拿在手里，距离眼睛也就30厘米。车机呢？至少60到80厘米，甚至更远。而且车内光线变化剧烈，从地库的暗光到正午的强光，字体必须扛得住。
核心原则：清晰度优先，风格其次。
我个人习惯，选车载字体时主要看三点：
- 字怀要宽：比如“口”字，中间的空隙要大。窄字怀在强光下容易糊成一团。
- 笔画粗细均匀：不要有极细的横或者极粗的竖。我在项目中遇到过一款字体，笔画对比度太高，阳光下“一”和“—”根本分不清。
- 数字和字母区分度高：比如“0”和“O”，“1”和“l”，在车速60km/h时扫一眼，必须一眼能认出来。
推荐字体方向：
- 思源黑体（Noto Sans CJK）——开源、字重丰富、字怀适中
- 阿里巴巴普惠体——中文显示友好，数字清晰
- 一些定制字体，比如蔚来、小鹏都有自己的定制字体，但成本高
避坑指南：我曾经试过用苹方字体做车机原型，结果在低分辨率屏幕上，小字号下的“捺”和“点”直接消失了。所以，一定要在目标屏幕（或者模拟器）上实际测试，别只看设计稿。
4.2 字号层级：从远到近的视觉节奏
车载HMI的字号层级，说白了就是告诉用户：什么信息最重要，什么信息扫一眼就行。
我一般把字号分成四个层级：
| 层级 | 用途 | 推荐字号（px） | 视距参考 |
|---|---|---|---|
| 一级（主标题） | 车速、导航提示、警告信息 | 48-64px | 一眼看清，0.5秒内 |
| 二级（重要信息） | 续航里程、当前时间、媒体歌名 | 32-40px | 1秒内可读 |
| 三级（辅助信息） | 温度、空调模式、小计里程 | 24-28px | 需要时再看 |
| 四级（次要/装饰） | 单位符号、版权信息、状态标签 | 18-20px | 几乎不主动看 |
嗯，这里要注意，这个字号是基于12.3英寸、1920x720分辨率屏幕的。如果你用的是更大的屏幕（比如15.6英寸），字号要适当放大。我习惯的做法是：先定好一级字号，然后按0.75、0.6、0.45的比例往下缩。
小技巧：在Figma或Sketch里，把字号层级做成组件样式。这样你调整一个，所有关联的文本都会自动更新。我每次做新项目，第一件事就是搭好这个字号系统。
4.3 信息可读性设计：别让用户猜
可读性，说白了就是用户能不能在最短时间内，获取到最准确的信息。开车时，视线离开路面超过2秒，事故风险就翻倍。所以，我们的设计必须做到“零思考”。
几个关键原则：
- 对比度要够：文字和背景的对比度至少4.5:1（WCAG AA标准）。我建议做到7:1以上。白色背景上不要用浅灰色文字，阳光下根本看不见。
- 行高要宽松：车载文本的行高建议是字号的1.4到1.6倍。太挤了，多行文本读起来很累；太松了，信息密度不够。
- 不要用斜体：斜体在屏幕上会降低识别速度。尤其是中文斜体，很多字体根本没有真正的斜体，只是强行倾斜，效果很差。
- 避免全大写：英文全大写在车载上要慎用。全大写单词的轮廓是矩形的，人眼识别靠的是单词轮廓，全大写反而降低了阅读速度。
实战案例：我之前做一款新能源车的仪表盘，续航里程显示用了浅蓝色文字配深色背景。白天看着还行，一到晚上，蓝色文字在暗光下变得很刺眼，而且对比度不够。后来改成了白色文字配半透明黑色背景，问题就解决了。所以，一定要考虑白天和夜晚两种模式下的可读性。
4.4 排版布局：网格与呼吸感
车载屏幕的排版，我建议用8px网格系统。为什么是8px？因为大多数屏幕的分辨率是8的倍数，而且8px足够小，能做出精细的间距调整，又不会像4px那样碎。
间距规范：
- 内容块之间的间距：24px或32px
- 同一内容块内元素间距：8px或16px
- 屏幕边缘留白：16px或24px
你想想看，如果所有元素都挤在一起，用户开车时余光一扫，根本分不清哪里是重点。适当的留白，其实就是给信息“呼吸”的空间。
注意：不要为了追求“科技感”而把文字排得太散。我见过一个设计，每个字之间间距拉得很大，说是“呼吸感”。结果用户反馈说“像在拼字游戏”。呼吸感是整体布局的事，不是单个字间距的事。
4.5 实战：一个简单的仪表盘文本系统
好，咱们来点实际的。假设你要设计一个仪表盘，包含车速、续航、挡位、时间四个信息。我会这样排：
/* 基础字号层级 */
:root {
--font-size-hero: 56px; /* 车速 */
--font-size-primary: 36px; /* 续航、挡位 */
--font-size-secondary: 24px; /* 时间、单位 */
--font-size-tertiary: 18px; /* 标签、辅助文字 */
}
/* 字体设置 */
body {
font-family: 'Noto Sans SC', 'Noto Sans', sans-serif;
font-weight: 400;
line-height: 1.5;
}
/* 车速：最大、最粗、居中 */
.speed-value {
font-size: var(--font-size-hero);
font-weight: 700;
text-align: center;
}
/* 续航：次大，左对齐 */
.range-value {
font-size: var(--font-size-primary);
font-weight: 500;
}
/* 单位：小字号，跟随数值 */
.unit {
font-size: var(--font-size-tertiary);
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
}
这个代码只是一个示例，实际项目中你还要考虑字体加载、回退字体、不同语言下的显示效果。我建议把字体文件压缩到woff2格式，体积能小一半。
最后一个小建议：做完排版后，找个同事，让他站在1.5米外，模拟驾驶位视角，看能不能在2秒内说出所有关键信息。如果不行，那就得调整。这个测试方法，我用了好多年，比任何理论都管用。
好，这一讲就到这里。排版和字体，看似基础，但决定了整个HMI的可用性下限。下一讲我们会聊色彩与视觉风格，到时候见。