F6.04.1icon detail density设计研究

细节数量决定可缩小的下限

别名: 图标细节密度 · 缩小下限 · stroke collapse

概念解释

一枚图标能缩到多小,先问它里面有多少必须分开看见的零件:空隙、交线、齿、孔。零件数超过那一档像素能养活的数量,交线并成一团,孔被填死,齿变成毛边。下限不是一个通用的「最小边长」,而是这枚稿的细节密度与像素预算的对账。细节多的稿,下限更高。

机制

屏幕上的线有宽度。两条线之间的空隙一旦小于约一条线宽,在小尺寸上会先糊成一条更粗的线,再糊成色块。内部的孔(counter)同样要靠一圈像素才能站住;孔太小,中间只剩不到一个像素,渲染时被四舍五入吃掉。细节密度高,意味着同一边长里要同时保住更多条线和更多个孔,对账会更早破产。这和题材无无关:一把有齿的钥匙并不比一枚箭头「更重要」,它只是在 16 像素里多要了几条缝。视觉系统在糊掉之后仍能感到「这里有一团」,但已经读不出它是什么。

怎么研究

把同一题材做成细节档次不同的几稿(零件数可数:交点数、孔数、独立笔画数),在固定边长序列上做命名或匹配。自变量是细节档次与边长,因变量是可辨率骤降的那个边长——也就是这枚稿的下限。也可以在像素网格上数「还能分开的空隙」,作为物理下限的估计,再拿行为数据校准。注意抗锯齿会把「理论上还分开的缝」抹成灰带,物理计数会乐观。

边界

  • 实心、无孔、单笔画的符号可以缩到比带齿、带窗的建筑形小得多,不能用同一边长卡全套。
  • 用户把系统字号放大时,图标若跟着矢量拉伸,细节会暂时得救;若图标被锁在固定像素,字变大而图不变,对账关系会恶化。
  • 印刷或超高密度屏上,同一物理毫米里像素更多,下限会下移;以像素边长做跨设备规定会失真。
  • 这条只回答「零件数何时让图形自己糊掉」,不回答小尺寸要不要另画一稿,也不把可点范围算进来。

怎么落地

  • 给每个目标边长规定「最多几条线、几个孔」。超标的稿先删零件,不要先缩。
  • 设置、筛选、日历这类天生零件多的题材,在小档上改用更简单的替代形,而不是把大稿硬塞进去。
  • 验证办法:在目标边长的真机截图上,数还看得见的空隙。空隙并级或孔消失,就还没到可发布的下限,继续减零件。

延伸

  • 同组F6.04.2 小尺寸需要独立绘制而非等比缩放 · F6.04.3 图标尺寸与其命中区尺寸无关
  • 相邻F6.08 图标的视觉重量平衡 · F4.08 易读性与易辨性
  • 站内检索icon detail density · stroke collapse · counter

同组卡片

快捷操作

分享

分享当前页面

ios_share

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