移动应用的Metro化设计

作为微软新一代的手机操作系统,WP7凭借Metro UI的设计原则和设计语言,为智能手机平台带来了全新的内容组织形式以及个性的用户体验。Metro UI的设计将来也会集成到Windows 8操作系统中。WP7瞄准了与某些先进入者(如iOS和Android)不同的用户群体,它不是主要针对商务人士和技术工作者们设计的,而是将目标聚焦在那些过着繁忙生活的年轻人群,这些人拥有着不同的社会背景,不管是在线上还是在线下,他们生活节奏都非常快,而且每天都会频繁使用社交网络。

针对Metro的设计,设计师为什么需要特别注意

首先,Metro是一套全新的界面系统,这会为你提供创造和发挥新想法的空间。但目前我们还处在WP7发展的肇始阶段,所以从长远来看,这将会是一场有意思的挑战。当我第一次见到WP7操作系统时,它的神秘和迷人,让我立即产生了为它做设计的冲动。如果设计师都能够怀着这种探索式心态来做设计,必将会构建出激动人心的用户体验。

诚然,我们不能忽略Metro的设计最终还是要经受市场的检验的。Metro的设计会越来越被重视,不仅因为它代表了一种创造性的用户体验,而且它将来会成为windows 8操作系统的一部分,准备好兼容各种设备。在微软帝国中,不同设备拥有不同界面的现象将一去不复返,微软用户以后可以在手机、平板以及台式机上拥有基本一致的操作体验,但考虑到设备本身属性和之间的差异,各个平台体验会有略微的不同。尽管微软在去年9月发布了WP7的新版本(WP7.5芒果系统),诺基亚也发布了第一款搭载芒果系统的手机,但到目前为止,Metro设备在市场上的表现仍不甚明了。

Metro是一套全新的设计思路

WP7设计团队从活版印刷中获得灵感,移除了界面中所有不必需的部分,设计开始以内容为中心。微软团队试图将WP7操作系统从其他拥有传统的UI的系统中区别开来。现在传统意义上的界面消失了,而内容本身成为了新界面。界面不再是单纯的内容引导,而成了实实在在的内容本身。Metro弱化了视觉效果,从而提升了用户直接与内容交互的效率。

grid

Josef Müller-Brockman在图形设计中使用的网格系统

WP7的平面风格来源于排版印刷,追寻了平面设计先驱Josef 的足迹,画布上呈现的是纯净的印刷版式以及朴实的方形色块。图标仅仅是用来引出内容,绝对不会像传统界面中的图标那样炫目甚至于喧宾夺主,它们更多的是辅助用户在内容导航时进行定位。

screen2

纯净的印刷版式,来自应用Cocktail Flow 和Fuse

所有的这些都不禁让人联想到了绘制地图时体验。地图上路线的引导直观明了地通过图形来展现,而且地图上拥有清晰的文字,因为用户需要根据标签和名字来查找一个地方,除此之外,地图上绝无多余的视觉元素。

全新的内容网络

Metro的设计,需要非常严谨的操作,可以联想一下地铁交通图。而在移动应用的情境下,需要更为强大的信息架构。当除去了界面图形元素时,内容网络就由内容本身来构建。如此,当用户去浏览界面的时候,他们同时已经阅读到了想要的内容。物理网格的缺失,留下了更多的负空间,这使得界面元素会看起来轻飘,因此设计师不得不选择较为厚重的元素来构建内容路径。元素一旦选择错误,用户就很难明白如何找到他们想要的内容。

subway

米兰地铁交通图

内容的组织要有等级,这取决于它的重要性,以及你想要向用户推送什么。因此,你要仔细的界定一个应用的用户群体,因为让一个应用去适合所有人群是不可能的。

flipboard2

Flipboard强调突出内容,和Metro设计如出一辙

Metro UI的核心是强调重点内容,用一种有益的方式来引导用户决定是展开新内容,还是继续他们正在做的事。为了达到这样的目的,微软提出了“中心(Hub)“的概念,它的任务就是将所有的信息都集中在一个屏幕之内,有点像Dashboard。就好比一本电子杂志的封面,比如 Flipboard。

用于组织内容的UI元素设计

Hub是用户与信息内容接触的中心枢纽,它包含了一种特殊的UI元素,之所以特殊是因为它们提供了全新的导航模式以及信息组织形式。Hub的概念可以分解为两种新的导航模式,每种模式都具有自己的含义及功能,分别是“全景模式(Panorama)”和“枢纽模式(Pivot)”。当看第一眼时,这两种模式之间的差异还是很微妙的。

全景模式(Panorama)

当用户开启应用,他会登录到全景模式,系统通过一个屏幕向用户推送来自不同区域的信息。这使得用户能够鸟瞰信息的全局。

TsoDanews-panorama_nero

WP7应用FeedTso的全景模式

全景模式使用文字和图像来创建通向不同内容模块的路径。这样的视觉沟通方式能够很快地将用户的感知跟信息内容联系起来。

枢纽模式(Pivot)

在枢纽模式中,各种元素按照逻辑进行排序,并将信息分割成大类,在每个大类中依次列出其中的各个子元素。这些列表解析出了同一信息的不同方面。

screen

WP7应用4th & Mayor的枢纽模式

举个例子,你能够用它来展现一个概念的多个视角(就像Tabs),就像上面应用的截图,一个很受欢迎的Foursquare客户端。就像一个电子邮件客户端一样,你能够使用它来显示文件夹,包括已读、发送、标记和草稿等等。

动态标题

Metro拥有强大的内容分层组织结构,它以精炼的信息为入口,而后逐层展现信息详情,动态标题的使用将这种功能发挥到极致,而这正是芒果系统一个新的特点。在第一代WP7中,标题至多是一个静态的应用图标就像iOS和Android。现在一种富有创意的交互模式出现了,手机的主屏幕展现了简要的信息提醒,提示的信息都是应用中最为重要的内容,这就好比一本杂志的摘要部分。需要立即获取的有意义信息都会在此空间内展示出来。

在下面的例子中,动态标题被用来展示当前的天气状况。如果用户要查看天气的话,甚至不用打开应用,因为基本的信息已经显示在那里了。但是如果想查看未来五天的天气的话,那就需要打开应用了。

动态标题也可以设计成循环信息,这样你就可以在一个标题的空间里创造性地展示多个标题了。

accuweather-livetile_db

WP7应用AccuWeather 和AppFlow的动态标题

强调色

当然,在一款应用中单将信息进行分级组织还是远远不够的。你或许会考虑在页面上突出一部分内容,《WP7用户体验设计指南》建议了一种特殊的方式来强调内容,那就是使用强调色。这是一种贯穿整个系统的颜色,用户可以进行个性化定制,你也可以用它来更好地高亮顶部信息,比如标题和页眉,以及其他的重要内容。强调色是标准的UI元素,它确实极其重要,因为它是系统级别的用户设置,所有手机上的应用都要能够使用这项功能(个性化定制强调色)。

Metro UI设计要领

简洁的界面,传统图标的缺失,意味着这将给用户带来不寻常的信息交互体验。所以,当构建一个WP7应用(通常说的Metro 应用)的时候,你也要好好思考它们在使用标准UI元素的时候与传统界面有何不同。

可点击的文字

与传统UI交互模式不同,在WP7中文字是一种可激活的元件,也就是说,它们是可以用手指敲击的。这改变了专门针对按钮及其他元件的“敲击安全区( tap-safe area”的概念,如今这种概念扩展到了文字上。此时,边缘间距、字体尺寸开始被赋予了新的使命。

动画效果

动画效果是WP7最为重要的特点。我做设计已经超过10年了,原来我经常认为,激活之后的动画效果的确能够为用户提供精妙的反馈,而且这些动画效果只能在特殊情况下“创造性”地使用。

而对于WP7来说,动画效果的使用是非常有挑战性的。动画效果以及场景切换已经根植于Metro UI的原始概念中,成为其基本组成部分了。你不仅能够使用它们来将当前进行的活动反馈给用户,还可以吸引用户来注意将要发生的活动,让他们准备好接受不一样的体验(例如,当从全景屏幕切换到一个文本新闻的屏幕时)。在这里你可以参考Flickr的WP7版应用

图标

对于图标的设计,WP7有非常特殊的原则,我建议在设计一款应用之前要好好阅读它们。应用条( application bar)是唯一可以放置图标的区域,应用条上的图标包含了与内容交互的大部分动作。

icons

WP7应用Pictures Lab的应用条,包含四个图标以及一个“更多”的按钮

文字的设计

另外一个与通常设计不同的地方就是文字标题的设计。在WP7中,标题的宽度要大于屏幕的宽度,不要将标题另起一行,而是要省去文字的右边缘。这种方式当然不能应用到正文中(例如电子邮件的主体部分),但假如文字不是特别重要(例如发件人的名字),这样的文字省去右边缘是比较普遍的。

彩色主题的设计

WP7不同于其他手机操作系统,因为用户可以选择系统级的色彩主题设置,不论是黑色主题还是白色主题,前景色和背景色都是可以改变的。

当改变主题颜色时(记着高亮色也是可以变的),一定要提供可任意选择色彩的调色板,这能够充分尊重用户的个性化需求。你也可以使用背景图片,但是你要准备两套,一套给黑色主题另一套给白色主题。

只有当应用程序在视觉方面的品牌化非常强烈的时候,你才可以为用户提供固定的调色板。但是一定不能同时使用两种方式(自由的和固定的调色板),因为这可能会导致系统难以识别,这种问题是某些移动应用未能通过入市审核的常见原因。

设计工具

为了设计一款WP7应用,你可以利用一般的原型工具,比如Balsamiq, Adobe Illustrator, Fireworks, Photoshop等等。但你要明白,应用程序是需要使用 Expression Blend 来开发的。根据项目的组织以及设计师在团队中扮演的角色,你可以适当了解 Expression Blend的工作原理,这有助于你设计有效的交互原型。对应用理解的越深刻,最后的产品设计就会越细腻。如果你懂Expression Blend,这会提升你工作的价值,因为你能更容易地与开发人员进行讨论。

new-content-grid

WP7应用纸上原型实例

小结

对于WP7来说,Metro UI的出现不仅让WP7手机变得更加让人心动,同时也为设计师提供了新的设计任务。它成为了区别于iOS以及Android的新的交互界面和移动设备发展的方向。这是微软有史以来首次将用户界面和硬件设备进行如此严格地结合,这也就意味着经销商和制造商失去了对WP7进行个性化定制的空间。微软这样做,为我们的设计工作提供了标准,也必将会影响未来的应用程序的设计。

 

本文译自《Introduction To Designing For Windows Phone 7 And Metro》

 

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

使用新浪微博登陆