F6.08.1filled vs outline visual weight设计研究

填充与线性图标在同一排列中视觉重量不均会造成层级错觉

别名: 面性偏重 · 线面混排重量 · false hierarchy

概念解释

同一条工具栏里,实心色块比空心线框占更多的墨。墨多的那枚会先被看见,于是被当成「更重要 / 推荐 / 主操作」,哪怕产品把它们设成平级。这是重量造成的层级错觉,不是有人把选中语法教错了:即使全部都处于未选中,填色面积已经在替产品做优先级排序。

机制

视觉重量跟着墨面积走。线框几乎只有描边,填色把内部也算进面积,两者在同一尺寸下的墨量可以差出数倍。扫视按重量跳,不按产品文档里的「这一排是平级」。跳到重的那枚之后,人会给它补一个理由:大概是主按钮吧。错觉因此是双向的——重的被抬上去,旁边的线框被读成附属。和「实心 = 当前页」那套状态语法可以同时发生,但即使把选中色拿掉、即使用户知道自己不在那一页,重量差仍然在排序。要拆开这两种失败:一是被读成状态,二是被读成等级。这里是后者。

怎么研究

做一排平级动作,只改线面,不改颜色、不改边长、不设当前页,问「哪一枚是主操作」或「先注意到哪一枚」。因变量是首次注意和主操作指认,不是喜欢与否。也可以测墨面积(填色像素数)与被指认为主操作的相关。若在去掉填色、全部改成线框之后指认变均匀,重量就是那根针。

边界

  • 产品真的要用重量做主次(主按钮实心、次按钮线框),那就不是错觉,是在用重量说话——但同一排里只能有一枚吃这个待遇。
  • 深色模式下面性更黑、线性更淡,差距会放大;浅色底上可能没那么明显。
  • 几何边长对齐、零件密度造成的「发黑」,是另外两笔重量账。
  • 状态语法(空心未选、实心当前)出问题时,先把语法收干净,再看平级里是否还剩重量差。

怎么落地

  • 平级入口统一线或统一面。主次若要用重量,只让一枚主操作吃填色,其余全部线框,并承认这就是层级,不是造型变化。
  • 检查深色底:填色在深色上往往更抢,必要时减填色对比,而不是只在浅色稿上看齐。
  • 验证办法:把当前页标记去掉,问没做过这页的人「哪个最重要」。稳定指向实心那枚,重量已经在伪造层级。

延伸

  • 同组F6.08.2 图标的视觉大小需按视错觉校正而非几何尺寸对齐 · F6.08.3 高信息密度图标在小尺寸下会显得比简单图标更重 · F6.08.4 图标组内粗细、留白需统一才能形成均匀的视觉节奏
  • 相邻F6.03 图标的风格一致 · F3.01 视觉权重的构成
  • 站内检索visual weight · filled vs outline · false hierarchy

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F6.08.1