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

fmms 12年前

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时代

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

  • 十年前一个基于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时代:

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

  •  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的内部项目。灵感来源于机场和地铁的指示系统。

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

三种常用元素:

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

五点原则:

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

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

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

目标用户:

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

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

Wp7的交互特性:

lock wall惊艳开场:

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

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

 

WP7的结构框架

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

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

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

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

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

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

小瓦片 大智慧—-live tiles

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

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

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

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

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

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

正面:

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

一张底图(可以是图片或图标或图片加图标)

标题

更新通知

反面:

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

一张底图(可以是图片或没有)

标题

内容

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

动画形式:

翻转:

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

平推:

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

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交互特性浅析及APP设计探究

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

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

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

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

全景视图的空间结构示意

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

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

使用全景视图注意事项

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

Pivot(枢轴视图)

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

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

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

但是并不是完美的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WP7精神

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

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

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

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

结语:

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

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

(作者Dengxuecui,编辑maczheng)

(本文出自Tencent WSD Blog)