为何悬浮
Material(Google, n.d.)为最重要操作设计了FAB。拇指易达下方(Bergstrom-Lehtovirta & Oulasvirta, 2014),符合菲茨定律,尺寸要超过触控目标下限。
常见问题
仅图标依赖惯例(Norman, 1999);滚动时隐藏会成为隐藏示能(Gaver, 1991);还常遮挡最后一项或底部导航。
用好它
每屏一个,列表末尾留白;展开按钮也要够大(Parhi et al., 2006),检查WCAG 2.2的2.5.8与2.4.11。
常见问题
- 必须在右下吗?
- 右下是默认,也有底部居中,关键是不遮挡内容。
- iOS要用吗?
- iOS不惯用FAB,优先导航栏或标签栏按钮。
来源核查日期:2026-10-27
参考文献
- Google. (n.d.). Floating action button (FAB). Material Design 3. 每屏一个主要操作。
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. 拇指可及区域模型。
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 大而近的目标更快。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 拇指目标尺寸。
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 惯例与可感知示能。
- Gaver, W. W. (1991). Technology affordances. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 79–84). ACM. 隐藏的示能。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 2.5.8与2.4.11标准。
