E5.01.3hide-on-scroll app bar设计
滚动隐藏顶栏会影响返回的可达性
别名: 滚动收起顶栏 · collapsing toolbar · 下滚隐藏
概念解释
为了把垂直空间让给内容,许多界面在向下滚动时把顶栏收走,向上滚动再唤回。滚动隐藏顶栏(hide-on-scroll app bar)省下的是一条栏的高度,拿走的是返回、标题和页级动作的持续在场。问题不在「栏会不会挡住正文」,而在离开当前页的控件变成了「先反向滚一段才能点到」的条件目标。
机制
返回被设计成常驻出口:人在阅读中途决定离开时,预期出口仍在刚才看到的位置。隐藏把这个出口绑到了滚动方向上——只有向上滚、或滚到顶部,出口才重新进入可点范围。中途离开变成两步:先找回栏,再点返回。若同时存在边缘滑动,一部分人会改用手势;没有手势、或手势被横向轮播抢走时,人只能反向滚动。长列表里反向滚动的距离不确定,用户会过头、找不到栏,或误以为这一页没有返回。
隐藏策略还和滚动意图冲突。用户向下滚是为了继续读,系统把「继续读」解释成「你暂时不需要离开」。这个推断在浏览信息流时经常成立,在「读完一段就要对照上一层、或者要分享/关闭」的任务里不成立。栏的出现还依赖速度阈值和方向抖动,轻微回滚不够唤出、快速回滚又会打断阅读,出口的可达性变成了一个不稳定的时机问题。
边界
沉浸阅读、全宽图片和时间线可以把隐藏当作默认,前提是离开路径不依赖顶栏:系统返回手势、底部明确的关闭、或内容内的出口仍然可用。短页、表单和向导不该藏返回——这些页的主要任务就是填完并离开,滚动距离短,省下的高度换不回出口的确定性。嵌套滚动(页里还有横向画廊)会让「方向」误判,栏会在用户并没有想离开时闪现或拒绝出现。无障碍焦点若还停留在已移出屏幕的返回按钮上,隐藏会造成「可聚焦但不可见」的更糟状态。
怎么落地
- 先列出离开这一层的所有路径。若顶栏返回是其中唯一可见出口,就不要在滚动中藏整条栏;最多压缩标题,保留返回。
- 若必须藏,给返回一条不依赖滚动方向的路径:边缘滑动、底部关闭,或在内容结束处提供离开。
- 唤回阈值要对「慢速上滚一点」敏感,避免必须猛甩才能看到出口;横向滚动不要触发竖向隐藏。
- 验证:从列表中段执行「立刻离开这一页」和「分享后离开」,统计需要反向滚动才能点到返回的次数。每次反向滚动都是出口被改成了条件目标。再让辅助技术走一遍,确认焦点不会落在已经移出屏幕的控件上。