2024年4月12日发(作者：兴蓓蕾)
浅窥Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７２＿用户交互设计
■文，张欣
征 卫▲今年２月１５日巴塞罗那的Ｍｏｂｉｌｅ Ｗｏｒｌｄ
．
Ｐａｎｏｒａｍａ
还记得在Ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ中，如果程序具
有多个不同的视图来展现不同的内容的时候，你
ＷｊｎｄＯＷＳ Ｐｈｏｎｅ ７ Ｓｅｒｉｅｓ（目前已经更名为
会怎么安排这些内容呢？没错，最常用的做法莫
Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７）。这半年来，随着各大媒体
过于建立多个窗体，而用户通过窗体上的按钮或
对于Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７的关注度日益提高，大家
者超链接等控件的操作来在多个窗体之间进行跳
对Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７的了解也越来越多。同时， 转。这样做其实就是一种完全的电脑上行为的模
为了能够让广大开发者在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７正式
拟，对手机用户其实是很不方便的。一来用户需
上市前顺利地开发出Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７上的相关 要在某些特定的控件上点击才能进入所需要的视
应用，微软也已经在这两个月陆续地向Ｗｉｎｄｏｗｓ
图；二来用户往往容易迷失在多个窗体之中不知
作者简介：
张欣，微软最有价值专
家，ＷＰＭｉｎｄ．ｃｏｒｎ站长。
多年的研发和项目管理
经验，目前专注于移动
与嵌入式应用领域。
Ｐｈｏｎｅ ７第一拨发行国家的开发人员发放了几千
台Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７的开发样机。
ＩＭａｉｎ Ｆａｒ
］＾ｌＩｌＩｍ ｔｉｌｔｓ Ｄ
●
一
￣ｎｔｅｎｔ＝ｏｆ Ｆａｎ吐－
ｓ％ ．１ｔ时 ・
－
ＬＯＳｔ
’
’
Ｉｘ］Ｈ。ｗ协ｒｅｔｕｒｎ７．
－
【岫 ＇ｏＩｍｄ 时
Ｉ ｐｒｏｄ＝ｔ＝ｌ Ｕｓｅｒｓ
、
Ｔｗｏ ｌ ｌ Ｒ￣￣ｕｒｎ？
图２用户容易在多窗体中迷失
图１ Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７的Ｍｅｔｒｏ Ｕ
Ｍｅｔｒｏ给我们带来的最大改变之一，就是带来
了Ｐａｎｏｒａｍａ（全景视图）。它在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ
Ｍｅｔｒｏ
从早期的Ｐｏｃｋｅｔ ＰＣ到后来的ＷｉｎｄＯＷＳ ７中的六个ＨＵｂ（ＰｅｏＰｌｅ、ＭＬＩＳｉｃ＆Ｖｉｄｅｏ、
Ｍｏｂｉｌｅ操作系统，微软的智能手机平台最为人所
Ｐｉｃｔｕｒｅｓ、Ｇａｍｅｓ、Ｍａｒｋｅｔｐｌａｃｅ、Ｏｆｆｉｃｅ）中被
诟病的一点就是：它太像一个电脑而不是手机 广泛使用。全景视图不同于以往的任何一个手机
了。这一点放在七八年前或许还能作为证明其功 系统的用户界面，不再是让你的内容去适应狭小
能强大的优势来说说，放在现在只能让人摇头叹 的手机屏幕，也不再是在不同的窗体之间来回切
息。直￣ｌＪＷｉｎｄｏｗｓ Ｐｈｏｎｅ ７的出现才真正让人 换。它提供了一种全新的视图，在水平方向上扩
眼前一亮，或许这才是用户所需要的智能手机操 展内容到屏幕之外，来展现，集成不同的控件、数
作系统。Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７采用了一套称之为
据和服务，就好像把它们排布在一张横轴的画卷
“Ｍｅｔｒｏ”的设计规范来设计它的用户界面和交
上。当前可视区域所停留的部分，只是手机屏幕
互部分。之所以起名叫做“Ｍｅｔｒｏ”，是因为这 的大小部分，就好像画卷上的一个滑动窗口。用
是从大家常见的地铁中对于乘客的指示系统中汲
取了大量的经验：简洁清晰、快速、内容为主。
微软自己则对Ｍｅｔｒｏ￣述为：“Ｍｅｔｒｏ ｉｓ ｏｕｒ ｄｅｓｉｇｎ
ｌａｎｇｕａｇｅ．Ｗｅ ｃａｌｌ ｉｔ Ｍｅｔｒｏ ｂｅｃａｕｓｅ ｉｔ’Ｓ ｍｏｄｅｒｎ
ａｎｄ ｃｌｅａｎ．Ｉｔ＇ｓ ｆａｓｔ ａｎｄ ｉｎ ｍｏｔｉｏｎ．Ｉ＇ｔｓ ａｂｏｕｔ ｃｏｎｔｅｎｔ
ａｎｄ ｔｙｐｏｇｒａｐｈｙ．Ａｎｄ ｉ＇ｔｓ ｅｎｔｉｒｅｌｙ ａｕｔｈｅｎｔｉｃ．’’
２Ｏ１０ ０９ ５５
户所需要做的只是轻轻地在界面上横向滑动手指，这张画卷
好像是用鼠标一样必须非常精准才行。这种导航方式显然不
就会随之而动，将你想要看的内容带到你眼前的焦点区域。
利于手机用户的单手操作。一直到了Ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ ５的时
代，微软对菜单系统才有所改善，下方的菜单栏中只允许排
布两个菜单项，如果有更多的菜单项，可以通过这些菜单的
Ｐｉｖｏｔ
对于多内容的组织，其实还有一种源自于桌面应用程序 子菜单来实现。
的形式。那就是通过标签页，它将多个内容页面都放在同一
个窗体内，不过某一时刻只能看到一个标签页的内容。用户
可以通过点击标签来切换视觉区域内所展现的内容页面。
这种组织方式有效地解决
了多窗体中容易导致用户在窗体
中迷失的状况，但是它也有一些
问题。例如窗体的下方往往会有
一
但是这种改进并不足以满足用户的实际需求。因为只
些菜单栏，而点击标签页的时
候会不小心触碰到这些菜单项；
当标签页过多的时候，用户不得
图６ Ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ系统中的菜单
不点击左右箭头来查看其他的标
有左右两个菜单项，如果用户的菜单项超过两个的话，实
签。ＨＴＣ在其Ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ产
际上当前界面中最多只有一个菜单项可用于直接的操作命
品中增加了一套名为ＨＴＣ Ｓｅｎｓｅ
令（另外一个必须设置成子菜单来容纳更多的菜单项）。
的用户界面，它的本质其实也就是标签页。只不过ＨＴＣ很好
所以它导致了用户往往需要展开菜单项来操作一些命令。
现
地规避了标签页的这些缺陷，例如加大标签用图标来代替以
微软在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７中对菜单系统又做了一些改进。
防止点击不准确；通过滑动的方式在多个标签中切换。
相应的，在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７
在的菜单系统称之为
Ａｐｐｌｉｃａｔｉｏｎ Ｂａｒ，其中包
中微软也提供了类似的解决方案，
Ｐｉｖｏｔ（枢轴）控件，用来在这狭小的
屏幕中更好地组织内容。但是它并不
是一个全新的控件，其实在Ｗｉｎｄｏｗｓ
Ｍｏｂｉｌｅ ６．５．３中它就已经露出了身
影。只不过在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７中对
含命令按钮和菜单项两
种方式。通常情况下，
只显示最多四个常用的
命令按钮，当用户需要
查看更多的命令的时候
则再来展开菜单项。
图７
Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７中的Ａｐｐｌｉｃａｔｉｏｎ Ｂａｒ
其又做了一些修改，使得它更加符合
Ｍｅｔｒｏ设计规范。
我们会看到，Ｐｉｖｏｔ控件将标签
内容放到了顶端用高亮文字标识。这 图５枢轴视图
小结
由于时间和篇幅的缘故，笔者无法一一对Ｗｉｎｄｏｗｓ
Ｐｈｏｎｅ ７中的用户界面和交互设计部分作详细研究。当然，
统的改变。它不但包含着大量控件的设计和使用规范，也对
样既容易提醒用户当前所处的位置，又不至于和下方的Ａｐｐ
Ｍｅｔｒｏ带给大家的远远不只是全景视图、枢轴控件以及菜单系
Ｂａｒ中的命令按钮靠得太近而带来误操作的风险。
用户界面和用户交互都做了很详细的解释和设定。如果您想
要开始研究开发Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７上的应用程序的话，一定
Ａｐｐｌｉｃａｔｉｏｎ Ｂａｒ
不管是桌面应用或者基于浏览器的网站，还是手机 不要忘了去微软的官方网站下载《ＵＩ Ｄｅｓｉｇｎ ａｎｄ Ｉｎｔｅｒａｃｔｉｏｎ
上的移动应用程序，菜单是一项很重要的功能导航系统。
Ｇｕｉｄｅ ｆｏｒ Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７》（目前版本ｖ２．０）。
目前该指导手册的版本仍然是基于ｂｅｔａ版ＳＤＫ的。在这里 用户可以通过它来执行某些命令或者通过它在不同的内容
页面跳转。在早期的ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ产品（Ｐｏｃｋｅｔ ＰＣ
需要注意的是，目前发布的Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７ｂｅｔａ版的ＳＤＫ中
２００２／２００３）中我们会发现它有着很浓厚的桌面应用的影 并没有包含全景视图和枢轴这两个控件（不过在互联网上你可
子，在窗体的下方密密麻麻地排布着／Ｊ，，／Ｊ＼的菜单项。用户必
以搜索到不少第三方对它们的实现），因为微软还在对这两个
须小心翼翼地点击这些菜单才不会至于点击错误。同时，这
重要的控件进行最后的调试和准备。当然，微软已经确认在最
些菜单项上还可能有子菜单的选择。这时候，你拿着触笔就
终发行的正式版ｓＤＫ中会包含这两个控件的官方版本。ｌ》
５６ 程序员
2024年4月12日发(作者：兴蓓蕾)
浅窥Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７２＿用户交互设计
■文，张欣
征 卫▲今年２月１５日巴塞罗那的Ｍｏｂｉｌｅ Ｗｏｒｌｄ
．
Ｐａｎｏｒａｍａ
还记得在Ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ中，如果程序具
有多个不同的视图来展现不同的内容的时候，你
ＷｊｎｄＯＷＳ Ｐｈｏｎｅ ７ Ｓｅｒｉｅｓ（目前已经更名为
会怎么安排这些内容呢？没错，最常用的做法莫
Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７）。这半年来，随着各大媒体
过于建立多个窗体，而用户通过窗体上的按钮或
对于Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７的关注度日益提高，大家
者超链接等控件的操作来在多个窗体之间进行跳
对Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７的了解也越来越多。同时， 转。这样做其实就是一种完全的电脑上行为的模
为了能够让广大开发者在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７正式
拟，对手机用户其实是很不方便的。一来用户需
上市前顺利地开发出Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７上的相关 要在某些特定的控件上点击才能进入所需要的视
应用，微软也已经在这两个月陆续地向Ｗｉｎｄｏｗｓ
图；二来用户往往容易迷失在多个窗体之中不知
作者简介：
张欣，微软最有价值专
家，ＷＰＭｉｎｄ．ｃｏｒｎ站长。
多年的研发和项目管理
经验，目前专注于移动
与嵌入式应用领域。
Ｐｈｏｎｅ ７第一拨发行国家的开发人员发放了几千
台Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７的开发样机。
ＩＭａｉｎ Ｆａｒ
］＾ｌＩｌＩｍ ｔｉｌｔｓ Ｄ
●
一
￣ｎｔｅｎｔ＝ｏｆ Ｆａｎ吐－
ｓ％ ．１ｔ时 ・
－
ＬＯＳｔ
’
’
Ｉｘ］Ｈ。ｗ协ｒｅｔｕｒｎ７．
－
【岫 ＇ｏＩｍｄ 时
Ｉ ｐｒｏｄ＝ｔ＝ｌ Ｕｓｅｒｓ
、
Ｔｗｏ ｌ ｌ Ｒ￣￣ｕｒｎ？
图２用户容易在多窗体中迷失
图１ Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７的Ｍｅｔｒｏ Ｕ
Ｍｅｔｒｏ给我们带来的最大改变之一，就是带来
了Ｐａｎｏｒａｍａ（全景视图）。它在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ
Ｍｅｔｒｏ
从早期的Ｐｏｃｋｅｔ ＰＣ到后来的ＷｉｎｄＯＷＳ ７中的六个ＨＵｂ（ＰｅｏＰｌｅ、ＭＬＩＳｉｃ＆Ｖｉｄｅｏ、
Ｍｏｂｉｌｅ操作系统，微软的智能手机平台最为人所
Ｐｉｃｔｕｒｅｓ、Ｇａｍｅｓ、Ｍａｒｋｅｔｐｌａｃｅ、Ｏｆｆｉｃｅ）中被
诟病的一点就是：它太像一个电脑而不是手机 广泛使用。全景视图不同于以往的任何一个手机
了。这一点放在七八年前或许还能作为证明其功 系统的用户界面，不再是让你的内容去适应狭小
能强大的优势来说说，放在现在只能让人摇头叹 的手机屏幕，也不再是在不同的窗体之间来回切
息。直￣ｌＪＷｉｎｄｏｗｓ Ｐｈｏｎｅ ７的出现才真正让人 换。它提供了一种全新的视图，在水平方向上扩
眼前一亮，或许这才是用户所需要的智能手机操 展内容到屏幕之外，来展现，集成不同的控件、数
作系统。Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７采用了一套称之为
据和服务，就好像把它们排布在一张横轴的画卷
“Ｍｅｔｒｏ”的设计规范来设计它的用户界面和交
上。当前可视区域所停留的部分，只是手机屏幕
互部分。之所以起名叫做“Ｍｅｔｒｏ”，是因为这 的大小部分，就好像画卷上的一个滑动窗口。用
是从大家常见的地铁中对于乘客的指示系统中汲
取了大量的经验：简洁清晰、快速、内容为主。
微软自己则对Ｍｅｔｒｏ￣述为：“Ｍｅｔｒｏ ｉｓ ｏｕｒ ｄｅｓｉｇｎ
ｌａｎｇｕａｇｅ．Ｗｅ ｃａｌｌ ｉｔ Ｍｅｔｒｏ ｂｅｃａｕｓｅ ｉｔ’Ｓ ｍｏｄｅｒｎ
ａｎｄ ｃｌｅａｎ．Ｉｔ＇ｓ ｆａｓｔ ａｎｄ ｉｎ ｍｏｔｉｏｎ．Ｉ＇ｔｓ ａｂｏｕｔ ｃｏｎｔｅｎｔ
ａｎｄ ｔｙｐｏｇｒａｐｈｙ．Ａｎｄ ｉ＇ｔｓ ｅｎｔｉｒｅｌｙ ａｕｔｈｅｎｔｉｃ．’’
２Ｏ１０ ０９ ５５
户所需要做的只是轻轻地在界面上横向滑动手指，这张画卷
好像是用鼠标一样必须非常精准才行。这种导航方式显然不
就会随之而动，将你想要看的内容带到你眼前的焦点区域。
利于手机用户的单手操作。一直到了Ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ ５的时
代，微软对菜单系统才有所改善，下方的菜单栏中只允许排
布两个菜单项，如果有更多的菜单项，可以通过这些菜单的
Ｐｉｖｏｔ
对于多内容的组织，其实还有一种源自于桌面应用程序 子菜单来实现。
的形式。那就是通过标签页，它将多个内容页面都放在同一
个窗体内，不过某一时刻只能看到一个标签页的内容。用户
可以通过点击标签来切换视觉区域内所展现的内容页面。
这种组织方式有效地解决
了多窗体中容易导致用户在窗体
中迷失的状况，但是它也有一些
问题。例如窗体的下方往往会有
一
但是这种改进并不足以满足用户的实际需求。因为只
些菜单栏，而点击标签页的时
候会不小心触碰到这些菜单项；
当标签页过多的时候，用户不得
图６ Ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ系统中的菜单
不点击左右箭头来查看其他的标
有左右两个菜单项，如果用户的菜单项超过两个的话，实
签。ＨＴＣ在其Ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ产
际上当前界面中最多只有一个菜单项可用于直接的操作命
品中增加了一套名为ＨＴＣ Ｓｅｎｓｅ
令（另外一个必须设置成子菜单来容纳更多的菜单项）。
的用户界面，它的本质其实也就是标签页。只不过ＨＴＣ很好
所以它导致了用户往往需要展开菜单项来操作一些命令。
现
地规避了标签页的这些缺陷，例如加大标签用图标来代替以
微软在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７中对菜单系统又做了一些改进。
防止点击不准确；通过滑动的方式在多个标签中切换。
相应的，在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７
在的菜单系统称之为
Ａｐｐｌｉｃａｔｉｏｎ Ｂａｒ，其中包
中微软也提供了类似的解决方案，
Ｐｉｖｏｔ（枢轴）控件，用来在这狭小的
屏幕中更好地组织内容。但是它并不
是一个全新的控件，其实在Ｗｉｎｄｏｗｓ
Ｍｏｂｉｌｅ ６．５．３中它就已经露出了身
影。只不过在Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７中对
含命令按钮和菜单项两
种方式。通常情况下，
只显示最多四个常用的
命令按钮，当用户需要
查看更多的命令的时候
则再来展开菜单项。
图７
Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７中的Ａｐｐｌｉｃａｔｉｏｎ Ｂａｒ
其又做了一些修改，使得它更加符合
Ｍｅｔｒｏ设计规范。
我们会看到，Ｐｉｖｏｔ控件将标签
内容放到了顶端用高亮文字标识。这 图５枢轴视图
小结
由于时间和篇幅的缘故，笔者无法一一对Ｗｉｎｄｏｗｓ
Ｐｈｏｎｅ ７中的用户界面和交互设计部分作详细研究。当然，
统的改变。它不但包含着大量控件的设计和使用规范，也对
样既容易提醒用户当前所处的位置，又不至于和下方的Ａｐｐ
Ｍｅｔｒｏ带给大家的远远不只是全景视图、枢轴控件以及菜单系
Ｂａｒ中的命令按钮靠得太近而带来误操作的风险。
用户界面和用户交互都做了很详细的解释和设定。如果您想
要开始研究开发Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７上的应用程序的话，一定
Ａｐｐｌｉｃａｔｉｏｎ Ｂａｒ
不管是桌面应用或者基于浏览器的网站，还是手机 不要忘了去微软的官方网站下载《ＵＩ Ｄｅｓｉｇｎ ａｎｄ Ｉｎｔｅｒａｃｔｉｏｎ
上的移动应用程序，菜单是一项很重要的功能导航系统。
Ｇｕｉｄｅ ｆｏｒ Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７》（目前版本ｖ２．０）。
目前该指导手册的版本仍然是基于ｂｅｔａ版ＳＤＫ的。在这里 用户可以通过它来执行某些命令或者通过它在不同的内容
页面跳转。在早期的ｗｉｎｄｏｗｓ Ｍｏｂｉｌｅ产品（Ｐｏｃｋｅｔ ＰＣ
需要注意的是，目前发布的Ｗｉｎｄｏｗｓ Ｐｈｏｎｅ ７ｂｅｔａ版的ＳＤＫ中
２００２／２００３）中我们会发现它有着很浓厚的桌面应用的影 并没有包含全景视图和枢轴这两个控件（不过在互联网上你可
子，在窗体的下方密密麻麻地排布着／Ｊ，，／Ｊ＼的菜单项。用户必
以搜索到不少第三方对它们的实现），因为微软还在对这两个
须小心翼翼地点击这些菜单才不会至于点击错误。同时，这
重要的控件进行最后的调试和准备。当然，微软已经确认在最
些菜单项上还可能有子菜单的选择。这时候，你拿着触笔就
终发行的正式版ｓＤＫ中会包含这两个控件的官方版本。ｌ》
５６ 程序员