为什么放在底部
胡伯(2013)观察了1,333人,约一半单手握机用拇指操作。贝里斯特伦-莱赫托维尔塔与乌拉斯维尔塔(2014)建模显示拇指可及区集中在屏幕下部和中部,这与拇指区和菲茨定律一致。
好标签栏的条件
Material Design与苹果指南都建议3至5个顶级目的地,图标配短标签,清楚标示当前位置,并满足触控目标尺寸。蔡与金(2004)发现小屏上层级越深越容易迷路。
常见错误
把设置、退出等低频功能放进底栏是常见错误。佩尼斯与布迪乌(2016)的测试显示,可见导航比隐藏的汉堡菜单使用更快更频繁。
常见问题
- 几个标签合适?
- 建议3至5个。
- 网站能用底部导航吗?
- 目的地少而明确时有效,但要避开浏览器底部工具栏。
来源核查日期:2026-10-27
参考文献
- Hoober, S. (2013, February 18). How do users really hold mobile devices? UXmatters. 观察1,333人握持手机方式的实地研究,是底部布局的依据。
- 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. 对拇指在触屏上的实际可及范围建模。
- Park, Y. S., & Han, S. H. (2010). Touch key design for one-handed thumb interaction with a mobile phone: Effects of touch key size and touch key location. International Journal of Industrial Ergonomics, 40(1), 68–76. 实验检验按键大小和位置对单手操作的影响。
- Chae, M., & Kim, J. (2004). Do size and structure matter to mobile users? An empirical study of the effects of screen size, information structure, and task complexity on user activities with standard web phones. Behaviour & Information Technology, 23(3), 165–181. 证明小屏上深层结构会妨碍导航。
- Google. (n.d.). Navigation bar. Material Design 3. 安卓官方指南,含3至5个目的地规则。
- Apple. (n.d.). Tab bars. Human Interface Guidelines. 说明iOS标签栏的作用与禁忌。
- Pernice, K., & Budiu, R. (2016, July 24). Beyond the hamburger: What makes navigation discoverable on mobile. Nielsen Norman Group. 测试显示可见标签比隐藏菜单更易被发现。
