5.1 导航简介（Material基础）

导航简介

导航使用户能够遍历应用程序的所有界面和功能。

目录

导航类型

横向导航

前向导航

反向导航

导航类型

导航是以通过引导界面移动来完成任务的行为。执行方式有多种：专用导航组件、嵌入内容中的动作(如链接、注释等)以及平台功能。

导航方向

基于应用程序的信息结构，用户可在以下三类导航中选择移动方向：

• 横向导航是指同级界面间的移动。应用程序的主导航应提供顶层所有对象的访问入口。

• 前向导航是指连续界面间的移动，包括层级间、任务流程或顺序浏览应用等。前向导航将导航动作嵌入到容器（例如卡片、  列表或图像）、按钮、链接或搜索中。

• 反向导航是指按时间顺序（一个或多个应用程序中）或按层级（一个应用程序内）向后的界面移动。平台规范决定了应用程序内的具体反向导航动作。

横向导航允许此音乐APP顶层界面间相互访问。

此音乐APP的用户能通过以下两种前向导航之一来访问歌曲（Song）：

1. 层级间导航，从专辑（Album）移动到特定歌曲。

2. 搜索此歌曲并直接导航，跳过歌曲的上级界面（曲库和专辑）。

在歌曲（Song）界面时，用户可以用以下两种方法之一来反向导航：

1. 从所处层级向上跳到父级，此情况下专辑（Album）包含了歌曲（Song）。

2. 按时间顺序返回到搜索（Search）界面，这仅适用于用户刚从那个页面导航过来的情况。

横向导航

横向导航是指同层级间的界面移动，它允许访问不同应用程序中的对象或一个集合中同类项间的切换。

目标界面和层级

应用程序的主导航应该能够访问结构顶层的所有目标界面。具备两个及以上顶层界面时，横向导航可通过以下方式实现：导航抽屉、底部导航栏或选项卡（tabs）。

抽屉导航适用于五个或更多的顶层级目标界面，能在不同大小设备中提供一致的导航体验。

底部导航栏在移动设备上提供了2-5个顶层级目标界面访问入口。它们在不同界面上统一的位置、可见性和固定性使目标切换更为便捷。

选项卡可用于应用程序的任意层级中，能在不同屏幕大小中展示两个或更多的同类型数据集。

正确示例

当与导航抽屉（1）的顶层级导航结合使用时，选项卡（2）可为应用程序层级内增加额外的横向导航。

前向导航

前向导航方式

前向导航的目的是完成一个任务，在界面间的移动方式为以下三种之一：

• 向下在应用程序结构中访问更深层次的内容，从父级界面（更高层级）到子级界面（更低层级）

• 顺序通过一个流程或者一系列有序的界面，比如结账过程

• 直接从一个界面跳到此应用程序中的任何地方，比如从主界面跳到应用程序中深层次的界面

执行前向导航

横向导航使用的是专用导航组件，而前向导航经常会把各种不同的组件嵌入到界面内容中。

前向导航可通过以下方式来执行：

• 内容容器，如卡片、列表或图像列表

• 进入另一个页面的按钮

• 应用程序界面中的搜索

• 内容中的链接

主界面（父级）上的卡片提供每个便签内容的预览，都能在点击后导航出完整信息界面（子级）。

1. 按钮可以提供明确的功能，通过标签、位置和视觉强调来推进流程。

2. 搜索使用户能迅速访问应用程序信息层级中的任意界面。

反向导航

反向导航是指界面间的“向后移动”，它能在时间顺序上通过最近浏览的历史界面或应用程序的层级“向上”来移动用户位置。

反向时间导航

反向时间导航是指基于用户最近浏览的历史界面，以反向次序导航。它可以在单个应用程序内的界面间，或者多个应用程序间移动用户位置。例如web浏览器上的后退键就是反向时间导航的一种形式。

这种类型的导航通常由操作系统或者平台提供，每个独立的平台都会定义它的作用以及使用方式。

“后退”键使用户能够按反向时间顺序导航到最近浏览的界面。

1. 安卓导航栏后退键（A）

2. web浏览器后退键（B）

向上导航

向上导航使用户在单个应用程序层级内导航到其上一级，直至主界面或顶层级界面。例如顶部应用栏中的“向上箭头”就是向上导航的一种形式。

向上导航应该使用在应用程序所有的子界面中，并遵循平台规范。安卓和web端应该使用“Material向上动作键”，与此同时，iOS应用程序内应使用iOS导航栏对应的后退键。

1. 通过“向上”操作（A）在安卓和web应用程序中向上导航

2. 通过iOS导航栏中的“后退键”（B）在IOS平台中向上导航

注意事项

设计应用程序功能时，目标应用平台中的两种反向导航都要考虑到。为充分提升用户体验，反向导航时：

1. 将用户返回到之前的界面位置和状态，例如垂直滑动的位置，以加快信息还原和任务恢复。

2. 如果界面之前的状态不再可用，应给予明确提示，例如表格信息因隐私而被清除时。

3. 明确表示子界面与其上级界面在整个层级中的关系。例如，如果用户是直接进入应用程序中的某个子界面，应表明向上会导航到哪个父级界面。

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考