信息
您所需的主题如下所示。但此主题未包含在此库中。

Windows Phone 应用选项卡(Pivot 控件)

2013/12/5

适用于: Windows Phone 8 | Windows Phone OS 7.1

应用标签样式用于用户经常在其中切换的 UI 的多个页面。如果应用基于单个主题(如影片、棒球等),则采用该样式特别有用。每页都会向用户显示与总体数据相关的内容,这些数据会出现在整个应用内。应用标签样式可能是组成完整应用的内容,也可能在应用的子区域中使用。例如,您可以将 Panorama 控件用作主要的第一级应用(如上一个主题中所述),然后从该位置让用户导航到使用应用标签样式的应用的子部分(使用 Pivot 控件)。

想象您希望有一个应用,可以将本地收藏夹中的影片编入目录。您可以使用应用标签样式提供几个不同的影片筛选视图。您可能需要将一个筛选视图用于显示标记为收藏夹项的影片。另一个筛选视图可能只是用于动作类型的影片。但是另外一个筛选视图可以是按您在有空时观看的顺序排名的那些影片。当然,您可能还希望有一个页面用来查看未经过筛选的影片的完整列表。

下图帮助您可视化此应用结构。应用启动后,您将位于其中一个筛选页面。从该位置,您可以水平滚动每个页面,这些页面类似于 UI 中的标签。

UX_AppNavModels_14

用于 Outlook 收件箱的应用程序中心标签

每个标签基本上都可以说是一种不同的方法,用来筛选和查看要呈现给用户的数据。当您位于任何筛选视图页面上时,如果按下硬件“返回”按扭,则会退出该应用。

对于具有显示不同筛选视图的中央数据类型的应用,请使用应用标签样式。

本主题包含以下各节。

您可以使用 Pivot 控件实现应用标签 UI 样式。此控件允许用户左右导航每个页面(称为 Pivot 页面)。

Microsoft 中的 Outlook 客户端应用使用应用标签样式,因为它显示单个类型的数据:每个 Pivot 页上应用了不同筛选方式的电子邮件列表。使用 Outlook 应用查看您的电子邮件收件箱时,会看到三个 Pivot 页面:“全部”“未读”“紧急”。如果您仅希望查看紧急邮件,这种方式就非常方便。这样,您不必滚动浏览“全部”Pivot 页面中的电子邮件,即可找到那些标记为紧急的邮件。

UX_AppNavModels_15

Outlook 客户端应用

另一个使用应用标签样式的现有应用是 Netflix 应用。每个 Pivot 页面都显示影片列表。由于应用了筛选,因此每个 Pivot 页面上的列表都不相同。您可以比较并查看每个列表如何独特和有用。“即时”Pivot 页面显示放置在队列中的影片,您可以在需要时通过流式设备观看这些影片。“主页”Pivot 页面显示 Netflix 认为您可能会感兴趣的影片。“搜索”Pivot 页面显示符合搜索关键字的影片。

Pivot 页面已经过聚焦且高效。其主要工作是基于任务的操作(如筛选、排序和显示相关项)。全景具有可扩展性、聚合性和探索性。它们最适合用于提升并显示最近相关的内容。有时一个控件要比另一个控件更合适。

UX_AppNavModels_16

Netflix 应用

每个 Pivot 页面实际上都是一个标签,并且这些标签都列于顶部。正如您可以从 Netflix 应用图形中看到的,应用当前位于“主页”Pivot 页面,并且您可以看到“流派”Pivot 页面位于右侧。若要转到“流派”Pivot 页面,只需点按该页面,或平移到该页面即可。

与您可能会在桌面实现中看到的基于标签的应用相比,它们之间的一个不同点在于,对于 Windows Phone 标签而言,您通常一次只能看到两个或三个标签标题(Pivot 页面标题)而不是所有标题。

应用应该将所拥有的 Pivot 页面数降到最低。如果用户从 Pivot 页面跳转到 Pivot 页面,可能会感到迷惑。尽量保持 Pivot 页数为六个或更少。如果您发现自己需要更多的页数,可以让其中一个 Pivot 控件包含一个具有多个链接的列表控件,点按其中的链接即可转到其他页面或本身就是 Pivot 控件的其他级别的导航。若要了解该控件是否您所需控件,可以参见 Windows Phone 深化细目列表

提示提示:

Panorama 控件当前不支持横向模式,但是 Pivot 控件支持。这可能是把 Pivot 控件从 Panorama 控件中挑选出来的一个原因。您还可以从 Pivot 页面移动到 Pivot 页面,方法是点按 Pivot 标题。这是 Panorama 控件无法执行的操作。

在本主题开头,我们说过 Pivot 控件的最佳用法就是让每个 Pivot 页面包含相同类型的数据,但仅显示该数据的不同筛选结果。我们还说过 Panorama 控件可用于显示包含不相关数据的页面。如果数据本质上不同,但是仍然都与一种类型的主题相关,则您也可以通过这种方式使用 Pivot 控件。例如,如果您要在供旅客使用的应用中显示有关纽约市的一些信息,则可能需要具有使用 Pivot 控件,Pivot 页中同时包含令人感兴趣的统计信息(如位置、人口和每年的税收收入)。然后,您可以通过其他 Pivot 页面获取要参观的名胜古迹之类的信息,并通过另一个 Pivot 页面查找要住宿的酒店。

ESPN ScoreCenter 应用是一个应用标签导航模型的示例,其中每个 Pivot 页面都包含基于中央主题的异类数据。

UX_AppNavModels_17

ESPN ScoreCenter 应用

Panorama 控件的“主页”(如 Facebook 应用的主页)中,您可以点按列表中的导航项并导航到 Pivot 控件。这是从 Facebook“主页”Panorama 面板中选择“配置文件”时的情况。当用户点按“配置文件”选项时,会导航到 Pivot 控件,该控件显示 Pivot 页面(如“留言板”“信息”“我的照片”等)。这样,即可从一个控件导航到另一个控件。

UX_AppNavModels_18

在 Facebook 应用中从主 Panorama 转到 Pivot 控件

您可能很想要从 Panorama “主页”面板选项导航到另一个 Panorama。这不是一个好主意,因为您可能会让用户感到困惑,原因是用户很容易忘记他们实际上进入了哪个应用。Panorama 通常在后台有一个大的展开图像,确保在用户位于顶部时为用户定位,如果用户导航到本身为具有新背景的 Panorama 的子区域,则他们可能会感到困惑。

由于所有数据都具有相同的类型,因此在许多情况下,系统会沿着底部提供应用栏,那里包含与所显示内容相关的按钮。如下图所示的 Outlook 应用有一个始终可见的应用栏,因为它包含用户需要执行(以某种方式影响所显示内容)的操作。

UX_AppNavModels_15

Outlook 客户端应用

在 Outlook 应用中,不论您位于哪个 Pivot 页面上,应用栏都可能会允许执行相同的操作。从上图中您可以看到有许多按钮,这些按钮可用于创建新电子邮件、显示选择框、切换文件夹和重新同步电子邮件。这是 Pivot 控件与 Panorama 控件的另一个区别,因为您可能不会沿着底部将应用栏放置在此处。

不要假设可以一直将相同的按钮保留在底部,除非您认真考虑了每个 Pivot 页面上的内容并认为这样做确实有意义。Pivot 控件的某些用法可能无法在每个 Pivot 页面上保留相同类型的数据。

您可以使用用户看到的初始 Pivot 页面,显示所有其余 Pivot 页面的列表。这样,用户可以点按某个页面并直接跳转到该 Pivot 页面而不是滑动至该页面。该列表还可以包含启动其他应用的条目。

您不需要让用户登录到“主页”Pivot 页面(如果您不希望他们这么做)。例如,在影片列表应用中,不必让用户登录“主页”pivot 页面,而是可以让他们登录某个其中显示最新、最受欢迎影片图形的 Pivot 页面。这样,用户就会接触一些比较醒目的内容。

显示: