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


  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

  文章来源:腾讯WSD用户体验设计团队 转载请注明出处链接。

时间: 2024-12-10 02:28:13

WP7交互特性浅析及APP设计探究的相关文章

web app设计:Web app的交互性设计

文章描述:Google Web App开发指南第二章:交互设计. 首先掌握基础 借用篮球界一个传奇人物的话,在你做任何事之前,你必须"首先掌握基础".(说出这句话的是波士顿凯尔特篮球名宿Larry Bird,他同时也是一个Web App爱好者.)所有伟大的Web Apps都必须有一个清晰的集中点. 相关阅读:Web Apps的绝佳案例:Web Apps的特性 创建清晰的需求描述 伟大的web apps让用户很容易集中注意力.人们在某段时间内只能集中于少数几件事,因此,与那些提供给用户很

App设计VS Web设计:互相学习到了什么

我们通常将http://www.aliyun.com/zixun/aggregation/9086.html">App设计和Web设计看作两个完全不同的领域. 由于Web App的出现,彼此之间的界限似乎变得模糊了,不过我们依旧尝试对比App设计和Web设计.即使是同时工作于这两方面的设计师也常常将它们区别对待. 其实这两方面可以互通互补.每类设计都有自己的优点和缺点,往往也需要在其它方面进行补充. 下面是App设计和Web设计间可相互借鉴的六点. 1.避免功能泛滥 App设计师们清楚,额

17款最优秀的体育类网站与APP设计

  在过去的几年当中,因为工作原因,我有幸参与了一些著名体育品牌的网站与APP设计,在此过程中,我花费了大量的时间和精力来研究体育类网站和APP,对于整个市场有了比较清晰的认知.通过对比,我发现绝大多数的英超.NFL和NBA的网站模板是如此的相似而过时,反而是有些球队和俱乐部的网站打破了常规,打造出令人耳目一新的优质产品. 今天这篇文章,我会将我最喜欢的体育类网站和APP都列出来,并对它们进行简要的分析.这些产品在排版布局,图片处理.用户体验.可用性和易用性上,多有其独到之处,希望我的这个列表能

2016年最值得关注的移动端APP设计趋势

  不论移动端网页和APP之间有着怎样的争论,移动端APP的快速发展都是不争的事实,各种客户端的开发和接入已经成为常态.用户对于自己喜欢的品牌和服务,总期待官方能推出客户端,也正是在这种期待和需求之下,催生出越来越多的APP. 事实上,有APP分析机构的研究表明,用户每天耗费在手机和平板上的平均时长为158分钟,其中127分钟是耗费在各类APP中,而仅有31分钟是花费在浏览网页之上.且不去深究这个数字是否适用于不同的国家和地区,但是总体的趋势大家都看的很明白.用户的需求越来越多,如果开发者和厂商

十大令人振奋的移动端APP设计趋势

  从移动端兴起,主流设计风格定型,再到Uber.Vine等现象级APP的崛起,移动端的APP设计直到现在才渐入佳境.促成这一切的影响因素很多,比如社会发展趋势的变化.共享经济的大热.新技术的积累,等等等等.这些事物的出现需要时间积累,这也是为什么这些应用到现在才火起来. 同样的,今年我们要关注的是定型了的巨屏手机和逐渐沉淀下来的可穿戴设备. 随着日常生活中所涉及到的移动端应用的增加,用户在这些东西上的所耗费的精神和脑力也越来越多.查看邮件.预订酒店.叫外卖都有赖于各种应用,而诸如Airbnb和

新版csdn客户端交...-CSDN新版APP设计,返回键的改变

问题描述 CSDN新版APP设计,返回键的改变 为什么新的版本返回键由下面改到了上面,用得很不方便,而且下面原先返回键的地方变成了点赞,这个交互搞的... 解决方案 对安卓手机来说,左下角就有物理返回键,所以没有必要在左下角再放一个返回键. 对ios手机,一般返回键都放到了左上角,符合大部分人的习惯吧. 主要是为了在toolbar里突出顶,踩,评论,如果在把返回放到toolbar里,会显着有些别扭了. 返回在左上角带来的问题就是,大屏手机单手操作时,不太方便按到返回键.

大屏iPhone带来了App设计的三种改变

大屏iPhone带来了App设计的三种改变 时间:2014-09-20 19:55 来源:雷锋网 作者:Twig理想试验田 很长一段时间内,智能手机产业区分都很明显.Apple坚守小屏幕不改变,与此同时Google的安卓手机却越来越大.但是随着4.7英寸的iPhone6和5.5英寸的iPhone6 Plus的发布,这种分别消失了.大时代全面降临. 对于那些之前做得很出色的开发者来说,接下来的工作并不是简单地把现有的小界面扩展到大屏幕上.在与行内优秀的UI设计师交谈中,很明确的一点是由于屏幕区域已

浅析网页界面设计——首页设计

杨科宇曾发表过一篇文章<浅析网页界面设计--首页设计>,文中为我们分享了如何进行首页的界面设计.现转载于此,供大家借鉴学习.全文如下: 首页设计,需开宗明义突出主题 开宗明义,无论是对于一篇文章.一场会议或一部专题片,还是对于一个网站来说,都是必不可少的.那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述.副标题),而能够为Title和Description提供进一步诠释的就是网站的首页. 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上,反过来

App设计中4类便捷的单手操作

探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何感应我们的操作的. 用户是如何使用手机的 Steven Hoober在<How Do Users Really Hold Mobile Devices?>[1]一文中指出,通过两个月的时间对1333名手机用户在公众场所(街道.机场.汽车站.咖啡馆.火车上.汽车上等)使用习惯的观察得出以下结论: ①780名用户是通过滑动.点击.打字等来操作屏幕,其他用户则仅仅是用手机来收听.观看.打电话. ②49%的用户通过单