本文讲的是［译］安卓界面导航初识，

原文地址：A Primer on Android navigation

原文作者：Liam Spradlin

译文出自：掘金翻译计划

本文永久链接：github.com/xitu/gold-m…

译者：horizon13th

校对者：SumiMakito, laiyun90

安卓界面导航初识

界面中任何引领用户跳转于页面之间的媒介 —— 这便是导航

当你的应用中的两个不同页面产生联系时，导航便由此而生。跳转链接（不论从哪跳到哪）便是页面间传递用户的媒介。创建导航相对容易，但想要把导航做好并不总是那么简单。这篇博文里，我们探讨一下安卓系统下最常见的导航模式，看看它们是怎样影响系统布局，以及如何为你的应用界面，用户量身打造导航栏。

️ 定义导航

在深入探索导航模式前，让我们先退后一步回到起点，做一个小练习，回想一下你的应用中的导航。

在 Material Design 网站中有许多优秀设计规范介绍了如何着手定义导航结构。但本文中我们把所有的理论归结为简单的两点：

基于任务和内容构建导航
基于用户构建导航

基于任务和内容构建导航意味着，将任务分步骤拆分。设想用户在完成任务的过程中应该做什么看到什么，怎样处理步骤之间的关系，决定哪一步更重要，哪些步骤是并列关系，哪些步骤是包含关系，哪些步骤常见或不常见。

至于基于用户构建导航，只有真正使用过你设计的界面的用户才能告诉你这适不适合他们。你所设计的导航最好能帮助他们更好地使用应用，带给他们最大化的便利。

当你搞清楚在你的应用中，多个任务怎样协同工作的，便可以着手设计。用户在完成任务的过程中可以看到什么内容，在什么时候，以什么方式来呈现。这个小练习能够让你从根本上思考什么样的设计模式能更好地服务于你的 app 体验。

分解任务行为以设计导航更多内容，详见 Material Design。

标签页（Tabs）

定义

标签页提供了在相同父页面场景下，同级页面间的快速导航。所有的选项卡是位于同一平面的，这意味着，他们可以放置在同一可扩展的状态栏上，也可以相互改变位置。

标签页是很好的页面内容过滤、分段、分级工具。但是对于毫无关联的内容，或是层级化结构内容，也许其它的导航模式会更合适。

设计标签页的更多细节参考此处，更多实现参考此处。

标签页实例

Play Music 应用，Google+ 应用，Play Newsstand 应用

Play Music 应用（左）使用标签页增加音乐库的探索深度，以不同的方式组织大致相同的内容，为用户定制不同的探索方法。

Google+ 应用（中）使用标签页将收藏列表分块，每个类别下都是深层异构的内容。

Play Newsstand 应用（右）在媒体库页面使用标签页来呈现相同信息的不同集合－其中一个选项卡呈现一个整体的多层次的集合，另一个选项卡显示浓缩集合的大标题。

访问记录

标签页一般为同一级别，因此它们的布局在相同的父级页面下。两个标签页间的切换不需要为系统后退键或应用的返回键新建历史记录。

侧边栏／抽屉式导航栏（Nav drawers）

定义

侧边栏（抽屉式导航栏）可以理解为附于页面左部边缘的垂直面板。设计者可以将侧边栏设计在屏幕外或屏幕内可见，持续存在或者不用时隐藏，但这些不同的设计往往有相同的特点。

通常侧边栏会列出一些同级的父级页面们，尤其用于放置较重要的页面，又例如一些“设置”，“帮助”这类特殊页面。

如果你将侧边栏和另一个导航控件相组合——底部导航栏，那么侧边栏可以放置一些二级链接，或者底部导航不能直接到达的重要链接。

当使用侧边栏时，要注意链接类别——放过多的链接，或展示过多不同级别的链接，都会让应用的层次结构显得混乱。

还有需要注意的一点是界面的可视性。侧边栏可以很好的帮助应用减少可视性，压缩与主要内容无关的导航区。但是，这也可能成为应用的不足，取决于导航栏的目标链接在具体场景中如何呈现和被访问。

设计侧边栏的更多细节参考此处，更多实现参考此处。

侧边栏实例

Play Store 应用，Google Camera 应用，Inbox 应用

Play Store 应用（左上）使用侧边栏展示应用商店的不同区域，每一栏都链接到不同区域的内容。

Google Camera（中上）使用侧边栏列出其它支持功能——大部分是提升照相体验的其他应用外链，当然了还有相机设置。

Inbox（右上）邮箱应用使用了伸长版的侧边栏。顶端是电子邮箱的主要功能链接，用于展示不同类别的邮件，侧边栏的下方则为一些支持工具和扩展包。由于电子邮箱的侧边栏非常的长，“设置”和“帮助反馈”按钮固定在侧边栏底端，方便用户随时访问。

访问记录

当应用程序有明显的“返回首页”功能时，侧边栏应当为系统创建“返回首页”的功能。例如，在 Play Store 应用商店中，点击“返回首页”按钮回到页面“应用程序及游戏”，展示给用户的是所有类别的精选应用。因而 Play Store 应用创建了从其它页面到主页面的返回功能。

同样的，在使用 Google Camera 相机应用时，当用户点击返回键时，返回到相机的默认拍摄界面。

“开始导航” 圆形按钮增强主地图功能。

谷歌地图（如上）也用了相同的方案，侧边栏的选项要么是在地图上加层，要么增强主地图提供辅助功能。所以当用户点击“返回”按钮时回到的也是默认地图界面。

你可能会注意到，随着你进入其他页面，Play Store 谷歌商店（上图）工具栏中的侧边栏图标并未改变。这是因为侧边栏的按钮在应用的层级结构中为同一级别。由于用户并没有深入到子级页面（例如，点击“音乐与视频”），因而侧边栏的图标并不会改变成返回上一级的样式。用户始终在最顶级的页面，只不过是在同级页面中切换而已。

底部导航（Bottom nav）

定义

在安卓系统中，底部导航控件通常由三到五个目的地按钮构成。重要的一点是，“更多”按钮并不能看作一个目的地，更不是菜单或对话框。

当你的应用只有有限个数的顶级页面需要被访问时，使用底部导航栏最合适（底部导航千万不能滚动）。底栏最主要的优点在于，可以从子页面迅速跳入毫无关联的顶级页面，而无需先导航到当前页面的父页面。

值得注意的是，尽管底部导航的链接应当在应用中有相同的层级结构，但是他们和标签页截然不同，也绝不能以标签页的形式展现。

切换底部栏，暗示着两个面板是毫无关系的。每个面板是孤立的父节点，而不是其它面板的兄弟节点。如果你的应用中，两个面板有相同内容或者相同的父节点，也许用标签页是更好的选择。

设计底部导航的更多细节参考此处，更多实现参考此处。

底部导航实例

Google Photos 相册应用

除了底部导航的基本定义，还有一些有意思的点值得考虑。也许最复杂的问题就是：底部导航栏是否要持续存在？答案和许多设计决策一样，那就是：“看情况”。

通常底部导航在整个应用中是持续存在的，但在某些情况下，导航栏是隐藏的状态。例如用户使用的应用只有很浅的层次结构，像收发短信这类单一功能的页面，又或者应用想给用户更深刻的用户体验，那底部导航或许隐藏起来更好。

在 Google Photos 相册应用中（上图），底部导航在相册中是隐藏的。相册在整个层级结构中处于第二层，比相册更深一层只有查看相片，打开它时从相册页面顶部展现。这种实现方式满足了隐藏底边导航以达到“唯一目的”的规则。当用户进入程序最顶层时，为其创造沉浸式体验。

其它考虑

如果底部导航在整个应用中持续存在，那么下一个需要考虑的问题便是底部导航的跳转逻辑。假设一个用户在深层层级结构中进行跳转，从一个子页面切换到另一个子页面，再点击返回跳转到前一个子页面，那他到底应该看到哪一个页面呢？父级页面？还是他停留过的子级页面？

这个功能应该取决于应用的使用者。一般来说，点击底部按钮应该直接跳转到关联页面，而不是更深层的页面。不过话说回来还是老问题，看情况。

访问记录

底部导航栏的点按不应该为系统“返回键”创建历史记录。不过层级结构中进入深层级可以为系统“返回键”创造系统历史记录，为应用创建“返回上级”访问记录，但是底部栏其本身便是一种具有记录历史特性的导航结构。

点按底部导航按钮，应当直接跳转到关联页面。用户再次点击按钮应当跳转到该栏的父页面，或者当用户以及在父级页面时刷新页面。

上下文导航（In-context navigation）

定义

上下文导航由所有非上述导航控件间的交互组成。这些控件包括像按钮、方块、卡片，还有其它应用内跳转的内容。

通常，上下文导航和常用导航形式相比，更多是非线性操作 —— 交互行为使用户在层级结构，离散型结构之间任意跳转，甚至跳转到应用之外。

设计上下文导航的更多细节参考此处。

上下文导航实例

时钟应用，Google 搜索应用，Google 日历应用

时钟应用（左上）设计的很巧妙，有一个浮动操作按钮；Google 搜索应用（中上）主要靠下部卡片维护信息；Google 日历（右上）给每一个日历时间创建块状条目。

在时钟应用里（左上）通过点击浮动按钮，即刻查看世界时钟；在 Google 搜索应用（中上）里点击天气卡片，搜索引擎立马为你展示“天气”的搜索结果；Google 日历（右上）点击块状条目进入事件详情页。

我们也能看出来，这些截图展现了上下文导航给用户带来不一样的跳转体验。时钟应用里，用户进入应用的子级页面；Google 搜索应用使用卡片以增强主屏幕，而 Google 日历是点击打开全屏窗口。

访问记录

对于上下文导航，并没有对访问记录的硬性规定。访问记录的创建与否完全取决于使用什么形式的上下文导航，还有用户通过导航要去哪里。为了以防万一，在某些情况里应用创建什么类型的历史记录并不明确，设计者最好了解下，在通常情况点击返回键和向上键设置会产生什么操作。

↖️ 向上键、返回键、关闭键（Up, back, and close buttons）

返回键，向上键，关闭键这三个按键在安卓用户界面里都非常重要，但却常常被理解错误。实际上，从用户体验的角度，三个按钮都很简单，只要熟记下面的几条规则，保证再也不会陷入困惑。

向上键往往是当用户沿着应用层级结构返回上级菜单时使用到，常出现于应用工具栏。点击向上键，窗口延时间先后顺序后退直到用户到达最顶级父页面。由于顶级父页面无法再往上跳出应用，向上键不应该出现在顶极父页面中。
返回键存在于系统底部导航栏。它的导航作用是沿时间顺序后退，而非应用页面的层级关系，哪怕前一个时间节点是在其它应用中。它还用于关闭临时页面元素，比如对话框，底部表单等层叠面板。
关闭键通常用于关闭界面临时层，或者放弃修改全屏对话框。例如 Google 日历事件详情页（下图）。全屏日历事件详情页面属于很明显是临时页，设计时使用关闭键。Google 邮箱应用（下图）中，从收件箱到邮件正文的渐进效果显示，邮件正文是收件箱页面的叠加层，因此使用关闭键较合适。而 Gmail 应用中（下图）邮件正文是作为一个独立层存在于应用中的，因此返回键更合适。