转自:http://msdn.microsoft.com/zh-cn/library/windowsphone/design/hh202912(v=vs.105).aspx
适用于: Windows Phone 8 | Windows Phone OS 7.1
Panorama 控件显示可以从一边平移到另一边的项视图。它是应用的全屏容器和导航模型。
Panorama 控件
用户界面由按其自身独立运动逻辑运行的层类型组成:一个背景图像、一个 Panorama 标题、Panorama 区域标题和 Panorama 区域。缩略图可完善体验,并且是全景视图的主要元素。它们链接到在全景体验之外使用的内容或媒体。
背景图像是最低的层,并为 Panorama 提供了丰富的杂志般的感觉。背景通常是一张整幅图像,它可能是应用最直观的部分。
Panorama 标题应标识应用,并且应当清晰可见,而无论用户以何种方式进入应用。
Panorama 区域是封装有其他控件和内容的全景应用的组件。Panorama 区域的移动速率与手指平移或轻拂的速率相同。
Panorama 区域标题对于任何给定的 Panorama 区域都是可选的。
缩略图可以是全景视图的主要元素。它们链接到在全景体验之外使用的内容或媒体。
![OEM_OemMoAppDevGuide_PictPan OEM_OemMoAppDevGuide_PictPan](http://i.msdn.microsoft.com/dynimg/IC622551.png)
带缩略图的 Panorama 控件
全景体验包括一个 Panorama 控件以及一个或多个 PanoramaItem 控件。Panorama 控件用作应用的基础,PanoramaItem 控件托管各个内容部分。基于应用的要求,您可以将多个 PanoramaItem 控件添加到 Panorama 控件表面,其中每一个都提供一种具有独特目的的功能。例如,一个 PanoramaItem 可能包含一系列链接和控件,而另一个则是缩略图图像的储存库。用户可以使用 Panorama 应用已提供的手势支持在这些部分之间来回平移。
Panoramas 一般准则:
-
Panorama 控件支持从后向前包装,也支持从前向后包装。使用这种效果可以正确地设计您的应用流。
-
如果在 Panorama 中使用应用栏,请将“模式”设置为“最小化”。此模式专门用于将 Panorama 页上的屏幕空间最大化。有关更多信息,请参见 Windows Phone 的应用栏。
-
为了品质以及限制用户导航浏览的视图数量,Panorama 控件中的区域不应超过四个。内容越复杂使用的区域应越少。不要让过多的区域令用户不知所措。只需四五个区域,用户就可以判明他们所处的方位,以及左侧和右侧的内容。
-
Panorama 控件仅支持纵向。Panorama 控件不支持横向。不得旋转 Panorama 控件内启动的对话框以避免冲突体验。
-
Panorama 控件可以在系统托盘中显示进度条,也可以在启动时全屏显示“加载”指示器。当更新或刷新 Panorama 控件的某个区域时,会显示系统托盘中的进度条,但不会阻止用户交互。
-
首次访问:显示的第一个区域需将 Panorama 控件标题妥善左对齐。对于将哪一区域作为默认设置这一问题并无标准指导;具体取决于将要显示的内容。
-
对于后续访问,当用户再次访问同一 Panorama 控件时,会将用户转到上次中断时访问的窗格。
-
不要在 Pivot 控件内部使用 Panorama 控件,反之亦然。不过,您可以链接 Panorama 控件区域中的各项,指引用户进入 Pivot 控件。
-
不要使用可在 Panorama 控件内部平移或滚动的控件。例如,将 Map 控件放入 Panorama 控件区域中可能会造成该 Panorama 控件难以使用。难以分辨所输入手势的用意。例如,如果您有一个滑块,您尝试将其向左滑动,并且您是在 Panorama 控件的区域之中,则无法确定您是希望滚动区域还是希望移动滑块。解决方案是导航到一个需要手势输入的带控件的子页。只要为手势交互启用地图,您就可以在 Panorama 控件的区域中放置地图。您可以覆盖会激活该地图的按键。按下按键会实际导航到一个仅具有 Map 控件的单独页面。用户随后可按“返回”按键返回到 Panorama 区域。
对于 Panorama 标题:
-
对 Panorama 标题使用纯文本或图像,如徽标。您还可以使用多个元素,例如徽标和文本(或其他 UI 元素)。
-
确保标题的字体或图像颜色在整个背景内正常显示,并且在可见性上不依赖于背景图像。使用系统字体和样式,除非需要特定的品牌体验(使用其他字体、大小或颜色)。
-
在“开始”中对启动磁贴使用相同的 Panorama 标题,以保持一致性。
-
避免设置 Panorama 标题动画,或动态更改其大小。
-
对 Panorama 标题使用相对于最顶级内容层较慢的运动速率(并且慢于背景图片)。
对于 Panorama 区域标题:
-
对 Panorama 区域标题使用纯文本。或者,您可以使用图像。您可以使用多个元素,如图像和文本(或 UIElement 类中的其他元素)。
-
确保 Panorama 区域标题不依赖于背景图片。
-
避免设置 Panorama 区域标题动画,因为标题将会移动。
-
当用户导航到新区域时,在屏幕外设置 Panorama 区域标题动画。
-
Panorama 区域标题应当有不同的行为,这具体取决于区域的宽度是大于还是小于屏幕宽度。如果区域的宽度较大,则应当设置水平动画 - 标题不应位于区域左上角,而应当在 Panorama 移动的同时,以不同的速度沿顶部移动。在这些情况下,不应进行垂直滚动。或者,如果区域的宽度小于屏幕宽度,则标题应当始终设置在屏幕左上角。在这些情况下,不应设置任何水平动画,并且标题应当随内容移动。
对于 Panorama 区域:
-
通过在 Panorama 区域中的列表或网格内垂直滚动是可以接受的,只要它是在区域的范围内进行,并且不与水平滚动平行即可。
-
当用户导航到新区域时,在屏幕外设置 Panorama 区域动画。
-
请考虑隐藏 Panorama 区域,直到它们有内容要显示为止。
背景插图最佳做法:
-
您并不总是需要具有背景或复杂背景。
-
照片背景可使 Panorama 控件呈现卓越的视觉效果。
-
Panorama 控件能以主题形式提供,并且该应用品牌颜色可以覆盖系统主题。
-
在 Panorama 控件主题内添加嵌入文本和徽标时,请务必谨慎,因为这样可能会导致系统托盘或其他元素重叠或封闭问题。
-
通过对内容中包含的文本和图像进行选择,保持 Panorama 控件体验的完整性和美感,使其不显得杂乱和拥挤。
-
使用深色、柔和的低对比度背景。一项实用技术是使用背景图像顶部的半透明黑色或白色筛选器(矩形)增强文本的易读性。这可以在位图编辑工具中完成,也可以使用矩形控件覆盖在背景图像顶部。
-
最好使用单个图像作为 Panorama 控件的背景。
-
使用一个单色背景或跨整个 Panorama 控件的图像。如果决定使用图像,Silverlight 所支持的任何 UI 图像类型都是可接受的。但是,推荐使用 JPEG 图像,因为其文件大小通常小于其他格式。
-
您可以使用多个图像作为背景,但是请注意,在任意给定时刻都只会显示一个图像。
-
背景图像应当在 480 x 800 像素和 1024 x 800 像素(宽 x 高)之间,以确保较高的性能、最少的加载时间,以及不需要缩放处理。
对于缩略图:
-
使用突出显示可识别主题的裁剪图像,而不是整个图像。如果图像没有文本便不可识别,为了识别内容,最多可使用两行文本。
![UI_Panorama_04 UI_Panorama_04](http://i.msdn.microsoft.com/dynimg/IC622552.png)
部分 Panorama 控件(标题、区域标题等)