iOS7自公布以来,扁平化设计让人亮瞎了眼。好看不好看且不论,iOS7将图标等视觉元素像拍蒜般一一拍扁,引来了无数吐槽。其中被人说得最多的就是,iOS7扁平化设计无非就是跟风之举。在iOS7出现之前,Windows Phone/Windows 8的磁贴设计已经是平得不能再平了,而安卓4.0以后,大量元素如Play商店、Google+、Google Now等应用也早早用上了扁平的卡片帖设计。人们开始感叹,苹果已经不再是当年那个怒骂安卓“Copy Cat”的苹果,自己也沦为跟风大军的一员了。
过了一段时间后,人们纷纷发现,扁平化出现在了越来越多的系统和App界面中。iOS6中的拟物化设计似乎一夜间就过时了,贬值堪比秘鲁币。设计师也好,凑热闹侃几句的也好,谈到UI,以扁平化设计为主题总显得更加时髦。而苹果之前花大心血经营的拟物化设计呢?除了想要用锤子磕地球的老罗,谁还在乎。
扁平化设计已成为了业界的新风潮,扁平化这支大军突然壮大的背后,自然有不少强力的催化因子。为什么人们会如此热衷于扁平化设计呢?扁平化设计到底有什么好处?iOS7以及一大票UI跟进扁平化设计是不是真的在跟风?下面我们一起来讨论讨论这个话题吧。 扁平化真的正在取代拟物化? 扁平化正在取代拟物化设计,这个观点正广为流传。然而这句话描述得并不很准确——扁平化设计和拟物化设计其实并不对立。仔细想想,扁平的反义词是立体,拟物的反义词是抽象,扁平和拟物怎么看都不像冤家对头啊。 人们口中的故事是扁平化将拟物化扫地出门,但真实情况要复杂一些。在近年流行的UI设计中,往往是平面化伴随着抽象化设计出现。Windows 8/Windows Phone的动态磁贴设计就是一个典型,在现实世界中你很难找到一个个方块的原型,又或者说方块的原型实在太多,这些方块儿没法起到“拟物”的意味。考虑到动态磁贴设计强调的是内容展现,并不是为了扁平而扁平,将扁平化视作抽象化设计带来的结果,更加合适。
无论是安卓4.0后广泛使用的Holo风,还是新鲜出炉的iOS7,因抽象化设计导致视觉扁平化的迹象屡见不鲜。为了表现抽象的逻辑层次,苹果和Google在不同的界面间注入了毛玻璃、蓝光等特效,同时按钮从凹凸有致变为贴在屏幕的单一色块,背景从精美的墙纸变成不再注重纹理的涂抹,减少了立体图标那些高光阴影对层次感的视觉干扰。 简而言之,现在的UI设计更加注重体现抽象的内容和系统操作逻辑,扁平化只是现象而不是设计初衷——当然不排除有人为了跟风,为了扁平而扁平硬生生把图标拍扁就是了。与其说扁平化正在取代拟物化,不如说界面设计正朝着抽象化发展,而扁平化只是抽象设计的附赠。 抽象化/扁平化设计的优点 前面说到,抽象化/扁平化是当前的潮流。有这么多人一窝蜂地扎进去,自然好处是大大的有。界面使用抽象化、扁平化的设计,大致有以下优点。 ◆优点一:层次清晰 就单个图标这样的细节来看,扁平化设计显然是谈不上什么层次感的。但如同把视野放大到这个系统,局面就不同了。怎样的设计才能显得有层次?看看堆叠的扑克牌,应该就能有个概念了。
纸牌是平的,但叠起来就显得非常有层次感。现代的UI设计将界面压扁,同时在不同界面切换时辅以阴影、高光、磨砂玻璃等特效渲染,层次显得清晰了很多。如果坚持拟物化的图标、按钮等设计,大量的阴影、高光会扰乱UI界面切换特效,整体的层次反而不那么清晰。
至于为何大家都如此热衷于梳理UI的层次嘛……现在的移动操作系统功能是越来越繁杂了,越来越接近电视购物广告嘶声力竭大喊的“把MP5、相机、摄影机、XX机都装进口袋”的情况。UI层次变清晰,有利于让用户理解系统功能结构,系统界面这样一层层铺叠下来,啥功能放在哪一层界面,大家比较容易心中有数。 ◆优点二:识别度高 抽象化/扁平化的设计削弱了高光阴影等细节,视觉上变得简约了不少。熟悉系统后,这更利于用户快速辨别功能。为何这么说呢?举个简单的例子吧,交通灯。红黄绿三色抽象得不能再抽象了,但你看到红色第一时间就能意识到该停下来。如果把红灯改成一幅细腻的停车图,估计就满城七十码刹不住了。 ◆优点三:展现内容更多 这个很好理解,看Windows Phone/Windows 8的动态磁贴就知道了。界面中其他元素越少,能够用来展现内容的面积就越大,抽象化/扁平化的设计能够提供更纯粹的内容阅读体验。要阅读文字,白纸是最好的载体,就是这个道理了。
◆优点四:设计简单 好吧,无论简约风格与否,好的设计其实都不简单,这里的简单是对一般的苦逼美工来说的。在以前,做一个图标需要细细勾画轮廓,微调高光阴影突出立体感;现在嘛,诶嘿,涂抹几笔红红绿绿即可收工,多省事。当然,老板们也有可能因为美工工序减少而炒人哦,这反映到产品中就是价格降低了,可喜可贺。 总的来说,抽象扁平的设计还是非常符合当前消费电子发展的潮流的。设备的功能正在复杂化,人们需要逻辑层次更清晰、功能更容易辨认的界面;信息仍在大爆炸,人们需要更多的内容来满足阅读的欲望;总体上变得更简单的设计工序,让产品能够更快地走向市场——现在的消费电子简直就像垃圾一样,半年就能倒掉一堆淘汰品。 抽象化/扁平化设计只是跟风? 实际上,抽象平面的设计趋势并不只出现在电子产品的UI上。从近代开始,由于抽象艺术的蓬勃发展,现代设计理念有了翻天覆地的改变。也许你看不懂毕加索的画有什么价值,但搞艺术搞设计的专业人员可清楚得很。强调线条、强调比例分割、更强调造型本身而非单纯拟物……在现代美术的影响下,设计行业的理念日新月异。 如果上面的描述并不能让你对现代设计的变更有个确切的概念,那么看一下各个IT企业Logo的变更,应该心里就有个底了。
显而易见,IT企业的Logo在现代美术的影响下,发生了非常明显的变化,这种变化和近年来消费电子产品UI的变化有不少异曲同工之处。更简洁,更有力,更抽象,不再拘泥于画出具体事物,这都体现了现代美术对设计的影响。 不过,和企业Logo数十年漫长的演变相比,消费电子产品UI的变化要快速得多。一方面UI设计是比较新颖的事物,几十年前连图形界面都还没有,总不能从那时就开始设计UI了吧?另一方面,跟风现象还是存在的。和Windows Phone的动态磁贴界面相比,iOS7的改头换面影响力要更大,也许不少设计师都有果粉情节?当然到底是谁跟谁的风,一时间就说不清楚了。 抽象化/扁平化永不过时? 前面提到,抽象扁平的设计很符合当前消费电子发展的潮流,但这是否意味着拟物的、立体的设计已经沉进了历史的河底,永无出头之日了呢?并非如此。不同的领域,设计风格也不尽相同。还是举Logo的例子,我们来看看汽车企业的Logo变化趋势吧。
很明显,同样受到现代美术的影响,汽车企业的Logo和IT企业Logo的变化趋势不甚一样。汽车的Logo一直挺抽象,但并没有变得平面化,反而很多都比之前更加立体。这是因为,汽车的Logo往往是暴露在现实世界中的,只有立体的轮廓,才能够给予人们足够强力的感官。想想把三尖角儿的纸片贴在大奔的车头,这不儿戏嘛。 与此相比,触摸屏是消费电子产品最常见的操控设备,触摸屏提供的是平面显示,UI设计师无需考虑图形在现实世界是否拥有足够的质感。如果有一天,黑科技突然出现,全息投影和操控变成可能,拟物化估计又卷土重来了。至于为何大家不在一开始就在触摸屏上用抽象化扁平化设计,那是因为触摸屏刚出来的时候是很新鲜的东西,为了让用户更快上手,设计师选择将图标做得尽量像实物。从上手的角度来说,拟物化设计更有优势。 抛开太远的未来不说,近年炙手可热的AR和3D显示技术,拟物化设计也大有用武之地。此外,人类的审美也一直是翻来覆去,今年的流行明年过时,再过两年又变成流行。如果你觉得抽象平面的设计能够取代拟物立体的设计,未免想得太多。 后话 可以预见,抽象扁平的设计风在未来一段时间内还会愈刮愈烈。抽象化扁平化的设计到底算不算跟风?只能说这符合现代设计的发展潮流,但也不能忽略领头企业的影响。无论是微软的Metro动态磁贴,还是带有苹果光环的iOS7,都给他人提供了大量灵感。扁平化设计还会风行几年?设计和艺术的不同点是,设计有服务的对象。消费电子产品的革新是UI设计的催化剂,让我们对新科技翘首以待吧。 |
闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧湱鈧懓瀚崳纾嬨亹閹烘垹鍊炲銈嗗坊閸嬫挻娼诲┑瀣拺闂侇偆鍋涢懟顖涙櫠閹绢喗鐓涢悘鐐插⒔閵嗘帡鏌嶈閸撱劎绱為崱娑樼;闁告侗鍘鹃弳锔锯偓鍏夊亾闁告洦鍓涢崢鎼佹倵閸忓浜鹃梺閫炲苯澧寸€规洑鍗冲浠嬵敇濠ф儳浜惧ù锝囩《濡插牊淇婇姘Щ闁绘宀稿娲川婵犲倸顫庨梺绋款儐閹告瓕顣炬繝銏f硾椤戝嫮鎹㈤崱娑欑厽闁规澘鍚€缁ㄥ鏌嶈閸撴岸宕归崹顔炬殾闁哄洨鍠撶弧鈧┑顔斤供閸撴盯顢欓崱娑欌拺閻犳亽鍔屽▍鎰版煙閸戙倖瀚� (0) +1 闂傚倸鍊搁崐鎼佸磹閹间礁纾圭€瑰嫭鍣磋ぐ鎺戠倞鐟滃繘寮抽敃鍌涚厱妞ゎ厽鍨垫禍婵嬫煕濞嗗繒绠抽柍褜鍓欑粻宥夊磿闁秴绠悗锝庡枛鐟欙箓鎮楅敐搴℃灍闁绘挻娲熼弻宥夊煛娴e憡鐏撳┑鐐茬墑閸ㄥ綊婀佺紒缁㈠弮閺€杈┾偓姘炬嫹 (0) +1 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒閹绢喗顎栭梺绋款儐閸ㄥ潡骞冨Δ鈧埥澶娾枎鐎n剛绐楁俊鐐€愰弲婊堟偂閿熺姴钃熼柨婵嗩槸缁狅綁鏌ㄥ┑鍡橈紞婵☆偄瀚槐鎾存媴閸濆嫷鈧矂鏌涢妸銉у煟鐎殿喖顭锋俊鎼佸煛閸屾矮绨介梻浣呵归張顒傜矙閹达富鏁傞柨鐕傛嫹 (0) +1
闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧湱鈧懓瀚崳纾嬨亹閹烘垹鍊炲銈嗗坊閸嬫挻娼诲┑瀣拺闂侇偆鍋涢懟顖涙櫠閹绢喗鐓涢悘鐐插⒔閵嗘帡鏌嶈閸撱劎绱為崱娑樼;闁告侗鍘鹃弳锔锯偓鍏夊亾闁告洦鍓涢崢鎼佹倵閸忓浜鹃梺閫炲苯澧寸€规洑鍗冲浠嬵敇濠ф儳浜惧ù锝囩《濡插牊淇婇姘Щ闁绘宀稿娲川婵犲倸顫庨梺绋款儐閹告瓕顣炬繝銏f硾椤戝嫮鎹㈤崱娑欑厽闁规澘鍚€缁ㄥ鏌嶈閸撴岸宕归崹顔炬殾闁哄洢鍨归拑鐔兼煏婢跺牆鍔氶柣搴弮濮婅櫣绮旈崱妤€顏存繛鍫熸閺岋箓宕橀鍕亪闂佸搫鐭夌紞浣割嚕椤曗偓瀹曞爼濡烽姀鐘卞闂侀€炲苯澧撮柡灞剧〒閳ь剨缍嗛崑鍛焊椤撱垺鐓冮柦妯侯樈濡叉悂鏌嶇拠鑼фい銏∏归ˇ杈╃磼閵娿儯鍋㈤柡宀€鍠愮粭鐔煎垂椤旂⒈娼庨柣搴ゎ潐濞叉﹢宕曟總鏉嗗洭顢氶埀顒勫蓟閿熺姴鐒垫い鎺戝閸ゅ秹鏌曟径娑氬缂併劌顭峰娲传閸曨剙绐涢梺绋款儑閸嬨倛妫㈤梺缁樺姉閸庛倝宕愰崹顐e弿婵☆垳鍘ф禍楣冩倵濮樼偓瀚�闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾剧懓顪冪€n亝鎹i柣顓炴閵嗘帒顫濋敐鍛婵°倗濮烽崑鐐烘偋閻樻眹鈧線寮撮姀鐘栄囨煕閳╁啨浠︾紒顔瑰墲娣囧﹪鎮欓鍕ㄥ亾閺嶎厼绀夌憸蹇曞垝婵犳艾绠i柣妯烘▕濡粓姊虹粔鍡楀濞堟洟鏌i幘瀛樼闁哄瞼鍠栭弻鍥晝閳ь剟鎮橀柆宥嗙厱闁靛牆鎷嬮崕鏃堟煛鐏炶鈧繂顕i崼鏇炵閹肩补鈧弶妯婇梻鍌欑閹碱偊寮甸鍌滅煓闁硅揪绠戦悡鈥愁熆鐠哄彿鍫ュ几鎼淬劍鐓欓梺顓ㄧ畱閺嬨倝鏌嶇拠鑼缂佽鲸鎹囧畷鎺戭潩椤戣棄浜惧瀣婵ジ鏌$仦璇插姎闁汇倝绠栭弻锝呂熷▎鎯ф闂佽棄鍟伴崰鏍蓟閿濆绫嶉柛灞绢殕鐎氭盯姊烘潪鎵槮缂佸鏁搁幑銏犫攽閸モ晝鐦堥梺绋挎湰绾板秹鎮橀幘缁樷拺闁告繂瀚敍宥夋煕濡亽鍋㈤柍銉︽瀹曟﹢顢欓崲澹洦鐓曢柟鎵虫櫅婵$厧鈹戦鎯у幋婵﹥妞介幃鐑藉级閹稿寒鍞ㄩ梻浣烘嚀閸ゆ牠骞忛敓锟�>>
正在阅读:只是跟风WP/iOS7?谈扁平化设计是否跟风只是跟风WP/iOS7?谈扁平化设计是否跟风
2013-10-18 17:27
出处:PConline原创
责任编辑:censi