导航使用户能够流畅地使用应用程序。

Navigation enables users to move through an app.

导航类型

导航就是通过在应用程序中的页面之间进行跳转以完成任务的行为。
它通过几种方式启用：专用导航组件，将导航行为嵌入到内容中，以及平台可供性。

Navigation is the act of moving between screens of an app to complete tasks. It’s enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances.

导航方向

Based on your app’s information architecture, a user can move in one of three navigational directions:

• Lateral navigation refers to moving between screens at the same level of hierarchy. An app’s primary navigation component should provide access to all destinations at the top level of its hierarchy.
• Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app. Forward navigation embeds navigation behavior into containers (such as cards, lists, or images), buttons, links, or by using search.
• Reverse navigation refers to moving backwards through screens either chronologically (within one app or across different apps) or hierarchically (within an app). Platform conventions determine the exact behavior of reverse navigation within an app.

根据您的应用程序的信息架构，用户可以按以下三种导航方向之一移动：

• 平级导航

平级导航是指在同一级别的屏幕之间移动。应用程序的主要导航组件应提供对其层次结构顶层所有目标的访问权限。

横向导航允许在这个音乐应用程序的信息架构的顶层屏幕之间移动。

Lateral navigation allows movement between the top-level screens of this music app’s information architecture.

• 正向导航（寻根导航）

是指在连续的层次级别，流程中的步骤或跨应用程序的屏幕之间移动。正向导航 将 导航行为 嵌入容器（如卡片，列表或图像），按钮，链接或通过使用搜索直达目标页面。

此音乐应用的用户可以通过以下两种方式 使用 前向导航 访问到 歌曲页面：

1. 从音乐专辑到特定歌曲的分层次导航；
2. 搜索歌曲并直接浏览歌曲，绕过歌曲上方层次结构中的屏幕（图书馆和专辑）。

Users of this music app can use forward navigation to access a song in one of two ways:
1. Navigating hierarchically from a music album to a particular song
2. Searching for the song and navigating directly to it, bypassing screens in the hierarchy above the song (Library and Album)

• 反向导航（溯源导航）

是指按浏览的时间顺序（在一个应用程序内或跨不同应用程序）或分层级（在应用程序内）向后翻屏幕。平台约定应用程序中反向导航的行为和结果是确定的。
从歌曲屏幕中，用户可以通过以下两种方式之一进行反向导航：

1. 在层次结构中向上的歌曲的父项，在这种情况下是包含歌曲的专辑；
2. 按照时间顺序，搜索结果屏幕，但只有当用户刚刚从该屏幕导航到歌曲搜索列表。

From a song screen, users may navigate in reverse in one of two ways:
1. Upward in the hierarchy to the song’s parent, in this case the album containing the song
2. Chronologically, to a search results screen, but only if the user just navigated to the song from that screen

平级导航

横向导航是指在同一级别的屏幕之间移动。它可以访问不同的应用程序目标和功能，或者在一组中的相关项目之间进行跳转。

Lateral navigation refers to movement between screens at the same level of hierarchy. It enables access to different app destinations and features, or pivoting between related items in a set.

Lateral navigation

Lateral navigation refers to movement between screens at the same level of hierarchy. It enables access to different app destinations and features, or pivoting between related items in a set.

目的地与层级

应用程序的主要导航组件应提供对其层次结构顶层所有目标的访问权限。具有两个或更多顶级目标的应用可以通过抽屉导航、底部导航栏以及选项卡（tab 页）提供横向导航。

An app’s primary navigation component should provide access to all destinations at the top level of its hierarchy. Apps with two or more top-level destinations can provide lateral navigation through a navigation drawer, bottom navigation bar, or tabs.

抽屉导航 适用于五个或更多顶级目的地，并可跨设备尺寸使用，以获得一致的导航体验。

Navigation drawers are appropriate for five or more top-level destinations, and can be used across device sizes for a consistent navigation experience.

底部导航栏可以访问移动设备上的2-5个平级目的地。它们的位置、可视性和屏幕间的持久性允许在目的地之间快速旋转。
Bottom navigation bars provide access to 3-5 top-level destinations on mobile devices. Their location, visibility, and persistence across screens allow quick pivoting between destinations.

可以在应用程序层次结构的任何级别使用 tab 页，以跨屏幕大小呈现两个或更多同级数据集。
Tabs can be used at any level of an app’s hierarchy to present two or more peer sets of data across screen sizes.

与导航抽屉（1）等顶级导航组件配对使用时，选项卡（2）可以在应用程序的层级中启用额外的横向导航。

Do
Tabs (2) can enable additional lateral navigation within an app’s hierarchy when paired with a top-level navigation component like a navigation drawer (1).

正向导航

正向导航方法

向前导航 指的是页面之间利用以下三种跳转来完成任务：

• 向下寻根

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

• 按部就班

依次通过一个流程或一个有序的屏幕序列，例如结账过程。

• 直接跳转

直接从一个屏幕到应用程序中的任何其他屏幕，例如从主屏幕到应用程序层次结构中的深度屏幕。

Forward navigation refers to one of three types of movement between screens to complete a task:

• Downward in an app’s hierarchy to access deeper content, from a parent screen (higher level of hierarchy) to a child screen (lower level)
• Sequentially through a flow, or an ordered sequence of screens, such as a checkout process
• Directly from one screen to any other in the app, such as from a home screen to a screen deep in an app’s hierarchy

正向导航的应用

尽管横向导航使用专用导航组件，但正向导航通常通过各种组件嵌入到屏幕内容中。

向前导航可以使用以下方式实现：

• 内容容器：卡片，列表或图像列表
• 按钮：通过按钮跳转到另一个页面
• 搜索：在一个或多个屏幕上进行应用内进行搜索
• 链接：通过点击内容中的链接来实现跳转

While lateral navigation uses dedicated navigation components, forward navigation is often embedded into a screen’s content through a variety of components.

Forward navigation can be implemented using:

• Content containers such as cards, lists, or image lists
• Buttons that advance to another screen
• In-app search on one or more screens
• Links within content

主屏幕上的卡片（父级）提供每个笔记内容的预览，并可以点击跳转至有完整内容的笔记（子级）。

The cards on the home screen (parent) provide a preview of each note’s content and can be tapped to navigate to the full note (child).

1. 按钮可以提供一个清晰的线索，通过其标签文本、位置和视觉重点来推进任务流
2. 搜索允许用户快速访问应用信息架构中的任何位置

Buttons can provide a clear affordance to advance in a flow through their label, placement, and visual emphasis.

Search allows users to quickly access screens anywhere within an app’s information architecture.

反向导航

反向导航是指屏幕之间的后退回溯。它可以将用户按照时间顺序移动到最近的屏幕历史记录中，或者通过应用程序的层次结构向上回溯。

Reverse navigation refers to backward movement between screens. It can move users chronologicallythrough their recent screen history, or upwards through an app’s hierarchy.

按时间顺序回溯导航

按时间顺序回溯是指通过用户最近查看的屏幕的历史以相反的顺序导航。它可以在应用内的屏幕之间或跨多个应用来进行跳转。
例如，Web 浏览器上的“后退”按钮是反向时间顺序导航的一种形式。
这种类型的导航通常由操作系统或平台提供。各个平台定义它的行为方式以及用户如何访问该功能。

Reverse chronological navigation refers to navigating in reverse order through a user’s history of recently viewed screens. It can move users between screens within an app or across multiple apps. For example, the Back button on a web browser is a form of reverse chronological navigation.

This type of navigation is typically provided by the operating system or platform. Individual platforms define how it behaves and how users can access that functionality.

后退按钮允许用户按照时间倒序顺序浏览最近查看的屏幕。

• Android 导航栏中的后退按钮（A）
• Web 浏览器中的后退按钮（B）

The Back button allows users to navigate recently viewed screens in reverse chronological order.
1. The Back button (A) in the Android navigation bar
2. The Back button (B) in a web browser

向上导航

向上导航 允许用户在单个应用程序的按照层次结构的规律跳转到当前页面的上一个层级，直到达到应用程序的主页或 顶层页面。

例如，顶部应用栏中的向上箭头是向上反向导航的一种形式。

向上导航 应针对应用中的所有子级屏幕执行，并遵循平台指南。Android和网络应用程序应该使用 Material Up 操作，而iOS应用程序应该使用iOS导航栏中的后退按钮。

Upward navigation allows users to navigate one level upwards within a single app’s hierarchy, until the app’s home or top-level screen is reached. For example, the Up arrow in a top app bar is a form of upwards reverse navigation.

Upward navigation should be implemented for all child screens in an app and follow platform guidance. Android and web apps should use the Material Up action, while iOS apps should use the back button within an iOS Navigation Bar.

1. 通过后退按钮（A）可以在 Android 和 Web 应用上进行向上导航
2. 通过 iOS 导航栏中的后退按钮（B）可以在iOS上向上导航

1. Upward navigation is possible on Android and web apps through an Up action (A)
   2. Upward navigation is possible on iOS through the back button (B) in an iOS Navigation Bar

注意事项

应用的设计和功能应该考虑到应用目标平台中的两种反向导航。

在涉及到反向导航时一定要考虑到用户体验：

• 快速回滚

让用户能够快速返回到之前的屏幕位置和状态，例如其垂直滚动位置，以加快信息调用和任务恢复。

• 失效提醒

如果屏幕的先前状态不可用，例如当表单中的信息因为隐私保护已被清除，请提供清晰易读的提醒。

• 层级清晰

清楚地指出子级屏幕与父级屏幕之间的关系。例如，如果用户通过其它的方式直接跳转至应用中的子屏幕，设计者应该能够提供一定的信息来帮助用户识别他们可以向上导航的父级屏幕。

The design and functionality of your app should account for both kinds of reverse navigation in your app’s target platforms.

To optimize a user’s experience when navigating in reverse:

• Return users to their prior screen position and state, such as their vertical scroll position, to speed up information recall and task resumption.
• Provide clear messaging if a screen’s prior state is no longer available, such as when information from a form has been cleared for privacy.
• Clearly indicate child screens’ relationship with screens above them in the hierarchy. For example, if a user moves directly to a child screen in your app, they should be able to identify the parent screen to which they can navigate upward.