WP7交互特性浅析及APP设计探究

原文地址：http://wsd.tencent.com/2011/10/windowsphone7-2.html

---

 

Windows phone7是无线领域的新生力量，但是迟迟没有进入中国市场。Mango（注意WP7和mango不是一个概念）的发布带来了中文的操作系统，也让人们看到了该系统的无限可能。在此，我结合自己在进行相关应用设计的经验以及自己对WP7系统认识和理解，浅谈一下这一特别系统的交互特性。

 

本文索引：

• 涅磐重生的WP7（以及它的历史简介）
• WP7对比iOS和Android
• WP7设计风格
• WP7内容和结构框架及特有名词解释
• WP7交互特质分析
• WP7应用设计建议

（一）

什么是WP7？

Windows Phone 7是微软发布的一款手机操作系统，它来自于微软但是和之前的windows mobile系统却截然不同。可以说微软的操作系统应该大致分为两个时代：windows mobile时代和windows phone时代。

Window mobile时代

• 十年前一个基于windows ce的移动智能系统被开发出来，这就是windows mobile的原型版本。Pocket PC发布, 代号Rapier(双刃剑),发布于2000年4月19日，这是一个里程碑的事件。这也是后来被称为Windows Mobile的操作系统的首次亮相。
• Windows Mobile 2003的原代号为”Ozone”(臭氧),发布于2003年6月23日，是第一个版本的Windows Mobile
• Windows mobile 6.5是windows mobile时代的最后一个作品，但其根本上的，研习PC上严谨但死板的操作体验，终于在IPhone和Android的打击下，变得不堪一击。微软亟需一次蜕变。

WP7时代：

•  2010.2.15微软在全球移动通信大展上公布Windows Phone7
•  2010.10.11微软正式发布了WP7，并同时宣布首批采用WP 7的9款智能手机
• 2011.5.24微软正式发布WP7.1(或称7.5代号Mango)，表示Mango的三大要素是“通信、应用与网络”。
• 2011.9.16微软正式在台湾地区推送Mango
• 据称，在接下来，或将推出应用于中国大陆地区的操作系统Tango以及代号Apollo的windows8操作系统。

Windows Phone 7.0完全脱离了旧构架，一个未完工的系统，这大大影响了其体验的评价，尤其在中国。Mango带来了500多项改进和创新，当然还有完美的中文支持，基本形成了一个比较完善的手机操作系统。

WP7制定了硬件最低标准，这是为什么呢？WP7的目标是为多方手机生产商提供服务，所以不会像iPhone一样，在硬件上十分标准一致，但是其对本硬件都有“最低需求”，这保证了其不至于像android那样出现碎片化的杂乱场面。

屏幕	800×480 WVGA，支持多点触摸（最少4点）
硬件按钮	WP7设备至少要具备3个按钮：后退，HOME键，搜索
处理器	Qualcomm Snapdragon MSM 8×55（主频1GHz）或MSM 7×30（主频800MHz） CPU（支持DirectX 9）。
内存	至少512MB
内部存储	最少8GB
外部存储	扩展大于等于16G
无线	WiFi、蓝牙、A-GPS、FM
摄像头	至少500万像素，有闪光灯
其他	加速度感应器、指南针、亮度感应、外部键盘（可选）

目前WP7阵营的支持厂商：三星、LG、HTC、诺基亚、宏碁、富士通、中兴等。毫无疑问，微软和诺基亚的合作是最应该被人们所重视的伙伴。

 WP7, iOS, Android

毫无疑问，iPhone拥有着最庞大的APP资源，其现在的app数量是WP7的10倍以上，比开放的安卓也多出很多。其在品牌价值上的优势也不可忽略，用户对于iPhone的认可度非常高。然而，作为只专注于一台手机的策略，其在保证了最优手机硬件配置的前提下，也让用户缺少了更多的选择，如何能更加个人化个性化，也是选择iPhone时不得不思考的问题。再有，iPhone的体验设计从出现至今已经延续了快4个年头，但是我们没有看到其在UI在交互方面有多少重大的突破。这里我弱弱的问一句，大家没有觉得iPhone的UI已经有些过时了么？这一点，我们至少可以从现在app各种不拘规范的设计上看出一些端倪。

Android的优势在于开放，它应用于不同的硬件生产商，允许开发者深度开发不同的ROM，给用户带来的很多惊喜，这也让他的设计体验与时俱进，不会落伍,并满足用户多元化的需求。然而android也受制于自己的开放性，开放带来的无论是硬件还是系统的碎片化，给用户给谷歌给生产商都带来了很大的困扰。

WP7作为一种全新的体验模式，给用户带来了跟多的惊喜（当然并不只是惊喜），相信会被越来越多的用户所接受。在硬件方面则取了两者之长，它利用自己自身系统的特点，既提供给了生产商嵌入自己特色应用的入口，又保证了用户可以进行最快速的系统升级等服务。个人认为在体验方面，WP7是超前的，他有一个高端的外表，也有很多体贴的细节设计。另外在目前的操作系统中，WP7的系统优化应该是做的最好的，很低的配件就可以达到非常乐观的流畅度，这一点是其他系统不可比拟的，也为WP7平台适应不同价位段市场提供了很好的基础。另外WP7的进行的本地化推广战略，也是未来手机系统的一种趋势。但是其推出时间稍显滞后，新系统必须获得足够多的用户接受，而WP7的入门稍显困难，这一点也很有可能把它带入困境。创新的东西总是会带来挑战和风险。

我不赞同说WP7前景不被看好是因为用户没有任何理由放弃安卓和IOS，当然我也不赞同说WP7会打败IOS和安卓。未来的智能手机市场，不会出现一统天下的情况，只会是群雄逐鹿，此消彼长。不可能说一种或三四种操作平台就可以满足所有用户的需求，因为用户的需求是无穷尽的，而创新也是无穷尽的。

 （二）

“流畅、干净、周到、开阔、非常个人化，而且未完工”

这可以说是在体验了windows phone7.0系统之后我的感受，而mango之后恐怕要把最后一条去掉了。要谈WP7我们恐怕总是不得不说这样这样几个特有名词：”Metro”、”Live tiles”、”panorama”、”pivot”、”Hubs” 等等。

WP7的视觉设计风格：Metro

WP7的UI是基于一个叫Metro的内部项目。灵感来源于机场和地铁的指示系统。

三种常用元素：

• 明显的色块
• 象形的图形
• 简短的文字

五点原则：

• 干净，轻量，开放，快速
• 要内容，而不是质感
• 整合软硬件
• 世界级的动画
• 生动，有灵魂

当然仅仅metro是不够的，图片加图形或文字的形式也是WP7的主要视觉风格之一

目标用户：

WP7 系统定位的目标用户是：忙于私人和工作事务的高效能人士。针对此类目标用户，WP7系统在提供给用户的使用上注意以下几个问题：

• 个人化–用你的方式去过一天
• 关联性–你身边的人，你周围的环境
• 连接性–你自己的东西，你自己的思考和关心

Wp7的交互特性：

lock wall惊艳开场：

WP7的锁屏界面由一张可更换的墙纸和若干提示信息构成，仅有时间信息和状态栏是必然存在的。整体的视觉风格非常简单轻量化。第一次点击，墙纸会做上下运动，带来了很好的使用引导。用户根本不需要关心手指点触的位置，只需要轻轻向上滑动超过1/3就可以完成开锁任务，墙纸会像大幕一样拉开。相比iPhone来说更加简单，整体视觉感官上也更加舒适。

 

WP7的结构框架

Start view

用户自定义快捷入口，可以是APP，可以是某个文件，可以是某个集合，可以是某个订阅,你可以“pin whatever you want”

App list

所有app的集合，mango增加了快捷检索和搜索

Panorama

适用于多功能整合的综合性app,原生系统用它来实现了自带的5个hub:ZUNE,PICTURE,LIVEBOX,PEOPLE,OFFICE,MARKET PLACE

pivot

适用于内容丰富，但是功能结构不是很深的app或做app的子层级:原生系统用它来实现了短信\日程表\邮箱\设置

list

适用于内容和功能简单的app或做app的子层级:原生系统用它来实现了通讯录

Tools

适用于功能比较纯粹app或做app的子层级:原生系统用它来实现了闹钟\计算器\相机\浏览器

下面将就几个WP7特有的名词进行解释。

 Start sreen

Start sreen 是用户进入后直接面对的第一屏，也是在任何情况下，点击物理HOME键即可回归的主屏。

它的主要组成元素只有一种，就是Live tiles。其本质类似于PC 操作系统的快捷方式，但是承载的信息更多，更加动态，也更加自由和个性化。

Metro风格的指向箭头会把用户清楚的引导向APP list。另外就是被弱化功能的状态栏。

小瓦片 大智慧—-live tiles

Tiles（瓦片）其实是一种快捷方式和推送机制的结合体。它是实时的，动态的，内容丰富的。这个词汇可以拆分成两个单词：live和tiles,Tiles可以是什么呢？

它可以是一个原生的APP快捷方式+实时的更新信息提示
它可以是一个第三方应用的快捷入口
它可以是某个联系人的快捷入口
他可以是一首歌的快捷入口
一个列表或者榜单的快捷入口
一个游戏的某一关，一个特别关注的微博，一个相册

似乎任何手机上的信息，只要用户有需要，只要我们的app上给用户授权，都可以在Start screen有一个入口。这样深层次的定制化逻辑，给用户带来了更加个人化的使用体验。

Live tiles的表现形式其实也是比较多样的：

他们都是tiles，为什么会有这样多的差异？其实他们的结构都是相同的。一个Tiles（瓦片）是由正反两个面构成的，开发者可自行选择是否全部采用。

正面：

一张底图（可以是图片或图标或图片加图标）

标题

更新通知

反面：

一张底图（可以是图片或没有）

标题

内容

Tiles正反两面的元素，开发者自行进行选择元素的存留。加之背景的差异，瓦片在视觉上的差异化，使得整个Start screen显得不会呆板平淡。

动画形式：

翻转：

平推：

Tiles的功能除了提供入口之外，还担当着更新本地动态，显示推送服务的角色。Tiles上的背景，和反面的内容都是可以实时更新的，正面和反面可以通过两种动画进行切换，在加之更新提示，使得tiles出色的承载了更多的信息，同时给系统带来了灵魂和生机。这也是WP7系统一种特色的通知形式，Tile Notification。

Tiles（瓦片）让用户拥有了更多的个人化个性化的定制空间，同时也给用户提供了更深层次的快捷入口。动态的推送提醒机制，各种随时而动的小动画，可以让用户第一时间知道最新的变化，也为整个系统带来的生机和灵魂，同时为更多信息的承载，提供了条件。WP7希望用这样方式达到快速、个人化的目的，而我们在做相关APP开发时，也可以充分利用这一特性，给用户带来惊艳快速的体验。 

HUBS

WP7在功能上对整体结构进行了整合和划分，采用了六个全景HUB分别是：

• ZUNE—影音
• PICTURE—图片
• LIVEBOX—游戏
• PEOPLE—社交与通讯
• OFFICE—Office工具
• MARKET PLACE—市场

另外也给厂商提供了第三方HUB入口，如: HTC HUB。

HUB不是一种单独的应用那么简单，正如其名字一样，“集线器”“枢纽”他更多的展现的是一种纽带的作用，重视与其他程序综合化得处理。使得户对某一类信息进行处理时的行为是连续的。每一个HUB都可以在其应用中连接到其他的app。WP7系统及追求使用操作的流畅，同时也追求信息流的流畅。以music+video为例，用户可以直接在这个HUB中搜索相关的app应用，然后安装。用户也可以直接从HUB里面相关的app列表，链接到相应的app进行音乐的其他操作。

Panorama（全景视图）

滑动的世界—流畅的不会迷失的导航 极其扁平的信息构架,WP7是一个滑动的世界，他会引导用户尽量通过滑动去切换去导航。全景视图是WP7特有的交互形式之一，它一般应用于app的第一层级。画卷式的操作形式，既给用户带来了方便流畅的操作体验，也给APP本身带来了更宽广的空间。

全景视图下原则上是支持所有控件的。再加上这个视图本身的广阔的空间，为这里提供了无限的可能性。上图是QQ音乐mango1.1版的全景布局。它不仅让用户在滑动中就可以完成一级导航的任务。由于其独特的空间特色，可以安排更多的内容，使整个信息的构架更加扁平。所以其适合应用于结构关系比较复杂的APP。

全景视图的空间结构示意

全景视图的背景是可更换甚至可随机变化，这为我们免去了做皮肤的烦忧，而且给用户带来了更多的自我发挥的空间和个性化的体验。

使用全景视图注意事项

• 虽然全景的扩展性很强，但也要量力而为，过多的View不仅带来了APP的运算压力，影响流畅性，也会增加用户导航的操作难度，甚至让其迷失。此处建议3~5个。
• 同时也要注意每一个view之间的视觉差异，避免用户迷失其中。
• 另外，杂志/画册是很好的参考物，尤其是在排布和UI方面。

Pivot（枢轴视图）

Pivot是WP7比较创新的一种页签的操作形式，由标题，页签和内容组成。滑动内容和页签都可以进行页签切换操作，同时也支持点击直接切换页签。

滑动的魅力是强大的，用户不用去思考他的手指要点击哪里，会不会出现误操作之类的问题，他只要轻轻滑动页面，就可以轻快流畅的到达到要去的地方。减少停顿，让行为连续起来，再一次体现在系统的设计中。与全景视图相比，PIVOT更加注重体现内容，而不是结构，所以其适用于结构关系比较简单，但是内容比较丰富的APP，当然其也适合做全景页面的下一层级使用。

但是并不是完美的

Pivot的形式虽然用滑动的操作给用户带来了新颖和快捷的操作体验，但其页签的循环和变化在很多情况下却也容易让用户迷失其中。在设计的时候需要谨慎采用，尽量减少pivot的页签数量，并且不能出现pivot页面下继续出现pivot的情况。

在QQ音乐上，我们的解决办法是在全景视图下就给用户预设pivot中每一个页签项的入口，这样可以让用户以最快的速度到达他的目的地，同时也保留了其在pivot下切换页签的权利，既快速到达，又保存了行为的连续性。另外，在使用PIVOT的时候需要用字体大小和颜色来引导用户，使其预知哪些是可以点击的，哪些是导航的，其实这是整个WP7系统要注意的问题。

在对一些WP7的交互特性进行了解释和分析之后，这里笔者也总结了一些系统的特质。

一、永远的开阔：去边界化设计的极致体验

去边界化的设计遍布了整个WP7系统，这是一个全新的尝试。在WP7系统中，我们基本看不到在其他系统上随处可见的各种栏：标题栏，状态栏，工具栏…Bla Bla…所以，我们看到了一个更加广阔的视野，更加舒适的Screen。上图是同一个页面，在WP7和IOS上的对比，很明显，WP7的视野更加开阔，整个屏幕都是风景，而IOS则让人觉得看到的是一扇窗户中的风景。当然这样做也是有足够的风险，用户的识别性降低了，功能区域的划分也不明显。WP7的解决思路就是尽量让用户看到的都是可以点击的，用字体大小、颜色来引导用户去区分目标的属性，目前来看，本人还是可以接受并习惯的。

二、连接一切：完善贴心的提示系统

WP7的提示系统有很多种，不同的场景应用不同的提示系统，除了之前介绍的Tile Notification，这里的将给大家介绍一个最普通Toast Notification

WP7的toast 跟平常情况下的toast基本差不多，展现形式如图，但WP7给他加入了更多的可控因素：点击toast直接进入相应的应用，或者划开toast不在意。在IOS5上，苹果也采用了类似的形式。这样的提醒既没有干扰到用户的正常使用，又方便的给用户提供了专场的出口，可谓贴心，而且不知不觉把应用都连接了起来。

三、充满空间感的动态世界：空间层结构–动态、动画与等待机制

WP7的动画是一大特色，同时也是充满了空间感。而这一点在设计的时候最好给予关注，“让用户把等待变成一种享受”

四、减少输入的快捷体验：强大的本地检索

WP7的本地检索，既有分类的作用，又可以达到快速的检索，而且具有很好的扩展性。尤其是对于分栏项目很多的页面设计，我们可以从中得到很多启发。

五、扬长补短、语义明确：创新的工具栏

在iOS或安卓上toolbar的处理一直让人头疼的一个问题是：单纯用图形化的图标，用户会迷茫，使用图标加文字，会浪费空间，于是经常两难。而WP7则秉承他开拓空间的传统，使toolbar有了一种更新颖也更贴心的展现形式。正常状态下，toolbar为单纯的图标 然后又一个提示用户点击的“…”，或者只有“…”，这里放置的图标是用户最常用和最容易识别的功能。当用户对图标不理解的时候点击工具栏“…”，工具栏会拉起，显示图标的文字解释。工具栏图标最多可以放4个，当有更多，或者不常用或者用图标难以表达的功能，则以菜单的形式至于图标下方，做隐藏，点击“…”时，上拉弹出。

WP7精神

• 注重程序之间联系与转化，无处不在的快捷入口和操作性更好的提示系统，滑动为先的导航操作，让用户的使用行为更加连续顺畅，更少的停顿和思考。
• 各种各样的个人定制，让整个系统更加自由，个人化，个性化。
• 扁平的信息构架，简化操作层级，更加直接，快速。
• 去边界化的视觉，让用户的视野更加开阔，使用感受更加舒适。
• 充满变化与动态，实时的告诉你你的系统是活的，有灵魂的，并且正在发生着什么。

WP7应用开发中交互设计和UI设计的几点建议

•  轻量化趋势（去边界）
• 怎样扁平信息
• 怎样开发空间
• 减少用户的思考,不停顿
• 手势的高级化：点击更多→滑动更多
• 用WP7的思维去认识这个平台（社交、联系、快速）
• 流畅轻量为先
• 给用户更多个性化空间

结语：

WP7的意义不在于它在市场上能否会影响甚至击败苹果或者安卓，而在于在体验方面他确实进行了很多前卫而有意义的尝试。

还是那句话，未来的移动互联必然是多元化的诸侯纷争的格局，我们应该对更多新的东西给予宽容和机会，因为他们确实能给我们带来惊喜。

（作者Dengxuecui，编辑maczheng）

 

(本文出自Tencent WSD Blog，转载时请注明出处)