F6.08.1filled vs outline visual weight设计研究
填充与线性图标在同一排列中视觉重量不均会造成层级错觉
别名: 面性偏重 · 线面混排重量 · false hierarchy
概念解释
同一条工具栏里,实心色块比空心线框占更多的墨。墨多的那枚会先被看见,于是被当成「更重要 / 推荐 / 主操作」,哪怕产品把它们设成平级。这是重量造成的层级错觉,不是有人把选中语法教错了:即使全部都处于未选中,填色面积已经在替产品做优先级排序。
机制
视觉重量跟着墨面积走。线框几乎只有描边,填色把内部也算进面积,两者在同一尺寸下的墨量可以差出数倍。扫视按重量跳,不按产品文档里的「这一排是平级」。跳到重的那枚之后,人会给它补一个理由:大概是主按钮吧。错觉因此是双向的——重的被抬上去,旁边的线框被读成附属。和「实心 = 当前页」那套状态语法可以同时发生,但即使把选中色拿掉、即使用户知道自己不在那一页,重量差仍然在排序。要拆开这两种失败:一是被读成状态,二是被读成等级。这里是后者。
怎么研究
做一排平级动作,只改线面,不改颜色、不改边长、不设当前页,问「哪一枚是主操作」或「先注意到哪一枚」。因变量是首次注意和主操作指认,不是喜欢与否。也可以测墨面积(填色像素数)与被指认为主操作的相关。若在去掉填色、全部改成线框之后指认变均匀,重量就是那根针。
边界
- 产品真的要用重量做主次(主按钮实心、次按钮线框),那就不是错觉,是在用重量说话——但同一排里只能有一枚吃这个待遇。
- 深色模式下面性更黑、线性更淡,差距会放大;浅色底上可能没那么明显。
- 几何边长对齐、零件密度造成的「发黑」,是另外两笔重量账。
- 状态语法(空心未选、实心当前)出问题时,先把语法收干净,再看平级里是否还剩重量差。
怎么落地
- 平级入口统一线或统一面。主次若要用重量,只让一枚主操作吃填色,其余全部线框,并承认这就是层级,不是造型变化。
- 检查深色底:填色在深色上往往更抢,必要时减填色对比,而不是只在浅色稿上看齐。
- 验证办法:把当前页标记去掉,问没做过这页的人「哪个最重要」。稳定指向实心那枚,重量已经在伪造层级。