Windows Phone小屏幕上的Modern UI故事(转载)
Windows Phone 8.1就目前看来,将成为自Windows Phone 7以来,其历史上最重要的一次功能性更新。
我们可以看出微软历经多年,终于完成了ARM版NT内核的主要优化,Metro界面在手机上的实用探索以及Windows RT API的合并与开发。它是一座重要的里程碑,可以说,Windows Phone 7是Milestone版,Windows Phone 7.5-7.8是Alpha版,Windows Phone 8(至GDR3)是Beta或者RC版,而Windows Phone 8.1将达到RTM的级别。
但是我们今天只来先谈谈Metro/Modern界面在手机上的逐步成熟。这是段很值得讲一讲的故事。
一说起Metro就想到Tiles,这其实是不对的。我们更应该首先思考应用内部的界面和交互情况,而非一个单纯的(虽然功能很多的)动态磁贴。
最早,Metro界面脱胎自Windows Media Center(2005年随媒体中心版的Windows XP面世)。这时的Metro还不是一个特别明显的概念,只是,WMC的美观帅气深得用户好评(到Windows 8这甚至成了一个付费功能,由此可见一斑)。在当时,WMC中的UI仅针对媒体播放优化,在极简与华丽之间达成了一个较好的平衡。如果我们重新回顾WMC,会发现虽然它乍看上去比较平面化,实际上也是层次鲜明,前景和背景区分明显的。
图:WMC是一切Metro的起源。
上图里很清楚,背景是变幻、模糊的;前景则有高亮和高光,按钮与当前主要选项都是在前景里;非主要选项则都被模糊缩小处理了。
之后,微软发布了Zune播放器。但是请注意,最早的Zune 和Metro这个词也是扯不上关系的,它和WMC的界面没有太多相似之处可以追寻。当时Zune的极简更多是由于机能的限制和软件开发的不足造成的被动的极简。相比之下,最早的Zune PC端也与WMP(Windows Media Player)的界面相似(其实就是一个带有与Zune联系+绑定Zune音乐市场的WMP……),不带有丝毫WMC的气息。大致的界面如下图:
图:旧版的Zune大致如图(请忽略其中显示的错误信息)
不过在Zune 4.0和Zune HD的时代,Metro界面开始逐渐确定成型了。当时微软推出了惊为天人的Zune 4.0(效果见下图),采用了独一无二的Iris UI Framework(事实上这个Framework就是脱胎自WMC,但是似乎只有Zune 4.0-4.8这个系列的产品采用了它。之后它又融合入了其它框架中,不过它没有开放给第三方开发者使用,非常可惜)。
如果我没猜错的话,Iris也被用于支撑同样动画效果华丽的ZuneHD和Kin系列手机。
ZuneHD是Metro界面在触屏设备上的第一次探索。当时也是各种惊艳。如果不是因为应用生态实在是太糟,ZuneHD本应成为真正的iPod杀手(除了应用生态以外,其他方面的设计都超越同时代的iPod touch太远了;另外,屏幕尺寸不算是优劣区分标准) 。微软奢侈地为ZuneHD打造了疯狂的精美的动画效果,诸如水晶透明效果,类似毛玻璃的模糊效果,基于重力感应的视差动画效果,超炫酷的字幕+艺术家图片特效等等……简直是件艺术品。
此外,ZuneHD对于触控的优化也是非常细心的,比如说其内置的IE任务栏就是在屏幕底部。这点一直沿用到Windows Phone 7,Windows Phone 8/8.1乃至Win8/8.1上都未改变。再比如说格外大的可选择区(同样是针对触控优化)和滑动大于点击的操作逻辑等——可以说微软下了非常大的功夫来研究用户的触控习惯,然后将成果逐步转化到了其产品中。
可是Zune HD毕竟是失败了。一方面是因为,Metro UI当时还是太过雏形,连微软自己都很难把控好(直到Windows Phone 8时代,微软官方仍然没有特别好地找到方向。);另一方面是因为微软对Zune Marketplace的政策限制实在是太奇葩导致没人肯开发应用;最后就是ZuneHD上市速度过于缓慢,导致销量较低。其实如果当年微软肯开放SDK,开放软件市场,那么如今也许风光的就是微软了……叹气。后来微软在Windows Phone 7时就吸取了教训,开放了Windows Phone 7的SDK,并且花了很大力气来吸引开发者。(只是收效不好……)
言归正传。接着,微软在ZuneHD的UI基础上, 继续对基于Metro UI的交互方式进行探索。他们开始做两件事,一件是试图把Iris和过去旧的UI进行一定的结合,做出来的产品就是Kin。Kin的失败主要在于硬件平台选择和平台定位上,导致其应用开发困难,消费者接受度低。但是Kin是微软极为重要的一次尝试,严格来说,这款机器也是败在了硬件的选择和微软的营销级政策限制上。这次尝试的失败直接导致了下列结果:
- 1.Windows Phone 7将继承Metro UI和之前的触控优化,但是并不是像旧Iris那样晶莹剔透层次分明的感觉,而是一种不但极简,而且“扁平”的设计(新Iris被内化到了Windows Phone 里,各种交互动画似乎都是由Iris来支撑)。在旧Iris(各种Zune产品)的时代的Metro UI,极简是极简,拟物是拟物,扁平是扁平,具有鲜明的层次感,与如今的iOS7的感觉相似。但在Windows Phone 7时代的Metro UI则完全不同,你仿佛能感受到你面前的一切都是个平面,更像是放了一叠纸在一张桌子上。这也是Windows Phone 7与ZuneHD的最大不同。
- 2.Windows Phone 7放弃了极度炫目的动画效果,转而试图追求一些更简化直观的动画。
- 3.Windows Phone 7开始尝试新的应用布局,即Panorama。
初期,微软为了保证滑动大于触摸的优良触控体验,提出了两个布局概念:枢轴Pivot(经典Pivot布局的代表作,“系统设置”,即Settings。),和全景Panorama(经典Panorama布局的代表作,“商店”,即Store。)。其共同点在于,每个tab之间的切换都是用左右的轻松滑动完成的。这种交互方式非常令人愉悦。但是在日后逐渐遇到了“用户觉得太单调”这个问题,我们稍后再谈。Pivot在ZuneHD时代就有了(闹钟应用),但Panorama是Windows Phone 7时代才有的。
在推出Windows Phone 7的同时,微软开始了NT内核的移动化工作。这是一个很漫长的过程,不光是内核本身,微软认为,既然内核都能跑了,干嘛不试着去共通下API呢?微软其实早已预见到了移动化浪潮的兴起,其技术积累也是相当丰富,但是公司由于与Intel的关系过于紧密(稍后再谈),而Intel又屡屡坑队友不思进取,导致微软错失了很多良机(同样稍后再谈)。 本来Win8RT这个ARM版本的NT其实就是Windows Phone 8的附属产品……只是最初没有打通API而已。……这个过程需要相当长的时间,以至于直到Windows Phone 8发布之时,它还仅仅是个有着NT内核和有一小部分移植完成的共通API(例如DirectX)的半beta性质的产品。期间,公司推出了Windows Phone 7这个套着当时已经十分成熟CE核的产品来继续探索。
在Windows Phone 7的时代,商店里到处都是标准panorama风格和标准pivot风格的应用。比如说早期的QQ就是标准的Pivot风格。用户在长期使用以后,容易产生厌倦感。不过这种厌倦感在任何平台上都很常见,例如iOS上一度也曾经大量充斥这种布局的应用:
相信各位iPhone老用户一定和我一样记忆犹新吧(笑)!
这说起来也有微软的责任,因为微软自家应用基本上都是就这两种风格,就像当时那些iOS应用大量模仿Appstore的界面布局一样。官方应用的指导意义极强,所以大家都在模仿。不过也有优秀的开发者针对Metro的特色进行了二次开发和探索。 他们吸收了Metro UI的优点,再根据自己的审美绘制出比标准pivot 或者panorama更美观的界面来。这样的作品大量出现在Windows Phone 8时代,并逐渐将手机上的Metro(Modern)界面推向成熟。它们证明了美观与功能性的确可以在Metro的框架内很好地并存。例如使用了非标准pivot(自制pivot?)的6tag应用,它调整了tab标题的大小,并且十分罕见地运用了阴影和遮盖透视效果。这样的安排方式对于6tag的应用场景来说显然比默认的布局更为合适。我想各位一直关注Windows Phone Dang应用推荐的读者们一定也有自己喜欢的布局。值得高兴的是,微软鼓励开发者对Metro/Modern UI进行探索和再创造,所以我们后来又见到了设计也很优秀的QQ 4.0。它使用的也是非标准的pivot布局(tab字号似乎没有调整……)效果相对过去的标准全景布局好很多。
如今,时过境迁,我们总算盼到了Windows Phone RTM的曙光……可算是盼到了微软完成NT内核的开发优化与API的移植修正大业的好日子。此时Windows Phone 8.1就基本完备了。一个采用通用Windows Runtime的应用终于可以“在Xbox 上运行,在Windows RT平板上运行,在Windows 8.1电脑上运行,在Windows Phone 8.1手机上运行”了。只要稍微改改界面(或者写两套界面,稍稍做下适配)就行。
但是微软不仅仅做了这些。它大量地吸取了用户的意见,并针对一些用户难以更改的使用习惯做出了妥协(Action Centre其实就是一种妥协,不过我觉得有时候有点妥协挺好的;增加VPN功能什么的),对市场的新要求去做改进,比如说搞出Cortana来服(gei)务(ren)大(tiao)众(xi)……(´-ω-`)
不过不仅如此,微软自己对Modern应用布局的改进也非常值得注意。我们在泄露的bing系列应用中发现,微软似乎悄然地也开始用改进的新式pivot布局了。tab名称字号不再那么大,界面更加小清新,配色也更加丰富多彩。我想这大概是微软新的应用开发指导方向吧…… 毕竟官方应用一直都有很强的标杆作用。只是我觉得这次的标杆似乎有朝第三方应用参考过的感觉。
我们稍微做下对比:左侧为泄露的bing应用,右侧为Windows Phone 默认标准的pivot应用(包括系统自带的Settings也是如此的布局,只是没有示范的这么丑。。。)
你会发现,官方提倡的新式pivot中,压缩了tab名的大小,将应用名放置在了上方状态栏里与时间日期平行。同时你还会发现,这款bing应用的accent color(我不太清楚中文应该怎么表达……主体色调?)与状态栏的颜色是匹配的。微软向第三方应用学习并发展了自己的设计。如果你还记得Windows Phone 8.1即将允许使用“屏幕虚拟键”的话,那么我还能告诉你一点,根据目前的消息,虚拟按键条的颜色似乎也是可以和应用的accent colour匹配的,看上去会非常好看,(Action Bar也需要同色处理吧?再见,安卓大黑条)。
总之,大方向是好的, 我很期待Windows Phone 8.1。