E4.17.2sticky section header as location设计研究
吸顶标题在滚动中提示当前所处的分组
别名: 分组吸顶 · 当前分组 · 滚动位置标题 · sticky section
概念解释
分组标题若跟着条目一起滚走,滚到段中时人就不知道自己在哪一类里。吸顶的分组标题(sticky section header)把当前这一段的名字钉在列表视口顶部,只在下一段的标题把它顶走时更换。它回答「我现在在哪一组」,不是给表格冻列名,也不是让标题看起来更好点。
机制
滚动是在结构里移动。段标题一旦离开视口,当前位置只剩记忆,而记忆在快速滑过许多行之后不可靠。吸顶把「当前段名」从记忆里搬回视野,扫描可以在段内继续,不必先滑回去看标题。替换必须跟段的边界走:下一段的标题顶上来,上一段的名字被顶走,人看见一次交接,才知道段已经换了。若所有段共用一个不换内容的吸顶条,或吸顶条显示的是列表总标题,位置信息是假的。吸顶只应占一行的高度;占太多会偷走比较窗口。它钉在列表自己的滚动容器上,钉在整页上会把段名带到无关板块。
怎么研究
在长分组列表中部停下,比较标题滚走与标题吸顶,问「你在哪一组」并继续找该组内的目标。自变量:是否吸顶、下一段交接是否动画顶出。因变量:当前位置正确率、为确认段名而回滚的次数。快速滑动后立刻提问,最能暴露没有吸顶时记忆的失败。
边界
一段就能装进视口、标题本来就不离开,吸顶无差别。只有一组的列表没有「当前组」可报。横向滚动的表格冻的是列名,机制不同,不要拿列表吸顶去顶替。虚拟列表回收 DOM 时,吸顶节点若被回收,段名会闪成空白或错段,那是实现把位置信息弄丢了。
怎么落地
- 当前段的标题在列表滚动容器顶部固定,下一段标题把它顶走。
- 吸顶内容必须是段名,不要改成应用名或筛选条件。
- 高度保持一行,不要把筛选器塞进吸顶条。
- 验证:快滑到列表中部立刻问在哪一组。要回滚才能答,吸顶就没在报位置。