E4.20.4underspaced false grouping设计研究

留白不足时元素会被误判为属于同一组

别名: 间距不足 · 误分组 · 挤在一起 · cramped grouping

概念解释

两组本不该在一起的内容,若组间空隙和组内空隙差不多,眼睛会把它们读成一簇。留白不足造成的假分组(underspaced false grouping)是邻近线索在不该生效的地方生效:字段贴到了下一组的标题上,按钮贴到了另一张卡的动作上,说明文字贴到了不相干的图上。它不是线画少了,而是间距差还没建立,切割还没开始。

机制

邻近不判别「该不该」成组,只判别「近不近」。布局把两组放近了,成组就会发生,哪怕语义在反对。典型事故是把段距做成和行距一样:新标题贴在上一字段底下,标题被当成上一字段的附注,下一组的字段成了无主输入。横向也一样:主按钮和次按钮若与旁边无关控件共用同一间隙,动作范围会被读错。假分组一旦形成,纠正成本很高——用户按错误的簇去操作,发现不对再拆。补救可以是加大组间空,或在这个边界改用强制切割;先认的是「差不存在」,再选手段。只加细线而不加大空,线可能被看成簇内部的装饰,假分组仍在。

怎么研究

把本应分开的两块用与块内相同的间距拼在一起,再逐步加大块间空或加线。让人圈簇、匹配标题与字段、指出按钮作用对象。自变量:块间与块内间距比、有线无线。因变量:假分组率、标题嫁错字段。间距比接近 1 时假分组应最高;只加线、间距比仍为 1 时,假分组下降应有限。

边界

有意做成的工具组(一套格式按钮)就是要假成一组,间距本该密。窄屏把纵向空压掉之后,桌面上够用的差会在手机上失效,假分组是响应式问题,不是同一套数值能打天下。共同区域(卡片底板)可以在间距差不够时仍切开对象;这时假分组较少发生在卡与卡之间,仍可能发生在卡内的两块逻辑区之间。

怎么落地

  • 检查每一处「新标题 / 新卡 / 新动作组」与上一块的空隙是否明显大于块内空隙。
  • 标题必须更近它说明的那组,而不是更近上一组的尾巴。
  • 差做不出来的边界,改用线或底板切开,不要寄希望于用户去读字。
  • 验证:请人用笔把「一组」圈出来。圈跨了语义边界,就加大那条边界的空,或在那里加切割。

延伸

  • 同组E4.20.1 分隔线适合关系不明确时的强制切割 · E4.20.2 留白通过间距隐式建立分组关系 · E4.20.3 过度使用分隔线会让界面显得破碎
  • 相邻E4.01 卡片 · F2.06 邻近性分组
  • 站内检索false grouping · proximity error · cramped layout

同组卡片

快捷操作

分享

分享当前页面

ios_share

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