F2.06.3dividers cannot fix proximity设计

分隔线不能补救错误的间距关系

别名: 分隔线 · divider · hairline

概念解释

两组设置行的间距和组内一样,于是有人在中间加一根 1 px 线,指望线来宣布「这里切开」。线两侧空隙相等的时候,它看起来更像组里面的装饰,不像边界——段落中间那根无意义的横线就是这个感觉。设置里每个字段都有线、章节之间只是略粗一点,线就变成墙纸,章节仍然不跳出来。

线补不了写反的间距。先把不等式写对,再决定还要不要线。

机制

分组线索有强弱。邻近性来得早、也强;一根发丝是弱分区。两侧空隙相等,邻近性说「同一组」,线说「也许有界」,早到的线索赢。用户仍会在边界上犹豫半拍,这半拍就是「没补救成」。

线还有习惯化:满屏都是线,线不再表示切开,只表示「这是列表」。真要分节,线必须出现在已经拉开的那条缝上,成为加强,而不是唯一信号。用粗线、双线、色条去压过错误间距,短时间能赢,一旦同样的粗线用到组内,线索再次贬值。

边界

表格、时间线、代码行号,线是结构本身(格子、轨道),不是补丁。无障碍高对比模式下系统可能强制显示分隔,这时线是平台行为。极窄、极密的列表里,间距已经见底,线有时是仅剩的弱线索——即便如此,能挤出 4 px 组间差也比只加线稳。

卡片已经用底和圆角成组,再在卡片之间加线通常是重复信号,该删线而不是删间距。

怎么落地

  • 评审时先藏起所有分隔线(检查器里关掉 border)。组还在,线才是可选项;组没了,回去改间距。
  • 真需要线的地方,只画在组间那条已经更宽的缝上,组内默认无线。
  • 验证:做两张图,一张有线、一张无线。请人圈组。无线时圈对了,线可以不加。无线时圈错、有线才圈对,说明你在用线硬撑,把间距改到无线也能圈对,再决定线留不留。若两张都圈错,线完全没干活。

延伸

  • 同组F2.06.1 组内间距必须显著小于组间间距 · F2.06.2 标签与其控件的间距最能体现该原则
  • 相邻E4.20 分隔线与留白 · F2.04 留白 · F2.08 卡片式布局
  • 站内检索divider · hairline · grouping cue · common region

同组卡片

快捷操作

分享

分享当前页面

ios_share

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