微软新的移动操作系统(WP7),向我们介绍了基于METRO语言规则设计的新的内容组织方式以及不同的用户体验,同时这种规则也会应用于新一代的 WINDOWS8上。WP7的目标和历届产品有所不同,它不仅仅是为了商务和技术分子使用,它更多的是提供了多样式的生活方式,无论你是offline还 是online,你可以随时与社交网络进行融合。

为什么需要设计者关注?

首先,这是一个新的界面,所以你会有极大的空间来开发你的创意,我们此时都在这个上升曲线的起点,这是一个有趣的挑战。当我第一次看WP7的介绍时,我就想到:“我要在这上面设计一些东西出来”,探索是我们学习如何建立一个极致用户体验的极好的方式。

其实,METRO的市场价值不可忽视,它将成为WINDOWS OS的未来用户体验方向,从WINDOWS 8 开始,各种设备将加强基于METRO一致性设计,曾经那些有着各种各样用户体验的设备(手机,平板,桌面)将会被取代,用户将会拥有几乎一致的用户体验,随着九月底的MANGO的问世以及第一款基于WP7的NOKIA的发布,METRO设计的重要性已经不言而喻。

一种新的设计方式

WINDOWS PHONE设计团队的灵感源自印刷术,他们去除了所有的不必要的元素,将内容主体作为设计核心,他们实习了传统界面的分离,界面消失了,内容主体成为了界面。这个界面不再是以往的将内容放在里面,而他就是真正的肉容主体。

WINDOWS PHONE设计团队减少了手机界面加强了与内容主体的交互。

Grid Systems in Graphic Design, by Josef Müller-Brockman

Josef Müller-Brockman是在这种印刷排版的设计上具有标志性的地位,

简洁的设计和排版

这些元素整合到了一起让用户有了更多的联想,用户能更好的找准方向选择文字和图像,用户可以通过简明的文字来找到相应的LABEL和ORDER,最为重要的是这里面已经没有了传统的界面元素.

NEW CONTENT GRID

基于METRO的设计要求更为严格的网格框架,就好比地下铁的地图。在手机APP的环境里,它要求更为健壮的信息架构。传统的界面元素会被移除,内容本身将会自行的构建GRID,所以当用户在浏览界面层次时就已经开始阅读信息了。在这样的情形下,我们将要更少的选择一些更有代表性的元素,因为用户很容易被误导。

METRO会将内容按照你想展示给用户的信息以及其重要性来架构一个层次结构,这样你必须要明确你的页面的目标用户,你不可能使页面满足所有的用户需求.

METRO UI 的目标是为了更好的展现在用户所需的重要信息, 为了实现这些,微软向世人介绍了HUB的概念,它可以将所有的信息集成在一个屏幕上,就好比dashboard. 上图的Flipboard就是一个很好的METRO UI的展现方式.

UI元素

Hub是获取内容的关键,它包括了特定的UI元素以及新形态的导航体验.Hub有着两种新形态的导航,他们分别是:”panorama(全景展现)“,”pivot(枢纽)“,这两者有者微秒的联系。

选择哪种展示方式取决于你应用程序的目的以及你想展示什么给用户。除此之外live tile 也是极为有用的UI元素,他可以在HOME屏上展现一个缩略图.同时Accent Color 作为一个强调元素,可以让你一眼看到哪个内容更为重要,它是Metro区分重要级别的一个标志.

Panorama

当用户进入Panorama模式,用户可以在一个屏幕上看到所有的信息,它能让用户看到所有信息的概略一览.

Panorama通过内容块的区分,用文字和图像来创建路径.这种视觉传达能让用户更为直观的联结到信息本身

Pivot

Pivot要求元素有一定的逻辑,他通过类别来区分内容的展示,同时只会展示有效的内容,他会通过分析来展示同一个内容主体的不同切面.

如上图,你可以显示同一个内容的不同视图,就好比不同的TAB一样。

Live Tiles

它有着严格的等级层次,它最先会展现一个简明的内容,同时也可以一层一层的向下获取详情,MANGO就是以这个为主要特色展现为用户的。在先前发布的WP7系统中,LIVE TILES成为了METRO设计的标志,就如IOS和ANDROID的特色UI一样。

在下图的示例中,屏幕上显示了当前的天气状况。用户可以不用打开APP就可以查看当前的天气状况一览,所有的基本信息都在此展现出来,如果你要看到这五天内的天气预报,你就可以点击其中的内容,查看详情.

Live Tiles也可以设计为循环信息体,里面可以为动态的相关信息的循环.

Accent Color

Accent Color是METRO设计里很重要的一个元素,他可以将重要的信息突出显示,在上图的Live Tiles的展示中也用到了这种特性,在左边图中的红色感叹号就是Accent Color,他以简洁的形式让用户可以一目了然。

Tips

没有常规的ICON的简洁界面意味着用户和内容的交互几乎不一样,在这种情况下,我们就必须要额外的考虑,在WP7下的常规UI元素,和以往的有何不同

Clickable Text

在WP7中的TEXT元素,加入了CLICKABLE特性,也就是和按钮一样,有点击的效果,这样做的原因是为了在操作的时候,让用户更清楚的了解到当前所处的TEXT元素,以及有着更好的体验。

Animation

Animation这个特性是WP7中最为重要的特色,在WP7 中,ANIMATION机制被绑定了在了每个一源UI元素的基类上,任何一个元素的出现的变动以及消失都会出现animation效果,这样可以让用户了解到当前在发生什么,什么改变了,以及有何反馈。用户从此有了不一样的用户体验。

Icons

WP7对ICONS有着特定的准则,我建议在使用ICONS时先仔细的阅读此准则。ICONS在WP7只会出现在APPLICATON BAR上面,这里是托管所有应用程序的界面

The Color Theme

WP7中,用户可以自定义主题颜色,包括前景色和背景色,同样也包括ACCENT COLOR。 但设计中一定要注意,适当的进行调整,否则会造成内容主题的可读性降低.

设计工具

设计WP7应用,你可以使用Balsamiq, Adobe Illustrator, Fireworks, Photoshop 等我们熟悉的工具.但是有一款工具你一定不能错过:Expression Blend.
如果你的团队要进行wp7设计,你必须要了解如何使用这块产品去开发一个高效的交互模型。很显然的,这个工具能让你获重高分同时又能更好的与开发人员进行沟通

小结

基于METRO设计的WP7,让所有终端及操作系统应用开发人员眼前一亮,他的新的用户体验不同于苹果和GOOGLE,同时他和以往过多的依赖于硬件系统的界面不同,WP7的界面可以随心所意的进行定制化,这个给制造商们带来了无限的商机。

Resources

 

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: