WP7手机程序设计 & Metro设计方法


Windows Phone 7 & Metro设计指南

微软新手机操作系统 Windows Phone 7 (WP7),通过应用于WIN8操作系统的Metro设计语言,为我们展示了一种全新的内容组织形式和与众不同的用户体验。

如果说Windows-mobile是为了商业和技术人员设计的话,那WP7的目标用户就是那些线上线下都很忙碌的活跃份子和热衷于社交活动的人群,不管他有什么样的背景。

为什么设计师要关注WP7

首先,WP7的用户界面是一种全新的概念,为我们提供了更大的创新空间,为它做设计将会是一场激动人心的挑战,而且对设计师来说,探索新事物是创新用户体验的最佳方法。

其次,Metro设计是一个不可忽视的市场。众所周之,Win8将支持来自intel,AMD和ARM的芯片架构,这意味着windows系统开始向更多平台迈过,包括平板电话和PC。2011.9.14win8开发者预览版宣布兼容移动终端,这意味着用户将一改过去在使用手机,平板电脑,台式机中面对不同用户界面的情形,以后跨平台的用户体验将会得到极大的统一。随着WIN8和基于WP7系统的手机先后上市,做为其重要组成部分的Metro设计语言将在市场中扮演愈发重要的角色。

Metro-新的设计模式

WindowsPhones团队从各种文字排版中获得灵感,通过去除界面上所有不必要的元素,并且将内容做为设计核心的方法,将WP7系统的UI与以往的UI设计彻底划分开来。过去大家所熟知的用户界面消失了,取而待之的是内容自身成为了界面。界面的功能不只是进入内容的通道,同时也能显示当前的内容,减少了移动终端上的视觉元素,促进人与内容的直接交互。

WP7的图形样式是排版,并且遵循平面设计先驱Josef Müller-Brockman的基于基本画布( basic canvas),素色(plain color ),方角(squared angles)的纯排版理论。ICON一改在以往终端中发挥主要作用的局面,在WP7中他们仅用于操作内容 ,且更倾向于在浏览内容时引导用户。

Windows Phone 7 & Metro设计指南

所有的要素都给予用户这样一种感觉:这就是一张地图,用户通过标签与名称来帮助他们到达目的地,所以需要清晰的文字,且极大的弱化视觉元素。

Windows Phone 7 & Metro设计指南

新的内容网格

Metro将原有的用于布局的图形元素移除,内容网格全部由内容自己来创建。当用户在浏览页面时,就已在阅读内容了。一切的元素都非常的轻巧,这就要求设计师在创建内容路径时正确的使用强调元素,从而帮助用户更便捷的找到他所需要的信息。你会觉得这和地铁路线图很像,但就移动应用程序而言,它所要求的信息架构体系比地铁的路线图更严谨。

Windows Phone 7 & Metro设计指南

内容按照重要性及用户需求度两个标准来推送,基于这个原则,每个应用程序在设计前都必须准确定位对象人群。Metro UI的目标就是通过强调重要信息来帮助用户决定是否要点击查看,为了能做到这一点,微软提出了“Hub”的概念,其作用就是如仪表盘那样在一屏中浓缩所有的信息。更确切的说,是像一本电子杂志的封面,例如:Flipbord.

Windows Phone 7 & Metro设计指南

用于组织内容的UI元素

Hub是所有内容的集点,它包含了全新的UI元素和内容架构。这个概念表现为两个全新的导航模式。“全景图”(panorama),“枢轴”(pivot),乍看之下两者的没什么多大的区别,但他们每一个都有其自身的意义和作用。两者如何选择由应用程序的目标和内容的推送方式决定。“实时便签”(live tile)是另一种功能强大的Hub元素,它能将应用程序的内容以图像形式直接显示在首屏。“强调文字颜色”虽然不是严格意义上的新UI控件,但也是重要的组成部分,它有助于用户精确定位屏幕中的重要信息。

全景图(panorama)

Windows Phone 7 & Metro设计指南

当用户启动应用程序后,迎接他们的将是全景图模式,该模式将应用程序中不同栏目或功能下的信息直接推送到当前屏幕下,类似于一个所有信息的鸟瞰图。

全景图将图像与文字结合成内容块,按这种形式来创建信息路径。这种视觉传达将使用户对信息有最直接的感官感受。

枢轴 (pivot)

Windows Phone 7 & Metro设计指南

枢轴,按逻辑调整元素,从分类中分离信息并且将每个分类中可用的元素罗列出来。它就是一张用来显示同一内容不同方面的分析单。

举个栗子:你可以使用它来展示同一概念下不同场景和内容(如:选项卡的功能),例如时下很受欢迎的4th&Mayor客户端。你也可以用它来展示文件夹,例如:邮箱中的“收件箱”,“发件箱”,“草稿箱”等。

Windows Phone 7 & Metro设计指南

实时便签(live tiles)

实时便签有一个很强大的内容层次结构。由摘要开始,层层递进,内容愈发的详实。这个功能最早出现在Mango系统中。在WP7最早的版本中,这个功能和iOS和Andrirod一样,只是安静的位于最热门应用程序的右上角。但现在,实时便签被改造成为全新的交流模式。他将应用程序中的重要信息以摘要的形式在首屏展示出来,类似一本杂志的简介。中以将其想像成一个提供即时即用信息的空间。下图展示的就是一个用于天气预报的实时便签。当用户想了解天气时,完全不用打开应用程序,所有的基本信息就摆在那儿。如果他们想了解更多的信息,则可以启动程序。同时实时便签也可设计成滚动形式,这样用户可以在一个便签区域中创造多个复合便签。

Windows Phone 7 & Metro设计指南

强调文字颜色(Accent Color)

WP7指南中建议大家使用一种特别的方式来强调内容:强调文字颜色。用户可以自定义标题,文章重要内容的颜色。而且这种用户自定义是系统级别,这意味着你移动终端上所有的应用程序都将为之改变。

设计提示

简洁的界面,没有常用ICON,意味着用户将与内容以不同以往的方式进行交互,在设计WP7应用程序时我们不得不考虑现在的用户习惯与往常的有什么不同之处。

可点击文字

以往的按键或其他具有文字功能的一些设计元素都有一个可点击的安全区域的概念,而在WP7中文字自身就是交互模式中的动态组件,意味着它可以被点击,而响应区域的边距就是文字的大小。

Icons

Windows Phone 7 & Metro设计指南

WP7的图标只能放在一个叫做应用程序栏的区域内,它整合了与程序进行交互行为的主要图标

文字换行

在WP7中,当头部文字的宽度大于屏幕时,不会自动换行。相反,它将直接被右边截去多余的部分。这个功能不会作用于重要内容,如邮件的主体。但一些不是很重要的文字,如:发件人姓名,则依然会被截掉。

色彩主题

由于WP7给予用户极大的色彩支配权,他们可以改变所有他们想改变的,比如主题的明暗,前景,背景色,还有想强调的文字的色彩(要知道这是系统级别的修改),所以设计师在设计中要将这些因素全部考量进去。

总结:

Metro,WP7对于终端及操作系统设计师来说是全新的事物,他在人机交互上与iOS,Andriod截然不同。这是微软历史上首次将硬件与界面如此紧密的结合,给予运营商和制造商的自定义空间非常小。它为我们现在的工作及未来应用程序的特性扩展提供了新的标准。(Metro的纯排版设计模式对于中文排版设计是一种挑战,或许对与中文字体的发展会有一定的推进作用)

作者:光の影

-END-