F2.04.2insufficient whitespace flattens groups设计研究

留白不足使所有元素看似同组

别名: 间距不足 · 挤在一起 · visual flattening

概念解释

设置页里「通知」标题、开关、说明、下一项标题全部隔 8 px,整页会变成一块均匀的灰。用户不知道一项设置在哪结束。工具条里筛选、搜索、导出、批量删除也是 8 px 一排时,破坏性动作看起来只是又一个筛选。

留白不足的典型后果是所有东西像同一组——不是某两个标签对错了控件,而是整页失去组边界。

机制

分组靠的是空隙对比。当所有空隙都小、而且彼此差不多,邻近性算不出边界,页面在知觉上是一张纹理。人还能靠阅读文字补救,但那是慢路径:先读完才能知道结构,扫视阶段已经把批量删除当成普通工具。

挤还有一层搜索代价。目标没有「岛」可落,眼睛只能逐个辨认。这和「组内必须明显小于组间」是同一类知觉,但这里的病状是全局扁平:连「组」都还没出现,谈不上组内组间比。

怎么研究

可用视觉搜索:在两种间距方案里找指定项(某个设置名、工具条上的删除),记录首次注视时间和错误点击。自变量是全局间距档(全部 8 px vs 组间加大),因变量是搜索时间和误把邻项当目标的次数。眼动上,扁平页的扫描更接近逐行栅格,而不是先跳到组标题再进入组内。

注意实验室里的「找指定词」比真实「弄清这项和那项是不是一伙」更简单,检出的扁平伤害往往偏低。

边界

专家天天用的监控屏可以很挤,因为组结构已被技能记住,空的任务是给新手看的。极小手表表盘几乎没有可空像素,分组要改用表盘分区和色。游戏 HUD 的挤是为了把画面留给世界,这时「看似同组」可能被接受。

若扁平来自对齐乱、字号乱,而不是间隙小,加空解不了,先把对齐和层级收回来。

怎么落地

  • 找高频页,把所有间距临时改成同一档。若结构消失,说明原来就没有组间对比,而不是「风格紧凑」。
  • 至少给「区块标题 → 其内容 → 下一块标题」做出两档空:标题贴内容,块与块拉开。
  • 破坏性动作不要跟普通动作同一间隙;先用空把它从工具条里分出来,再谈颜色。
  • 验证:把页面缩到 50% 或眯眼看。若只剩一块均匀灰、组标题不再作为岛出现,记下仍黏在一起的边界,把那一段的组间空加到能在 50% 缩略图上被圈出来为止。

延伸

  • 同组F2.04.1 留白是分组手段而非装饰 · F2.04.3 留白过多会切断本应相关的元素
  • 相邻F2.07 信息密度 · F2.06 邻近性分组 · F3.08 层级失效
  • 站内检索visual clutter · insufficient whitespace · grouping failure · visual search

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F2.04.2