E4.20.2whitespace as implicit grouping设计研究

留白通过间距隐式建立分组关系

别名: 间距分组 · 留白 · 邻近性 · proximity grouping

概念解释

不必画线,也可以分组:组内近、组间远。留白分组(whitespace as implicit grouping)靠间距差说话——标签贴着它的字段,这一组字段和下一组之间多出一块空。它是隐式的:没有边可指,但眼睛会把近的焊在一起。和强制切割相反,留白在关系本来就能被邻近说明时工作得最好,因为它不打断阅读,只调节疏密。

机制

邻近是分组里最省注意的线索。人几乎不会「看见」间距本身,只看见结果:这些是一簇。要让簇稳定,组内间距必须明显小于组间间距,形成一个可判别的差,而不是所有空隙都差不多。差不够大,簇散掉;差全靠把组间撑得极大,页面又会显得空、关联被拉断。留白还沿一个方向工作:垂直表单主要靠行距分字段、靠段距分区块;横向工具栏靠项目间隙分组。两个方向的空混用同一套数值,簇会在不该成组的方向上出现。因为没有边,留白分组对低视力、高缩放更脆弱——缩放后像素差变了,簇可能重组。它的优点是安静:扫描不停在线上,适合关系清楚、只需要被看见成簇的内容。

怎么研究

固定元素,只改组内组间间距比,让人圈簇并完成「这个标签对应哪个字段」。自变量:间距比、是否另有线。因变量:圈簇正确率、标签-字段错配。存在一个间距比,再加大组间收益下降——那就是留白已经够用、再加线会多余的点。

边界

控件外形非常相似、语义却切换时,只靠留白不够,需要强制切割。窄屏上组间空会被垂直方向吃掉,差被压扁,簇消失。背景色块或卡片已经造成共同区域时,再加大留白是第二层线索,通常可以收。从右到左布局里「近」的方向随书写改变,间距系统要跟书写方向走,不能把左缘空隙当绝对。

怎么落地

  • 先定组内间距,再让组间明显大于它,用同一屏上的对比来调,不要单独看一个空隙。
  • 标签与字段的间距必须小于字段与下一字段的间距,否则标签会嫁到错误的输入上。
  • 关系已经能被邻近说明时,优先留白,不要再画线。
  • 验证:涂掉文字只看块的疏密,应仍能数出有几簇。数不出,间距差还不够。

延伸

  • 同组E4.20.1 分隔线适合关系不明确时的强制切割 · E4.20.3 过度使用分隔线会让界面显得破碎 · E4.20.4 留白不足时元素会被误判为属于同一组
  • 相邻F2.06 邻近性分组 · E4.01 卡片
  • 站内检索proximity · whitespace grouping · spacing

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E4.20.2