E5.09.2back-to-top occlusion设计
入口不应遮挡内容与主操作
别名: 回到顶部遮挡 · FAB 挡内容 · 悬浮返回顶
概念解释
回到顶部几乎总是悬浮在内容之上,才能在任意深度被点到。入口遮挡(back-to-top occlusion)是这枚控件盖住了正在读的文字、正在点的主按钮、或底部标签栏。捷径的价值在长距离时才出现,遮挡却在它可见的每一帧都发生。问题不是要不要这条捷径,而是它占用的那块屏幕是不是正在干活。
机制
悬浮控件与内容争的是同一块像素。右下角是拇指热区,也是列表最后一项、聊天输入、主操作按钮和底栏最右项常驻的地方。捷径放在这里,命中率最高,冲突也最密:本想点「下一步」或最后一张卡片,却触发滚走。滚动中若按钮淡入,还会在手指已经按下时突然出现在触点下,造成不是用户发起的跳转。
遮挡还有阅读成本。固定一块不透明圆盖住段落末尾或图片关键部位,人会侧身去读,或以为内容到此结束。半透明能减轻视觉盖住,但不能减轻命中盒盖住——点下去仍然是捷径而不是被盖住的链接。和底栏同时存在时,两条栏叠出一块谁都点不准的缝。
边界
桌面大视口、内容居中留出边距时,把入口放进边距可以几乎不盖内容。阅读模式、全屏媒体应暂时卸下它。主操作本身就是悬浮按钮时,二者不能叠在同一角,必须错开或合并决策(这一页到底哪个动作更频繁)。无障碍焦点顺序若把这枚按钮插在每段内容之间,键盘用户会被反复拦住,遮挡从空间变成了时间。
怎么落地
- 为入口划一块不与主操作、底栏、输入框重叠的停机位;冲突时让位给主任务,而不是缩小主按钮。
- 滚动停止后再显示,滚动中途不要突然插入到手指下;接近底部主操作时自动避开或收起。
- 命中盒不要大于可见图形太多,以免看不见的边吃掉旁边的链接。
- 验证:在出现入口的深度,点最后一项内容、主按钮和底栏右项各十次,统计误触发跳到顶部的次数。再看入口是否盖住段落末句或关键数字。误触或必须挪开才能读,就是遮挡成立。