个人随笔
技术改变世界

UWP App的导航设计基础

对于某些应用,可以将应用的所有内容和功能放到单个页面上,同时仍然提供出色的用户体验。 但是大部分应用需要多个页面来容纳它们的内容和功能。 当应用具有多个页面时,你需要设计你想要提供的导航体验。

若要创建出色的导航体验,我们建议遵循以下指南:

为应用构建正确的导航结构。

创建可预测的导航体验的关键是构建对用户有意义的导航结构。

为应用结构使用最佳的导航元素。

导航元素可以提供两种服务:它们可以帮助用户访问所需的内容,而且某些元素还可让用户知道他们在应用内所处的位置。但是,它们也会占用应用本来可用于内容或命令元素的空间,因此使用适合应用结构的导航元素非常重要。

使应用与系统级导航功能(如“后退”)良好协作。

若要提供感觉直观的一致体验,请以用户预期的方式响应系统级导航功能。

 

构建正确的导航结构

让我们将应用视作多组页面的集合,其中每个页面包含一组唯一的内容和功能。例如,照片应用可能具有一个用于拍摄照片的页面、一个用于图像编辑的页面以及另一个用于管理图像库的页面。 你将这些页面排列成组的方式定义了应用的导航结构。排列一组页面有两种常见方法:

按层次结构排列 作为对等方平行排列
 IC794054  IC794055
 页面将组织为树状结构。每个子页面只有一个父页面,但是一个父页面可以具有一个或多个子页面。若要访问子页面,必须经过父页面。  页面并行存在。你可以按任意顺序从一个页面转到另一个页面。

典型的应用将同时使用这两种排列方式,其中一些部分将作为对等方平行排列,另外一些部分将按层次结构排列。

IC795434

那么,你何时应该将页面排列为层次结构,何时应该将它们作为对等方平行排列?要回答该问题,我们必须考虑组中的页面数量、是否应该以特定的顺序遍历页面以及页面之间的关系。 一般情况下,扁平的结构更易于理解并且导航更快速,但是有些情况适合使用深层的层次结构。

 在以下情况下我们建议使用层次关系:

  • 你预期用户以特定的顺序遍历页面。按层次结构排列以强制执行该顺序。
  • 组中的一个页面和其他页面之间有明确的父子关系。
  • 如果组中的页面多于 7 个。

当组中的页面多于 7 个时,用户可能难以区分页面或难以弄清他们当前在组中的位置。如果你认为这对你的应用不构成问题,请继续将页面作为对等方平行排列。否则,请考虑使用层次结构将页面分为两个或更多的组。(中心控件可帮助你将页面按类别分组。)

 在以下情况下我们建议使用对等关系:

  • 可以按任意顺序查看页面。
  • 页面之间明显不同,并且不具有明显的父/子关系。
  • 组中的页面少于 8 个。

当组中的页面多于 7 个时,用户可能难以区分页面或难以弄清他们当前在组中的位置。如果你认为这对你的应用不构成问题,请继续将页面作为对等方平行排列。否则,请考虑使用层次结构将页面分为两个或更多的组。(中心控件可帮助你将页面按类别分组。)

 

使用正确的导航元素

导航元素可以提供两种服务:它们可以帮助用户访问所需的内容,而且某些元素还可让用户知道他们在应用内所处的位置。但是,它们也会占用应用本来可用于内容或命令元素的空间,因此使用适合应用结构的导航元素非常重要。

对等导航元素

对等导航元素支持在同一个子树的相同级别中的页面之间导航。

IC794056

对于对等导航,我们建议使用选项卡或导航窗格。

导航元素 描述
 选项卡和回转

IC795435

显示指向同级别页面的持久链接列表。在以下情况下使用选项卡/透视表:

  • 存在 2 到 5 个页面。(可以在多于 5 个页面时使用选项卡/透视表,但是屏幕上可能无法完整显示所有选项卡/透视表。)
  • 你预期用户会在页面之间频繁切换。

此智能家居应用的设计使用选项卡/回转:

IC795584

 导航窗格

IC795436

显示指向顶级页面的链接的列表。在以下情况下使用导航窗格:

  • 你预期用户不会在页面之间频繁切换。
  • 你希望以减慢导航操作速度为代价节省空间。
  • 这些页面存在于顶层。

此智能家居应用的设计使用导航窗格:

IC795585

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

IC794059

  • 对于级别 1,对等导航元素应该使用户可以访问页面 A、B、C 和 D。
  • 在级别 2 上,A2 页面的对等导航元素应该仅链接到其他 A2 页面。它们不应链接到 C 子树中的级别 2 页面。

IC794060

分层导航元素

分层导航元素提供父页面及其子页面之间的导航。

IC794061

导航元素 描述
 中心

IC794025

中心是特殊类型的导航控件,可提供其子页面的预览/摘要。与导航窗格或选项卡不同,它通过嵌入页面本身的链接和章节标题来提供对这些子页面的导航。在以下情况下使用中心:

  • 你预期用户希望查看子页面的某些内容,而无需导航到每个页面。

中心有助于发现与探索,这使它们非常适合媒体、新闻阅读器和购物应用。

 大纲/细节

IC794176

显示项目摘要的列表(大纲视图)。通过选择项目,可在细节部分中显示其相应的项目页面。在以下情况下使用大纲/细节元素:

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

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

此股票跟踪应用的设计使用大纲/细节模式:

IC795391

 

历史导航元素

历史导航元素可让用户以原本的操作方式返回。

导航元素  说明 建议的深度
 返回  让用户导航回之前的页面。系统自动提供后退按钮,因此你无需费心。  任意情况

 

嵌入内容的导航元素

嵌入内容的导航元素显示在页面的内容中。与应该在页面的组或子树中保持一致的其他导航元素不同,嵌入内容的导航元素在不同页面上是唯一的。

 

使应用与系统级导航功能良好协作

在 Web 上,个别网站提供其自己的导航系统,如内容、按钮、菜单、链接的简单列表等。不同网站上的导航体验可能截然不同。但是,有一个一致的导航体验:后退。大多数浏览器提供运作方式相同的后退按钮,无论你正在查看哪个网站。

出于类似原因,Windows 提供可用于提供一致导航体验的应用后退导航系统。让我们来看看每个设备提供的后退功能:

 手机 IC794062
  • 始终存在。
  • 显示在屏幕底部。
  • 提供应用内和应用间的后退导航。
 平板电脑  IC794063
  • 始终存在。
  • 显示在屏幕底部。
  • 提供应用内和应用间的后退导航。
 电脑、笔记本电脑和 Surface Hub  IC794064
  • 默认处于禁用状态。开发人员可以选择启用它。
  • 显示在应用的标题栏中。
  • 仅在应用内提供后退导航。不提供应用间的导航。

当你的应用在手机、平板电脑上或者在支持系统后退功能的电脑或笔记本电脑上运行时,系统会在“后退”按钮被按下时通知你的应用。 用户预期后退按钮导航到应用导航历史记录中的上一个位置。由你来决定要将哪些导航操作将添加到导航历史记录以及如何响应后退按钮按下操作。

若要提供与其他应用一致的体验,我们建议针对以下导航操作遵循这些模式:

导航操作 添加到导航历史记录?
页面到页面,不同的对等组

在此图中,用户从应用的级别 1 导航到级别 2,并且跨对等组,因此该导航将添加到导航历史记录。

IC795437

在下一张图中,用户在两个同级别的对等组之间导航,并且再次跨对等组,因此该导航将添加到导航历史记录。

IC795438

页面到页面,同一对等组,无屏幕导航元素用户从一个页面导航到同一对等组内的另一个页面。没有始终存在的导航元素(例如选项卡/透视表或停靠的导航窗格)可提供到两个页面的直接导航。

在下图中,用户在同一对等组中的两个页面之间导航。这些页面不使用选项卡或停靠的导航窗格,因此该导航将添加到导航历史记录。

IC795439

页面到页面,同一对等组,带有屏幕导航元素用户从一个页面导航到同一对等组内的另一个页面。 两个页面显示在相同的导航元素中。例如,两个页面使用相同的选项卡/透视表元素,或者两个页面都显示在停靠的导航窗格中。

当用户按下后退时,将在用户导航到当前对等组之前返回到上一个页面。

IC794068

显示瞬态

UI应用显示弹出窗口或子窗口(例如对话框、初始屏幕或屏幕键盘),或应用进入特殊模式(例如多重选择模式)。

当用户按下后退按钮时,取消瞬态 UI(隐藏屏幕键盘、取消对话框等)并返回到生成瞬态 UI 的页面。

IC794069

枚举项目

应用显示屏幕项目的内容,例如大纲/细节列表中的选定项目的详细信息。

枚举项目与在对等组内导航类似。当用户按下后退时,导航到位于当前页面前面的具有项目枚举的页面。

IC794070

这些是我们对导航历史记录和后退行为的一般建议。

恢复

当用户切换到其他应用并返回到你的应用时,我们建议返回到导航历史记录中的最后一页。

 

后续步骤

请查看另外两种类型的 UI 元素的设计指南:

命令

了解命令元素以及如何使用它们来创建出色的交互体验。

内容

内容是应用的核心部分。它是用户在使用应用时绝大部分时间的焦点所在。本文提供了针对不同类型的内容和内容使用体验的建议。

转载请注明出处王旭博客 » UWP App的导航设计基础

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址