ui设计课程ujiuye趋向于扁平化,为什么c4还如此火热

浅谈UI设计的演变――扁平化设计风格;高一(1)班凌霄/文;2013年9月,苹果正式对外发布了其最新一代移动;说到这种扁平化设计,其实最早将其应用于UI中的并;从上面可以看到,扁平化风格在电子产品UI领域的创;苹果,而是微软,但却是一开始对其不屑一顾甚至抵触;不仅如此,设计风格还呈现出了先抽象、后拟物(具象;些简单的几何图像(比如矩形)进行拼接;而往后,汽;
浅谈UI设计的演变――扁平化设计风格 高一(1)班 凌霄/文
2013年9月,苹果正式对外发布了其最新一代移动设备操作系统――iOS 7,这是继iOS 3至iOS 6以来最大的一次升级,也带来了其用户界面(UI)的一次非常巨大的变化。苹果自此摒弃了以往的拟物化UI设计风格,而开始走扁平化路线。记得当初iOS 7刚发布,就招致了极大的争议,贬褒不一:有人支持新系统的UI,也有人极力反对。近三年过去了,苹果一直在延续这种扁平化的设计风格,并且于此同时,扁平化(或者说与拟物化相对的抽象化)设计也在其他品牌、其他领域不断蔓延发展,大有成为主流之势。
说到这种扁平化设计,其实最早将其应用于UI中的并非苹果,而是同样知名的科技公司――微软。微软在2010年于Windows Phone 7中正式引入了Metro界面设计语言,并且在接下来的诸如Windows 8、Windows 10以及Office 2015、Office 2016等大量产品中都将这种设计予以延续和发展。更早在2006年,微软在其发布的便携式播放器Zune中就运用了类似的设计,可以说是Metro风格的前身。Zune带着它简洁明了、富有科技感的UI,在当时一众拟物化风格的产品中惊艳登场,许多人都为之感到惊叹,大呼“美爆了!逼格好高!”(←_←诶,当时好像还没有“逼格”这个词)不得不感叹新设计的诱人之处和明显优势。 从上面可以看到,扁平化风格在电子产品UI领域的创始者不是苹果,而是微软,但却是一开始对其不屑一顾甚至抵触的苹果将其发扬光大、推向主流。事实证明,这种设计风格迎合了当今审美的最新需求和标准(又或许是新的设计引领了审美的转变吧),越来越多的产品上出现了这种类似的风格,大量产品――无论是实物外观设计还是使用界面等的设计――画风大转,原本拟物化的调调儿一去不复返,转而纷纷投向带有极简和实用主义色彩的新式流行风味。就连一些大公司的logo也发生了变化:比如说之前提到的微软本身,相信很多人的对他的四格logo再熟悉不过(就算是每次开机时的洗脑也足够我们牢记这个标识了),然而微软在2012年也将其之前几年一直使用的带有立体感的波浪形四格logo改成了完全直线构成的矩形四格色块,并且在以后的操作系统(Windows 8等)中得以使用。同样,在其他的设计领域,这种设计风格也越来越得到追捧。比如现如今各种文字中非衬线字体的大量运用(如黑体、微软雅黑、等线、Arial等等,而宋体、Georgia、Time New Roman等衬线字体则相对变得不那么热门)。 不仅如此,设计风格还呈现出了先抽象、后拟物(具象)、再又走向抽象的轮回式趋势。再拿计算机操作系统举例,早期的操作系统都是一些最基本的纯文本单色界面,通过一个个的小显示点来构成文字(或者也有少量简单的图案);随着图形用户界面(GUI)的出现,用户界面变得越来越复杂华丽,越来越拟物化、具象化;而到了前两年,自从Win 8开始,操作系统的界面又变得简洁和抽象。我个人比较喜爱的汽车领域也是一样,比如汽车大灯:稍早期的电灯具都是一些简单的几何图像(比如矩形)进行拼接;而往后,汽车大灯的外观设计变得越来越复杂,各种灯具形状开始出现;可到了近几年,汽车的大灯又开始使用细线条的LED灯组等简洁的设计(比较典型的是奥迪新一代车型的灯组外观)。这种轮回的现象使得设计风格的一次次转变显得更加有趣和耐人寻味。
轮回的事例在生活和历史中很多,正所谓“天下大势,分久必合,合久必分”、“历史总是惊人的相似”。而本文中提到的这一轮回又是怎样产生的呢?其实这跟艺术创作领域(特别是绘画)中的现象十分相似。「在艺术创作开端的时期,人们的画作总是比较抽象――这是局限于当时的工具、技法和创作能力。于是,那是的人们所追求的便是越像越好、越像越好、越像越好,从最早的原始山洞壁画慢慢发展到中世纪的教堂壁画,明显有着越来越真实的趋势。然而随着绘画各方面技术在漫长岁月中的发展与进步,绘画真实度的上限被一步步拉高,油画颜料的出现以及附带技法的发展更是大幅提高了绘画真实度的极限。这个时候,大师们纷纷表示画得真实已经不是问题了,怎样才能在真实的基础上更近一层?于是开始研究构图、比例等等。研究得差不多的时候,大师们又开始不满足了,开始研究光、研究物质的构成……(这个阶段也有科学发展的重要影响)尤其是那个年代,摄影开始出现,极致的具象化已经只需要一个快门的时间。同时大师们开始理解到我们眼睛看到的颜色是光线反射的结果而不一定是物体固有的颜色,我们表面看到的物体是由更小的元素组成等等,这个时候对具象化的追求就突然开始崩塌了,比较明显的运动就是印象主义和后印象主义,莫奈、梵高都是妇孺皆知的(此前老师在上课时也有提及)。」【注:此段前文中直角引号内的内容有部分转意或小段引用于知乎上的一位UI设计师的专业文字】 再然后哲学里解构这个概念也开始形成了,简而言之就是从拆解的过程中获得重新构成,从而可以探究本源或者产生新的意义。解构艺术表现的大师比如毕加索也是妇孺皆知的。这个时候具象化已经完全不是重点了,表达的内涵和内容以及不同表达方式慢慢变成了主角。同时时间也来到了二十世纪,艺术的发展也走上了不再拘泥于表面,开始追求美的本身,以及从不同角度来阐述美的过程,于是艺术作品和“真实”就越走越远了。最后,通过这一系列的发展,到今天的艺术风潮,就算没去过画廊博物馆,我们也应该对比如各种印在T恤上的keith haring或者梦露pop art无比熟悉吧?【注:此段我个人并未完全了解,但为了与前段保持连贯和完整,直接引用于那位知乎用户的言论r(st)q才学浅陋,哲学什么的暂时真心不懂】 所以从视觉元素来看,绘画艺术恰恰经历了从元素少而简单到元素多而复杂到再到元素少而简单(其实本质上并不简单)的过程,风格从抽象到具象再到抽象。简而言之:当没有条件或者条件有限时,真实就变成了奢侈,于是真实就代表了好→大师们探索怎么画更真实→大师们画得越来越真实最终达到顶峰→大师们开始探索其他的表达方式,真实已经不完全代表好坏了→最后大师们表示只要能表达,就无所谓真实不真实。 再从受众群体的角度来看,对艺术的鉴赏力也是在不断地进步的。就像中世纪的民众,能欣赏的自然是惟妙惟肖的教堂壁画;在那个年代给他们来一个彼埃〃蒙德里安的作品(偶然发现Win8、Win10等之中色块、磁贴的应用似乎就与他的理念十分吻合),恐怕也没人欣赏得来。从一个普通人的角度,当还天天吃不饱的时候,恐怕没人会在乎吃面和吃饭有什么区别;只有在满足基本的温饱以后,恐怕才会去追求更深的层次吧?换到艺术欣赏上来说,作为普通人,是不是当只有体验过了具象化的极致,才会有心去欣赏在具象化之外的艺术表达呢? 所以UI设计的演变也是这样,从视觉元素来看,同样也经历了从元素少而简单到元素多而复杂到再到元素少而简单(其实并不简单)的过程,风格也从抽象(无法做到具象)到具象再到慢慢开始抽象。绘画作品的载体是纸、布、墙壁,创作工具是颜料、画笔等等,绘画风格的发展也与之有不可分割的关系。而UI设计的载体是计算机或电子产品,创作工具也是计算机,那我们讨论UI的发展怎么又能离开计算机本身的发展呢?不难推测,在早期的年代,在有限的像素中做出仿真度高的拟物化图标和界面是多么的不容易。而家用计算机显示能力真正得到质的提升正好是1995年,Windows 95的发布、对真彩色的支持、显卡的革命、Photoshop 5.0的发布……恰好让憋屈了这么多年的图形和UI设计师们巴不得立马上天。从Win 95开始到Win 7和苹果的Mac OS X的这十来年正是UI拟物化发展壮大并大行其道的阶段;同时也是显示技术飞速发展的十年,平面显示技术三亿文库包含各类专业文献、应用写作文书、高等教育、文学作品欣赏、各类资格考试、中学教育、生活休闲娱乐、72浅谈UI设计的演变――扁平化设计风格等内容。 
 扁平化风格本质上只是设计美学当中的 一种,与仿古、高光、金属质感、木质等视觉效果相同,对视觉风格的选择必须以良好的信 息架构及交互模式为基础。 拟物化设计...  室内设计风格的流行变迁就像大多数说和写的文字一样, 室内设计的语言时常在变, 新的观念和现象需要新的文 字和新的风格,虽然室内设计的语言没有像服装设计、产品...  浅谈UI 设计的演变――扁平化设计风格高一(1)班 凌霄/文 2013 年 9 月,苹果正式对外发布了其最新一代移动设备操作系 统――iOS 7, 这是继 iOS 3 至 iOS...  随着技术的发展,几乎所有设计师的作品中都呈 现出一致的扁平化设计风格。 关键字:扁平化设计,UI 设计,网页设计,微软,苹果 什么是扁平化设计? 英文名为“flat ...  扁平化设计风格来源:亦锐营销策划 对于扁平化这个词,相信设计师们都不陌生。尤其...2016年UI设计现状及发展... 5页 免费
UI界面设计概念教程 19页 1下载券
...  浅谈UI设计的未来方向_IT/计算机_专业资料。浅谈 UI 设计的未来方向早在 2000 ...从这一发 展趋势来看,手机 App 客户端,正是 UI 设计发展的一大方向。要知 ...  设计如果遵循简约风格的设计, 一定要避免使用拟物化...简洁的 UI 用户界面 简洁的扁平化设计的 UI 元素 ...可以负责任地说扁平化设计会按常规发展,但最终还是...  这在 Material Design 的设计风格中可以看出扁平化的影子, 但后者不但继承其简洁...扁平化的未来还需要在此基础上不 断发展新的创意。更多 UI 设计教程请关注我...解读移动UI扁平化设计的五个特点
如果不坚持,何必当初那么努力
帖子154887&缘分币423469 Y&阅读权限255&注册时间&
18:47 
解读移动UI扁平化设计的五个特点
自从Windows8的Metro风格出来后,扁平式的设计风开始成为网页设计和UI设计的年度流行设计趋势,但现在我们不称它为Metro风格了,国外设计师都说是Flat Design(即扁平化设计),或者你很讨厌Metro风格,但你不定讨厌Flat Design,它的设计很有特色,那么什么是扁平化设计呢?国外设计师Carrie Cousins在网站上介绍了扁平化的五个特点,下面看看扁平化设计(Flat Design)的五个特点:
1.拒绝特效
扁平化这个词来自于这种设计所使用的样式和形状,它完全属于二次元世界,一个简单的形状加没有景深的平面,不叫扁平化都浪费这个词了。
这个概念最核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落,没有任何羽化、渐变或者阴影。
这一设计趋势极力避免任何拟物化设计的元素,这导致这一设计风格在其它平台有时候显得突兀,前景图片、按钮、文本和导航栏与背景图片格格不入,各成一派。
那么,扁平化的效果如何呢?
因为这种设计有着鲜明的视觉效果,它所使用的元素之间有清晰的层次和布局,这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格,尤其在手机上,因为屏幕的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净整齐,使用起来格外简单。
2.界面元素
扁平化设计通常采用许多简单的用户界面元素,诸如按钮或者图标之类。设计师们通常坚持使用简单的外形(矩形或者圆形),并且尽量突出外形,这些元素一律为直角(极少的一些为圆角)。
这些用户界面元素方便用户点击,这能极大的减少用户学习新交互方式的成本,因为用户凭经验就能大概知道每个按钮的作用。
此外,扁平化除了简单的形状之外,还包括大胆的配色。但是需要注意的是,扁平化设计不是说简单的搞些形状和颜色搭配起来就行,它和其他设计风格一样,是由许多的概念与方法组成的,想要学习具体设计方法的朋友可以看看 Designmodo,这里有许多现成的设计实例可以让大家分享:《40+扁平化的APP应用UI和网页设计素材》、《给你灵感的扁平化UI设计作品收集》、《50个漂亮的扁平化网页设计欣赏》、《设计非常细致的扁平化Icon图标-附PSD》。
3.优化排版
由于扁平化设计的使用特别简单的元素,排版就成了很重要的一环,排版好坏直接影响视觉效果,甚至可能间接影响用户体验。
字体是排版中很重要的一部分,和其他元素相辅相成。想想看,一款花体字在扁平化的界面里得有多突兀。上图是一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大分之众多,其中有些字体会在特殊的情景下会有意想不到的效果。但注意,过犹不及,不要使用那些极为生僻的字体,因为保不齐它就把你带进坑里了。
如何使用字体也是一门学问,要学会让不同的字体表达不同的概念,通过字体告诉用户这某一设计/功能的含义,努力使字体成为你简化设计的有力武器。
4.如何配色
扁平化设计中,配色貌似是最重要的一环,扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时,扁平化设计中的配色还意味着更多的色调。比如,其他设计最多只包含两三种主要颜色,但是扁平化设计中会平均使用六到八种。
而且扁平化设计中,往往倾向于使用单色调,尤其是纯色,并且不做任何淡化或柔化处理(最受欢迎的颜色是纯色和二次色)。另外还有一些颜色也挺受欢迎,如复古色(浅橙、紫色、绿色、蓝色等)。
5.最简方案
设计师要尽量简化自己的设计方案,避免不必要的元素在设计中出现。简单的颜色和字体就足够了,如果你还想添加点什么,尽量选择简单的图案。
扁平化设计尤其对一些做零售的网站帮助巨大,它能很有效的把商品组织起来,以简单但合理方式排列。(编者注:有兴趣的读者可以自行寻找一些例子,原文作者推荐看 Svpply,但是网站与作者的描述略有不符,故略过不提。)
伪扁平化设计
最近还有一种趋势值得关注,一些设计师把某一项特效融入整体的扁平化之中,是其成为一种独特的效果。比如说,在简单的按钮加一点点渐变或阴影,从而使这种风格成为其特色,产生出一种扁平化设计的变种。这种设计要比单纯的扁平化更具有适用性和灵活性。
许多设计师比较喜欢这种设计,因为这意味着他们可以加点阴影或透视在某些元素上。用户可能也会喜欢这种稍微圆滑一点的设计方式,这能引导他们进行一些适当的交互。
但是,还有另一部分设计师并不喜欢这种定位模糊的设计方式。
如果您在做图或者看教程(PHOTOSHOP方面),遇到任何问题请到问题交流区提问,地址:;我们会在第一时间帮助您解决问题,如果在教程后面跟帖,一律不给予解决!~
UID1&精华&积分470637&威望26090 F&回复币50789 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
帖子81&缘分币41 Y&阅读权限10&注册时间&
嗯嗯,不错不错
当前时区 GMT+8, 现在时间是iOS7后的UI设计之争:再谈扁平化与拟物化
稿源:51CTO
由扁平化与拟物化两种风格所引发的设计之争正愈演愈烈,而这一趋势随着iOS 7测试版的发布而进入白热化。尽管技术圈内早已吵得不可开交,但很多朋友可能还没听说过这两个名词、或者对其背后的含义不甚明了。今天,我们将共同探讨扁平化设计的关键特点,了解这种设计理念与拟物化的区别所在。
以Dieter Rams为代表的一些著名设计师在设计原则中明确指出,扁平化设计(或者被称为&极简设计&)是实现可持续设计的最佳方式。
设计风格通常被视为一种暂时性趋势。每当有新风格出现,人们在欣赏之余并不能肯定其是否真能获得成功或者说长久存在。不过一方面更多业内设计师开始对某种特定设计风格的迎合,却也有不少独特且实用的风格陆续与大家见面。也就是说,认为扁平化设计属于新生事物的观点其实是种误解。事实上,扁平化设计与其设计师早已存在,惟一称得上新鲜的是近年来行业的宣传攻势以及对这种风格的持续推崇。
iOS7倒向扁平化设计,极大的影响了设计之争的战局,现在扁平化已经是设计趋势,甚至连Android也因此受益,不过并不是说拟物化就不好,在某些场景它仍有强大的生命力。
扁平化设计正当其时!
谷歌推崇扁平化设计
大家都知道,谷歌公司一直以坚持优秀的设计方针而声名显著。他们的目的在于提供一套在视觉上存在承接性的风格,即坚持简单与现代路线。谷歌完全可以不无自豪地宣称,其化繁为简的设计风格、专注于色彩与几何图形的指导思想已经相当成熟。大家不妨点击此处查看其在Behance网站上发布的视觉设计指南,相信会有不小的收获。
微软拥抱扁平化设计
Windows Mobile 6.5:微软的早期扁平化尝试
早在2010年,微软公司就发现自己的传统设计方案无法与用户的体验与需求保持一致。除了关注产品功能之外,用户使用体验也是不可忽视的一大重点,因此微软决定重新思考自身在产品设计上的审美取向。
Windows Phone 8
这促使微软采用了全新的设计理念,从而改变其产品的视觉效果与操作方式。或者用微软自己最喜爱的表达&&&事半功倍&。2012年底,微软正式推出Windows 8,其颠覆性的外观设计正是微软对视觉设计思路的巨大变革,同时也成为新一轮设计战略中的里程碑。
扁平化与拟物化的定义
&现实风格的设计成果必然属于拟物化,但拟物化设计却不一定属于现实风格。&
在设计领域,拟物化意味着尝试再现那些用户所熟知的事物。遗憾的是这个词往往被从业者们误读与误用。设计师们往往认为拟物化意味着直接从现实世界中复制图像。这里我要强调一点:拟物化设计并不一定要与参考对象保持高度一致!换言之,现实风格的设计成果必然属于拟物化,但拟物化设计却不一定属于现实风格。更进一步来说,扁平化设计也可以符合拟物化标准(但并非必须)。
下面我们就看图说话,让大家更加明确这一概念区分。
由Alex Volkov设计
大家一定已经注意到,上图以非常真实的设计再现了保险箱图像。这幅图可谓拟物化设计的绝佳范例,因为它试图向我们展示每个人所了解的事物(真实的物理对象,也就是保险箱)。另外,它也可以作为现实风格的参照实例,因为其设计包含了纵深、灯光、阴影、纹理等一切需要考虑的真实因素。
&拟物化试图重现我们所熟悉的事物。&
由Justin Pervorse设计
下面再来看扁平化设计的案例,上图通过简单的线条与清闲的色彩简化了保险箱的物理外观。显然,这一设计已经相当&扁平化&,但其中仍然采用了诸多拟物化元素&&因为其思路仍然是希望让用户一望而知其保险箱身份。图中特征鲜明的保险门就是最好的证明。
由Andrew Hesham设计
现在,我们再来看另一套出色的扁平化设计方案。虽然上图没有采用任何拟物化设计元素,但我们仍然可以感受到图标中盾牌与钥匙孔的结合同安全概念之间的密切联系。也就是说,它并没有执着于表现真正的保险箱外观或者闭锁装置,而尝试以更为婉转的隐喻帮助用户了解其作用。总结起来:扁平化设计利用简单元素、几何图形与鲜艳色彩的搭配表达信息,强调方案的简单与清晰特性。
&扁平化设计利用简单元素、几何图形与鲜艳色彩的搭配表达信息,强调方案的简单与清晰特性。&
这只是一般性的解释,不过确实有很多从业人员在谈到&拟物化设计&时、其真正要表达的其实是&现实风格设计&,也就是第一幅图中的例子。而在扁平化设计方面,我们指的是更加简约的二维图形方案。有时候我们也会使用&拟物扁平设计&这样的表达,第二幅图中的保险箱就充分体现出二者相结合所带来的出色效果。
在iOS 7中,苹果公司既尝试了将拟物与扁平加以结合&&例如下图左侧的相机图标,也尝试了纯扁平化设计&&例如下图右侧的照片图标。另外,新系统中的游戏中心图标也属于纯扁平化方案。
拟物化设计概述
一般情况下,拟物化应用程序设计思路希望软件能拥有与真实世界相符的外观与使用方式。人们往往喜欢把拟物化与苹果联系起来。没错,iCal与某些图标设计充分证明了苹果对拟物设计的出色把握(存在于iOS以前版本中)。
拟物化设计风格通常来说极具挑战,因为现实生活中的事物很难在二维环境下被完美重现。另外,设计师们往往会把现实元素融入拟物设计中以进一步改善视觉效果。设计师面临的最大难题就是要让成品看起来&不错&。一旦决定创建现实风格方案,用户将很容易从设计中发现失误。我们不得不投入大量时间与精力用于为图标或界面设计理想的纹理、阴影、纵深以及色彩。不过拟物化设计对于大龄用户群体非常友善,这些对数字化世界以及数码产品并不熟悉的使用者能从拟物风格中理清使用方法,并通过熟悉的外观与使用感受帮助他们消除抗拒心理。不过话说回来,如今几乎每个人都已经适应了数字化表达方式,而且界面之下掩藏的也往往是同一种数字化操作模式。
扁平化设计概述
扁平化设计强调的是易用性与简洁性。通常情况下,扁平化风格借助简约的线条与鲜艳的色彩来实现信息传递。每当听到设计师讨论扁平化设计这个话题,&用户体验&这个词往往会在他们口中多次出现。可以说大多数人都认为扁平化设计能带来比拟物化设计更好的易用性与使用体验。
以Dieter Rams为代表的一些著名设计师在设计原则中明确指出,扁平化设计(或者被称为&极简设计&)是实现可持续设计的最佳方式。
Hype Machine扁平化设计截图
争斗仍在继续?
&设计真理:选择一种个人喜爱的风格,并努力拿出最完美的方案。&
一般来说,讨论扁平化与拟物化设计的文章总结都会变成争辩一场两种风格孰优孰劣的对抗。虽然二者各有自己的专长与局限,但有一条真理足以阐明一切:选择一种个人喜爱的风格,并努力拿出最完美的方案。扁平化设计看起来比拟物化设计简单一些,但拿出优秀的扁平设计方案的难度与拟物方面其实旗鼓相当。设计出平庸的扁平风格成果并不费力,但要让成果广为称道则难上加难。简洁的效果不易达成,精雕细琢也耗时甚长。
即使对普通用户来说,扁平与拟物之间的区别也取决于个人喜好。有些人喜欢拟物风格、另一些人则喜欢扁平风格,更有不少用户对二者都乐于接受。作为设计师,我强烈建议同行们能百花齐放、拿出丰富多彩的设计风格来。相对于揪住冲突不放,我们更应该接纳不同方案间的分歧、使其真正成为提升应用程序使用感受的助力。良好的设计有助于产品在市场中脱颖而出,因此请认真思考哪种路线与自己的思路最为吻合。
有好的文章希望站长之家帮助分享推广,猛戳这里
本网页浏览已超过3分钟,点击关闭或灰色背景,即可回到网页天极传媒:天极网全国分站
您现在的位置:
& >&为何越来越多公司采用扁平化设计?
评论:为何越来越多公司采用扁平化设计博客 09:43
  应该有许多人和我一样,熬夜看了WWDC,而其中更多人关注的是 iOS7 的部分。iOS7是有人喜欢有人厌,除了部分配色和App图标让我感觉显得粗糙,整体还是没有出乎自己对于iOS向后发展的预测 C UI会效仿 Windows Phone ,而功能则会效仿 Android,当然现在说这话你可以说是马后炮。从功能上说,Android 因为其开放性使得功能各方面发展十分迅速,iOS要往后发展难免会吸收一些 Android 已经拥有的特色功能。但对于 Metro 设计语言与 Holo 主题的扁平化模仿,出乎不少人的意料。
  在 Windows Phone 7 诞生后,扁平化的 Metro Design(微软改名太频繁,现在已经不知道叫什么UI了)带来了一个比较特殊的现象,喜欢和讨厌它的人几乎是各占一半。之后Google 也为 Android 推出 Holo Theme,几乎 Google 所有的UI设计都拍扁了。而现在,连最爱拟物设计的苹果也把自己拍扁了。但为什么遭到如此多的反对声音,这些IT界巨头都开始采用扁平化的设计风格呢?
  我的确在新的 iOS7 里看到了熟悉的 Metro 风格,最明显的地方莫过于新的,与PC端的 Zune 软件有极大的相似度,而在 AppStore 中又看到了很明显的 Holo 风格。好了,在微博上有许许多多的人开始大骂苹果抄袭,甚至有人调侃说IOS7的顾问是袁隆平先生(杂交水稻之父)。但我不认为是苹果黔驴技穷,这是未来 的UI设计趋势,只是谁先做谁后做的问题。尽管有许多地方与WP或是Android相似,但我依然看到了苹果自己的扁平化风格,虽然不一定喜欢,但只能 说,苹果这次发布了一个不成熟的作品。类似微软的 Windows Phone 和,在UI上还有许多不足的地方。
  先看看 Web UI 的发展史我是从1999年开始接触互联网的,我不知道能不能算是一个互联网发展的见证者,当然,没经历过最早发展的那个阶段,从web诞生后到2000年左右的时 间内,由于处于互联网的发展初期,技术不够成熟硬件不够好,网页只是为了呈现信息而制作,连设计都谈不上,随着web标准的改进,CSS开始广泛使用,才 开始有了网页设计的概念,此时已经有不少人开始乐忠于搞自己的个人网站了,我自己第一次做网页是在2003年,那时候许多网页喜欢使用PS切图制作个性的 UI效果,其中不少就是现在所说的拟物设计,在 javascript 网页特效以及 Flash 流行起来后,各种静态的高光立体拟物效果已经满足不了大家的视觉需求了,于是开始使用简单的静态交互(javascript 或 flash 本地交互)来产生更仿真的效果,我从那些拟物网页设计中理解了设计师的想法,他们想让webUI更像是一件实物,带来一种更为生动的感觉。我想同时代的数码设备的设计也能体现当时的设计风潮,那时很多电脑设计的更像白色家电,还有各种数码玩意也是千奇百怪。我相信那些设计师也是希望能消除科技产品与生 活的距离感,就像现在不少人对于苹果产品的感觉。加上那个时期无论是网页,或是各种获取资讯的软件,信息量相对今天是非常小的,网页更倾向于UI带来的视 觉冲击,软件的UI设计也比现在更大胆,有人还记得早期的 MSN Explorer 浏览器么?、超级解霸还有很多不同的外观皮肤,甚至于百变主题的Windows XP。2005年后,开始接触了个概念叫 web2.0,它开始带来了不一样的 webUI 的设计风潮,开始去掉了各种不必要的视觉效果,更专注于内容呈现和交互,web2.0概念伴随着几何次方增长的信息而生。关于 web2.0,它的一个最大的特点,就是上网不再只是去搜狐网易新浪看这些门户主动给我们呈现的新闻,我们作为网民也开始自己生产信息了,博客算是一个象 征性的产物。这带来了更大的信息量和更复杂的交互产生,使网页设计改变了方向,webUI 回归了它应该做的,就是以更好的呈现更大量的信息,让内容展现自己的生命力,而不是靠UI设计喧宾夺主。
  带来更好的信息传达
  现在,软件的UI设计,也开始像webUI一样,走由繁至简的路子了。无论是 Metro Design 或是 Holo Theme,都在更努力的让UI隐形或简化,而信息本身的排版又能呈现出UI本身,特别是 Metro 本身就是一门基于排版的设计语言。在杂志中,Metro design 得以很好的体现,杂志不可能都以生硬的有形框架来固定内容的位置,而是用合理的方式排版让信息以比较自然的方式呈现。
  上图是 National Geographic 的一期排版设计,左侧的排版比较传统,右侧则是图片和文字的叠加排版,它们表现在 web 或是 软件的交互UI上,就是所谓的扁平化设计。这种设计风格可以在满足传达大量信息的需求同时兼顾美感。但也正如这份杂志页面一样,简约的设计让文字更突出, 所以在这种设计风格中,字体尤为重要,有很大一部分美感是字体带来的。
  一样可以立体而真实
  上图是 Yahoo Weather 的UI设计,它也是iOS7中的默认天气服务。天气资讯是作为“信息交互”的一个层在距离用户最近的地方,底部则有另外一个层显示与天气相关的图像,这种 设计与传统拟物的最大区别是,它将信息表现简化或抽象化,而在全局体现比拟物更接近现实的效果。相比拟物设计,信息展现更直观也可以更生动。在信息量大的 时候,不会产生过多的视觉干扰,现在iOS上已经有不少软件采用扁平化的设计方案。
1分页导航1.Web UI 的发展史2.
(作者:Mindi 绿帆博客责任编辑:王玉平)
天极新媒体&最酷科技资讯扫码赢大奖
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
办公软件IT新闻整机

我要回帖

更多关于 ui设计需要学什么 的文章

 

随机推荐