F6.08.4icon set rhythm设计

图标组内粗细、留白需统一才能形成均匀的视觉节奏

别名: 图标节奏 · 组内留白 · stroke padding rhythm

概念解释

一条工具栏读起来像一拍一拍往前走,还是像有的字大、有的字挤、有的字在晃,取决于组内的线宽和内边距是不是同一套拍子。节奏不是「每枚都好看」,是相邻两枚之间的粗细差和空隙差小到扫视不会绊一下。绊一下的那一枚不必更重、也不必更大,只要它的内边距突然变紧或线突然变细,拍子就断了。

机制

扫视在重复结构上会进入节拍:等间隔、等线宽、等内边距被预期为下一拍还是这样。线宽从 2 跳到 1.5,或一枚贴满格子、下一枚缩在格子中央留一圈空,预期被打破,注意被拉去解释「这一拍怎么了」。解释消耗的不是审美,是定位——用户要重新确认这还是不是同一组入口。节奏因此是组级属性,单枚无法自证:把「跳」的那一枚单独放到画板中央,它完全可以合格。破坏发生在和左右邻居的差值上。统一粗细和留白,是把差值压进扫视察觉不到的范围,让题材变化成为组里唯一被允许的变化。

边界

  • 有意强调的一枚(当前项、主操作)本来就要断拍;那是信号。这里禁止的是没有信号职责的断拍。
  • 外来图标族会以另一种拍子进来,应先重锚到本组拍子,再谈重量和大小。
  • 光学校正会微调外轮廓,不该顺便改线宽或内边距,否则校正大小的同时把节奏拆了。
  • 深色底上线看起来更细,全组要一起补,而不是只补被投诉的那一枚。

怎么落地

  • 把线宽和内边距写成组级常量,新稿先贴进现有条带看左右差值,不要在空白画板上定稿。
  • 发现某一枚「跳」,先量它的内边距和线宽相对中位值偏了多少,按常量改,而不是凭感觉把邻项也改乱。
  • 验证办法:用一条窄纸或手指挡住题材,只看一排的线与空隙。能数出哪一格更紧或更细,节奏就还没成。

延伸

  • 同组F6.08.1 填充与线性图标在同一排列中视觉重量不均会造成层级错觉 · F6.08.2 图标的视觉大小需按视错觉校正而非几何尺寸对齐 · F6.08.3 高信息密度图标在小尺寸下会显得比简单图标更重
  • 相邻F6.03 图标的风格一致 · F3.05 视觉动线
  • 站内检索icon set rhythm · stroke · padding · visual weight

同组卡片

快捷操作

分享

分享当前页面

ios_share

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