以用户为中心的设计 |
这是UCDChina提前预览网页留下的存档，不包括作者可能更新过的内容。 推荐您进入文章源地址阅读和发布评论：http://wsd.tencent.com/20......phone7-2.html |
||
|
Windows phone7是无线领域的新生力量，但是迟迟没有进入中国市场。Mango（注意WP7和mango不是一个概念）的发布带来了中文的操作系统，也让人们看到了该系统的无限可能。在此，我结合自己在进行相关应用设计的经验以及自己对WP7系统认识和理解，浅谈一下这一特别系统的交互特性。
本文索引：
（一）什么是WP7？Windows Phone 7是微软发布的一款手机操作系统，它来自于微软但是和之前的windows mobile系统却截然不同。可以说微软的操作系统应该大致分为两个时代：windows mobile时代和windows phone时代。 Window mobile时代
WP7时代：
Windows Phone 7.0完全脱离了旧构架，一个未完工的系统，这大大影响了其体验的评价，尤其在中国。Mango带来了500多项改进和创新，当然还有完美的中文支持，基本形成了一个比较完善的手机操作系统。 WP7制定了硬件最低标准，这是为什么呢？WP7的目标是为多方手机生产商提供服务，所以不会像iPhone一样，在硬件上十分标准一致，但是其对本硬件都有“最低需求”，这保证了其不至于像android那样出现碎片化的杂乱场面。
目前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的视觉设计风格：MetroWP7的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 tilesTiles（瓦片）其实是一种快捷方式和推送机制的结合体。它是实时的，动态的，内容丰富的。这个词汇可以拆分成两个单词：live和tiles,Tiles可以是什么呢？
似乎任何手机上的信息，只要用户有需要，只要我们的app上给用户授权，都可以在Start screen有一个入口。这样深层次的定制化逻辑，给用户带来了更加个人化的使用体验。 Live tiles的表现形式其实也是比较多样的：
他们都是tiles，为什么会有这样多的差异？其实他们的结构都是相同的。一个Tiles（瓦片）是由正反两个面构成的，开发者可自行选择是否全部采用。 正面：
一张底图（可以是图片或图标或图片加图标） 标题 更新通知 反面：
一张底图（可以是图片或没有） 标题 内容 Tiles正反两面的元素，开发者自行进行选择元素的存留。加之背景的差异，瓦片在视觉上的差异化，使得整个Start screen显得不会呆板平淡。 动画形式： 翻转：
平推：
Tiles的功能除了提供入口之外，还担当着更新本地动态，显示推送服务的角色。Tiles上的背景，和反面的内容都是可以实时更新的，正面和反面可以通过两种动画进行切换，在加之更新提示，使得tiles出色的承载了更多的信息，同时给系统带来了灵魂和生机。这也是WP7系统一种特色的通知形式，Tile Notification。 Tiles（瓦片）让用户拥有了更多的个人化个性化的定制空间，同时也给用户提供了更深层次的快捷入口。动态的推送提醒机制，各种随时而动的小动画，可以让用户第一时间知道最新的变化，也为整个系统带来的生机和灵魂，同时为更多信息的承载，提供了条件。WP7希望用这样方式达到快速、个人化的目的，而我们在做相关APP开发时，也可以充分利用这一特性，给用户带来惊艳快速的体验。 HUBSWP7在功能上对整体结构进行了整合和划分，采用了六个全景HUB分别是：
另外也给厂商提供了第三方HUB入口，如: HTC HUB。 HUB不是一种单独的应用那么简单，正如其名字一样，“集线器”“枢纽”他更多的展现的是一种纽带的作用，重视与其他程序综合化得处理。使得户对某一类信息进行处理时的行为是连续的。每一个HUB都可以在其应用中连接到其他的app。WP7系统及追求使用操作的流畅，同时也追求信息流的流畅。以music+video为例，用户可以直接在这个HUB中搜索相关的app应用，然后安装。用户也可以直接从HUB里面相关的app列表，链接到相应的app进行音乐的其他操作。 Panorama（全景视图）
滑动的世界—流畅的不会迷失的导航 极其扁平的信息构架,WP7是一个滑动的世界，他会引导用户尽量通过滑动去切换去导航。全景视图是WP7特有的交互形式之一，它一般应用于app的第一层级。画卷式的操作形式，既给用户带来了方便流畅的操作体验，也给APP本身带来了更宽广的空间。
全景视图下原则上是支持所有控件的。再加上这个视图本身的广阔的空间，为这里提供了无限的可能性。上图是QQ音乐mango1.1版的全景布局。它不仅让用户在滑动中就可以完成一级导航的任务。由于其独特的空间特色，可以安排更多的内容，使整个信息的构架更加扁平。所以其适合应用于结构关系比较复杂的APP。
全景视图的空间结构示意
全景视图的背景是可更换甚至可随机变化，这为我们免去了做皮肤的烦忧，而且给用户带来了更多的自我发挥的空间和个性化的体验。 使用全景视图注意事项
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的意义不在于它在市场上能否会影响甚至击败苹果或者安卓，而在于在体验方面他确实进行了很多前卫而有意义的尝试。 还是那句话，未来的移动互联必然是多元化的诸侯纷争的格局，我们应该对更多新的东西给予宽容和机会，因为他们确实能给我们带来惊喜。
|
