F6.08.3icon visual density设计研究

高信息密度图标在小尺寸下会显得比简单图标更重

别名: 密度重量 · 复杂图标发黑 · density weight

概念解释

设置里的多层滑杆、带齿的日历、一叠文档,在 16 或 24 像素里会变成一团更黑的区域;旁边的加号、箭头、对勾却显得轻。边长一样、线宽一样,零件堆在一起就会抬高局部墨密度,扫视会先落到那团黑上。这不是糊到认不出——它往往仍可辨——而是它在一条里显得比邻居重要。

机制

重量不只跟外轮廓面积有关,还跟轮廓内部被填住的比例有关。简单形把格子大部分留给空白,复杂形把格子用交线切碎,碎缝在小尺寸上被抗锯齿涂成灰,灰在远处就是更深的一块。人把这块深登记为「这一项更实、更主」。设计师若只检查「还能不能看清是日历」,会放过这件事:能看清的日历已经在视觉上压过了旁边的加号。密度重量因此是小尺寸特有的税:同一枚复杂稿在 48 像素里空隙还在,缩到 20 以下空隙变成灰雾,重量差才冒出来。

怎么研究

控制线宽、边长、线面,只改变零件数,做「哪一枚更重 / 更显眼」的比较。自变量是可数的零件或墨覆盖率,因变量是显著性排序。把同一对图标放到大尺寸再比一次:若大尺寸差距缩小、小尺寸差距拉开,就是密度在小网格上转化成了重量。可辨率要单独报——糊掉是另一条失败,这里只收「仍可辨但更抢」的那些。

边界

  • 零件多到已经糊成色块,优先回到减零件,而不是调重量;认不出时不存在「显得更重」的精致问题。
  • 面性复杂形会比线性复杂形更黑,两种密度不能混着调。
  • 单枚独用的复杂图标没有邻居可压,密度重量几乎不表现。
  • 光学放大圆形、统一线宽,解决不了内部被切碎的那块灰。

怎么落地

  • 小档上给复杂题材准备减零件的替代形,不只是为了可辨,也是为了别在一条里自己变主按钮。
  • 不能减零件时,给复杂形加一点内部留白或略减线宽,把墨覆盖率拉回组内中位,而不是把简单形加粗去「配重」——加粗简单形会伤全组节奏。
  • 验证办法:小尺寸下把一排做成灰度图,眯眼看哪一块先浮出来。先浮出来的若是零件最多的那枚,密度已经在冒充层级。

延伸

  • 同组F6.08.1 填充与线性图标在同一排列中视觉重量不均会造成层级错觉 · F6.08.2 图标的视觉大小需按视错觉校正而非几何尺寸对齐 · F6.08.4 图标组内粗细、留白需统一才能形成均匀的视觉节奏
  • 相邻F6.04 图标的最小尺寸 · F3.01 视觉权重的构成
  • 站内检索icon visual density · visual weight · ink coverage

同组卡片

快捷操作

分享

分享当前页面

ios_share

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