E1.05.1FAB occlusion设计研究
浮动按钮遮挡下方内容
别名: FAB遮挡 · 浮动按钮挡内容 · floating action button
概念解释
浮动操作按钮（floating action button, FAB）叠在内容层之上，不占用文档流。它因此永远压住底下那一块：列表最后一项、卡片的次要动作、地图上的兴趣点、聊天最后一条。遮挡不是边角问题，是这种控件的几何定义——只要它浮着，就有一块内容不能被看见或不能被点到。
机制
浮动层与内容层争夺同一屏幕矩形。列表滚动时，行会从 FAB 底下经过；若行上有收藏、删除、多选框，命中测试先打到 FAB。即使用户看见了那一行的边缘，手指仍点到主动作。底部导航、手势条、安全区再把 FAB 往上推，遮挡带从角落变成一条水平带，最后几行被长期压住。人会发展出绕开策略：把列表再滚一点、用另一只手、干脆放弃被挡住的对象。这些策略消耗的是本该花在内容上的时间。FAB 的价值是拇指热区里的主触发；它的代价是热区里的内容永久让路。
怎么研究
做滚动与命中测试：在有 / 无 FAB 的同一列表里完成「打开最后一项」「点最后一行的次要动作」。记录被挡住的行数、误点 FAB 次数、为了露出目标额外滚动的距离。
自变量：FAB 尺寸与边距、列表行是否带行内动作、是否同时有底栏。 因变量：内容可见面积、误激活率、额外滚动、口语中的「挡到了」。
静态截图会低估遮挡，因为用户可以滚动。必须在运动中测：目标正好经过 FAB 时的那一次点击，才是现场事故。
边界
空状态或内容很短、FAB 底下没有可点对象时，遮挡几乎不造成功能损失。横屏、大折叠屏上 FAB 占面积比例下降。地图类产品有时故意让 FAB 挡住部分图面，换取随时可添加；若被挡的是当前选中的针脚，代价就回来了。桌面端很少用 FAB，遮挡问题应改用工具栏来避免，而不是把移动端 FAB 原样放大。
怎么落地
- 给会被 FAB 压住的列表、聊天、地图预留底部内边距，使最后一项能滚到 FAB 之上的空隙里。
- 行内次要动作不要放在右下角与 FAB 重叠的那一列；改到对侧或溢出菜单。
- 有底栏时把 FAB 嵌进底栏缺口，而不是再叠一层圆形挡在底栏和内容之间。
- 验证：滚动到最后一项，尝试点击它及其行内动作。点到 FAB、或必须把内容顶出可见区才能点到，就是遮挡失败。