Windows 应用的导航设计基础知识

如果将应用看作是一个页面集合，那么导航描述的是在页面之间和页面内的移动行为。 它是用户体验的起点，也是用户查找感兴趣的内容和功能的方式。 它非常重要，但可能很难做到理想化。

你可以为导航做出大量选择。 可以：

要求用户按顺序浏览一系列页面。

提供允许用户直接跳转到任何页面的菜单。

将所有内容放在单个页面上，并提供用于查看内容的筛选机制。

尽管没有哪一个导航设计能够适合所有应用，但有一些原则和指南可帮助你为应用确定合适的设计。

良好导航原则

让我们开始了解良好导航设计的基本原则：

• 一致性： 满足用户的期望。
• 简单性： 不要做比你需要做的更多。
• 清晰： 提供清晰的路径和选项。

一致性

导航应该与用户期望一致。 通过使用用户熟悉的标准控件并遵循对图标、位置和样式的标准约定，用户将觉得导航可预测且直观。

用户希望在标准位置查找某些 UI 元素。

简易性

减少导航项将为用户简化决策。 允许轻松访问重要目标位置，隐藏不太重要的项目，将帮助用户更快地获得所需内容。

在常见的导航菜单中提供导航项。

不要使用许多导航选项使用户感到不知所措。

明确性

清晰的路径使用户能够进行逻辑导航。 让导航选项显而易见并阐明页面之间的关系可防止用户迷失。

目标已明确标记，以便用户知道目标的位置。

一般建议

现在，让我们记下我们的设计原则（一致、简单和清晰）并利用这几个原则来得出一些一般建议。

• 考虑用户的想法。 找出用户使用你的应用的典型路径，思考用户访问每个页面的目的及其下一个目标位置。
• 避免过多的导航分层。 如果超过了两个层次的导航，会提供一个痕迹导航栏，告诉用户他们在哪里，让他们快速返回。否则，你可能会让用户陷入难以离开的深层层次结构。
• 避免“弹跳”。“弹跳”会在以下情况下发生：存在相关内容，但需要用户先转到上一级，才能再次向下导航到该内容。

使用正确的结构

熟悉了一般导航原则，应该如何确定应用的结构？ 有两个一般结构：平面和分层。

平面/横向

在平面/横向结构中，页面是并排的。 你可以按任意顺序从一个页面转到另一个页面。

我们建议在以下情况下使用平面结构：

• 可以按任意顺序查看页面。
• 页面显然彼此不同，没有明显的父/子关系。
• 组中的页面少于 8 个。
  （当有更多的页面时，用户可能很难理解页面的独特性或了解他们在组中的当前位置。如果你不认为这是应用的问题，请继续让页面对等方。否则，请考虑使用分层结构将页面拆分为两个或更多个较小的组。

分层

在分层结构中，页面将组织为树状结构。 每个子页面有一个父页面，但一个父页面可以有一个或多个子页面。 若要访问子页，请浏览父页面。

分层结构适用于组织跨很多页面的复杂内容。 缺点是存在一些导航开销：结构越深入，在页面之间切换所需要的点击次数越多。

我们建议在以下情况下使用分层结构：

• 应该以特定的顺序遍历页面。
• 页面之间存在清晰的父-子关系。
• 组中有 7 个以上的页面。

组合结构

无需选择一个结构或另一个结构;许多设计良好的应用都使用这两种应用。 在应用中，对可以任何顺序查看的顶层页面使用平面结构，对具有更复杂关系的页面使用分层结构。

如果导航结构具有多个级别，我们建议对等导航元素仅链接到其当前子树中的对等方。 请考虑以下图示，该图显示了具有两个级别的导航结构：

• 在级别 1，对等导航元素应提供对页面 A、B 和 C 的访问权限。
• 在级别 2 中，A2 页面的对等导航元素应仅链接到其他 A2 页面。 它们不应链接到 C 子树中的级别 2 页。

使用正确的控件

对页面结构作出决定后，你需要决定用户如何在这些页面之间导航。 XAML 提供了各种导航控件，以帮助确保应用中的一致可靠的导航体验。

Frame

除少数例外情况，具有多个页面的应用都会使用框架。 通常，应用有一个包含框架和主导航元素（如导航显示控件）的主页面。 当用户选择页面时，框架将加载并显示此页面。

顶部导航

显示指向同级别页面的水平链接列表。 NavigationView 控件实现顶部导航模式。

在以下情况下使用顶部导航：

• 想要在屏幕上显示所有导航选项。
• 想要为应用内容提供更多空间。
• 图标无法清楚地描述导航类别。

选项卡

显示一组水平的选项卡及其各自的内容。 TabView 控件用于显示多个页面（或文档）的内容，同时为用户提供重新排列、打开或关闭选项卡的功能。

在以下情况下使用选项卡：

• 你希望用户能够动态地打开、关闭或重新排列选项卡。
• 你预料有可能会同时打开大量的选项卡。
• 你期望用户能够在应用程序中使用选项卡的窗口之间轻松移动选项卡，类似于 Microsoft Edge 这样的 Web 浏览器。

痕迹导航

显示每个更高级别的页面链接的水平列表。 痕迹导航栏控件实现顶部导航模式。

在以下情况时使用痕迹导航：

• 希望显示当前位置的路径
• 有很多级别的导航
• 你希望用户能够返回到以前的任何级别

左侧导航

显示指向顶层页面的垂直链接列表。 何时使用：

• 页面位于顶层。
• 有很多导航项（多于 5 个）
• 你不希望用户经常在页面之间切换。

列表/细节

显示项目列表。 通过选择项目，可在细节部分中显示其相应的页面。 何时使用：

• 你希望用户经常在子项之间切换。
• 你希望让用户能够对单个项目或项目组执行高级操作，例如删除或排序，并且还希望让用户查看或更新每个项目的详细信息。

列表/细节非常适合电子邮件收件箱、联系人列表和数据输入。

超链接

嵌入式导航元素可显示在页面的内容中。 其他导航元素在页面间应保持一致，而嵌入式导航元素在各页面是唯一的。

下一步：向应用添加导航代码

下一篇文章“ 实现基本导航”显示了使用控件启用应用中两个 Frame 页面之间的基本导航所需的代码。