E4.20.3divider fragmentation设计研究

过度使用分隔线会让界面显得破碎

别名: 分隔线过多 · 界面破碎 · 线条噪音 · visual fragmentation

概念解释

每一条分隔线都是一次强制停顿。停顿密到和行一样多,页面就不再是几块,而是一叠被切碎的细条。线条造成的破碎(divider fragmentation)让扫描无法形成大的组,眼睛在线上来回跳,内容的节奏被线条的节奏取代。问题不是某条线画错了地方,而是线的密度本身已经高于结构需要的密度。

机制

停顿点有容量。偶尔一条线能标出类别切换;每行一条线时,每个停顿都同等响,类别切换再也响不出来。网格感上升,对象感下降:人开始数格子,而不是读组。破碎还会与滚动叠加——每一条线进视口都闪一下,长列表变成栅栏。线与线之间若只剩一行内容,内容被降成填缝,视觉权重落到了线上。卡片描边、列表行线、区块线叠在同一屏上,三套切割系统互抢,哪一套在表达真正的结构变得不可读。减少线不是「更好看」,是把停顿预算还给真正的边界。

怎么研究

同一内容分别用无行线、仅组间线、项项都有线,做扫描与分组任务,并收集「碎 / 整」的主观描述。自变量:线密度、是否同时有卡片描边。因变量:分组时间、正确的大组数、眼动在线上的停留。项项都有线时应看到停留从内容转到线上,大组数被报成「很多小组」。

边界

数据表需要行线或斑马纹来跟读一行跨多列,那是追踪而不是类别切割,密度可以更高。高对比模式、某些无障碍主题会把细线加强,原本不过分的线在那种主题下变碎,需要单独看。打印稿没有滚动闪烁,同等密度的线比屏幕更能忍。

怎么落地

  • 把线当成停顿预算:一屏里真正的类别边界有几条,线就大约几条。
  • 列表优先用间距和分组标题,而不是行间线。
  • 已经有卡片底板或区块背景时,去掉重复的线。
  • 验证:缩小成缩略图。应仍能看出三到五块,而不是一片栅栏。满屏横线就是碎了。

延伸

  • 同组E4.20.1 分隔线适合关系不明确时的强制切割 · E4.20.2 留白通过间距隐式建立分组关系 · E4.20.4 留白不足时元素会被误判为属于同一组
  • 相邻E4.03 表格 · E4.01 卡片
  • 站内检索visual noise · fragmentation · divider density

同组卡片

快捷操作

分享

分享当前页面

ios_share

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