通过

新型应用程序

在 Windows 应用商店应用程序中导航的基础知识

Rachel Appel

Rachel Appel确保用户能够随时快速而轻松地访问所需内容是任何新型应用程序的一个必不可少的特征。 这意味着，在用户需要进行导航之前，导航方式不得干扰用户操作，并且不得强制用户做出难以逆转的选择。 这是一种称为“内容在版式上方”的 UI 设计技术。强制实施此设计模式的最佳方法是将大多数导航直接置入到内容中。 可以在 Windows 应用商店应用程序中轻松实现这一点，因为它们遵循此导航设计原则。

Windows 应用商店应用程序导航概述

在 Windows 应用商店应用程序中，开发人员将导航置入到内容中，以便在用户费力阅读内容时通过使用其中一种导航模式获得平稳而流畅的体验：

  • 分层
  • 平面
  • 拆分/单页应用程序 (SPA)

Visual Studio 2012 通过一组基本应用程序模板来支持所有三种导航模型： 网格、拆分和导航（仅 HTML）。 在 HTML 应用程序中，每个模板均有一个 navigator.js 文件，该文件中包含执行页面间导航的代码和管理后退按钮的代码。 在 XAML 应用程序中，导航已内置到事件模型中。

分层导航模式

关系数据非常适合分层导航。 这是因为，通常您必须按某种特定顺序遍历关系内容（例如，在主/详细信息方案中），否则将没有任何意义。 但事实并非始终如此，平面导航在这里就派上用场了（稍后将对此进行详细介绍）。 虽然相关数据可存在于多个级别中，但根据可用性研究，将三个以上的级别直接置入导航系统中会导致用户很难使用该数据。 在仔细研究导航可用性之后，Windows 设计语言团队创建了包含以下三种导航级别的分层导航系统：

  • 中心： 这是数据（包括前面和中心的主数据）的启动阶段。 它通常是一个主项目（如音乐艺术家）列表。 从该列表中，用户可以深入了解每位艺术家的具体信息。 正式发布的 Visual Studio 2013（目前为预览版）将引入一种用于创建可靠导航方案的新“中心”模板。
  • 部分： 这是一个二级视图，其中包含用户在“中心”页面选择的某个特定组的所有成员。 例如，浏览某位特定艺术家的所有专辑就属于部分导航。
  • 详细信息： 这包含某个特定项的基本详细信息 - 例如，有关专辑中某首特定歌曲或相集中某张照片的信息。

图 1、图 2 和图 3 中的 CNN 应用程序的上下文中分别显示了这三种样式的示例。

The Hub Navigation Level
图 1“中心”导航级别

The Section Navigation Level
图 2“部分”导航级别

The Details Navigation Level
图 3“详细信息”导航级别

如果您仍认为自己需要更多级别的导航，则除了常规导航之外，请考虑使用导航帮助程序（如语义缩放或下拉菜单）或用于内容筛选和排序的其他 UI 组件。 本文稍后将进一步讨论这些导航助手。

Visual Studio“网格”模板包含已内置了所有三种级别的分层导航。 您只需检索数据并将其插入模板中即可使用该数据。 数据可以像 WinJS.Binding.List 或 C# 应用程序中的普通旧 CLR 对象 (POCO) 一样简单，并且其结构可与 Visual Studio 中的“网格”、“拆分”和“导航”应用程序模板使用的结构一样。

请注意，使用分层模式的应用程序的所有部分都包含一个后退按钮，这是 Windows 应用商店应用程序和 Web 应用程序中的导航的一个关键特点。 能够退回并撤消上一个导航命令可增强和简化 UX。

平面导航模式

通过在屏幕顶部置入一个导航栏，平面导航应用程序只需显示几个单项选择，用于将您直接转到可能相关或不相关的某些内容。 图 4 显示的天气应用程序是这方面的一个极好示例，其中屏幕顶部包含选项卡。 您点击或单击任一选项卡后即可直接转到相关的页面。 平面导航非常适用于非关系内容。 例如，天气应用程序中的选项卡会将您转到所选的不相关页面，而不是应用任何正式结构。

Flat Navigation in a Weather App
图 4 天气应用程序中的平面导航

如果您已确定需要分层导航的更深级别，则从平面导航系统开始会有所帮助。 将顶部导航栏用作中心页面。 在用户做出选择后，应用程序将导航到请求的位置。 使用该技术仅添加一个导航级别，因此您可能还需要使用各种导航帮助程序。

虽然您可以将顶部导航栏添加到任何项目类型中来创立平面导航，但 Visual Studio 中的空白模板最有利于创建平面导航。

在您的应用程序中加入平面导航非常简单，只需添加一个 Windows JavaScript 库 (WinJS) NavBar 控件（Windows 8.1 中的一个新控件）即可。 图 5 显示了 HTML 中的一个示例。

图 5 使用 WinJS NavBar 控件

    <div id="NavBar" data-win-control="WinJS.UI.NavBar">
      <div id="GlobalNav" 
        data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
         data-win-options="{
          label: 'Home',
          icon: 'url(../images/homeIcon.png)',
          location: '/html/home.html',
          split: false
        }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
         data-win-options="{
          label: 'Your apps',
          icon: WinJS.UI.AppBarIcon.favorite,
          location: '/html/yourapps.html',
          split: false
        }">
        </div>
      </div>
    </div>

NavBar 控件仅在 WinJS 中提供，因此若要在 XAML 中创建顶部导航栏，您必须对应用程序栏进行编码并将其样式设计为在页面顶部显示，如以下示例所示：

<Page.TopAppBar>
  <AppBar x:Name="topAppBar">
    <Grid>
      <StackPanel Orientation="Horizontal" 
            HorizontalAlignment="Right">
        <Button Style="{StaticResource SaveAppBarButtonStyle}"
          Click="Button_Click"/>
        <Button Style="{StaticResource UploadAppBarButtonStyle}"
          Click="Button_Click"/>
      </StackPanel>
    </Grid>
  </AppBar>
</Page.TopAppBar>

您可以同时创建顶部导航栏和标准底部应用程序栏，并可以向二者添加菜单、下拉列表以及其他导航帮助程序。

拆分/SPA 导航模式

顾名思义，SPA 应用程序包含一个针对整个应用程序的页面。 从技术上说，SPA 事实上并不是一个巨大的页面；而是包含一个主页面，应用程序在运行时根据用户活动将内容和命令部分动态加载到该主页面。 在使用 JavaScript 构建的 Windows 应用商店应用程序中，您可以通过管理称为“页面段”的应用程序组件来实现 SPA 应用程序。

Visual Studio 2012 中的“拆分”导航模板显示了类似于“网格”模板的 SPA 模板；但“拆分”模板包含两个（而不是三个）导航级别。 这意味着，“拆分”模板从部分级别开始，显示项目列表而非中心/部分/详细信息，当用户选择一个级别后，其详细信息将与其他项目一起加载到页面中。

HTML 应用程序中的 SPA 导航通过首先创建一个其他页面可将其自身加载到其中的 <div> 或容器元素而完成。 您可以使用 WinJS PageControlNavigator 控件（在 navigator.js 中定义）创建此容器：

    <div id="contenthost" 
      data-win-control="Application.PageControlNavigator"
      data-win-options="{home: '/pages/home/home.html'}"></div>

在 PageControlNavigator 准备就绪后（默认情况下位于“网格”、“拆分”和“导航”模板中），\js\navigator.js 中的代码会执行将页面加载到 PageControlNavigator 中的所有工作，无需您进行任何修改。

此处讨论的 SPA 模式非常适用于网站和其他应用程序类型（包括 Windows 应用商店应用程序），并且 SPA 应用程序正迅速成为新型应用程序开发人员（包括其他平台上的开发人员）的所爱。

使用语义缩放进行导航

您是否使用过数据密集型应用程序（其中的菜单或链接似乎无法帮助您访问所需的数据）？ 这正是语义缩放的用武之地。 通过使用语义缩放，您可以用更易浏览的不同方式重用并可视化数据。 这可以是概览查看数据（这是 Windows 开始页自身的工作方式），或者可以聚合组的形式显示数据，以便用户能够快速找到所需内容。 图 6 中显示的 Netflix 充分利用了语义缩放来指明电影类别。 在拥有大量数据时，语义缩放特别有用。

Netflix Makes Great Use of Semantic Zoom
图 6 Netflix 充分利用了语义缩放

您可以在 Windows 应用商店应用程序中实现语义缩放，就像使用 WinJS 和 XAML 应用程序中的控件一样。 下面是 HTML/JavaScript 中的一个示例：

    <div data-win-control="WinJS.UI.SemanticZoom">  
      <!—Original view of the data, for example, the list of all movies -->
      <!-- The zoomed-out version of the data, as shown in Figure 1.
    -->
    </div>

下面是 XAML/C# 中的一个示例：

<SemanticZoom>
  <SemanticZoom.ZoomedInView>
    <!—Original view of the data, for example, the list of all movies -->
  </SemanticZoom.ZoomedInView>
  <SemanticZoom.ZoomedOutView>
    <!-- The zoomed-out version of the data, as shown in Figure 1.
-->       
  </SemanticZoom.ZoomedOutView>
</SemanticZoom>

用户可以通过在触摸屏设备上用两根手指做出缩小手势或使用鼠标+滚轮来调用语义缩放。 有关 SemanticZoom 控件和其他 Windows 应用商店应用程序控件的详细信息，请参阅 msdn.microsoft.com/magazine/dn296546 上我的专栏“精通用 JavaScript 构建的 Windows 应用商店应用程序中的控件和设置”。

通过排序、筛选和搜索进行导航

当然，您会认为筛选不是真正的导航，但可以确定的一点是，能够对数据进行排序将帮助用户限制其选择，并使用户能够快速轻松地找到所需数据，这才是导航的重点。 排序和筛选至少可以为标准应用程序导航提供急需的增强功能。 在 Windows 应用商店应用程序中，筛选是一种增强应用程序的主要导航方案的方法。 通过小型 UI 控件对可视化进行微调，可真正提供受用户喜爱的准确 UX。

在使用 JavaScript 构建的 Windows 应用商店应用程序中，您可以通过使用标准 HTML <select> 元素实现用于排序和筛选的下拉框，如下所示：

    <select>
      <option>Appels</option>
      <option>Bananas</option>
      <option>Grapes</option>
      <option>Oranges</option>
      <option>Pears</option>
    </select>

在 XAML 应用程序中，您将相同的控件称为 ComboBox，它看起来类似于此代码：

<ComboBox x:Name="Fruits" 
    SelectionChanged="Fruits_SelectionChanged" >
  <x:String>Appels</x:String>
  <x:String>Bananas</x:String>
  <x:String>Oranges</x:String>
  <x:String>Grapes</x:String>
  <x:String>Pears</x:String>
</ComboBox>

Windows 应用商店应用程序本身充分利用下拉框来筛选出应用程序。 导航到任何类别，您将找到图 7 中所示的价格和相关性的筛选器。 在应用商店中进行搜索的过程中，将显示更多的筛选器。

The Windows Store App Filters
图 7 Windows 应用商店应用程序筛选器

最后，请不要忘记搜索是导航的一个很重要的组成部分。 每个人都使用搜索 - 不只是通过常见的 Web 搜索引擎。 每个人都喜欢将特定内容正确传递到自己的指尖，因此请确保您的应用程序将为用户提供此上门服务。 由于搜索（就像“设置”超级按钮一样）是操作系统的一部分，因此可以在 Windows 应用商店应用程序中通过合同实现搜索。

其他导航帮助程序

虽然水平滚动看起来好像不是导航的一部分，但它实际上是导航的一部分。 在 Windows 应用商店应用程序中，全景视图意味着您可以将所有完全独立的数据部分添加到一个有组织的视图中。 这将允许用户滚动到不同的部分而无需实际导航，从本质上讲，它通常是新应用程序（其中的某些内容是文本，其他内容为视频）的一个主要方面。 通过将全景图与语义缩放合并，用户可以直接跳转到所需的数据部分。 考虑 CNN 和 ABC 新闻应用程序、Bing Finance、Netflix 以及其他可大范围水平滚动的应用程序等。

除了这些导航帮助程序之外，对某些活动使用 Windows 8 的内置功能将减少应用程序中所需的导航元素的数量。 例如，您可以利用“设置”超级按钮来显示帮助和应用程序信息，而不是在应用程序中生成“关于”、设置或其他信息页面（按照惯例，它位于早期版本的 Windows 中的程序中的 Windows“帮助”菜单中）。 这意味着，您不需要提供其他导航菜单和选项，并且用户可通过在所有 Windows 应用商店应用程序中拥有一致的主题来实现设置或类似项而受益。

不再有失落而困惑的用户

坚实可靠的导航方案是新型应用程序的一个重要方面 - 尤其是 Windows 应用商店应用程序的开发。 如果没有易于使用的导航，则用户将变得失落和困惑。 幸运的是，HTML 和 XAML 中的 Windows 应用商店应用程序的内置模板将帮助您为用户创建易于使用的应用程序。

Rachel Appel是一名顾问、作家、导师和前 Microsoft 员工，在 IT 行业有 20 多年的经验。 她常在 Visual Studio Live!、DevConnections、MIX 等顶级行业大会上发言。 她的专业是开发侧重于 Microsoft 系列开发技术和开放式 Web 并且符合业务和技术需要的解决方案。 有关 Appel 的详细信息，请访问她的网站 rachelappel.com。

衷心感谢以下 Microsoft 技术专家对本文的审阅： Megan Bates、Ross Heise、Maria Kang 和 Eric Schmidt