F2.04.2insufficient whitespace flattens groups设计研究
留白不足使所有元素看似同组
别名: 间距不足 · 挤在一起 · visual flattening
概念解释
设置页里「通知」标题、开关、说明、下一项标题全部隔 8 px,整页会变成一块均匀的灰。用户不知道一项设置在哪结束。工具条里筛选、搜索、导出、批量删除也是 8 px 一排时,破坏性动作看起来只是又一个筛选。
留白不足的典型后果是所有东西像同一组——不是某两个标签对错了控件,而是整页失去组边界。
机制
分组靠的是空隙对比。当所有空隙都小、而且彼此差不多,邻近性算不出边界,页面在知觉上是一张纹理。人还能靠阅读文字补救,但那是慢路径:先读完才能知道结构,扫视阶段已经把批量删除当成普通工具。
挤还有一层搜索代价。目标没有「岛」可落,眼睛只能逐个辨认。这和「组内必须明显小于组间」是同一类知觉,但这里的病状是全局扁平:连「组」都还没出现,谈不上组内组间比。
怎么研究
可用视觉搜索:在两种间距方案里找指定项(某个设置名、工具条上的删除),记录首次注视时间和错误点击。自变量是全局间距档(全部 8 px vs 组间加大),因变量是搜索时间和误把邻项当目标的次数。眼动上,扁平页的扫描更接近逐行栅格,而不是先跳到组标题再进入组内。
注意实验室里的「找指定词」比真实「弄清这项和那项是不是一伙」更简单,检出的扁平伤害往往偏低。
边界
专家天天用的监控屏可以很挤,因为组结构已被技能记住,空的任务是给新手看的。极小手表表盘几乎没有可空像素,分组要改用表盘分区和色。游戏 HUD 的挤是为了把画面留给世界,这时「看似同组」可能被接受。
若扁平来自对齐乱、字号乱,而不是间隙小,加空解不了,先把对齐和层级收回来。
怎么落地
- 找高频页,把所有间距临时改成同一档。若结构消失,说明原来就没有组间对比,而不是「风格紧凑」。
- 至少给「区块标题 → 其内容 → 下一块标题」做出两档空:标题贴内容,块与块拉开。
- 破坏性动作不要跟普通动作同一间隙;先用空把它从工具条里分出来,再谈颜色。
- 验证:把页面缩到 50% 或眯眼看。若只剩一块均匀灰、组标题不再作为岛出现,记下仍黏在一起的边界,把那一段的组间空加到能在 50% 缩略图上被圈出来为止。