Windows 应用的导航设计基础知识
如果将应用看作是一个页面集合,那么导航描述的是在页面之间和页面内的移动行为。 它是用户体验的起点,也是用户查找感兴趣的内容和功能的方式。 它非常重要,但可能很难做到理想化。
你可以为导航做出大量选择。 可以:
要求用户按顺序浏览一系列页面。
提供允许用户直接跳转到任何页面的菜单。
将所有内容放在单个页面上,并提供用于查看内容的筛选机制。
尽管没有哪一个导航设计能够适合所有应用,但有一些原则和指南可帮助你为应用确定合适的设计。
良好导航原则
让我们开始了解良好导航设计的基本原则:
- 一致性: 满足用户的期望。
- 简单性: 不要做比你需要做的更多。
- 清晰: 提供清晰的路径和选项。
一致性
导航应该与用户期望一致。 通过使用用户熟悉的标准控件并遵循对图标、位置和样式的标准约定,用户将觉得导航可预测且直观。
用户希望在标准位置查找某些 UI 元素。
简易性
减少导航项将为用户简化决策。 允许轻松访问重要目标位置,隐藏不太重要的项目,将帮助用户更快地获得所需内容。
在常见的导航菜单中提供导航项。
不要使用许多导航选项使用户感到不知所措。
明确性
清晰的路径使用户能够进行逻辑导航。 让导航选项显而易见并阐明页面之间的关系可防止用户迷失。
目标已明确标记,以便用户知道目标的位置。
一般建议
现在,让我们记下我们的设计原则(一致、简单和清晰)并利用这几个原则来得出一些一般建议。
- 考虑用户的想法。 找出用户使用你的应用的典型路径,思考用户访问每个页面的目的及其下一个目标位置。
- 避免过多的导航分层。 如果超过了两个层次的导航,会提供一个痕迹导航栏,告诉用户他们在哪里,让他们快速返回。否则,你可能会让用户陷入难以离开的深层层次结构。
- 避免“弹跳”。“弹跳”会在以下情况下发生:存在相关内容,但需要用户先转到上一级,才能再次向下导航到该内容。
使用正确的结构
熟悉了一般导航原则,应该如何确定应用的结构? 有两个一般结构:平面和分层。
平面/横向
在平面/横向结构中,页面是并排的。 你可以按任意顺序从一个页面转到另一个页面。
我们建议在以下情况下使用平面结构:
- 可以按任意顺序查看页面。
- 页面显然彼此不同,没有明显的父/子关系。
- 组中的页面少于 8 个。
(当有更多的页面时,用户可能很难理解页面的独特性或了解他们在组中的当前位置。如果你不认为这是应用的问题,请继续让页面对等方。否则,请考虑使用分层结构将页面拆分为两个或更多个较小的组。
分层
在分层结构中,页面将组织为树状结构。 每个子页面有一个父页面,但一个父页面可以有一个或多个子页面。 若要访问子页,请浏览父页面。
分层结构适用于组织跨很多页面的复杂内容。 缺点是存在一些导航开销:结构越深入,在页面之间切换所需要的点击次数越多。
我们建议在以下情况下使用分层结构:
- 应该以特定的顺序遍历页面。
- 页面之间存在清晰的父-子关系。
- 组中有 7 个以上的页面。
组合结构
无需选择一个结构或另一个结构;许多设计良好的应用都使用这两种应用。 在应用中,对可以任何顺序查看的顶层页面使用平面结构,对具有更复杂关系的页面使用分层结构。
如果导航结构具有多个级别,我们建议对等导航元素仅链接到其当前子树中的对等方。 请考虑以下图示,该图显示了具有两个级别的导航结构:
- 在级别 1,对等导航元素应提供对页面 A、B 和 C 的访问权限。
- 在级别 2 中,A2 页面的对等导航元素应仅链接到其他 A2 页面。 它们不应链接到 C 子树中的级别 2 页。
使用正确的控件
对页面结构作出决定后,你需要决定用户如何在这些页面之间导航。 XAML 提供了各种导航控件,以帮助确保应用中的一致可靠的导航体验。
除少数例外情况,具有多个页面的应用都会使用框架。 通常,应用有一个包含框架和主导航元素(如导航显示控件)的主页面。 当用户选择页面时,框架将加载并显示此页面。
显示指向同级别页面的水平链接列表。 NavigationView 控件实现顶部导航模式。
在以下情况下使用顶部导航:
- 想要在屏幕上显示所有导航选项。
- 想要为应用内容提供更多空间。
- 图标无法清楚地描述导航类别。
显示项目列表。 通过选择项目,可在细节部分中显示其相应的页面。 何时使用:
- 你希望用户经常在子项之间切换。
- 你希望让用户能够对单个项目或项目组执行高级操作,例如删除或排序,并且还希望让用户查看或更新每个项目的详细信息。
列表/细节非常适合电子邮件收件箱、联系人列表和数据输入。
嵌入式导航元素可显示在页面的内容中。 其他导航元素在页面间应保持一致,而嵌入式导航元素在各页面是唯一的。
下一步:向应用添加导航代码
下一篇文章“ 实现基本导航”显示了使用控件启用应用中两个 Frame
页面之间的基本导航所需的代码。