E4.06.1indent depth discriminability设计研究

层级缩进的可辨识度随深度下降

别名: 树缩进 · 层级视觉 · 缩进失效 · tree indentation

概念解释

树用水平偏移表示亲子:子节点比父节点更靠右。缩进可辨识度(indent depth discriminability)说的是这个偏移能不能稳定地被看成「深了一层」。浅层时几像素的台阶就够;深度增加后,相邻两层的左缘越来越近、可选的水平空间被吃完,人就开始把第三层和第四层看成同一级。树还在算层级,眼睛已经读成平铺列表。

机制

层级知觉依赖相邻左缘之间的差值,而不是绝对 x 坐标。每深一层,可用宽度减少一截,差值若保持固定像素,相对对比在变窄的内容区里会显得更弱;差值若随深度加大,很快顶到右缘,标签被截断,节点又认不出。对齐到同一条左缘的节点才会被看成同级,一旦深层节点的左缘抖动——图标宽窄不一、展开箭头时有时无——同级会被拆开,异级会被焊上。连接线本可以补一条「谁是谁的孩子」的路径,但线一密就变成纹理,不再被当成路径。深度的代价因此是双重的:水平分辨率被一层层收走,区分层级的那条边还在变钝。

怎么研究

把同一批节点分别做成 3、5、8 层,问「这两个节点是不是同一级」「它的父节点是哪一个」。自变量:每层缩进像素、有无连接线、展开图标是否占宽。因变量:同级判断正确率、指错父节点的次数、深层标签截断率。正确率应在某一深度后陡降,而不是线性慢慢变差——那就是可辨识度崩掉的点。不要用「看起来有层次」的评分代替指认任务。

边界

两到三层的导航树几乎碰不到这条边界。宽桌面侧栏可以养更深的树;窄抽屉里三层就会顶满。屏幕阅读器不靠缩进读层级,而靠节点级别属性;视觉缩进失效与辅助技术失效不是同一件事。把深层节点改成面包屑路径或跳转到子视图后,缩进不再承担深度,这条约束就交给别的结构。

怎么落地

  • 把树的有效深度压在缩进仍能被指认的范围内;超出的深度不要靠继续缩进表达。
  • 同级左缘必须对齐,展开控件占位要稳定,避免有无箭头导致左缘抖动。
  • 需要更深时改用进入子视图或路径,而不是把每层再减几个像素。
  • 验证:从中层随机抽出两个节点,请人说出它们是否同级、父节点是谁。开始靠猜时,深度已经超过缩进能负担的。

延伸

  • 同组E4.06.2 展开状态需在会话内保持 · E4.06.3 深层节点需要面包屑或搜索作为补充
  • 相邻E3.16 树形多选与父子联动 · E5.05 面包屑
  • 站内检索tree indentation · hierarchy perception · depth cue

同组卡片

快捷操作

分享

分享当前页面

ios_share

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