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

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

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

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

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

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

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

良好导航原则

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

• 一致性： 满足用户的期望。
• 简易性： 按需行事，不要过度。
• 明确性： 提供清楚的路径和选项。

一致性

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

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

简易性

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

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

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

明确性

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

清楚地标记目标位置，使用户知道身在何处。

常规建议

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

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

使用正确的结构

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

平面/横向

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

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

• 可以按任意顺序查看页面。
• 页面之间明显不同，并且不具有明显的父/子关系。
• 组中的页面少于 8 个。
  (当页面更多时，用户可能难以了解页面的唯一性或了解其在组中的当前位置。如果你不认为这是你的应用的问题，请继续使页面对等互连。否则，请考虑使用分层结构将页面拆分为两个或多个较小的组。)

分层

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

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

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

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

组合结构

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

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

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

使用正确的控件

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

框架

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

顶部导航

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

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

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

选项卡

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

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

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

痕迹

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

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

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

左侧导航

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

• 这些页面存在于顶层。
• 有很多导航项（多于 5 个）
• 你预期用户不会在页面之间频繁切换。

列表/细节

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

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

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

超链接

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

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

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