E4.17.2sticky section header as location设计研究

吸顶标题在滚动中提示当前所处的分组

别名: 分组吸顶 · 当前分组 · 滚动位置标题 · sticky section

概念解释

分组标题若跟着条目一起滚走,滚到段中时人就不知道自己在哪一类里。吸顶的分组标题(sticky section header)把当前这一段的名字钉在列表视口顶部,只在下一段的标题把它顶走时更换。它回答「我现在在哪一组」,不是给表格冻列名,也不是让标题看起来更好点。

机制

滚动是在结构里移动。段标题一旦离开视口,当前位置只剩记忆,而记忆在快速滑过许多行之后不可靠。吸顶把「当前段名」从记忆里搬回视野,扫描可以在段内继续,不必先滑回去看标题。替换必须跟段的边界走:下一段的标题顶上来,上一段的名字被顶走,人看见一次交接,才知道段已经换了。若所有段共用一个不换内容的吸顶条,或吸顶条显示的是列表总标题,位置信息是假的。吸顶只应占一行的高度;占太多会偷走比较窗口。它钉在列表自己的滚动容器上,钉在整页上会把段名带到无关板块。

怎么研究

在长分组列表中部停下,比较标题滚走与标题吸顶,问「你在哪一组」并继续找该组内的目标。自变量:是否吸顶、下一段交接是否动画顶出。因变量:当前位置正确率、为确认段名而回滚的次数。快速滑动后立刻提问,最能暴露没有吸顶时记忆的失败。

边界

一段就能装进视口、标题本来就不离开,吸顶无差别。只有一组的列表没有「当前组」可报。横向滚动的表格冻的是列名,机制不同,不要拿列表吸顶去顶替。虚拟列表回收 DOM 时,吸顶节点若被回收,段名会闪成空白或错段,那是实现把位置信息弄丢了。

怎么落地

  • 当前段的标题在列表滚动容器顶部固定,下一段标题把它顶走。
  • 吸顶内容必须是段名,不要改成应用名或筛选条件。
  • 高度保持一行,不要把筛选器塞进吸顶条。
  • 验证:快滑到列表中部立刻问在哪一组。要回滚才能答,吸顶就没在报位置。

延伸

  • 同组E4.17.1 分组标题帮助用户理解长列表的内部结构 · E4.17.3 分组过多过细会增加而非降低扫描负担 · E4.17.4 吸顶元素需与内容明确区分以免被误认为可点击项
  • 相邻E4.04 表头固定与横向滚动 · E4.18 虚拟滚动与长列表
  • 站内检索sticky section header · current group · scroll position

同组卡片

快捷操作

分享

分享当前页面

ios_share

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