注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

邓征宇的BLOG

一个硬币总有不同的两面。

 
 
 

日志

 
 

[学习]Metro UI/Modern UI  

2013-01-11 09:46:31|  分类: IT 和应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

现代的扁平化设计,好处之一在于节省了系统资源,将更多地显卡资源分给应用程序,而不是系统本身,这一点好像没有在Mac、iOS上显现出来,他们仍然是坚持笨重的拟物化设计。

*************

Metro UI 三周岁快乐,微软WP负责人为其庆生

http://www.ithome.com/html/windowsphone/55239.htm

2013-10-12 13:11:38来源:IT之家 原创作者:蓝莲

2010年10月11日,微软正式放弃过时的Windows Mobile操作系统转而采用Windows Phone 7,为此微软召开大型新闻发布会展示首批Windows Phone 7手机(上市时间为10月21日)。今天,微软的Windows Phone负责人Joe Belfiore在其Twitter备忘录中添加了Windows Phone 7周年纪念日。

Joe Belfiore的Twitter也提醒人们Windows Phone 7的出现也是Metro用户界面首次亮相,多彩扁平的磁贴为触控而生。

微软自此将Metro UI推广到其他操作系统。2011年,Xbox 360仪表盘的界面类似于Metro。Windows 8和Windows RT于2012年发布时除保持传统的桌面外,全都采用了Metro的外观。Xbox One将于11月份上市,其仪表盘的设计也会采用Metro元素。

微软在2012年中不再将其这套界面叫做Metro,目前被初步命名为Modern UI。微软从未明确为何放弃Metro这个名字,但据报道称,如果微软不改名字,可能会面临德国麦德龙(Metro AG)超市的起诉。

时至今日,Belfiore在Twitter中仍旧提到Metro UI,则表明微软仍未忘记这个名字。

**************

http://baike.baidu.com/view/5565262.htm

Metro是由微软公司开发的内部名称为“ typography-based design language”(基于排版的设计语言)。最早出现在微软电子百科全书95,后来的产品如:windows媒体中心、Zune播放器都有用到这项技术。该技术已于2010年初(美国)获得Metro UI专利批准(USPTO)如今该技术被引入到微软最新开发的Windows Phone操作系统和已经发布的Windows 8预览版以及Office 15中。

Metro UI是一种界面展示技术,和苹果的iOS、谷歌的Android界面最大的区别在于:后两种都是以应用为主要呈现对象,而Metro界面强调的是信息本身,而不是冗余的界面元素。显示该应用的下一个界面的部分元素,其作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面,这有助于形成一种身临其境的感觉。

历史
Metro基于瑞士平面设计的设计原则,本设计原则在Windows XPWindows Media Center中有体现,这有利于以文字为主的界面导航。2006年Zune开始使用类似Metro的设计风格。微软的设计师计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用。Zune的电脑端配套程序也使用了不同于以往Portable Media Center用户界面的清爽排版和设计。
开发
Metro的设计意念,来源于交通局巴士站站牌、机场地铁的指示牌,给了微软设计团队灵感。设计团队说Metro是来源于美国华盛顿州金县都会交通局(King County Metro)的标识设计,其风格大量采用大字体,能吸引受众之注意力。微软认为Metro设计主题应该是:“光滑、快、现代”。Metro的图标设计也会不同于AndroidiOS
现状
Metro是微软在Windows Phone中正式引入的一种界面设计语言,也是Windows 8的主要界面显示风格。在Windows Phone之前,微软已经在Zune Player和XBox 360主机中尝试采用过类似的界面风格,并得到了用户的广泛认可。于是,微软在新发布的Windows Phone、已经发布的Windows 8预览版以及 Office 15Xbox live中也采用了Metro设计,今后的微软产品中将更多的能看到Metro的影子,而更少的看到传统的Windows视窗界面。

Windows 8推出的一个专为触摸而设计的最新Metro风格界面,能向用户显示重要信息,这个界面同时支持鼠标和键盘,并应用于平板设备。Metro风格界面设计风格优雅,可以令用户获取一个美观、快捷流畅的 Metro 风格的界面和大量可供使用的新应用程序。这些应用程序拥有远远超出图形设计范畴的新特性(一个平台)。正如微软所展示的那样,通过出色的触控体验,同时又可以使用鼠标、触控板和键盘工作。如果用户希望永远沉浸在Metro界面中,那么将永远不会看到桌面,除非刻意选择,否则系统甚至不会加载它,这样的Windows 将焕然一新。
将在Windows 8中开放的Windows应用程序市场(类似于iOS里面的App Store)也使用并推荐采用Metro风格界面的应用程序。
名称
2012年10月随着WP8与Win8的发布,微软在提及Windows 8全新开始屏幕(Start Screen)时,开始使用 "Metro(新Windows UI)" ;谈及Windows 8应用时,则使用“Metro(新Windows UI)”设计一词。

**************
Metro UI is the Future?

http://saberzou.diandian.com/2011/10/why-metro-ui-is-the-future/

适合未来的一个交互解决方案

Metro的特点就是简洁与直观,没有过分华丽的炫目背景与功能图标。微软官方新版首页,新首页的界面基于Metro UI风格,采用色块和箭头的风格将页面简化,方便用户识别并迅速以向导的方式获取到自己所需要的功能板块。

根据微软的定义,Metro的特点是“Modern, Clean, Simple and Direct. ” Metro操作界面主要由没有渐变的色块、微软的官方字体Segoe、单色菜单图标等构成,算是比较节约的设计。当然Metro不仅仅是平面的视觉,它也是立体和动态的,WP7的动态Live Tile实时更新通知,导航切换的动画等等都是Metro的一部分。另外,WP7的操作系统也是集成的,与iPhone的iOS不一样,iPhone的程序相互之间并没有太多的交互,操作直接,进入App,退出App,再进入另一个App,而Metro更注重深度的整合,横向互通,比如说进入联系人列表,除了普通的联系信息,你还可以看到他的Twitter更新,Facebook照片,而不需要打开专门的软件。(当然我认为这样的学习曲线也是相当高的。)

Metro是一个非常明智的设计,是可持续的,未来的。目前很多人感受到的Metro是通过WP7,很多人认为这个界面太“艺术”很难接受,也有人说很容易产生审美疲劳因为仅仅是简单的色块,也有人说导航很复杂,不好理解。确实Metro还处于初级阶段会存在一些问题,但如果我们去看看Metro的本质或许你会觉得微软这次不是小聪明而是大智慧的。
Metro的灵感来源是来自城市交通系统的知识标识(这就是为什么叫Metro的原因,Metro:城市,地铁),也来自 Josef Müller-Brockmann,  Massimo Vignelli’s 设计的地铁路线图,还有来源于American Airlines,甚至是  Experimental Jetset 的概念作品,这些都是现代的城市化的设计,但其中最重要的特点都是:注重信息和内容!城市的交通标识系统就是提供有用信息的,它并不花哨,不同国籍不同语言的人都可以辨识,而且不需要花太多的时间。微软把这些标识语言迁移到了数字信息通信领域,于是就有了Metro。
Metro非常简洁,给人一种轻盈的感觉,并没有刻意模仿现实世界的物品(为什么数码电子书的界面就非要设计成跟现实的一本书一样呢?这是个好问题),数字化的呈现不需要很多的Icon和模拟真实的质感和其他设计元素。化繁为简的界面更加突出了内容和信息,因为这些才是我们关心和需要的。而且就像是地铁里的标识,Metro化的UI让你更快看到信息和内容,直接地与内容进行交互。Metro注重字体,字体就是信息的呈现,Segoe字体清晰,悦目,优雅。
Metro简约而不简单,她可以应用的场合很广,看看下面这些例子就可以感受到恰恰是这种简洁反而使很多变化成为可能,也是适应性让她必将成未来的界面设计语言。
微软推出过一个叫Surface的触摸设备,还有XBOX上的体感操作Kinect,这些都是微软迈向未来的人机交互的尝试,而且可以说是成功的,下面这个微软对于未来设想的视频里大家也看到触摸和交互将无处不在,信息将会占据我们所有接触的平面:墙壁,电器表面,镜子,地板,桌面,街边灯箱,幕墙,等等等等。每一表面上都需要呈现信息,而当信息扩展到这些表的时候就需要有一套有效的呈现系统,我想不到有什么比Metro更适合的了,难道在墙上这么大的界面也放上一个个大大的图标?(需要指出的是Metro UI在适合更大的屏幕和界面,或许会在小屏幕上上并显示不出来她的优势,希望有更具体的Metro UI在小屏幕上(如WP7)的用户体验研究报告。) 
Metro UI以她的简洁和对内容的尊重而很好地适应了不同的应用表面,让信息流动到各种界面上,这就是为什么说Metro是面向未来的一套设计语言。

***********

iOS 的拟物设计和类似 WP7 中 Metro UI 风格的设计分别有哪些优势和劣势?

http://www.zhihu.com/topic/19588293

iOS UI是立足在东西上,或者叫做容器上。而Metro UI是立足在信息上,或者叫做内容上。

iOS UI里头流动的是一个一个不同的APP。而Metro UI里头流动的是信息。

APP最终构成了iPhone的界面(一个一个的图标),而信息最终构成了WP的界面(动态,不断变化的瓷片)。

虽然我在用iphone,但我非常喜欢WP和Win8。如果信息本身已经可以形成外在的样子,何必还要再套上一层外衣。

iOS 仿真式界面设计是否过时?

事实可以证明,iOS 的仿真/拟真设计思想在 iOS 6 里更加凸显了,甚至细节达到了变态的地步。Apple 既然这么做了,就可以推断 Apple 内部认为仿真式界面还是有顽强生命力的,只要一直跟着潮流品位演变,就不容易过时。

上图是 iOS 6 改版后的音乐播放界面,注意到上下两个滑杆了吗?滑竿上的金属圆形按钮原来不仅仅只是模仿了金属纹理,在你左右稍微倾斜手机的时候,它居然会像真的金属一样改变光泽的角度!!!(你可以拿起你的 Wireless Keyboard G6 或者 Magic Trackpad 看看侧面来了解这个效果。)虽然能明白它是用重力感应实现的,但这不是谁都能做出这么细致的设计的。

Android 要说有风格,其实一直都没有风格,只是想抄 iOS 又抄得水平不一,没有完成度也没有高质量罢了。相反,每个版本风格一次大变,不正是抽自己的脸吗?凭什么用户要这么多年一直做你的小白鼠?

Metro UI 是很棒很优雅的设计风格,但是开发者和消费者的审美水平跟不上,风格再好又有什么用呢? 

很多人谈到 iOS 拟物化的优势,但“拟物化”这种交互的设计初衷是什么?无非是为了降低用户的学习成本以及理解难度,正如《iOS Human Interface Guidelines》里提到,“当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造,用户就能快速领会如何使用它。”
        现在,我们再来看Metro UI,他与iOS走的是截然不同的道路,iOS利用的是人的生活经验,比如翻书,打开抽屉等,让使用者能直接把生活经验搬到对应用的操作上,很快联想出下一步应该怎么做。Metro UI利用的是人类最直观的认识——文字。在WP7的应用里,你不用去想到底哪个图标是首页,他就给你用大字体写着“首页”!虽然Metro UI走的道路不同,但是我认为他完成了设计的初衷——让应用更简便,让用户更快速地学会使用。

Metro UI最亮丽的在于他透露出的一种活力:系统首页的瓷片设计,页面跳转的多种特效,调皮的等待效果……可以说,Metro UI尝试的是一种拟人,会有一种交流的感觉,而不仅仅是操作。

最后,iOS和Metro UI都不会停止改进自身的步伐,苹果的设计是一种美学,但美学并不局限于苹果的设计,美学应该是多样化的,期待Metro UI更优雅的绽放。

有同学讨论文字和图像哪个更直观……,好吧,我觉得应该这样表述:无损地传达意图上,文字比图像的难度低,看到图像,是个房子,转化为“主页”,看到文字“主页”,转化为“主页”。用图像肯定会存在损耗风险的,况且一些概念你很难设计出能使用户第一眼就能准确从图形理解意图的Icon。

有同学提到文字是抽象物,但图标的设计比起文字来经常会更抽象(就像是最古老的汉字一样)。图标和高直观度的相片是有区别的哦,图标揉合了图像以及人对图像赋予的主观意图。欢迎探讨指正。 

Metro UI 作为高度符号化的语言,在隐喻功能性与结构性上,对普通大众有天然的缺陷。由于消费级市场的用户多数并没有专业的环境熏陶,即使是地铁内部的指示隐喻也未必都能完善的解读,更何况包含递归层级结构的操作系统。所以wp7使用高度抽象的metro视觉语言,必然吸引的是专业化少数人群,其ui对复杂事物的隐喻能力亦有限制,比如会太过单调。当你了解iOS 对app的四象限风格定义(横轴serious,fun,纵轴tool,entertaiment)后你就知道,在这方面apple要高明的多,把Metro UI应用到系统,真的只是设计人员的过度理想化,Nokia 搭上了wp7,便是又一个悲剧,不信,我们走着瞧吗。

*******************

“Metro”品牌即将成为过去时,微软此前就曾告知开发者避免使用“Metro”一词,内部也暂时使用“Windows 8 style UI”来替代“Metro”。那么,正式来替代“Metro”品牌的将是什么呢?

在联想昨日发布Thinkpad Tablet 2平板电脑之后,答案似乎浮出了水面,微软将会用“Windows 8”来替代“Metro”。

根据Thinkpad Tablet 2产品页面的信息,介绍内容中采用“DESKTOP AND WINDOWS 8 APPS(桌面和Windows8应用)”这样的描述方式,可见“Metro”已被悄然替换掉了,全新登场的将是“Windows 8”。同时有消息称,甚至在Windows Phone 8之中,微软也会将新界面称为“Windows 8”。

微软为何要大动干戈的抛弃“Metro”品牌呢?业界普遍认为德国零售商Metro AG就是促使微软弃用“Metro”的“罪魁祸首”,但Metro AG发言人拒绝就此置评。

数家媒体报道称,德国零售商Metro AG是促使微软弃用“Metro”的“罪魁祸首”。Metro AG发言人拒绝就此置评,称“我们不会对市场传言发表评论”。

微软表示,弃用“Metro”不是诉讼的结果,但没有披露是否受到与商标和版权有关的诉讼威胁。微软发言人也拒绝披露内部备忘录中提到的“重要的微软合作伙伴”的名字。

摩尔海德表示,弃用Metro品牌将有助于微软强化其优势——Windows品牌,“任何宣传Metro品牌的努力都会削弱Windows品牌。对于微软而言幸运的是,它提高了‘Windows用户界面’的知名度,让用户更熟悉‘Windows用户界面’”。

摩尔海德称,Windows品牌的价值会受到影响,因为“Metro”可能很难被“遗忘”。

微软备忘录称,将于本周推出替换“Metro”的标识,这意味着微软将于周五、周六披露新标识。在披露新标识前,微软员工将使用“Windows 8 style UI”(Windows 8风格用户界面)一词。

最后又改成为Modern UI。

****************
Metro UI:简洁?还是复杂?

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

二、颜色与图标

三、活动格窗

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

*******************

Metro之父:瑞士平面设计风格概述

Windows Phone灵魂诠释:Metro UI界面完全解析
http://www.cnbeta.com/articles/171431.htm

求本溯源,Metro UI是基于瑞士平面设计原则,其最初在Windows XP的Windows Media Center就中有体现,这有利于以文字为主的界面导航。2006年著名的Zune播放器开始使用类似Metro的设计风格。微软的设计师计划重新设计现 有用户界面、更清爽的排版和较少的重点以便于用户使用。Zune的桌面客户端程序也使用了不同于以往Portable Media Center用户界面,其清爽排版和设计给用户耳目一新的冲击。

20世纪50年代期间,一种崭新的平面设计风格终于在联邦德国与瑞士形成,被称为“瑞士平面设计风格”,由于这种风格简单明确,传达功能准确,因此很流行与全世界,成为二战后影响最大,国际最流行的设计风格,因此被称为“国际主义平面设计风格”。

Metro UI强调的是信息本身,而非应用程序。

Metro、iOS、Android之三大UI风格对比

三种移动平台,三种风格迥异的UI界面。先有iOS,后有Android,但是Metro UI的风格,早在许久之前就深入现代设计殿堂。在Windows Phone中,图标按钮可以呈现出更加丰富的信息。WP和Android在一个应用中,四步即可对一张照片完成剪裁。而在iOS中,需要频繁的在2个应用中切换,至少6步才能搞定。

简单的菜单 VS. 各种高级子选项。没有选项卡,没有古怪的按钮,有的仅仅是简洁明了的菜单。Metro UI回归质朴,所带给用户的是极简式的操作体验。MetroUI的秘密:谁更适合视力有障碍的人?在你视力好的时候,可能不会觉得他们有太大差别。当你视力有些许的问题时,你依旧能准确操作手机。
其实还有一点,就是Apple、Android的设计风格都是先“生造”,再渐渐普及到生活中的。而Metro UI,则是先经过了地铁站飞机场的大量普及,才提炼出来的。因此Metro UI已经“久经考验”了,或许生命力更强些。


Metro UI设计具备以下五点原则:

1. 干净、轻量、开放、快速

2. 要内容,而不是质感

3. 整合软硬件

4. 世界级的动画

5. 生动,有灵魂

瑞士平面设计风格稳健,四平八稳的传达设计,给人印象深刻。不少人认为瑞士风格是一个统一的、单一的风格,瑞士设计家大部分不同意这种看法,他们往往强调瑞士国家虽然小,但是设计风格变化多端,极为丰富。

对于瑞士设计学校的师生来说,瑞士国际主义风格已经是过去的事情了,但是,瑞士的设计教育却深深地受到这种50 、60 年代发展起来的风格的影响。直到现在,瑞士的平面设计依然具有强烈的整洁、严谨、工整、理性化的特征,一丝不苟,传达准确,形式单调乏味,不少年轻人感到 瑞士设计,特别是平面设计已经太深地陷人瑞士国际主义风格中,瑞士设计界需要一次真正的革命、造反,来荡涤过往风格的阴影。

Metro UI强调利用时间碎片

在时间碎片中找寻到更多的信息。这就是MetroUI为Windows Phone所订制的设计理念。现在社会连呼吸都要赶时间,很多用户没有过多的时间来用复杂的手势操控手机。在公交车上,我们可能利用从座位起身到在后门排 队等着下车的这个狭窄的时间间隔中,还想着要看一条微博。也许趁着在超市排队结账的时候,都要用微信摇一下周围的新朋友。着重提高用户的单手操作准确性, 就能让用户死死的黏在你的应用上。

40年用户界面设计历史简单回溯

界面设计是软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

在漫长的软件发展中,界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一 样,是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用 者、使用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果, 而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终用户设计满意视觉效果的过程。在漫长的人机交互史中,UI设计的理念也在不停迭代。

 Metro UI是微软的一种设计方案。该设计方案已用于移动操作系统Windows Phone 7和多款微软产品。微软Segoe WP 字体,属于Segoe字体家族的一员,细腻坚韧给人一种优雅的美感,同时它也是WP7手机系统的默认字体。

源自瑞士的设计风格:Metro UI

机场和地铁的指示牌给了微软设计团队灵感,其设计团队指出:Metro UI是来源于美国华盛顿州金县都会交通局(King County Metro)的标识设计,这种风格大量采用硕大突兀的字体,能吸引读者的注意力。微软认为Metro设计主题应该是:“光滑、快、现代”。Metro UI中图标设计也会不同于Android和iOS界面。

Metro之父:瑞士平面设计风格概述

20世纪50年代期间,一种崭新的平面设计风格终于在联邦德国与瑞士形成,被称为“瑞士平面设计风格”,由于这种风格简单明确,传达功能准确,因此很流行与全世界,成为二战后影响最大,国际最流行的设计风格,因此被称为“国际主义平面设计风格”。

\

图:瑞士平面设计

瑞士平面设计风格稳健,四平八稳的传达设计,给人印象深刻。不少人认为瑞士风格是一个统一的、单一的风格,瑞士设计家大部分不同意这种看法,他们往往强调瑞士国家虽然小,但是设计风格变化多端,极为丰富。

\

图:瑞士平面设计

对于瑞士设计学校的师生来说,瑞士国际主义风格已经是过去的事情了,但是,瑞士的设计教育却深深地受到这种50 、60 年代发展起来的风格的影响。直到现在,瑞士的平面设计依然具有强烈的整洁、严谨、工整、理性化的特征,一丝不苟,传达准确,形式单调乏味,不少年轻人感到 瑞士设计,特别是平面设计已经太深地陷人瑞士国际主义风格中,瑞士设计界需要一次真正的革命、造反,来荡涤过往风格的阴影。

\

图:瑞士平面设计

独特风格:Metro UI强调信息本身

Metro UI是一种界面展示技术,和苹果的iOS、谷歌的Android界面最大的区别在于:后两种都是以应用为主要呈现对象,而Metro界面强调的是信息本 身,而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面,这有助于形成一种身临其境的 感觉。

\

图:Metro UI强调信息本身

Metro UI强调利用时间碎片

在时间碎片中找寻到更多的信息。这就是MetroUI为Windows Phone所订制的设计理念。现在社会连呼吸都要赶时间,很多用户没有过多的时间来用复杂的手势操控手机。在公交车上,我们可能利用从座位起身到在后门排 队等着下车的这个狭窄的时间间隔中,还想着要看一条微博。也许趁着在超市排队结账的时候,都要用微信摇一下周围的新朋友。着重提高用户的单手操作准确性, 就能让用户死死的黏在你的应用上。

40年用户界面设计历史简单回溯

界面设计是软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

在漫长的软件发展中,界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一 样,是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用 者、使用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果, 而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终用户设计满意视觉效果的过程。在漫长的人机交互史中,UI设计的理念也在不停迭代。

1984年1月1日,Apple MacOS 1.1

\

1995年,微软 Windows 95

\

2005年,Apple OS X Tiger

\

今天,Metro UI设计语言诞生

Metro的设计灵感来自交通系统:它需要帮助人们能够在短时间内,快速找到自己所需的信息。Metro一词在英文中译为地铁的意思,这充分体现了它的渊源和其艺术风格。


[学习]Metro UI - 邓征宇 - 邓征宇的BLOG


上图从左到右分别是WP 7,iOS,Android 的界面,Android 明显是山寨 iOS 的。

什么才是扁平化设计?它从何而来?

http://www.ithome.com/html/soft/77829.htm

扁平化设计(flat design)

扁平化设计在如今备受设计师们的青睐,是因为通过这种风格可以让设计更具有现代感,另外可以强有力的突出设计中最为重要的内容:内容和信息。其实那些具有三维效果的属性,本身都是某段时间的流行风格,所以去除掉了这些信息,就能让你的设计不那么容易过时。更何况还能突出内容本身。所以这种设计风格还是有很多好处的。

其实要讨论扁平化设计就不能不提,它的相反面,也就是rich design丰富设计风格。所谓rich design就是通过添加各种设计装饰,比如下落阴影、梯度等,让整体设计显得很丰富。这种设计风格可以让用户在网页上进行导航时,更加自如。另外rich design和拟真设计风格也不同,后者是通过模拟物理实物来让设计更加逼真。

扁平化设计从何而来?

其实网页设计的很多风格都可以从印刷艺术品上找到影子。但是很难确认扁平化设计的最初源头。应该说是从多个设计风格和时期中,都得到了相应的灵感最终形成了扁平化设计这回事,比如下面这些:

Swiss Style

Swiss Style是扁平化设计历史上最值得讨论的。这种设计风格兴起于瑞士,时间上贯穿了1940年代到1950年代。Swiss Style风格的特点是大量使用网格的设计元素,另外内容和布局都很简洁,在那个年代经常可以看到一幅大照片配上简单的几个文字,这就是典型的Swiss Style设计。其实跟扁平化风格一样,Swiss Style在取得大规模的流行之前,也已经出现了一段时间了,几乎可以追溯到1920年代的德国,但是之后在瑞士取得了巨大的流行。

Minimalism Design

另外还有Minimalism Design,其实它基本是扁平化设计的同名词,有人还将他们混用,但是它的出现要早的多,之前已经应用在建筑和视觉设计上。Minimalism Design的特点是去除所有没有用的东西,只留下需要的元素,通常都是几个几何形状、一些明亮的颜色。所以基本上是上面这两种设计风格影响了扁平化设计的形成。

扁平化设计在IT领域的出现

虽然现如今很多的设计师都在采用扁平化风格进行网页设计,但是可以说如果没有微软和苹果这两家科技巨头的推动,扁平化设计不会发展到现在这样流行。

首先是微软和它的Metro Design,2006年微软为了和苹果的iPod播放器进行竞争,推出了Zune音乐播放器,并从那时起开始了名为Metro的设计风格。这种风格突出字体大的文字并配合背景图片。这种风格跟当时微软传统的windows风格有很大的不同。2010年推出的Windows Phone 7系统实际也是从Zune的设计中积累了很多的经验。由此Metro的名字被流传开去,它是如此的流行,以至于微软还把它应用在了之后的Windows8上。另外这种设计风格还被用在了其他的软件上,比如Xbox360等等。

另外,当然还有苹果和它的拟真风格,就在微软准备自己的设计风格时,苹果已经做出了改变,他们放弃了拟真风格,而直接采用了扁平化设计。并在2013年夏天的iOS7推出上市。因为涉及的产品很多,所以迅速的流行开了。苹果对设计领域的影响很大,设计师迅速喜欢上了这种扁平化风格,可以让他们的产品显得更加现代。

扁平化设计的未来

没有人有能够预测未来的水晶球,所以我们几乎可以说,扁平化设计最终也还是会消失的,会被别的设计风格取代。但是设计师们会不断的计划和尝试,并最终将它进化到一个新的风格。其实谷歌公司现在正在尝试将它和传统的rich design,充分利用他们各自的特点。总之设计行业永远处于变化之中。

  评论这张
 
阅读(603)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017