4、座舱行高与间距：行高计算公式（1.2-1.5倍）、段落间距与信息分组、触摸目标间距（Fitts定律）

好，咱们接着聊排版。前面讲了字体和字号，但光有这些还不够。你想想看，如果字挤在一起，再好的字体也白搭。

行高和间距，说白了就是给文字「呼吸的空间」。我在做座舱HMI时，见过太多因为间距没调好，导致驾驶员误读信息的案例。嗯，今天咱们就把这块彻底讲透。

4.1 行高计算公式：1.2-1.5倍

行高，指的是两行文字基线之间的距离。它直接影响阅读的流畅度。

核心公式：

行高 = 字号 × 行高倍数（1.2 ~ 1.5）

举个例子：

• 字号 16px，行高倍数 1.4 → 行高 = 16 × 1.4 = 22.4px
• 字号 24px，行高倍数 1.3 → 行高 = 24 × 1.3 = 31.2px

为什么是1.2到1.5？我个人的经验是：

• 1.2倍：适合标题、短文本。字间距紧凑，视觉上更「有力」。
• 1.4倍：正文最佳选择。我做过A/B测试，1.4倍行高下，驾驶员的扫读速度最快。
• 1.5倍：适合长文本、辅助说明。间距宽松，减少视觉疲劳。

我在项目中遇到过一个问题：某款车型的仪表盘，用了1.1倍行高。结果夜间模式下，白色文字在深色背景上显得特别「挤」。后来我建议调到1.35倍，问题立刻解决。

4.2 段落间距与信息分组

行高管的是「行与行」，段落间距管的是「块与块」。两者配合，才能形成清晰的信息层级。

段落间距的黄金法则：

• 段落间距 = 行高 × 1.5 ~ 2倍
• 或者：段落间距 = 字号 × 2 ~ 3倍

举个例子：

/* 不推荐的写法 */
p {
  margin-bottom: 0;  /* 段落之间没有间距 */
}

/* 推荐的写法 */
p {
  margin-bottom: 1.5em;  /* 段落间距为1.5倍字号 */
}

信息分组怎么做？

说白了，就是利用间距来「暗示」哪些内容是一组的。我习惯用「亲密性原则」：

• 同一组内的元素，间距小（比如8-12px）
• 不同组之间的元素，间距大（比如24-40px）

举个例子，导航卡片上的信息：

【导航卡片布局】
┌─────────────────────┐
│  目的地名称          │  ← 字号18px，行高1.3
│  距离: 5.2km         │  ← 与上方间距8px（同组）
│  预计到达: 10:30     │  ← 与上方间距8px（同组）
│                      │
│  [开始导航]  [取消]  │  ← 与上方间距24px（不同组）
└─────────────────────┘

我曾经犯过一个错：把「目的地名称」和「距离」之间的间距设成了20px。结果测试时，驾驶员以为这是两组信息，扫读时跳过了「距离」这一行。嗯，后来改成8px，问题就没了。

4.3 触摸目标间距与Fitts定律

这部分是座舱HMI独有的。驾驶员在开车时，手指的精准度会下降。你想想看，颠簸路段上，手指点偏1-2mm太正常了。

Fitts定律的核心：

移动时间 = a + b × log₂(距离/宽度 + 1)

翻译成人话：目标越大、距离越近，点击越快。反之，目标越小、距离越远，点击越慢、越容易出错。

座舱内的触摸目标间距建议：

场景	最小目标尺寸	最小间距	说明
主功能按钮（如导航、音乐）	48×48px	12px	高频操作，必须大
次要按钮（如设置、详情）	40×40px	10px	偶尔使用
列表项（如联系人、歌曲）	36×36px	8px	可滑动选择
滑块/旋钮	44×44px	16px	需要精细调节

实际应用中的Fitts定律：

• 边缘按钮要更大：屏幕边缘的按钮，手指容易「滑出去」。我习惯把边缘按钮的尺寸增加20%。
• 高频操作放中间：根据Fitts定律，屏幕中央是「最佳点击区域」。把最常用的功能放在这里。
• 间距与触觉反馈配合：间距足够大时，可以加入轻微的触觉反馈（振动），让驾驶员「感觉」到点击成功。

举个例子，空调控制面板：

【空调控制面板布局】
┌─────────────────────────────────┐
│  [温度-]  [温度+]  [风速-]  [风速+] │  ← 每个按钮48×48px，间距12px
│         [自动]  [关闭]           │  ← 间距16px，防止误触
└─────────────────────────────────┘

我个人习惯，在开发阶段用「热力图」工具来验证触摸区域。如果某个按钮的点击热区明显偏离中心，说明间距或尺寸需要调整。

小结

今天的内容，说白了就是三句话：

• 行高：1.2-1.5倍字号，正文用1.4倍最稳。
• 段落间距：1.5-2倍行高，用间距来「分组」信息。
• 触摸间距：至少8-12px，高频操作要更大。Fitts定律不是理论，是保命符。

嗯，下次咱们聊「座舱中的色彩对比度与可读性」。到时候我会分享一个我踩过的坑——关于蓝色和灰色在夜间模式下的「隐形」问题。敬请期待。