Win8应用开发 入门篇（三） UX交互导航模式

导航模式（Windows 应用商店应用）

 

在本文中

• 分层模式
• 画布上导航
• 顶部应用栏
• 语义式缩放
• 相关主题

组织 Windows 应用商店应用中的内容，以便用户可以轻松而直观地进行导航。使用正确的导航模式可帮助你限制永久位于屏幕上的控件。这样用户就可以将精力集中在当前内容上。

Windows 应用商店应用中的导航基于两种模式：分层模式和平面模式。应用可以使用其中一个或者使用这两种模式的组合。

分层模式

此模式可使 Windows 应用商店应用变得快速而流畅。它最适合具有大量内容或许多不同部分内容供用户浏览的应用。 大多数 Windows 应用商店应用都使用分层导航系统。

更深入地了解此功能以作为应用功能大全系列的一部分:  分层导航详细信息（HTML 和 XAML）

中心页是用户到应用的 入口点。此处的内容 以水平方式显示在一个丰富的 平移视图中，这样用户 一眼就能看见新增内容和 可用功能。 中心由不同 别的内容构成，每个类别都映射到 应用的部分页中。 部分页是应用的第二个 层级。此处的内容可以采用 任何形式显示，这些形式必须能够 最好地表示该方案及该部分所包含 的内容。 部分页由各个项目组 成，每个项目都有它自己 的详细信息页。 部分页还可以利用 分组和全景风格 布局。 详细信息页是应用的第三个 层级。此处显示了 各个项目的详细信息， 各项目的格式可能会根据 内容的特殊类型不同而 有很大的不同。 详细信息页由项目详细信息 或功能组成。 详细信息页可能包含许多信息 ，也可能包含一个 单一对象，例如图片 或视频。

平面模式

许多 Windows 应用商店应用都使用平面导航模式。诸如游戏、浏览器或文档创建等应用使用此模式让用户可以在所有驻留在同一分层级别的页面、选项卡或模式之间移动。与分层模式不同，通常没有永久性的后退按钮或导航堆栈，因此在页面之间进行移动通常通过内容（如下面第一个示例）或导航栏（如下面第二个示例）中的直接链接来完成。

更深入地了解此功能以作为应用功能大全系列的一部分:  平面导航详细信息（HTML 和 XAML）

当核心方案涉及在少量页面或选项卡之间快速切换时，最适合使用此模式，例如在像 Internet Explorer、电子书和游戏这样的 Web 浏览器应用中。

画布上导航

1. 页眉和“后退”按钮

   页眉可对当前页面进行标记，有助于查找页面。 使用“后退”按钮可以快速返回你所在的 位置。

2. 部分或类别标签

   这些标签可以将用户移动到内容的不同部分或类别。

3. 其他目标

   你可以使用磁贴、箭头、按钮、搜索结果或其他自定义目标作为导航元素。在某些游戏中，你可以找到使用有趣形状的导航元素示例。

顶部应用栏

通过从屏幕的顶部或底部边缘轻扫，用户可以显示应用栏。顶部应用栏也称为导航栏。你可以在顶部应用栏中放置导航元素，这样可以腾出更多屏幕区域显示应用中的内容。或者，如果用户在使用你的应用时经常需要一些导航元素，则可以将它们放在画布上，条件是将它们放在画布上不会对应用体验造成负面影响。你决定导航元素是在顶部栏中还是在画布上。

通常，部分或类别标签在导航栏中，如 Hulu Plus 中那样。

许多应用使用顶部应用栏提供快捷方式。例如，在 ESPN 应用中，用户通过单击顶部应用栏中部分标签上方的记分板可以导航到 gamecast 页面。

顶部应用栏还可以为用户提供目标页面上内容的预览。在以下购物应用示例中，可以在进入产品详细信息页面前，在应用栏中预览产品图像。

我们建议你以创新方式使用应用栏提高你的设计水平。在 Fresh Paint 中，顶部应用栏超越其专用导航功能，还用作绘画工具箱。

语义式缩放

语义式缩放可以快速顺畅地 扫描和四处移动视图， 尤其是当视图为很长的 平移列表时。

例如，在 Great British Chefs 应用中，中心页面有一个焦点部分，后跟五个视觉丰富、可水平平移的部分。该应用使用语义式缩放，可使用户更轻松地跳转到五个部分中的每一个。