F3.01.1visual weight设计研究

尺寸、明度、色彩、位置、留白共同决定权重

别名: 视觉重量 · salience stack · 多线索权重

概念解释

打开一个运营仪表盘:半屏是浅灰面积图,右上角钉着一枚 8 像素的红点。多数人先报出红点,而不是那块大图。屏幕上的视觉权重(visual weight)不是「谁占的像素多」,而是尺寸、明度(luminance)、色彩、位置、留白几条线索同时投票之后的排序。大可以很轻,小可以很重,取决于其他通道有没有一起发力。

机制

早期视觉把场景拆成若干特征图:空间尺度、明暗对比、色相差、离中心远近、以及被空白隔开的程度。注意选择的不是其中一张图的冠军,而是把这些图叠加后的局部峰值。面积图在尺寸上赢,但明度贴近底、色彩接近中性、贴着其他图表、周围也没有空隙,叠加之后峰值不高。红点尺寸可以忽略,却在明度、色相和孤立程度上同时出峰,总权重反而第一。所以「把标题加大」只改了其中一路输入;另外四路不变,排序可以完全不动。

怎么研究

可用的办法不是问「你觉得谁更重要」,而是拆通道:把同一屏分别做成灰度版、等尺寸版、去色相版、打乱位置版、取消孤立留白版,再测首次命名或首次注视落点。自变量是被关掉的那条线索,因变量是排序是否翻转。眼动仪能给出扫视路径(scanpath)上的第一落点,五秒测试只保留命名顺序,成本更低。关键是不要只改一个视觉参数就宣布「权重变了」——那测到的是单通道,不是合成权重。

边界

五路线索并不是等权。运动和闪烁一旦出现,会暂时压过静止的尺寸与留白,那是另一套捕获。色盲或低视力用户几乎读不到色相这一路,明度差必须自己扛住排序。印刷海报、车机远距离观看时,位置惯例和阅读方向的权重会上升,近距离桌面端则更吃明度与孤立。实验室里用简单色块测出的「尺寸最强」搬到信息密集的产品界面上经常翻车,因为界面几乎从不满额只开一路线索。

怎么落地

  • 给每个首屏列一张线索清单:打算靠尺寸、靠明暗、靠色、靠落在起始侧、还是靠周围空出来,写明主通道和备用通道。
  • 主操作至少占用两条通道,而不是只改字号。
  • 装饰性大图、大号品牌字如果不是任务第一名,主动关掉它们的明度差或孤立留白,避免它们在合成排序里偷走峰值。
  • 验证:做一张灰度截图、一张把所有元素拉到相近尺寸的截图。两张图上的「第一眼对象」仍应是任务第一名;任一张翻盘,说明排序只靠了被你删掉的那条通道。

延伸

  • 同组F3.01.2 单一维度的差异容易被其他维度抵消 · F3.01.3 权重是相对量,脱离上下文无意义
  • 相邻F3.02 尺寸对比 · F3.09 位置与层级的关系 · F2.04 留白
  • 站内检索visual weight · luminance · salience · centre of interest

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F3.01.1