UWP应用导航设计基础

huuhghhgyg 11月 17, 2017

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

重要的API：Frame，Pivot类，NavigationView类

部分难以正确理解的原因是，作为应用程序设计师，我们有大量的选择。如果我们在设计一本书，我们的选择将会很简单：章节的顺序是什么。通过一个应用程序，我们可以创建一个模仿一本书的导航体验，要求用户按顺序浏览一系列的页面。或者我们可以提供一个菜单，让用户直接跳转到他或她想要的任何页面 - 但是如果页面太多，我们可能会用选择用信息淹没用户。因此我们可以将所有内容放在一个页面上，并提供查看内容的过滤机制。
虽然没有单一的导航设计适用于每个应用程序，但有一套原则和指导方针可以帮助您找出适合您的应用程序的设计。

良好的设计原则

让我们从研究已经显示的基本原则开始，这些原则是良好的导航设计的基础：

保持一致：满足用户期望。
保持简单：不要做比你需要的更多。
保持简洁：不要让导航功能以用户的方式进入。

始终如一

导航应该符合用户的期望，依靠图标，位置和样式的标准惯例。
例如，在下图中，您可以看到用户通常希望找到功能的位置，如导航窗格和命令栏。不同的设备系列有自己的导航元素约定。例如，导航窗格通常出现在平板电脑屏幕的左侧，而最上面的是移动设备。

把事情简单化

导航设计的另一个重要因素是Hick-Hyman定律，经常引用航海选择。这条法律鼓励我们在菜单中添加更少的选项。用户选择越多，与用户的交互就越慢，特别是当用户在探索新应用时。

在左侧，注意用户选择的选项较少，而在右侧有几个选项。希克 - 海曼定律指出左边的菜单将更容易让用户理解和利用。

保持简洁

导航的最后一个关键特征是简洁干净的交互，它指的是用户通过各种上下文进行导航的物理方式。这是把自己放在用户位置的一个领域将通知您的设计。试着了解你的用户和用户们的行为。例如，如果你正在设计一个烹饪应用程序，你可以考虑提供一个购物清单和一个计时器的方便用户。

三个一般规则

现在，让我们采取我们的设计原则 -一致性，简单性和干净的交互 -并使用它们来提出一些通用规则。就像任何经验法则一样，将它们作为起点，并根据需要进行调整。

1.避免深层导航层次结构。多少级别的导航最适合您的用户？顶级导航和下面的一个级别通常是很多。如果你超越了三级导航，那么你打破了简单的原则。更糟糕的是，您可能会将用户置于深层次结构中，难以离开。

2.避免太多的导航选项。每层有三到六个导航元素是最常见的。如果你的导航需要比这更多，尤其是在你的层次结构的顶层，那么你可能会考虑把你的应用分成多个应用，因为你可能在一个地方做的太多了。应用程序中导航元素太多通常会导致不一致和不相关的目标。

3.避免“弹跳”。当有相关的内容时会发生Pogo-sticking，但是导航到这个需要用户上升一个级别然后再下降。Pogo-sticking违反了干净互动的原则，要求不必要的点击或交互来实现一个明显的目标 - 在这种情况下，查看一系列相关内容。（这个规则的例外是在搜索和浏览中，在这里pogo-sticking可能是提供所需多样性和深度的唯一方法。）

使用正确的结构

现在您已经熟悉了一般的导航原则和规则，现在是时候做出所有导航决策中最重要的事情了：应该如何构建您的应用程序？有两个一般结构：平面和层次结构。

平/外侧

在平面/侧面结构中，页面并排存在。您可以按任何顺序从一页到另一页。

平面结构有许多好处：简单易懂，让用户直接跳转到特定页面，而不必通过中间页面进行浏览。一般来说，平面结构很棒- 但是它们并不适用于每个应用程序。如果你的应用程序有很多的页面，一个平面的列表可以压倒一切。如果页面需要按照特定顺序查看，则平面结构不起作用。

我们建议使用扁平结构：

页面可以按任意顺序查看。
这些页面彼此明显不同，并且没有明显的父母/子女关系。
组中的页数少于8页。
当组中的页面数超过7页时，用户可能难以理解页面的独特性或了解其在组内的当前位置。如果你不认为这是你的应用程序的问题，继续前进，使页面同行。否则，请考虑使用分层结构将页面分成两个或更多个较小的组。（集线器控制可以帮助您将网页分组。

分级

在分层结构中，页面被组织成树状结构。每个子页面只有一个父页面，但父页面可以有一个或多个子页面。要访问子页面，您需要通过父级。

分层结构适用于组织跨越大量页面的复杂内容，或者以特定顺序查看页面。缺点是分层页面引入了一些导航开销：结构越深，用户从页面到页面所需的点击越多。

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

您希望用户以特定顺序遍历页面。安排层次结构执行该顺序。
在一个页面和组中的其他页面之间存在明确的亲子关系。
小组中有7页以上。
当组中的页面数超过7页时，用户可能难以理解页面的独特性或了解其在组内的当前位置。如果你不认为这是你的应用程序的问题，继续前进，使页面同行。否则，请考虑使用分层结构将页面分成两个或更多个较小的组。（集线器控制可以帮助您将网页分组。

组合结构

你没有选择一个结构或另一个结构; 许多精心设计的应用程序使用平面和层次结构：

这些应用程序对可以按任何顺序查看的顶级页面使用平面结构，对于具有更复杂关系的页面使用分层结构。

如果您的导航结构具有多个级别，我们建议对等导航元素只链接到当前子树内的对等点。请考虑下面的插图，其中显示了具有三个级别的导航结构：

对于级别1，对等导航元素应提供对页面A，B，C和D的访问。
在级别2，A2页面的点对点导航元素应该只链接到其他A2页面。他们不应该链接到C子树中的二级页面。

使用正确的控件

一旦你决定了一个页面结构，你需要决定用户如何浏览这些页面。UWP提供了各种导航控件来帮助您。由于这些控件适用于每个UWP应用程序，因此使用这些控件有助于确保一致可靠的导航体验。

控制	描述
帧	除少数例外，任何具有多个页面的应用程序都使用该框架。在典型的设置中，应用程序有一个主页面，其中包含框架和主导航元素，如导航视图控件。当用户选择一个页面时，该框架加载并显示它。
选项卡和主键	显示相同级别页面的链接列表。在以下情况下使用标签/枢轴：有2-5页。（当页面数量超过5页时，您可以使用标签/支点，但可能难以将所有标签/支点放在屏幕上。）您希望用户经常在页面之间切换。
导航视图	显示顶层页面的链接列表。以下情况下使用导航窗格：您不希望用户经常在页面之间切换。您希望以减慢导航操作为代价节省空间。页面存在于顶层。
主/细节	显示项目汇总的列表（主视图）。选择一个项目将在详细信息部分显示其相应的项目页面。在以下情况下使用主/细节元素：您期望用户频繁地切换子项目。您希望使用户能够对单个项目或项目组执行高级操作（如删除或排序），还希望使用户能够查看或更新每个项目的详细信息。主/细节元素非常适合电子邮件收件箱，联系人列表和数据输入。
背部	让用户遍历应用程序中的导航历史记录，并根据设备从应用程序到应用程序。有关更多信息，请参阅导航历史记录和向后导航文章。
超链接和按钮	内容嵌入的导航元素出现在网页的内容中。与其他导航元素不同，页面的组或子树应该保持一致，内容嵌入的导航元素在页面之间是唯一的。