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

Windows Phone 的带有主页菜单的主应用中心(Panorama 或 Pivot 控件)

2013/12/5

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

 

您可能正在设计一个具有多种功能的应用。当您查看这些功能时,可以决定将其分别归类到独特的区域。这些区域最终将成为用户要访问的单独的应用部分。您将需要设计一种简单的方法供用户围绕 UI 区域进行导航。此类型的应用需要中央应用中心,用户可以从中启动到应用的每个子区域。

例如,可以想象设计管理足球队的应用。此应用将需要多个区域的功能 - 一个用于游戏和实践的日历,一个用于球队名册信息,一个用于分数和球员统计信息,还需要一个用于从过去的游戏中进行录像。您可能希望提供一种方法,供用户在导航到各个不同的 UI 区域时使用。您可以通过在应用启动时显示的主页实施中央应用程序中心,执行上述操作。

UX_AppNavModels_01

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

从中央 UI 中心,用户可以导航到应用程序中的任何区域。导航到子区域后,向他们显示当时必需的任何 UI。例如,在足球队应用中,用户可以从中央应用程序中心页面转到允许他们查看参加给定比赛的球员统计信息的页面。当用户完成查看给定应用子区域,希望转到其他子区域时,但是首先需要返回到中央应用程序中心。用户无法直接从“分数和统计信息”转到“日历”。用户必须首先返回中央应用程序中心。

提示提示:

在主页中使用中央应用程序中心以便导航到不同的应用区域,这是一个极好的设计,使用户能够高效地与应用进行交互。

直观地向用户显示应用程序中心有多种方式可用。建议您使用 Windows Phone Panorama 控件。本主题介绍此设计,然后演示您可能还需要考虑的变体。

本主题包含以下各节。

 

Microsoft 提供称为 Panorama 控件的 UI 控件,该控件可以用作中央应用程序中心。此控件允许用户导航到应用中的所有功能区域。Panorama 控件由以下部分构成:Panorama 背景图像(位于整个控件后面,作为其背景)、主面板(在应用启动时登录)和其他面板(在应用顶层对 UI 进行分段)。

UX_AppNavModels_02

“音乐 + 视频”中心

Panorama 控件向用户显示画布图面,该图面延伸范围超出屏幕区域。通过跨画布轻拂,用户可以按面板水平移动画布。当应用启动时,用户所在的面板是全景的第一个面板。此处存在用法变体,具体取决于您希望导航如何工作。对每个变体都进行了说明。

最左侧的第一个面板可以用作主位置,作为导航到应用子区域的起始点。此面板显示区域菜单,用户可从中进行选择。在上图中显示的音乐和视频中心应用中,用手指点按“收音机”一次即可进入收音机页面,该页面实际上是音乐和视频中心应用内部的子应用程序。全景 UI 会被完全替换,并且会向用户显示“收音机”UI。如果现在用户想要转到“播客”区域,则用户可使用硬件“后退”按钮向后导航到全景主面板,然后在菜单列表中点按“播客”条目。如果子区域列表长于显示屏的大小,则可以在主面板中使用滚动视图。

UX_RadioApp

Windows Phone 7 音乐和视频中心应用的收音机页面

在主面板中可导航到的位置列表可能包含可启动到全新应用的条目。例如,音乐和视频中心应用主页包含一个条目,可让您导航到 Windows Phone 商店。点按此条目可导航到商店 音乐子区域,该子区域本身就是一个 Panorama 控件。

主面板右边的面板包含您希望用户可以轻松访问的 UI。如何使用它们由您决定。不要通过以不同的方式访问子区域来让用户感到困惑。而是使用右侧的这些面板来包含某些类型的摘要信息,该信息与子区域中的内容有关。例如,对于音乐和视频应用,两个其他面板可用来显示最近访问的媒体。

因此,使用音乐和视频应用中的“历史记录”面板是一种方便的方法,不必向下导航到子区域,即可快速访问您最近收听或查看过的内容。如果您已经进入“音乐”的子区域,并且已收听某首歌曲,则该歌曲会在“历史记录”面板中显示(供快速访问时使用)。因此,在这种情况下,使用该面板可以快速访问在子区域中访问过的内容。

Facebook 应用是使用 Panorama 控件的应用的另一个示例,它为用户提供一种围绕其功能进行导航的简单方法。它也具有相同的主面板,显示用户可以导航到的区域列表。例如,点按一次“好友”条目,用户即可导航到管理其好友列表的 UI。

在顶级 Panorama 控件处,右侧的面板基本上用于更快地访问设计人员认为要在顶级显示的最有用的视图。全景中的“最近”面板实际上是子区域中的 UI。要从主面板访问该面板,可以点按“新闻联播”,然后在 Pivot 控件中,导航到此子区域(该区域实际上是一个 Pivot 控件)。“新闻联播”子区域 Pivot 控件有五个页面:“最近更新”“照片”“链接“视频”。设计人员认为与其让用户向下导航到“新闻联播”,然后再导航到“最近更新”,不如将其公开为顶部 Panorama 控件中的面板。顶部 Panorama 控件中“照片”“事件”面板的操作与此类似。

UX_AppNavModels_03

用于 Facebook 应用的中央应用程序中心 UI

您可以显示要从中进行选择的图像网格,而不是显示要从主页中导航到的区域列表。同样的操作已经完成,只是看起来有点不同。使用图像,您可以获取直观的图解,通过该图解可能会更容易确定该选择导航到的位置。每个图像上面都可能覆盖有文本,用来提供有关该应用区域及其活动的更多信息。

如果您有 3 x 3 的网格,则可能最多有九个图像供选择(如果需要)。从承载此图像网格的主面板中,用户可以单击任何图像以导航到应用提供的不同功能区域。

此主面板实际上可以是跨越多个可显示面板宽度的区域。例如,您可以水平向右扩展图像的主面板以占据更多空间(如果需要)。Kelley Blue Book 应用具有向右延伸的网格,如下图所示。若要导航到其余的图像,您仅需轻拂以水平平移即可。在此情况下,Panorama 控件主面板为双倍宽度的面板。

UX_AppNavModels_04

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

不要创建垂直滚动的图像网格,因为这对用户来说太令人困惑了。

即使您使用 Panorama 控件和行为方式像菜单或中心的主面板导航至应用的功能区域,也不必在打开应用时,将其作为开始登录点。您可能选择首先显示一些其他面板的原因仅仅在于可能产生的影响。例如,如果您的应用显示影片和放映时间,则可能包含应用子区域的选择列表的主面板。您可以使用一个面板用来显示最新、最受欢迎影片的图形,而不是让用户登录此处并接触一些不很有趣的内容。这样,用户就会接触一些比较醒目的内容。

当您打开 eBay 应用时,不必从主面板开始。而是,从具有特色交易时刻的面板开始设计。向右轻拂,您将导航至应用程序中心主面板,点按其中的图像可以导航至应用子区域“观看”“销售”“购买”“消息”。还要注意使用位于顶部的“搜索”文本框。这是放置在顶部的一个有用的 UI 元素,用于快速从中查找内容。

UX_AppNavModels_05

用于 eBay 应用的应用程序中心 UI

使用 Microsoft 提供的 Panorama 控件存在备选方法。使用全景,可以在顶层显示多个面板。但是,您可能不需要这些面板。相反,您可以在单个页面上显示简单列表,如下图所示。这是应用打开时向用户显示的页面。此应用使用文本标题左侧的图标和每个子区域的描述导航至该位置。

UX_AppNavModels_06

用于简单日记应用的应用程序中心 UI

您可能决定希望向用户呈现一种独特的交互体验,其中您使用了一些以某种独特艺术方式显示可导航子区域的图形背景。您可以这样做,从而为自己建立一个品牌。这更适用于某些类型的娱乐应用。下面是引人注目的可视主页的示例。

UX_AppNavModels_07

Mycomic 应用

如上所述,您的应用可能有许多不同的功能区域,您可能考虑过将这些功能分别拆分到其中的应用中。您不必执行此操作,但仍然可以拥有单个应用。应用打开时显示的主屏幕充当起始位置,用来访问组成单个应用的实际子应用。此主应用程序中心页将会是用户单击应用图标并启动该应用时显示的页面。

我们建议您不要分别为具有该区域功能的每个独特区域创建一个 Windows Phone 应用程序。此操作的问题在于用户必须退出一个应用,然后再启动另一个应用。想象有九个不同的应用程序供用户进行交互。相反,我们建议您创建单个应用程序供用户启动,然后从这个单个起始点访问该应用的不同区域。作为应用设计人员,您希望用户进入中央中心,并且能够查看您在某个中央屏幕上提供的所有内容。

要作出的困难决定是您如何拆分应用的功能,以及您希望用户能够浏览哪些导航级别。如果您打算在主面板中使用 Panorama 控件,则需要决定当用户从列表中点按某个选择时显示哪个 UI。一种选择会将您导航出全景应用程序中心,并导航到一个新的 UI 控件(如单个页面或者 Pivot 控件)。我们将使用如下所示的音乐和视频中心应用主页阐释这种效果。

UX_AppNavModels_08

用于音乐和视频的应用程序中心

对于音乐和视频中心应用,“收音机”选择是单个 UI 页面,允许您更改正在收听的收音机电台。在这个子区域中,不存在进行进一步导航的其他使用列表、Panorama 或 Pivot 控件。但是,从主页选择“音乐”可显示您拥有的歌曲的其他视图。下图显示 UI 树的一部分,用于导航整个“音乐”选择。

UX_AppNavModels_09

用于音乐和视频应用中的音乐的导航树

当您位于“音乐”区域中时,显示可水平滚动的 Pivot 控件。您在“音乐”下面始终首先登录的 Pivot 页面为“艺术家”Pivot 页面。从该位置,您可以向左或向右遍历不同的 Pivot 页面。每个 Pivot 页面提供一种查看您必须从中选择的歌曲的不同方式。

当用户已导航到他们需要的应用中的区域时,您可以向他们显示当时必需的 UI。从任何给定的应用子区域中,用户实际完成他们需要的交互。在这第二个级别,不建议向用户显示要导航到的其他区域列表。最好的做法是仅保留主页 Panorama 控件和另一个级别的详细信息。从这个另一个级别,用户将在进入另一个应用区域之前返回到主页。硬件“返回”按钮用于返回。

Panorama 控件允许您显示跨所有面板延伸的图像。您可以始终使用相同的图像,也可以通过编程方式不时更改图像以改变您的主题。您可以在使用应用的过程中,显示与用户兴趣相关的图像。使用不太杂乱并且不会干扰图像上的 UI 内容的图像。

UX_AppNavModels_10

背景图像

您可能需要多个包含要导航到的子区域列表的面板。分隔两个不同导航区域的列表可能事出有因。在此情况下,您将拥有两个面板,而且均充当主面板。

您的应用在启动时可能无法直接转到中央应用程序中心。原因在于在允许用户访问应用之前,您可能需要首先向用户显示某些类型的登录或密码解锁屏幕。您可能还希望在用户进入应用之前,向他们显示一些品牌启动页面。

UX_AppNavModels_11

用于简单日记应用的登录页面 UI

显示: