E1.01.3button hierarchy by visual weight设计研究

层级由视觉权重表达而非位置

别名: 按钮视觉权重 · 主次靠样式 · visual prominence

概念解释

按钮的主次靠视觉权重(visual weight)读出来:填充、对比、饱和、字重,而不是靠它在左还是在右、在顶还是在底。位置回答的是「手往哪伸、眼从哪扫到」,权重回答的是「哪一个被鼓励」。把主按钮只是放到右下角、却做成和取消一样的描边,推荐关系并没有被表达;反过来,主按钮即使因为平台惯例排在左侧,只要它是唯一的实心高对比控件,层级仍然成立。

机制

扫描时位置提供入口,权重提供停靠点。人会先被高对比色块吸住,再在邻近位置寻找配套动作。这与阅读方向上的「先左后右」不是同一条通路:左起书写习惯让左侧先被扫到,但不自动把左侧控件升成主操作。若产品把「重要」编码成位置(总在右边就是主按钮),一旦平台把确认放左边、或移动端把按钮改成上下堆叠,这套编码就反转,用户会按错。权重编码可迁移:填充相对描边、高对比相对低对比,在左右对调、竖排、RTL 布局里仍然指向同一角色。位置该用来降低触达成本、对齐平台惯例,而不是偷偷承担「这才是推荐」的语义。

怎么研究

做布局对换实验:同一对确认/取消,一组用填充区分主次、位置按平台惯例;另一组两个按钮视觉相同,只靠左/右或上/下来标记主次。再加一组 RTL 或竖排条件。

自变量:权重差异是否存在、位置惯例是否与用户日常系统一致、书写方向。 因变量:错误选择率、选择时间、是否报告「我按了右边那个所以应该是对的」。

若只在熟悉 Windows 或只在熟悉 macOS 的样本上测位置编码,效应会被平台习惯放大。跨平台抽样,或在实验前测用户的系统确认习惯,才能把位置效应和权重效应拆开。

边界

触达成本仍受位置支配:手机底部比顶部容易按,这与「谁是主按钮」无关,不能用权重去替大拇指够不到的键开脱。极端对比下,位置可能短暂压过弱权重——一个巨大的左侧描边按钮会比右下角一枚小实心按钮先被点到,因为尺寸本身也是权重。此时失败的不是「不该看位置」,而是权重差做得不够。游戏手柄和电视焦点导航以焦点框而非填充来表达当前项,层级通道换成了焦点,不走按钮色块。

怎么落地

  • 用填充、对比和字重标记主按钮;位置只用来符合平台确认/取消惯例和拇指热区,不单独承担主次。
  • 做 RTL、窄屏竖排、桌面横排三种变体,确认主按钮在三种位置关系下仍是视觉最重的那一个。
  • 不要写「右边那个就是确定」这类依赖位置的说明文案来补救样式不足。
  • 验证:把按钮对左右对调、上下对调各做一版,遮住位置记忆后问「哪个会真正提交」。答案应始终指向高权重那枚,而不是「靠右的那枚」。

延伸

  • 同组E1.01.1 一屏内主按钮唯一 · E1.01.2 次级与文字按钮承担并列与退出动作 · E1.01.4 多个同权重按钮等于没有推荐路径
  • 相邻F3.09 位置与层级的关系 · E1.10 按钮排列顺序 · E1.18 按钮排列顺序与平台惯例
  • 站内检索visual weight · button hierarchy · visual prominence

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.01.3