Win8 Metro风格界面在iphone APP中的视觉体现

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

Win8的界面设计,颠覆了Windows传统,大胆引用了WP7的Metro界面,又结合了Win7的传统操作界面,打破了人们对微软操作系统一成不变的看法,并揭示出Windows引领未来操作系统的决心和野心。

Win7的界面风格大受欢迎,影响了微软对Win8的界面设计。在Win7大受欢迎的基础上,本人完全没想到Win8会设计成这个样子……但是他就这么来了。虽然本次Win8未曾提到Aero透明效果,但我们还是从它的传统界面上看到了一些相似的地方,但Win8界面确实再次得到了提升,已经不以Aero为主打,转向Metro和Ribbon界面。

 

什么是“Metro”?“Metro”已经不是一个新词,本意是指“地铁”。纵观机场、地铁、公交线路图等,会发现这些导视设计都具有高度概括性,对比度强烈等特点,并被用来指导人们更快的找到自己要往的目的地。这个设计语言正是源于交通导视图的这些特点而产生的灵感。

 

Metro在移动设备的界面设计语言,最早是出现在微软推出的Windows Phone 7上

 

从视觉上看,比较突出的特点是:

整个界面展现出的“图标”完全跟 “圆角、渐变、阴影、光泽感”说拜拜,用纯二维以及高度概括性弱化了视觉上的复杂性,让用户没有过多的往关注图标本身,而是增加其辨识性和标识性,达到强化内容和信息的目的。

在一个充斥着各种渐变和各种效果的时代,WP7能如此大胆地抛开了传统视觉设计语言的束缚,不惜代价地进步视觉上的清楚度和辨识度,把追求简洁发挥到了极致。

如今,随着iphone 各种APP的不断更新,我们可以从一些APP中,看出明显的Win8 Metro风格:

《面包旅行》

荣获苹果App Store 2012 年度最佳应用,设计风格颠覆以往的渐变质感,清新的颜色和平面化的元素是亮点

 

《诺基亚HERE Maps》

HERE 的界面看上去和塞班系统很像,在细节处又凸显出不少 Windows Phone 的风格。

 

《ISO500》

500px 第三方客户端,Metro风格尽显

 

“Metro”作为一种新的设计语言出现在移动终端中,更像是一种现象的延续,不管是在界面还是体验上,都需要有一个差异化的核心价值,当这种体验的核心价值表现在内容至上时,无所谓对与错,进步或后退。

所谓的视觉次于内容,并不意味着视觉设计的地位被减弱了,相反更需要设计师提炼“设计”。

 

————————————-华丽的分割线—————————————–

补充一篇文章

【iShout】Metro UI 的简洁是另一种复杂

作者:苏园

Metro UI 推出来的时候,对比其他系统的图标海洋,确实让人眼前一亮,活动格窗取代图标,内容取代形式,微软的宣言是让智能手机用户有更高的效率得处理事务,而不是专注于智能手机本身。
但果真如此吗?在我看来,Metro UI 设计得的最初目的是简洁,最后产生的结果却不一定是简洁。

细线

Metro UI 中的一大特色就是内容的无边框设计,通过间隔和字体使内容产生自发性质的分隔,而不必通过边框等介质。在展示少量内容时,简洁的特性可以很好的体现,但在处理大量内容时,却会表现出“拥挤”。由于没有分割线,不同的内容之间只能通过留白来分隔,导致文字积压,挤占了屏幕的表现空间,进一步造成了内容的“拥挤”。

 

wps_clip_image-21527

以设定中“关于本机”选项为例,iOS 的细线分隔显得更明快,获取信息更清楚容易。细线是最简单的内容区分的形式,Metro UI 对这区分形式的舍弃导致整个屏幕上只有孤零零的文字,直接发现有用信息困难。

细线的分隔也是一种更人性化的暗示,它让内容看上去更像一个按钮,暗示着可以按下并激发新的内容。而Metro UI 中的内容则会让人疑惑这是单纯的文字还是可以继续点击查看。Metro UI 的功能性暗示更加不明确。

颜色与图标

Metro UI 在颜色的应用上既激进又保守,激进的是它可以把界面弄得五彩斑斓,保守的是在应用内的界面不着一墨。

wps_clip_image-17044

从上图看,Metro UI 的邮件界面上只有单纯的文字,缺乏色彩,所有内容的分隔都是通过字体和空白来完成。这样的结果是信息同质化,很难区分信息。界面没有将有价值的信息第一时间呈现出来,因此当面对这样的界面时,需要更多的集中精力去寻找信息。这和做 PPT 时将所有的文字堆砌起来而不进行有效的信息归类并无区别。

wps_clip_image-7293

而 iOS 除了字体还有不同的颜色来表现不同性质的信息,同时也有小图标来表现相同信息的数目。各种要素各司其职,将信息表达得直观明确。

活动格窗

活动格窗是Metro UI 呈现给用户的第一特色,它不仅是一个快速启动的按钮,同时也是一个信息更新的展示板,微软宣传这样的设计可以更好的将信息第一时间呈现给用户。

但问题是,活动格窗的面积太小了,只能显示简介性质的数字,小图标表等等,缺少好的信息预览功能,这样的通知系统展现给用户的结果就是“知道有这么回事,但不知道究竟是怎么回事。”用户依然是茫然的。有价值的信息被淹没,用户没有能够便捷地获取有用信息。

wps_clip_image-470

简洁的目的不是复杂

Metro UI 是一个形式上简洁的系统,导致的是一个复杂的用户体验。与其相标榜的相反,用户需要花更多的时间在屏幕上才能仔细甄别什么是有用的信息。Metro UI 为了简洁,大多数时候忽视了内容的表现形式,比如细线这种最简单区分内容的形式。Metro UI 在颜色上也有奇怪的特性,屏幕永远处在斑斓和全无的两极,内容的表现形式非常单一。

在我看来,微软的界面设计陷入了一个误区,突出内容忽略形式,并不是真正的简洁,而是另一种复杂。

来源:http://mdc.sohu.com/?p=1639

您的赞赏,是对我创作的最大鼓励。

评论( 0

登录后参与评论
加载中