快好知 kuaihz

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

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

 

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

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

颜色与图标

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

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

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

活动格窗

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

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:界面  界面词条  体现  体现词条  视觉  视觉词条  风格  风格词条  iphone  iphone词条  
交互

 12个常见的网站交互设计错误

好的交互设计可以区分开有质量的网站和其他普通网站。然而,如果有明显的设计错误,它只会给予你本来想打动的用户以刺激和挫败感。下面是Speckyboy上总结的让人最...(展开)

交互

 关于产品的杂念与吐槽

对于“做产品呐,最重要的是用户体验”这句话,亲们,难道你们不觉得神似“做人呢,最重要的是开心”……口水话,真可怕。洗澡时想起一个听来的段子。本世纪初,某大城市某...(展开)