文 / 张欣

在今年2月15日巴塞罗那的Mobile World Congress 2010大会上，微软终于正式宣告了其下一代的智能手机平台Windows Phone 7 Series(目前已经更名为Windows Phone 7)。这半年来，随着各大媒体对于Windows Phone 7的关注度日益提高，大家对Windows Phone 7的了解也越来越多。同时，为了能够让广大开发者在Windows Phone 7正式上市前顺利地开发出Windows Phone 7上的相关应用，微软也已经在这两个月陆续地向Windows Phone 7第一拨发行国家的开发人员发放了几千台Windows Phone 7的开发样机。

[caption id="attachment_4040" align="aligncenter" width="300" caption="图1 Windows Phone 7的Metro UI"]

[/caption]

Metro

从早期的Pocket PC到后来的Windows Mobile操作系统，微软的智能手机平台最为人所诟病的一点就是：它太像一个电脑而不是手机了。这一点放在七八年前或许还能作为证明其功能强大的优势来说说，放在现在只能让人摇头叹息。直到Windows Phone 7的出现才真正让人眼前一亮，或许这才是用户所需要的智能手机操作系统。Windows Phone 7采用了一套称之为“Metro”的设计规范来设计它的用户界面和交互部分。之所以起名叫做“Metro”，是因为这是从大家常见的地铁中对于乘客的指示系统中汲取了大量的经验：简洁清晰、快速、内容为主。微软自己则对Metro描述为：“Metro is our design language. We call it Metro because it's modern and clean. It's fast and in motion. It's about content and typography. And it's entirely authentic.”

Panorama

还记得在Windows Mobile中，如果程序具有多个不同的视图来展现不同的内容的时候，你会怎么安排这些内容呢？没错，最常用的做法莫过于建立多个窗体，而用户通过窗体上的按钮或者超链接等控件的操作来在多个窗体之间进行跳转。这样做其实就是一种完全的电脑上行为的模拟，对手机用户其实是很不方便的。一来用户需要在某些特定的控件上点击才能进入所需要的视图；二来用户往往容易迷失在多个窗体之中不知道该如何返回或者去往想要的窗体。

[caption id="attachment_4041" align="aligncenter" width="300" caption="图2 用户容易在多窗体中迷失"]

[/caption]

Metro给我们带来的最大改变之一，就是带来了Panorama(全景视图)。它在Windows Phone 7中的六个Hub(People、Music & Video、Pictures、Games、Marketplace、Office)中被广泛使用。全景视图不同于以往的任何一个手机系统的用户界面，不再是让你的内容去适应狭小的手机屏幕，也不再是在不同的窗体之间来回切换。它提供了一种全新的视图，在水平方向上扩展内容到屏幕之外，来展现/集成不同的控件、数据和服务，就好像把它们排布在一张横轴的画卷上。当前可视区域所停留的部分，只是手机屏幕的大小部分，就好像画卷上的一个滑动窗口。用户所需要做的只是轻轻地在界面上横向滑动手指，这张画卷就会随之而动，将你想要看的内容带到你眼前的焦点区域。

[caption id="attachment_4042" align="aligncenter" width="300" caption="图3 全景视图"]

[/caption]

Pivot

对于多内容的组织，其实还有一种源自于桌面应用程序的形式。那就是通过标签页，它将多个内容页面都放在同一个窗体内，不过某一时刻只能看到一个标签页的内容。用户可以通过点击标签来切换视觉区域内所展现的内容页面。

[caption id="attachment_4043" align="alignleft" width="200" caption="图4 标签页"]

[/caption] 这种组织方式有效地解决了多窗体中容易导致用户在窗体中迷失的状况，但是它也有一些问题。例如窗体的下方往往会有一些菜单栏，而点击标签页的时候会不小心触碰到这些菜单项；当标签页过多的时候，用户不得不点击左右箭头来查看其他的标签。HTC在其Windows Mobile产品中增加了一套名为HTC Sense的用户界面，它的本质其实也就是标签页。只不过HTC很好地规避了标签页的这些缺陷，例如加大标签用图标来代替以防止点击不准确；通过滑动的方式在多个标签中切换。

[caption id="attachment_4044" align="alignright" width="182" caption="图5 枢轴视图"]

[/caption] 相应的，在Windows Phone 7中微软也提供了类似的解决方案，Pivot(枢轴)控件，用来在这狭小的屏幕中更好地组织内容。但是它并不是一个全新的控件，其实在Windows Mobile 6.5.3中它就已经露出了身影。只不过在Windows Phone 7中对其又做了一些修改，使得它更加符合Metro设计规范。

我们会看到，Pivot控件将标签内容放到了顶端用高亮文字标识。这样既容易提醒用户当前所处的位置，又不至于和下方的App Bar中的命令按钮靠得太近而带来误操作的风险。

Application Bar

不管是桌面应用或者基于浏览器的网站，还是手机上的移动应用程序，菜单是一项很重要的功能导航系统。用户可以通过它来执行某些命令或者通过它在不同的内容页面跳转。在早期的Windows Mobile产品(Pocket PC 2002/2003)中我们会发现它有着很浓厚的桌面应用的影子，在窗体的下方密密麻麻地排布着小小的菜单项。用户必须小心翼翼地点击这些菜单才不会至于点击错误。同时，这些菜单项上还可能有子菜单的选择。这时候，你拿着触笔就好像是用鼠标一样必须非常精准才行。这种导航方式显然不利于手机用户的单手操作。一直到了Windows Mobile 5的时代，微软对菜单系统才有所改善，下方的菜单栏中只允许排布两个菜单项，如果有更多的菜单项，可以通过这些菜单的子菜单来实现。

[caption id="attachment_4045" align="aligncenter" width="300" caption="图6 Windows Mobile系统中的菜单"]

[/caption]

但是这种改进并不足以满足用户的实际需求。因为只有左右两个菜单项，如果用户的菜单项超过两个的话，实际上当前界面中最多只有一个菜单项可用于直接的操作命令(另外一个必须设置成子菜单来容纳更多的菜单项)。所以它导致了用户往往需要展开菜单项来操作一些命令。微软在Windows Phone 7中对菜单系统又做了一些改进。现在的菜单系统称之为Application Bar，其中包含命令按钮和菜单项两种方式。通常情况下，只显示最多四个常用的命令按钮，当用户需要查看更多的命令的时候则再来展开菜单项。

[caption id="attachment_4046" align="aligncenter" width="300" caption="图7 Windows Phone 7中的Application Bar"]

[/caption]

小结

由于时间和篇幅的缘故，笔者无法一一对Windows Phone 7中的用户界面和交互设计部分作详细研究。当然，Metro带给大家的远远不只是全景视图、枢轴控件以及菜单系统的改变。它不但包含着大量控件的设计和使用规范，也对用户界面和用户交互都做了很详细的解释和设定。如果您想要开始研究开发Windows Phone 7上的应用程序的话，一定不要忘了去微软的官方网站下载《UI Design and Interaction Guide for Windows Phone 7》(目前版本v2.0)。

目前该指导手册的版本仍然是基于beta版SDK的。在这里需要注意的是，目前发布的Windows Phone 7beta版的SDK中并没有包含全景视图和枢轴这两个控件(不过在互联网上你可以搜索到不少第三方对它们的实现)，因为微软还在对这两个重要的控件进行最后的调试和准备。当然，微软已经确认在最终发行的正式版SDK中会包含这两个控件的官方版本。

作者简介：

张欣，微软最有价值专家，WPMind.com站长。多年的研发和项目管理经验，目前专注于移动与嵌入式应用领域。

(本文来自《程序员》杂志10年09期，更多精彩内容敬请关注09期杂志)

《程序员》9月刊最新上市：http://www.programmer.com.cn/3923/

《程序员》订阅：http://dingyue.programmer.com.cn/