WP8.1学习系列(第七章)——应用选项卡Pivot交互UX

“应用选项卡”模式用于用户经常在中间导航的多个 UI 页面。如果你的应用基于单个主题（例如，电影、棒球等），该模式尤其有用。每页都将为用户显示与该应用呈现的整体数据相关的一些内容。“应用选项卡”模式可能构成整个应用，或者还可用于应用的子区域。例如，你可以使用中心控件作为应用主要的第一层级（如之前主题所述），然后让用户从该控件导航到应用使用“应用选项卡”模式的子部分（使用透视控件）。

想象你希望拥有一个将你家里收藏的电影分类的应用。你可以使用“应用选项卡”模式提供几个不同的电影筛选视图。你可能希望一个筛选视图显示标记为最喜爱的电影。另一个筛选视图仅用于动作类电影。还有一个筛选视图显示那些你采用空闲时的观看顺序排列的电影。当然，你还会希望使用一个页面查看未经筛选的完整电影列表。

下图帮助你可视化该应用的结构。当应用启动时，你将位于筛选页面之一。你可以从此页水平滚动以浏览每个在 UI 中用作选项卡的页面。

Outlook 收件箱的应用选项卡

每个选项卡基本上都是用于筛选和查看你向用户呈现的数据的不同方式。如果在任何筛选视图页面上按下硬件后退按钮，你将退出该应用。

对具有中心数据类型并在周围显示不同的筛选视图的应用使用“应用选项卡”模板。

将透视控件用作“应用选项卡”实现

你可使用透视控件实现“应用选项卡”模式。该控件允许用户在每个页面（称为透视项目）之间左右导航。

来自 Microsoft 的 Outlook 客户端应用使用“应用选项卡”模式，因为该应用显示单一类型的数据：电子邮件列表，其中每个透视项目应用了不同的筛选。当你使用 Outlook 应用查看电子邮件收件箱时，将看到 3 个透视项目—全部、未读和紧急。这使你更容易仅查看紧急的电子邮件（如果你要实现该目的）。这样，你不必在全部透视项目中滚动所有电子邮件，即可查找标记为紧急的电子邮件。

Outlook 客户端应用

另一个使用“应用选项卡”模式的现有应用是 Netflix 应用。每个项目项目都显示电影列表。由于所应用的筛选不同，所以每个透视项目上的列表都不同。你可以比较并查看每个项目的独特之处及其作用。立即观看透视项目显示你放在该队列中的电影，以便你在有兴趣时可以通过流式播放设备观看。主页透视项目显示 Netflix 认为你可能感兴趣的电影。搜索透视项目显示匹配你的搜索关键字的电影。

透视项目专注且高效。它们主要的关注点是基于任务的操作，例如，筛选、排序以及显示相关项。中心具有扩展性、聚合性和探索性。它们最适合用于宣传并显示最近的相关内容。在某些情况下，一个控件比其他控件更合适。

Netflix 应用

类似于选项卡的功能

每个透视项目其实都是一个选项卡，这些选项卡在顶部列出。正如你在 Netflix 应用图像中所见，该应用当前位于主页透视项目上，你可以看到在右侧提供了类别透视项目。要转到类别透视项目，仅需点击它或者平移到该项目。

应用应该尽可能减少具有的透视项目数量。如果用户在透视项目之间过度跳转，他们可能会不知所措。尝试保持透视项目的数量不超过 5 个。如果你认为需要比这更多的项目，则使一个透视控件包含列表控件，其中包含用于点击以转到其他页面的链接或者自身就是透视控件的另一层级导航。要了解这是否是你需要的效果，请参阅适用于 Windows Phone 的带有详细信息向下钻取的列表。

注意通过透视控件，你可以通过点击项目标题在项目之间移动。这是中心控件不能实现的效果。

数据筛选注意事项

在本主题开始时，我们说过对透视控件的最佳用法是让每个透视项目包含相同类型的数据，但呈现对该数据的不同筛选。我们还提到了中心控件可用于显示包含不相关数据的部分。如果数据本质上不同，但仍与一类主题相关联，也可以采用这种方式使用透视控件。例如，如果你要在面向游客的应用中呈现关于纽约的一些信息，你的透视控件里可以具有包含有趣的统计数据的（例如位置、人口和年度税收）透视项目。然后，你可以包含用于要参观的景点等信息的其他透视项目，以及另一个用于要入住的酒店的透视项目。

ESPN ScoreCenter 应用是一个“应用选项卡”导航模式的示例，其中每个透视项目都包含基于中心主题的异类数据。

ESPN ScoreCenter 应用

结合透视控件和中心控件

从中心控件的主页（例如 Facebook 应用的主页），你可以点击列表中的导航项目并导航到透视控件。在 Facebook 主页中心部分选择个人资料时，会发生上述过程。当用户点击个人资料选择时，他们将被带到呈现透视项目（例如留言板、信息、我的照片等）的透视控件。使用此方式，你可以从一个控件导航到另一个控件。

在 Facebook 应用中从主要中心控件转到透视控件

你可能很想从中心主页的部分选择功能导航到另一个中心。这不是个好主意—你可能会让用户困惑不解，因为他们很容易忘记当前在哪个应用中。中心有时会在背景中包含较大的拉伸图像，以使用户在顶部时保持固定位置，如果他们导航到具有不同背景的本身也是中心的子区域，他们很可能会感到困惑。

透视控件中的应用栏

由于所有数据都属于同一类型，你在许多情况下可以提供底部应用栏，它包含与当前显示内容相关的按钮。下图中显示的 Outlook 应用具有始终可见的应用栏，因为它包含用户需要的操作，它们会以某种方式影响显示的内容。

Outlook 客户端应用

在 Outlook 应用中，无论你在哪个透视项目上，应用栏都可以允许进行相同的操作。你可以从上图看出它包含用于新建电子邮件、显示选择框、切换文件夹以及重新同步电子邮件的按钮。这是透视控件和中心控件的另一区别，因为你可能永远不会在后者底部放置应用栏。

不要假定你可以始终将相同的按钮放在底部，除非你已周密地考虑了每个透视项目上的内容，并且此安排合理。透视控件的某些用法可能不会在每个透视项目上保留完全一样的数据类型。

“主页”透视项目

你可以使用第一个透视项目呈现所有其他透视项目的列表。这样，用户就可以点击一个项目并直接跳转而不是轻扫到该透视项目。该列表还可包含用于启动其他应用的条目。

如果你不希望用户处在主页透视项目上，可以不必这么做。例如，在电影列表应用中，你可以让用户位于显示最新热门电影的图形的透视项目中，而不是位于主页透视项目。这样，用户打开应用时看到的内容会更吸引眼球。