【产品方法】Material Design 之 Navigation 导航

一、了解导航

1. 导航类型

专用导航组件，或将导航行为嵌入内容以及平台功能。

2. 横向导航

相同层次结构的屏幕之间移动。

不同横向导航的比较

导航抽屉

底部导航

标签

3. 前进导航

前进导航的分类：

    在应用程序的层次结构中向下询问

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

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

前进导航的实施：

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

    前进到另一个屏幕的按钮

    在一个或多个屏幕上进行应用内搜索

    内容里的链接    

卡片

下一步

搜索

4. 反向导航

倒序导航

倒序导航是指以反向顺序浏览用户最近查看的屏幕的历史记录。它可以在一个应用程序内的多个屏幕之间或多个应用程序之间移动用户。例如，Web浏览器上的“后退”按钮是一种反向时间顺序导航。

倒序导航示例

向上导航

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

向上导航示例

注意事项

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

如果屏幕的先前状态不再可用（例如，已清除表单中的信息以保护隐私），则提供清晰的消息传递。

清楚地指示子屏幕与其在层次结构中位于其上方的屏幕的关系。例如，如果用户直接移动到您应用中的子屏幕，则他们应该能够识别可以向上导航的父屏幕。

二、导航过渡

1. 关于导航过渡

导航过渡是使用动作来指导用户在应用程序的两个屏幕之间运动。通过表达应用程序的层次结构来帮助用户定位，使用移动来指示元素之间如何相互关联。

导航过渡示例

2. 分层过渡

分层过渡是将用户在应用程序的层次结构中向上或向下移动一级。使用容器过渡，在父屏幕上，嵌入子元素，在触摸时会抬起子元素并适当位置扩展。该动作将焦点吸引到子屏幕上，同时加强父屏幕和子屏幕之间的关系。

3. 对等过渡

对等过渡发生在同级结构的屏幕之间。共享同一父对象的屏幕，会一致移动以加强彼此之间的关系。对等屏幕从一侧划入，将其同级屏幕沿相反方向移除屏幕。

三、搜索

1. 用法

可扩展为包括历史建议，查询自动完成和语音输入。

1）聚焦后，搜索体验将扩展到整个屏幕。（可选）历史搜索建议可以显示在文本字段下方。

2）用户可以键入查询或从建议中选择（如果有）。按回车键后，将提交搜索。

3）搜索结果显示在搜索栏下方。

4）要释放搜索框的焦点并消除搜索建议，用户点击向上箭头。

2. 持续搜索

当搜索是应用程序的主要焦点时，使用持续搜索。搜索文本字段显示在搜索栏的内部。

持久搜索栏没有焦点（默认）

持久的搜索栏成为焦点，下面是建议的查询卡片

3. 扩展搜索

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

1）用户点击搜索图标（在工具栏中）以将其转换为焦点搜索栏。

2）当用户输入内容时，历史搜索建议可以显示在搜索栏下方。

3）输入查询或选择建议后，按回车键将提交搜索。

4）结果出现在搜索栏下方，并在其下方滚动。

扩展搜索处于默认状态

搜索具有自动完成建议的焦点文本字段