我们曾介绍过Windows Phone 7正式版本的开发工具- Windows Phone Developer Tools RTW。在新版本的开发工具中，微软加入了Metro UI中最重要的两个控件：Panorama和Pivot（中文为全景视图和枢轴视图）。本文主要内容如下：首先对Panorama视图和Pivot视图作深入的分析；然后结合开发工具，给出这两个控件的使用方法；最后从开发者的角度，对这两个控件进行了比较，给出了设计建议。

Panorama视图

1. Panorama视图简介

Panorama视图

Panorama视图是Windows Phone OS 7.0核心体验的一部分。标准应用存在手机屏幕界限的局限；与标准应用不同，Panorama视图应用利用一个超出手机屏幕局限的长水平画布提供一种独特的方式来浏览控件、数据和服务。这些内在的动态应用利用分层的动画和内容，实现了层与层之间以不同速度平滑过渡，就和视差效果类似。

2. Panorama视图组件

Panorama视图的用户接口由四个类型组成：背景图片、全景标题、全景区域和全景区域标题，它们有各自独立的动作逻辑。

Panorama视图组件

2.1. 背景图片（Background Image）

背景图片（Background Image）

背景图片位于全景应用的底层，由它来给出类似于杂志的体验。背景图片通常是一张全景图，它可能是应用程序最直观的部分。如何创建一个好的应用体验，我们在设计过程中，必须牢记以下因素：

◆利用单色的背景，或者是跨度为整个全景的图片。如果你决定使用图片，从大小来考虑，你可能会使用JPG图片，但是Silverlight支持的任何UI图片类型都是可以接受的。

◆可以使用多个图片作为背景，但是在任何时刻，只能显示其中一张。

◆为了确保良好的程序性能，最少的加载时间，并且无需剪裁，图片大小应该在800 x 480和800 x 1024像素（高x宽）中选择。

◆对于一个具备4个全景区域的应用，使用16 x 9的屏幕高宽比。

◆为了提高文本的易读性，使用一个透明的黑色或者白色过滤器。

◆在动态UI元素上，避免使用下拉阴影效果（drop-shadow effects）。

◆使用一定比例的与panning手势相关的动作，该panning手势和顶层内容宽度与背景图片的宽度比例有关。

◆只有背景艺术出现在应用中时，才使用动画。

◆当用户的pan手势超出图片的宽度时，关闭并且返回可见区域。

2.2. 全景标题（Panorama Title）

 
全景标题（Panorama Title）

全景标题是整个全景应用的标题。其目的是让用户识别该应用，无论是以何种方式进入应用，它都必须是可见的。下面是全景标题的设计建议：

◆使用简洁的文字或者图片，例如一个logo作为全景标题。使用多个UI元素，例如一个logo加文字（或者其他UI元素）也是可以接受的。

◆确保字体或者图片的颜色与整个背景相匹配，而且，标题的可视性不依赖于背景图片。

◆为了保持一致性体验，在Start菜单中的应用程序名称和该标题一致。

◆避免标题动画，或者动态改变标题的字体。

◆使用一定比例的动作，相对于最顶层内容来说较慢，而相对于底层图片来说较快。

◆当用户的pan手势超出图片的宽度时，关闭并且返回可见区域。

2.3. 全景区域（Panorama Sections）

全景区域（Panorama Sections）

全景区域是全景应用的组成部分，它封装了其他控件和内容。以下是全景区域的设计建议：

◆最大化利用四个全景区域，确保全景应用的平滑性能。

◆在列表或者网格内使用垂直滚动是可以接受的，但前提是它处于全景区域内，并且不同时与水平滚动出现。

◆只要全景区域的宽度小于屏幕的宽度，垂直滚动是可以接受的。

◆支持所有自定义控件和标准控件。

◆与手指拖拽的移动比例相同。

◆当用户导向到一个新的区域时，开启屏幕动画。

◆设计全景区域的布局，使得少量的下一个全景区域可见。提供轻微的重叠，使得用户直觉地利用Pan手势来切换应用。

◆直到该全景区域有内容要表示时，才显示该全景区域。

2.4. 全景区域标题（Panorama Section Titles）

全景区域标题（Panorama Section Titles）

全景区域标题是全景区域的可选部分。如果提供标题，考虑下面的设计建议：

◆尽管可以使用图片，最好使用简洁的文本。使用多个元素，例如一个图片加文字（或者其他UI元素）也是可以的。

◆确保全景区域标题不依赖于背景图片。

◆避免使用标题动画，因为标题可以移动。

◆跨越整个区域，即使存在多个控件。

◆当用户导向到一个新的区域时，开启屏幕动画。

【编辑推荐】

1. Windows Phone 7 UI设计初学者入门
2. Windows Phone 7 UI设计理念
3. Windows Phone 7 UI设计：代码隐藏文件和启动画面
4. Windows Phone 7 UI设计：理解MainPage.xaml
5. 简述Windows Phone 7应用程序开发平台