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

maczheng|2011-10-28|交互设计

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)

 

分享到QQ空间

查看[29,716]|评论[38]

相关标签

  1. 晓生 说道:

    图不清楚

  2. Mr_Chutzpah 说道:

    写的非常好!特别喜欢wp7的UI和Pivot!

  3. 题叶 说道:

    看了今天爆的视频再来上 Metro, 越看越神..
    对比中文英文的 Panorama, 中文字体因为整齐, 整体反而好难看,
    中文的界面还是得自己想法子山寨, 艰难的.

  4. wangchao0721 说道:

    想请问一下你的WP7截屏是怎么做的,用模拟器还是用真机呀,用真机的话,是用什么软件呀?

    • dengxuecui 说道:

      :wx: Wp7是有截屏软件的~mango是用模拟器截屏的~但是这几天也出了截屏软件~需要的话我给你找下网址~

  5. 猪笨无罪 说道:

    相当不错,比较全面的概括了WP7应用程度的优点.

  6. Mistry 说道:

    写的不错 :qiang: :qiang:

  7. CHEUNG 说道:

    总结得很好~

  8. 卢奇奇 说道:

    总结非常好的一篇文章。iOS的UI确实过时了。

  9. Vic 说道:

    很深刻,很客观,学习了。

  10. 华尔兹 说道:

    很不错的文章 我用的focus 虽然芒果功能并不完善 但是体验绝对比安卓好

  11. kingen 说道:

    :gz: 鼓励 支持 希望腾讯wp7再接再砺 qq能完美 或者推送就好了

  12. 元気弹 说道:

    很不错的一份材料。
    不知道腾讯什么时候会开始会招wp开发者呢。

  13. 秋之夜 说道:

    还是把qq做好吧!从塞班到安卓再到wp7 感觉触屏的 没有实体键的好用! 安卓的是 wp7的也是

  14. ytuwlg 说道:

    很不错的分享! :qiang: :qiang: :qiang:

  15. 信报箱 说道:

    注重程序之间联系与转化,无处不在的快捷入口和操作性更好的提示系统,滑动为先的导航操作,让用户的使用行为更加连续顺畅,更少的停顿和思考。这个还没用过,希望体验。。。

  16. 苏扬|PLAYWP 说道:

    内容比较深刻 有小部分错误,部分参数内容没有更新到位,不过还是挺深刻的,不考虑SEO的话,里面很多文字的排版可以考虑用图片做出来效果更好看。QQ 27929731 请多多指教 苏扬|PLAYWP

  17. 卖萌侠 说道:

    :se: :se: 太强大了!! :ll: :ll: 好分享啊!!
    我认识一些做系统的都看不起Mango

  18. 小璐 说道:

    :gz: 很不错的文章,分享

  19. 雨华瑞 说道:

    写得很不错,这样的介绍能让人对WP7有个大概的了解,但是也不肤浅。个人觉得不管是WP7 iphone还是android,他们的创意精神都很值得我们学习。

  20. 那个呆 说道:

    贵团队首先要考虑的应该是WP7的墓碑机制,这个机制有人喜欢有人不喜欢,相对于QQ来说,这个墓碑机制是很严重的一个问题,多任务的墓碑机制在运行QQ,按返回键之后,QQ自动处于暂停状态,而这个暂停也表示掉线了。再有就是黑屏自动断线,这两点对于QQ来说都是十分不好的体验,也许在明年微软中国整合集成了QQ能解决这个问题、

    • 科科鱼 说道:

      根据我的观察,个人以为,WP7的墓碑机制 和 iOS4以上的多任务模式是类似的,只用IP4没用过WP7所以不敢确定,希望指点。
      现在iOS上的方式是使用推送,QQ登录后可以设置为保持一直在线,这种模式可以解决你说的那个问题。

    • dengxuecui 说道:

      您说的两种情况都是在WP7上的吧? mango的机制改进了~后台支持很不错了~但是它的推送机制还是有一些缺点的~

  21. fairzy 说道:

    请问您某些图片,比如3d和文字的图片是怎办么做得,可否透露一二

  22. 说道:

    前面的人说的很多了,我就鼓励一下吧 ,继续努力,加油吧!

  23. cairunzi 说道:

    来的迟了,大家的想法各不相同,支援下,

  24. 河南西卡 说道:

    :cy: 我用的就是三星wp7的,支持。。

  25. 千年魔京 说道:

    pivot页面下继续出现的页面,期间的切换效果是怎么样的?这个地方不太清楚有点疑问,望指教一下。
    另外一方面,感觉现在的mango中的滚动都是横向的吗,有竖向的吗,有的话是怎么让用户更顺畅更好的理解横向滚动与竖向滚动的? :wx:

  26. 千年魔京 说道:

    忘了说一句,文章写得不错 :qiang: ,学到了东西啦,辛苦啦,哈哈!

  27. x.factor 说道:

    腾讯越来越靠谱了!

  28. 不二良 说道:

    真的很不错……最近强迫女友买了o7……就是为了体验下这个系统……本想让女友和我的小4换……没想到她还喜欢上wp了……哈哈……
    ps.您是tx的交互设计师吗?
    这个工作需要学习哪些课程呢?或者有什么好的书推荐一下?

  29. 云格格 说道:

    深层次的定制化逻辑
    这个ios也可以做到,描述过于夸张

  30. 三者 各有优缺点的 大家应该 取长补短 菜有利于 我们想这些消费者

  31. 挖煤造钢管 说道:

    文章是点评性质的,图大多是WP的PSD和ICO素材集,不错哦

  32. Ann.CoLA 说道:

    :wx: 学习了,学习了~写得很不错哈,我都有自己去试试的冲动了~

  33. 优实惠 说道:

    WP7的软件不好做啊,跟其他系统的完全不同,做好了还好,挺好看,但是做丑了的话简直就没法用了,QQ的团队看来很用心,相信你们

  34. dengxuecui 说道:

    :cy: 哈哈 那里是标题的意思~就是在Tile上那里是放标题的位置~

发表你的评论

 微笑 色 发呆 得意 流泪 害羞 大哭 调皮 呲牙 惊讶 白眼 流汗 疑问 擦汗 抠鼻 鼓掌 可怜 强 胜利