Windows应用的导航基础知识 - Windows apps

如果将应用视为页面集合，导航将描述在页面之间和页面内移动的行为。这是用户体验的起点，用户如何找到他们感兴趣的内容和功能。这非常重要，但要做到正确可能很困难。

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

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

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

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

虽然没有适用于每个应用的单个导航设计，但有原则和准则可帮助你确定适合你的应用的设计。

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

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

一致性

导航应与用户期望一致。使用用户熟悉的标准控件以及遵循图标、位置和样式的标准约定将使导航可预测且直观。

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

简易性

更少的导航项简化了用户的决策。提供对重要目标的轻松访问并隐藏不太重要的项目将有助于用户更快地到达所需位置。

在熟悉的导航菜单中显示导航项。

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

Clarity

清晰路径可让用户进行合理的导航。使导航选项变得明显，并阐明页面之间的关系应阻止用户丢失。

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

一般建议

现在，让我们采用我们的设计原则-一致性、简单性和清晰度，并使用这些原则来提出一些一般建议。

考虑你的用户。跟踪他们可能通过你的应用采用的典型路径，并针对每个页面，考虑用户为什么在那里以及他们可能想要去哪里。
避免深度导航层次结构。如果导航超过两级，请提供痕迹导航栏，显示用户所在位置并允许他们快速返回。否则，你有可能将用户困在深层层次结构中，使他们难以离开。
避免“弹跳”。“弹跳”会在以下情况下发生：存在相关内容，但需要用户先转到上一级，才能再次向下导航到该内容。

使用正确的结构

熟悉一般导航原则后，应如何构建应用？有两个常规结构：平面和层次结构。

平面/横向

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

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

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

分层

在分层结构中，页面组织成类似树的结构。每个子页都有一个父页面，但父页可以有一个或多个子页。若要访问子页面，请通过父页面。

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

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

页面应按特定顺序遍历。
页面之间存在明确的父子关系。
组内页面数超过7页。

组合结构

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

如果导航结构有多个级别，我们建议同级导航元素只链接到其当前子树中的同级元素。请考虑相邻的插图，该图显示了具有两个级别的导航结构：

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

使用正确的控件

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

Frame

很少有例外，任何具有多个页面的应用都使用框架。通常，应用有一个主页，其中包含框架和主要导航元素，例如导航视图控件。当用户选择页面时，框架将加载并显示它。

顶部导航

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

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

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

标签

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

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

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

面包屑

显示指向每个较高级别的页面的链接的水平列表。 BreadcrumbBar 控件实现痕迹导航模式。

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

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

左侧导航

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

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

列表/详细信息

显示项列表。选择某个项会在详细信息部分显示其对应的页面。何时使用：

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

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

链接

嵌入的导航元素可以显示在页面的内容中。与其他导航元素不同，这些元素应在整个页面中保持一致，内容嵌入的导航元素在页面之间是唯一的。

如果选择提供自己的后台堆栈导航，体验应与其他应用保持一致。建议遵循以下导航操作模式：

导航操作	添加到导航历史记录？
页到页，不同的对等组	是的在此图中，用户从应用的级别 1 导航到级别 2，并且跨对等组，因此该导航将添加到导航历史记录。在下一个图中，用户在相同层级的两个对等组之间导航，再次跨越对等组，以便将该导航记录到导航历史中。
页到页，相同的对等组，没有屏幕导航元素用户通过同一对等组从一个页面导航到另一个页面。没有提供指向这两个页面的直接导航的屏幕导航元素（如 NavigationView）。	是的在下图中，用户在同一对等组中的两个页面之间导航，应将导航添加到导航历史记录中。
页到页，相同的对等组，带有屏幕导航元素用户从一个页面导航到同一对等组中的另一个页面。这两个页面都显示在同一导航元素中，例如 NavigationView。	这取决于是的，添加到导航历史记录中，但有两个显著的例外情况。如果希望应用的用户经常在对等组中的页面之间切换，或者希望保留导航层次结构，请不要添加到导航历史记录。在这种情况下，当用户按下后退时，将在用户导航到当前对等组之前返回到上一个页面。
显示暂时性 UI 该应用显示弹出窗口或子窗口，例如对话框、初始屏幕或屏幕键盘，或者应用进入特殊模式，例如多选模式。	否当用户按下后退按钮时，消除暂时性 UI（隐藏屏幕键盘、取消对话框等），并返回到生成暂时性 UI 的页面。
枚举项应用显示屏幕上项的内容，例如列表/详细信息列表中的选定项的详细信息。	否枚举项目与在对等组内导航类似。当用户按下后退按钮时，导航到当前页之前具有项目列举的页面。