4、大小与比例：如何通过元素尺寸建立主次关系（仪表盘案例）

4.1 尺寸是视觉层级的第一语言

做车载HMI设计，我有个很深的体会：尺寸就是权力。你想想看，人眼天生就会被大的东西吸引。在仪表盘上，谁占的面积大，谁就是主角。

我个人习惯把仪表盘上的信息分成三个等级：

• 一级信息：车速、转速、续航里程——这些是驾驶者扫一眼就必须获取的
• 二级信息：挡位、时间、温度——需要时再看，不需要时别抢眼
• 三级信息：小计里程、胎压数值、功能状态图标——偶尔才用，平时最好隐身

说白了，尺寸比例就是给这些信息排座次。老大坐中间，小弟靠边站。

4.2 仪表盘案例：一个经典的速度表布局

咱们来看一个最常见的仪表盘案例——双圆表布局。左边是转速表，右边是速度表，中间是信息显示屏。

我记得有一次做项目，设计师把速度表和转速表做成了完全一样的大小。结果用户测试时，很多人第一眼找不到车速在哪里。嗯，这就是典型的「尺寸平等」导致的视觉混乱。

正确的做法是什么？

/* 速度表 - 主元素 */
.speed-gauge {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1a2e, #16213e);
  /* 中心位置，视觉焦点 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 转速表 - 次元素 */
.rpm-gauge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #0f3460, #1a1a2e);
  /* 左侧偏移，视觉退让 */
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
}

/* 信息屏 - 辅助元素 */
.info-display {
  width: 200px;
  height: 80px;
  background: rgba(255, 255, 255, 0.05);
  /* 下方区域，不干扰主视觉 */
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
}

你看，速度表直径180px，转速表只有120px。面积上差了2.25倍。这个比例刚好让驾驶者第一眼锁定速度，第二眼才看到转速。

4.3 比例关系的三个实战技巧

光知道「大的重要」还不够，怎么把比例用对才是关键。我总结了三个技巧：

技巧一：黄金比例不是万能的

很多人一提到比例就想到黄金分割（1:1.618）。但在车载HMI里，我建议你别太迷信这个。为什么？因为驾驶场景下，信息获取速度比美学更重要。

我曾经在一个项目中试过用黄金比例来设计速度表和转速表，结果用户反馈「看着是挺舒服，但找车速要花1.5秒」。1.5秒在驾驶中是什么概念？车已经跑出去几十米了。

所以我现在的做法是：主次信息的面积比控制在 1:2 到 1:4 之间。这个区间内，视觉层级清晰，用户扫一眼就能抓住重点。

技巧二：用「视觉重量」代替「物理尺寸」

尺寸不只是宽度和高度。颜色、对比度、圆角、阴影，这些都会影响一个元素的「视觉重量」。

举个例子：一个120px的红色警告图标，可能比一个180px的灰色信息图标更抢眼。这就是视觉重量在起作用。

元素	物理尺寸	视觉重量	实际感知
速度数字	48px	高（白色+粗体）	最突出
转速指针	80px长	中（红色+细线）	次突出
续航里程	24px	低（灰色+细体）	辅助信息
挡位显示	32px	中（白色+半透明背景）	需要时可见

你看，速度数字虽然只有48px，但因为用了白色粗体，视觉重量反而最高。这就是用「巧劲」而不是「蛮力」。

技巧三：动态比例——信息会变，尺寸也要变

仪表盘不是静态的。车速从60变到120，转速从2000变到6000，信息的紧急程度也在变。

我建议的做法是：给关键信息一个「动态放大」的机制。

/* 车速超过120km/h时，速度数字自动放大 */
.speed-value {
  font-size: 48px;
  transition: font-size 0.3s ease;
}

.speed-value.warning {
  font-size: 64px;
  color: #ff4444;
  /* 红色警告，视觉重量瞬间提升 */
}

/* 转速进入红区时，指针区域高亮 */
.rpm-gauge.redzone {
  border: 3px solid #ff0000;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  /* 尺寸不变，但视觉重量暴增 */
}

这个机制我是在一次路测后加上的。当时测试员反馈说：「高速上超车时，我低头看仪表盘，速度数字太小了，差点超速。」从那以后，动态比例就成了我的标配。

4.4 避坑指南：尺寸设计的三个常见错误

做车载HMI这些年，我踩过不少坑。分享三个最常见的：

4.5 小结：尺寸即态度

好了，这一章的内容差不多就这些。总结一下：

• 尺寸决定主次：关键信息面积是次要信息的2-4倍
• 视觉重量比物理尺寸更重要：颜色、对比度、字体都能影响感知
• 动态比例应对场景变化：紧急信息自动放大，非紧急信息自动缩小
• 避坑：别一样大、别只放不缩、别忽略触摸区域

我个人觉得，尺寸设计其实就是在告诉用户：「看这里，这个很重要。」你给每个元素分配多大的空间，就代表你给这个信息分配了多少注意力。说白了，尺寸就是态度。

下一章我们会聊聊「色彩与对比度：如何用颜色强化视觉层级」。到时候见。