Material Design 基础 - 导航

1. 说明

导航允许用户在应用程序中移动。

1.1. 导航类型

导航是在应用程序的屏幕之间移动以完成任务的行为。它是通过几种方式实现的：专用导航组件、将导航行为嵌入内容以及平台功能。

1.2. 航行方向

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

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

• Forward navigation指的是在连续层次、流程中的步骤或应用程序之间的屏幕之间移动。正向导航将导航行为嵌入容器（如卡片、列表或图像）、按钮、链接或使用搜索。

• Reverse navigation指的是按时间顺序（在一个应用程序内或跨不同应用程序）或层次结构（在一个应用程序内）向后移动屏幕。平台约定决定了应用程序中反向导航的确切行为。

1.3. 侧边导航(Lateral navigation)

Lateral navigation是指在同一层级的屏幕之间移动。它可以访问不同的应用目的地和功能，或在一组相关项目之间旋转。

1.4. Destinations and hierarchy

应用程序的主要导航组件应提供对其层次结构顶层所有目的地的访问。具有两个或多个顶级目的地的应用程序可以通过导航抽屉、底部导航栏或选项卡提供Lateral navigation。

• 导航抽屉适用于五个或五个以上的顶级目的地，可以跨设备大小使用，以获得一致的导航体验。

• 底部导航栏提供了对移动设备上3-5个顶级目的地的访问。它们在屏幕上的位置、可见性和持久性允许在目的地之间快速旋转。

• TAB可用于应用程序层次结构的任何级别，以跨屏幕大小显示两个或多个对等数据集。

• 当tabs与顶级导航组件（如导航抽屉）配对使用时，tabs可以在应用的层次结构中启用额外的横向导航。

1.5. 前向导航(Forward navigation)

前向导航指的是在屏幕之间完成任务的三种移动方式之一：
在应用程序的层次结构中向下，以访问更深层次的内容，从父屏幕（层次结构的较高级别）到子屏幕（层次结构的较低级别）
顺序地通过一个流，或一系列有序的屏幕，如结账过程
直接从应用程序中的一个屏幕到任何其他屏幕，例如从主屏幕到应用程序层次结构中的深层屏幕

1.5.1. 实现前向导航

Lateral navigation使用专用的导航组件，而正向导航通常通过各种组件嵌入到屏幕内容中。
前向导航可通过以下方式实现：
内容容器，如卡片、列表或图像列表
前进到另一个屏幕的按钮
在一个或多个屏幕上进行应用内搜索
内容中的链接

1.6. 反向导航(Reverse navigation)

反向导航指屏幕之间的向后移动。它可以按用户最近的屏幕历史记录的时间顺序移动，或向上移动应用程序的层次结构。

1.6.1. 逆时间导航(Reverse chronological navigation)

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

1.6.2. 向上导航(Upward navigation)

向上导航允许用户在单个应用的层次结构中向上导航一个级别，直到到达应用的主屏幕或顶级屏幕。例如，顶部应用栏中的向上箭头是向上反向导航的一种形式。

应为应用中的所有子屏幕实现向上导航，并遵循平台指南。Android 和 Web 应用应使用“Material Up”操作，而 iOS 应用应使用 iOS 导航栏中的后退按钮。

1.6.3. 考虑

应用的设计和功能应考虑应用目标平台中的两种反向导航。要优化用户反向导航时的体验， 请执行以下操作：

• 将用户返回到其先前的屏幕位置和状态（如垂直滚动位置），以加快信息调用和任务恢复。
• 如果屏幕的先前状态不再可用，例如，出于隐私目的清除了表单中的信息，则提供清晰的消息。
• 在层次结构中，清楚地指示子屏幕与其上方屏幕的关系。例如，如果用户直接移动到应用中的子屏幕，他们应该能够识别他们可以向上导航到的父屏幕。

2. 导航过渡

当用户在屏幕之间移动（如从主屏幕移动到详细信息屏幕）时，会发生导航过渡。

2.1. 关于导航过渡

2.1.1. 导航和运动

导航过渡使用运动在应用中的两个屏幕之间引导用户。它们通过表达应用的层次结构来帮助用户定位自己，使用移动来指示元素之间的相互关系。

例如，当元素展开以填充整个屏幕时，展开行为表示新屏幕是子元素。它从中展开的屏幕是其父元素。

2.1.2. 层次结构

层次转换将用户在应用程序的层次结构中向上或向下移动一级，而对等转换将用户移动到同级（层次相同的屏幕）之间。

2.1.2.1. 层次转换

层次过渡反映用户在应用中向上或向下移动一个级别。彼此相邻级别的屏幕彼此具有父级和子级关系，其中父级位于比其子级更高的层次结构级别。

2.1.2.2. 父子转换

在父屏幕中，嵌入的子元素在触摸时抬起，并使用容器转换过渡模式就地展开。该运动既将焦点吸引到子屏幕（这是交互的目的地），又加强了父屏幕和子屏幕之间的关系。

2.1.2.3. 同级转换

Peer transitions 发生在同一层级的屏幕之间。
同级转换发生在共享父级的对等方之间，而顶级对等方转换仅用于在主要目的地之间切换。

2.1.2.4. Sibling transitions

共享同一父级的屏幕（如相册中的照片、个人资料的各个部分或流程中的步骤）协同移动，以加强它们之间的关系。对等屏幕从一侧滑入，而其同级屏幕则从相反的方向移出屏幕。

2.1.3. 顶层过渡

在应用的顶层，目标通常分为主要任务（并且任务之间可能彼此不相关）。这些屏幕使用淡入淡出过渡模式就地过渡。

3. 搜索

搜索允许用户快速查找应用内容。

3.1. 用法

搜索允许用户在应用中快速查找内容。基本搜索使用户能够将查询输入到搜索文本字段中以查看相关结果。

可以扩展搜索查询输入法，以包括历史建议、查询自动完成和语音输入。

3.2. 持久搜索

当搜索是应用的主要焦点时，请使用持久搜索。搜索文本字段显示在搜索栏内，随时可以接收焦点。

3.2.1. 持久搜索用法

当用户聚焦在搜索输入框时，搜索体验将扩展以填充整个屏幕。（可选）历史搜索建议可以显示在文本字段下方。
用户可以键入查询或从建议中进行选择。按返回后，将提交搜索。
搜索结果显示在搜索栏下方。
若要从搜索框中释放焦点并关闭搜索建议，用户点击向上箭头。

3.3. 可扩展搜索

当搜索不是应用的主要焦点时，请使用展开搜索。可扩展搜索在工具栏中显示搜索图标，而不是打开的搜索文本框。

3.3.1. 可扩展搜索用法

用户点击搜索图标（在工具栏中）以将其转换为重点搜索栏。
当用户键入时，历史搜索建议可以显示在搜索栏下方。
输入查询或选择建议后，按 Return 键将提交搜索。
结果显示在搜索栏下方，并在搜索栏下方滚动。

显示结果时，搜索文本字段仍然可见，但不在焦点中。点击向上箭头可从搜索中释放焦点，关闭建议和屏幕键盘，并将工具栏返回到其原始状态。

4. Material Design 系列文章

最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客空间-Material Design

5. 参考文档

Understanding navigation
Navigation transitions
Search