导航（iOS Navigation）

只有在与人们预期不符的时候，他们才会注意到导航。你的工作是以一种支持你APP结构和目的方式来建构导航，但是其本身又不会引起人们注意。导航应该让人感觉自然而熟悉，但是不应该主导整个界面或者与内容争夺人们的注意力。在iOS中，有三种主要的导航方式。

分层导航（Hierarchical Navigation）

在每个屏幕都做一个选择，直到到达目的地。要去另一个目的地，则需要按步骤返回或者从头开始做出不同的选择。设置和邮件应用使用这种导航方式。

平级导航（Flat Navigation）

在多个不同的内容目录之间切换。音乐和APP Store使用这种导航方式。

内容驱动或者体验驱动的导航（Content-Driven or Experience-Driven Navigation）

在内容之间自由移动，或者内容本身就定义了导航。游戏、书籍或者其他沉浸类的APP一般使用这种导航方式。

一些APP结合了多种导航方式。例如，使用平级导航的APP可能会在每个分目录中使用分层导航。

总是提供清晰的路径。人们应该始终知道在APP中的位置，并且知道如何去到下一个目的地。不管用哪种导航方式，最重要的是在浏览内容的路径是符合逻辑、可以预测并且容易理解的。一般而言，为每个屏幕只提供一条路径（one path to each screen）。如果他们需要在不同的场景中查看同一屏内容，考虑使用动作面板、警告、弹窗、或者模态视图。

使用触摸手势来创造流畅性。让人们在界面之间跳转容易、阻力最小。例如，你要让人们从屏幕的一侧滑动（swipe）来回到上一个页面。

使用标准的导航组件。尽可能地，使用标准的空间比如页面控制器、标签栏、分段控件、表单视图、集合视图、分屏视图。用户已经熟悉了这些控件，他们会直观地知道如何使用你的APP。

在分层数据的每一层都使用导航栏。导航栏的标题可以在层级结构中展示当前的位置，而且返回按钮可以让人们很容易地回到之前的位置。

使用标签栏来展示同一级别的内容目录或功能分类。标签栏让人们不论当前处于什么位置，都可以快速且容易地在不同的分类之间切换。

在iPad上，使用分屏视图代替标签栏。分屏视图提供和标签栏同样快速的导航，并且更好地利用大屏幕的特点。

当相同类型的内容有多页时，使用页面控制器。页面控制器清晰地表明可用页面的数量，并且告诉人们当前的位置。天气APP使用页面控制器来展示不同特定地点的天气页面。

提示：分段控件和工具栏不启用导航。分段控件将内容组织成不同的类别。工具栏提供与当前内容交互的控件。

导航（MD Navigation）

了解导航

导航让用户在APP中移动。

导航的类型

导航是在APP不同屏幕之间跳转以完成任务的一种行为。它通过几种方式来实现：专用的导航组件、内容之中所嵌入的导航行为、以及平台的能供性（Affordances）。

导航方向（Navigation Directions）

基于你APP的信息架构，用户可以在以下三种导航方向之一中移动：

横向导航（Lateral navigation）。在同级的内容之间移动。APP的主导航组件应该提供可以到达层次结构中所有顶层的访问路径。

前进导航（Forward navigation）。在连续的层级、流程中的每一步或者跨应用程序的内容之间移动。前进导航将导航行为嵌入到容器（例如卡片、列表、或图片）、按钮、链接或者搜索之中。

反向导航（Reverse navigation）。在屏幕中回退，不是按照时间顺序（一个APP中或者多个APP之间）就是按照层级结构（在一个APP之中）。平台的规则决定了在一个APP中反向导航的行为是确切的。

横向导航（Lateral Navigation）

横向导航是在同一层级结构的内容之间移动。可以访问APP中不同的目的地和功能，或者在一组相关的内容之间切换。

目的地和层级结构

APP的主导航组件应该提供可以到达层次结构中所有顶层的访问路径。有两个或者更多顶层目的地的APP，可以通过导航抽屉、底部导航栏、标签页来提供横向导航。

向前导航（Forward Navigation）

向前导航的类型。

向前导航是指以下三种在屏幕之间移动以完成任务的类型之一：

• 向下（Downward）。在APP的层级结构中，向下到达更深层级的内容。从父屏幕（层级结构中较高的层次）到子屏幕（较低的层次）。

• 顺序地（Sequentially）。按流程顺序或者一系列有次序的屏幕前进，例如结账流程。

• 直接地（Directly）。直接从一个地方到APP中任意一个其它地方，例如从主屏幕跨越到APP层级结构的深处。

向前导航的实现方式。

横向导航使用各种专用的组件，向前导航经常通过各种组件嵌入到内容之中。

向前导航可以通过以下方式实现：

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

• 前进到下一目的地的按钮。

• APP内的搜索。

• 内容内的链接。

反向导航（Reverse navigation）

反向导航是指在屏幕之间向后移动。可以让用户在最近访问的屏幕历史中按时间顺序回溯，或者在APP的层级结构中向上移动。

反向时间顺序导航

反向时间顺序导航是指以相反的顺序在用户最近访问的屏幕历史中导航。可以在APP内的屏幕之间移动，也可以在多个不同APP之间穿行。例如，网页浏览器的返回按钮，就是反向时间导航的一种形式。

这种类型的导航通常由操作系统或者平台提供。各个平台定义了它的行为以及用户如何使用这些功能。

向上导航

向上导航允许用户在单一的APP层级结构中向上移动一个层级，直到APP的主页或者结构的顶层屏幕。例如，APP顶部栏中的向上箭头是一种向上导航的形式。

APP中的所有子屏幕都应该采用向上导航并且遵循平台指导。安卓和web应用应该使用MD中的向上按钮，iOS APP应该在导航栏中使用返回按钮。

注意事项

• 设计和功能应该考虑APP目标平台中的两种反向导航。在反向导航时优化用户体验。

• 让用户返回到他们之前的位置和状态，例如回到他们之前垂直滚动到的位置，更快地找回信息和恢复任务。

• 如果先前的状态已经不可用了，那么提供清晰的信息以告知用户。例如当表单中的信息为了保护隐私已经被清除的时候。

• 清晰地指出子屏幕和结构中上一级屏幕的关系。例如，如果用户直接到达了APP中的子屏幕，那么，他们应该了解他们可以向上导航到的父屏幕。

导航转换

用户在不同屏幕之间移动时会产生导航转换，例如从主屏幕到详情页。

关于导航转换

导航和动画

导航转换使用动画来指导用户在APP的两个屏幕间切换。通过表达APP的结构来帮助用户定位，使用移动效果来指明元素之间的关联关系。

例如，当一个元素扩展以填充整个屏幕时，扩展的行为表明新的页面是一个子元素。展开元素所在的页面为父元素。

层级结构

层级结构的转换让用户在层级结构中前进一级或者后退一级，同级转换让用户在同一级别的内容之间切换。

层级结构转换

层级结构的转换在用户在APP中前进或后退一级时发生。相邻的页面之间具有父子关系，父元素在层级结构中比子元素占据更高的层级位置。

父子转换

对等转换

对等转换在结构中同层内容之间切换时发生。

同级转换在共享父节点的同级元素切换时发生。顶级对等转换仅仅用于在主要目标之间进行切换。

同级转换

共享同一父节点的页面（例如在相册中的照片、文件的一部分、流程中的步骤）同时移动以加强他们之间的关系。对等的页面从一侧滑入，而兄弟屏幕则从另一侧滑出。

顶级转换

在APP的顶层，目的地通常是不同主要任务的分组（而且这些任务可能彼此之间没有关联）。这些页面的转换使用淡入淡出模式互相替换。

搜索

搜索允许用户快速地找到APP中内容。

用法

搜索允许用户在APP中快速定位内容。基本搜索让用户在文本框中输入关键词来查看相关结果。

搜搜索输入的方式可以拓展为包含历史建议、自动完成查询和语音输入的方式。

持续搜索（Persistent search）

当搜索是APP的主要焦点时，使用持续搜索。搜索文本框在搜索栏内，准备接受触发。

用法

1. 当聚焦的时候，搜索会扩展填充到整个屏幕。历史搜索建议可以在文本框下方展示。

3. 搜索结果在搜索栏下面展示。

可拓展的搜索（Expandable search）

当搜索不是APP的主要焦点时，使用可拓展的搜索。可拓展的搜索在工具栏展示一个搜索图标，而不是一个搜索文本框。

用法

2. 作为一种用户使用模式（user types），可以在搜索栏下展示历史搜索建议。

4. 搜索结果在搜索栏下方展示，并在其Z轴下方滚动。

总结

《信息架构：超越web设计》这本书里也说，信息架构是隐性的，只有在出问题的时候人们才会意识到它。好的信息架构就像空气，让人感受不到它的存在，但是一切又像呼吸那么自然。导航也是信息架构体现的一种方式，其目的就是帮助人们理解信息、找到信息。符合用户的心理模型，那么用户使用起来就会没有障碍。

iOS从信息结构的类型进行分类，也就是层级结构、平级/顺序结构、网状结构。MD从导航前进的方向维度进行分类，平移、前进、后退，从二维平面的角度来理解导航的结构。

导航决定了用户如何在内容之间穿梭，取决于我们如何组织APP的内容。导航的核心是信息的组织，符合用户心智模型，与用户场景目的相适应，让用户能快速理解、方便操作。导航的组件/工具包括全局层面，负责整体结构的内容组织与分类的栏（状态栏、导航栏、搜索栏、侧边栏、标签栏）；视图层面的内容组织（集合、列表、图像列表、分屏视图、滚动视图）；控件层面的导航控件（标签、页面指示器、进程指示器、分段控件、导航抽屉、导航轨道）。分段控件、工具栏都是针对当前页面的内容，不涉及页面之间的跳转关系，所以说不启用导航。

指导中还有一些细节，让产品更简洁清晰，让用户使用更便捷高效：

• 比如iOS中的：总是提供清晰的路径。每一个目的地只有一个路径，让人形成路径记忆，人们就会比较清晰，使用上也不会觉得混乱。通用的内容，使用临时性的面板、弹窗、模态页面等方式，让用户在不同的场景中调用。

• MD中的：在返回时，记住用户的位置和状态，让用户之前的操作没有白费。让用户可以快速地找到之前的信息，尤其是在长页面的浏览中，避免返回后还要不停的滚动/滑动，减少了用户的操作。

用户体验设计中的功能结构、流程设计、交互布局、视觉设计等，都是为了传递信息，其目的都是为了让信息能够简单、直白地传达给用户，让用户快速理解app的结构，从而知道怎么找到想要的内容/功能、怎么去使用。从整体结构而言，是按照通用的理解、一致性的表达，组织信息、设计流程。从局部功能/页面而言，是从用户的目的、场景出发，表达、组织、寻找信息。

• 表达信息：关键在于让用户理解信息的含义、结构。使用一致性的、用户熟悉的表述，使用图示化的表达形式，使用通用的模式，使用跳转之间的过渡效果都有利于信息的表达。

• 组织信息：也就是信息的结构如何组织。如何分类，关联，符合用户的心智模型，按照场景、目的，关联信息，减少用户的操作。页面之间的层级、跳转关系，页面内的布局都是组织信息的方式。

• 寻找信息：在信息之间穿梭，找到想要的信息、功能。一般是在结构中按次序移动（前进、后退、平移）。有时候根据信息之间的关联关系，会发生穿越原有结构的跳转（通过链接、按钮、搜索等方式实现）。

---

参考

Navigation - App Architecture - iOS - Human Interface Guidelines - Apple Developer

https://www.material.io/design/navigation/understanding-navigation.html