WP8.1学习系列(第五章)——中心控件Hub或透视控件Pivot交互UX

具有主页菜单（中心或透视控件）的中心应用中心

你可能要设计包含许多功能的应用。当你看着这些功能时，可能会决定将它们整理到独立的区域中。这些区域最终会成为用户要访问的应用的独立部分。你需要设计一个简便的方法，让用户在这些 UI 区域中导航。此类应用需要应用程序中心，用户可在其中启动到应用的每个子区域。

例如，请想象设计一个用于管理足球队的应用。此应用需要多个功能区域—一个用于比赛和练习的日历管理，一个用于球队花名册信息，一个用于得分和球员统计数据，另一个用于过往赛事的视频片段。你会希望提供一种方式，让用户可以分别导航到这些不同的 UI 区域。通过实现带有主页的应用程序中心，你可以达到此目的。

用于足球队管理的中心应用中心 UI

用户可以从 UI 中心导航到应用程序内的任何区域。一旦他们到达子区域，你将为他们提供此时需要的 UI。例如，在足球队应用中，用户可从应用程序中心页面转到允许他们查看给定比赛的球员统计数据的页面。当用户使用完应用的给定子区域并要转到不同的子区域时，他们会先返回应用程序中心。用户不能直接从得分和统计数据转到日历管理。他/她必须首先返回应用程序中心。

注意  使用带有主页的应用程序中心导航到应用的不同区域是一个出色的设计，它使用户可以与应用高效交互。

可使用多种方法将应用程序中心在视觉上呈现给用户。建议使用中心控件。本主题描述了该设计并向你显示了可能会考虑的变体。

将中心控件用作应用程序中心

Microsoft 提供称为中心控件的 UI 控件，它可用作应用程序中心。该控件允许用户导航到应用中的所有功能区域。中心控件的结构如下—在整个控件后方作为背景的中心背景图像、你在应用启动时进入的主页部分，以及划分应用顶层 UI 的其他部分。

Music Hub

该中心控件给用户提供较宽的虚拟画布，它以水平方向扩展到屏幕限制的区域外。用户通过在画布上轻弹，以水平方向逐个区域移动画布。在应用启动时，用户将进入中心的第一个部分。从此处开始，存在用法的变体，具体取决于你希望怎样导航。将解释每种变体。

主页部分

最左端的第一个部分可用作主页位置，作为导航到应用子区域的起点。此部分显示区域菜单，以供用户选择。在下图显示的 Music Hub 内，点击收音机将使你进入收音机页面，它其实是 Music Hub 内的子应用程序。中心 UI 将被完全替代，并且将为用户呈现收音机 UI。如果用户现在想转到播客区域，用户会使用硬件后退按钮重新导航到中心主页部分，然后在菜单列表中点击播客条目。如果子区域列表过长，不能在显示器中完整显示，可在主页部分使用滚动视图。

Music Hub 的收音机页面

主页部分中可导航的位置列表会包含使你启动全新应用的条目。例如，Music Hub 主页部分具有可将你带到应用商店的条目。点击它会使你启动应用商店音乐子区域，它自身也是中心控件。

右侧部分

主页面板右侧的部分包含你希望用户能轻松访问的 UI。你可以决定使用它们的方式。不要使子区域采用不同的访问方法，这会使用户感到迷惑。相反，使用右侧的区域包含关于子区域内容的某种类型的摘要信息。例如，在 Music Hub 的案例中，有两个显示最近访问媒体的其他部分。

Music Hub 中的历史记录部分是一个简便的方法，让你无需导航到子区域，即可快速访问最近听过或查看过的内容。如果你转到音乐子区域并听了特定的歌曲，该歌曲现在会在历史记录部分出现，以供快速访问。因此在该案例中，这些部分提供了对你在子区域访问过的内容的快速访问。

Facebook 应用是使用中心控件使用户轻松地在功能之间导航的另一个示例。它也具有相同的主页部分，提供用户可导航的区域列表。例如，点击好友条目会将用户带到用于管理其好友列表的 UI 中。

在顶层中心控件中，右侧的部分基本用于让用户更快地访问设计人员认为最需要在顶层显示的视图。中心内的最近访问部分实际上是来自子区域的 UI。要从主页部分转到它，请点击新闻源，然后你将被带到该子区域（实际上是透视控件）。新闻源子区域透视控件具有以下项目：最近访问、照片、链接和视频。设计人员认为他们还可以将最近访问显示为顶层中心控件中的一个区域，而无需要求用户依次导航到新闻源和最近访问。顶层中心控件中的照片和活动部分也发生了类似的过程。

Facebook 应用的应用程序中心 UI

使用图像网格

你可能希望显示可选择的图像的网格，而不显示可从主页部分导航的区域列表。已完成相同的流程；它看起来只有微小差异。你通过图像获得了视觉图标，它使你更容易确定选择操作将你带到哪个位置。每个图像可以在顶部覆盖文本以提供关于该应用区域及其活动的更多信息。

如果你有 3 x 3 网格，你可以包含最多 9 个供选择的图像（如果需要）。从包含图像网格的主页部分，用户可以单击任何图像以导航到应用提供的不同功能区域。

此主页部分实际上可以是宽度超过一个可显示部分的区域。例如，你可以让图像的主页部分向右水平扩展以占用一点额外的空间（如果需要）。Kelley Blue Book 应用使网格向右扩展，如下图所示。要转到其他图像，仅需轻拂以水平平移即可。该案例的中心控件主页部分具有两倍宽度。

Kelley Blue Book 应用的应用程序中心 UI

不要创建垂直滚动的图像网格，因为它对于用户而言过于混乱。

不要在主页部分启动

即使你使用中心控件并具有作为菜单或中心的可导航到应用功能区域的主页部分，也无需让它成为应用启动时显示的部分。你选择先显示其他部分的原因是为了达到要产生的影响。例如，如果你有一个显示电影和放映时间的应用，你可能会有包含可选择应用子区域的列表的主页部分。你可以让用户进入显示最新热门电影图像的部分，而不是比较无趣的部分。这样，用户打开应用时看到的内容会更吸引眼球。

当你打开 eBay 应用时，你不会首先进入主页部分。相反，该设计首先让用户进入具有当下精选交易的部分。通过向右轻拂，你可以转到应用程序中心主页部分，其中包括可单击导航到 Watching、Selling、Buying 和 Messages 应用子区域的图像。另请注意顶部搜索文本框的使用。这也是一个放在顶部用于快速查找内容的实用 UI 元素。

eBay 应用的应用程序中心 UI

不要创建垂直滚动的图像网格，因为它对于用户而言过于混乱。

UI 功能区域的自定义菜单

存在使用 Microsoft 提供的中心控件的替代方案。该中心使你可以在顶层具有多个部分。不过，你可能不需要这些部分。你可以在单个页面上包含简单列表，如下图所示。这将是应用打开时向用户显示的页面。该应用为每个要导航的子区域使用位于文本标题和介绍左侧的图标。

Easy Diary 应用的应用程序中心 UI

你可能决定向用户提供独特的交互体验，在其中你将使用一些图形背景并以独特的艺术化方式呈现可导航的子区域。你可以希望通过该方法建立自己的品牌。这更适用于一些类型的娱乐应用。以下是具有视觉吸引力的主页的示例。

MyComic 应用

将类似的应用程序合并为一个

如上所述，你的应用可能具有很多独立功能区域，你考虑将这些功能拆分为单独的内部应用或完全独立的应用。无需这样做；你仍然可以拥有单个应用。在应用打开时显示的主屏幕将用作访问实际子应用程序的起始位置，这些子应用程序构成了你的单个应用。主应用程序中心部分将成为用户单击应用图标并启动应用时显示的页面。

我们建议你避免为每个独特功能区域创建单独的应用。这将导致用户必须退出一个应用再启动另一个应用的问题。请想象你有 9 个供用户交互的不同应用。相反，我们建议你创建单个应用以供用户启动，然后从单个起点访问应用的不同区域。作为应用设计人员，你希望用户被吸引到你的中心，并可以看到你在一个中心屏幕上提供的所有内容。

导航层级

难以决定的是如何拆分应用的功能，以及你希望用户能够使用几个导航层级。如果你使用带有主页部分的中心控件，你需要决定用户点击列表中的选择条目时显示什么 UI。选择操作会将你从中心控件导航到新的 UI 控件，例如单个页面或透视控件。我们将使用 Music Hub 主页部分来说明，如下所示。

Music 的应用程序中心

在 Music Hub 的案例中，收音机选择将导航到单个 UI 页面，你可以在其中更改收听的收音机电台。在该子区域中，不再使用列表、中心或透明控件进一步导航。然而，主页部分的音乐选择将呈现你的歌曲的不同视图。下图显示了导航到音乐选择的 UI 树的一部分。

Music Hub 中用于音乐的导航树

当你位于音乐区域时，将显示可水平滚动的透视控件。你在音乐下始终首先进入的透视页面是艺术家透视项目。从该位置，你可以向左或向右浏览不同的透视项目。每个透视项目都为你提供了查看歌曲的不同方法，你必须从中选择歌曲。

当用户导航到他们在应用中需要的区域，你要向他们提供此时需要的 UI。在任何给定的应用子区域中，用户可以真正完成他们的预定任务。在第二层级，不建议你向他们显示另一个要导航的区域列表。最好仅保留主要页面中心控件以及用于详细信息的第二层级。用户在转到应用的另一个区域前，将从第二层级返回主页部分。将使用硬件后退按钮返回。

使用背景图像

中心控件允许你显示在所有部分后方展开的图像。你可以始终使用相同图像，或者可以采用编程方式不时更改它以切换主题。你可以在用户使用应用时显示与用户兴趣相关的图像。使用的图像不要过于凌乱，并且不要干扰它上面的 UI 内容。

背景图像

多个主页面板

你可能需要多个包含要导航的子区域列表的部分。你可能由于某个原因要分出两个不同的导航区域列表。在此情况下，这两个部分同时作为主页部分。

主要启动屏幕

你的应用可能不可以在启动时直接转到应用中心。原因之一是：你可能首先需要为用户提供某种类型的登录或密码解锁，然后用户才能访问该应用。你可能还希望提供一些在用户进入应用时向其显示的打造品牌的启动页面。

Easy Diary 应用的登录页面 UI