移动应用导航模式:标签、抽屉与嵌套流程
根据任务频率、信息结构、无障碍需求以及用户找回原位置的难易程度,选择移动应用导航模式。

导航应让用户理解应用的整体结构。他们需要知道有哪些区域、自己在哪里,以及如何在不丢失当前工作的情况下移动。标签栏、抽屉或嵌套流程并非单纯的样式偏好:每一种都呈现了目的地之间的不同关系。
先从用户会反复执行的任务出发,再绘制内容层级。对于同级目的地使用直接导航,对于父级到详情的关系使用嵌套导航;如果目的地多到紧凑屏幕难以舒适展示,可考虑抽屉或适应大屏的导航。
核心要点
- 对于数量较少、彼此独立且经常返回的顶层区域,使用标签或导航栏。
- 当某个目的地有意义地从属于另一个目的地时,使用嵌套导航,并保留清晰的返回路径。
- 把抽屉用于展示更广泛的目的地列表,而不是藏起重要任务。
- 让标签、选中状态、焦点行为和状态恢复清楚明确,帮助用户定位和找回位置。
从结构出发,而不是从组件出发
列出应用的目的地,并按照用户的心智模型分组。“搜索”可能与“首页”并列;收藏项的详情则属于“已保存”之下。如果用户经常需要在同级区域间切换,应保持这些选项可见。如果他们通常从列表进入某个项目,再返回列表,堆栈或嵌套流程就能自然表达这种关系。
区分目的地与操作。编写、分享、筛选和排序会改变当前情境或对其执行操作,通常不是应用中的地点。应把它们放在工具栏、菜单或情境控件中,而不是把每项操作都变成主导航项。
- 说出用户反复完成的任务,并找出哪些区域必须能从任何位置到达。
- 先绘制父子关系,再选择导航控件。
- 让同一层级的目的地在视觉和行为上保持一致。
比较三种模式
标签栏或导航栏让少数顶层目的地始终可见,并可快速切换。当目的地属于同级,且每个标签无需解释就能识别时,它很适用。应保持当前区域处于选中状态。避免向栏中塞入无关操作,也不要让重要目的地消失在溢出菜单里。
导航抽屉可以容纳更多按组组织的目的地,有时还可用于切换账户或工作区。模态抽屉节省屏幕空间,但需要多一次打开和选择的操作,还会暂时遮住内容。在紧凑手机上,这种成本可能让常用目的地显得难找。Material 3 当前的 Android 指南倾向于为三个到五个紧凑目的地使用导航栏,并随窗口尺寸增大调整导航形式;不要把旧版 Material 针对五个或更多目的地推荐抽屉的说法误当作当前通用门槛。
嵌套导航通过列表、卡片或链接打开子视图,并通过标题和返回控件保留路径。它适合类别、设置、商品详情和分步任务。如果层级被隐藏、返回行为不一致,或用户必须反复退回才能到达同级项目,深层嵌套就会令人沮丧。用户经常跨分支跳转时,应增加搜索、快捷入口或更清晰的顶层结构。
| 模式 | 适用情况 | 注意问题 |
|---|---|---|
| 标签/导航栏 | 少数同级区域值得频繁、直接地访问 | 目的地过多、图标含义不明、溢出项被隐藏、各标签状态丢失 |
| 导航抽屉 | 用户需要一个有组织的列表来查看大量或分组的目的地 | 重要区域藏在菜单后面、列表过长、焦点或关闭行为存在问题 |
| 嵌套导航 | 用户从父级列表进入相关详情或任务 | 当前位置不明、返回行为不一致、层级过深、已输入数据丢失 |
根据任务频率和屏幕尺寸选择
询问用户在典型会话中切换区域的频率。紧凑而稳定的高频目的地集合适合可见的导航栏。如果多数操作都集中在一项任务或阅读详情上,导航可以更低调,把空间留给内容。抽屉可用于较少访问的区域,但要检查用户能否找到这些区域并在返回时无需猜测。
规划窗口尺寸、方向和平台惯例。Apple 当前的《人机界面指南》将 iPhone 标签栏描述为顶层导航,并支持 iPad 上可适应变化的标签栏/侧边栏呈现方式。Material 3 把其紧凑模式称为导航栏,并在可用宽度增长时提供其他导航形式。这些模式目标相近,却不是完全相同的组件;应遵循原生的位置、行为和适配方式,而不是把一个平台的界面外壳照搬到另一个平台。
让定位和恢复始终可靠
只有图标会让导航更难学习,也可能让屏幕阅读器用户难以理解。为目的地提供简短可见的标签,以语义方式暴露选中状态,并确保控件具有无障碍名称和可用的点击区域。检查选中与未选中状态的对比度、大号文字、本地化和从右向左的布局。在受支持的情况下,使用 VoiceOver 或 TalkBack,以及键盘或切换开关导航进行测试;打开抽屉、选择目的地或关闭视图时,焦点应按预期移动。
恢复路径也是导航的一部分。区分“返回”和“关闭”:前者沿层级退回,后者退出临时或模态视图。切换顶层区域或从详情返回时,应保留有用的位置和已输入数据。当目的地为空或暂时不可用时,应保持其位置稳定并解释状态,而非悄悄移除或禁用导航。对于破坏性或成本较高的任务,在用户确认前就要明确返回路径。
实用导航审核
带着真实任务走查应用,再启用无障碍功能重复。记录用户能否识别当前区域、到达常用目的地,并在走错后恢复。比较紧凑手机与较大窗口上的相同旅程;自适应布局在控件形式变化时应保留信息架构。
利用界面资料库比较真实的应用区域和流程实例,再依据自家产品的任务评估每一种模式。最有力的模式能在应用增长时保持结构清晰,并在中断后让返回路径一目了然。
- 新用户能否仅凭标签说出顶层区域的含义?
- 同级目的地是否易于切换,且选中状态清楚可见?
- 详情界面是否有有意义的标题和可预期的返回路径?
- 打开和关闭抽屉是否保留上下文,并合理移动无障碍焦点?
- 放大文字或使用辅助技术时,标签、点击区域、对比度和选中状态是否仍可用?
- 用户能否返回,而不丢失草稿输入、滚动位置或层级中的有用位置?
- 在更大屏幕上适配时,结构是否避免了相互竞争的重复主导航?


