扁平化設(shè)計(jì)的特征與優(yōu)勢(shì)分析

駱　瑋張　毅

（1.南京林業(yè)大學(xué) 藝術(shù)設(shè)計(jì)學(xué)院，南京 210037；2.重慶藝術(shù)工程職業(yè)學(xué)院，重慶 401336）

數(shù)字藝術(shù)

扁平化設(shè)計(jì)的特征與優(yōu)勢(shì)分析

駱瑋1張毅2

（1.南京林業(yè)大學(xué) 藝術(shù)設(shè)計(jì)學(xué)院，南京 210037；2.重慶藝術(shù)工程職業(yè)學(xué)院，重慶 401336）

摒棄了所有擬物化修飾手段的扁平化設(shè)計(jì)在飽受爭議的同時(shí)也日漸演進(jìn)為一個(gè)明朗的設(shè)計(jì)新風(fēng)格，它的出現(xiàn)揭示了當(dāng)下用戶的審美新需求和設(shè)計(jì)師的思維變化。文章旨在通過對(duì)扁平化與擬物化風(fēng)格的對(duì)比來分析扁平化風(fēng)格的設(shè)計(jì)原則以及它的風(fēng)格特征和應(yīng)用優(yōu)勢(shì)。

扁平化；擬物化；特征；優(yōu)勢(shì)

檢索：www.artdesign.org.cn

Internet ：www.artdesign.org.cn

扁平化這一始于交互界面的設(shè)計(jì)風(fēng)格在出現(xiàn)之初曾飽受爭議與嘲弄，人們?cè)诹?xí)慣了擬物化設(shè)計(jì)的精致具象之后，扁平化設(shè)計(jì)的出現(xiàn)被很多用戶評(píng)價(jià)為“簡單粗陋”“冰冷呆板”的設(shè)計(jì)。隨著扁平化設(shè)計(jì)相繼在Windows、Android、Google、Facebook等一線界面中的出現(xiàn)，設(shè)計(jì)界的爭議也越發(fā)聲勢(shì)浩大。直至iOS7系統(tǒng)發(fā)布，人們發(fā)現(xiàn)作為交互業(yè)界領(lǐng)軍，引領(lǐng)設(shè)計(jì)時(shí)尚潮流的蘋果也“平”了，這仿佛是認(rèn)可扁平化風(fēng)格“改朝換代”的信號(hào)，在經(jīng)歷了否定、關(guān)注、認(rèn)可之后，扁平化這一設(shè)計(jì)風(fēng)格終于被推向高潮。

擬物化設(shè)計(jì)常常被用來與扁平化設(shè)計(jì)作比較，不僅因?yàn)閮蓚€(gè)風(fēng)格在時(shí)間軸上呈現(xiàn)交疊關(guān)系并各有堅(jiān)守的設(shè)計(jì)師陣營，更因?yàn)閮烧唛g的設(shè)計(jì)風(fēng)格有明顯的對(duì)立區(qū)別（圖1）①。作為扁平化的前輩，擬物化設(shè)計(jì)竭力模仿著真實(shí)的世界，它具有豐富飽滿的光感表現(xiàn)、結(jié)實(shí)立體的三維造型和精致生動(dòng)的細(xì)節(jié)設(shè)計(jì)，在視覺上形成層次豐富、生動(dòng)逼真的感受。其設(shè)計(jì)的初衷是幫助用戶從真實(shí)的世界向交互世界平滑過渡，從視覺辨識(shí)上提高使用者的操作效率。而扁平化設(shè)計(jì)正好與之相反，它放棄了高光、反光、投影等光感營造；色彩上省略除固有色以外的光源色與環(huán)境色；造型上忽略細(xì)節(jié)，僅以規(guī)則的幾何造型概括；完全摒棄營造立體感的過渡式漸變，以平鋪色塊或梯度式漸變代之。表面上看，扁平化設(shè)計(jì)似乎簡單很多：不要投影、漸變和質(zhì)感，只要造型簡單、色彩平鋪、排版清晰。而這種看似簡單的設(shè)計(jì)新風(fēng)格卻以愈演愈烈之勢(shì)逐漸在移動(dòng)端與電腦端蔓延開。

Adobe公司作為全球圖形與圖像處理的主流專業(yè)研發(fā)機(jī)構(gòu)，一直以來對(duì)自身的視覺識(shí)別形象設(shè)計(jì)非常重視，以其旗下Adobe Photoshop為例，在CS 3之前的版本，主視覺都采用美輪美奐的具象形態(tài)（如CS 2的羽毛）。自CS 3開始確立以字母為主元素以來，每次版本更新都能看出其對(duì)設(shè)計(jì)趨勢(shì)的敏感用心。CS 3、CS 4圖標(biāo)的光影化，CS 5圖標(biāo)的立體化都是擬物風(fēng)格的經(jīng)典應(yīng)用，而近年來的CS 6、CC 2014等版本的圖標(biāo)則呈現(xiàn)出明顯的扁平化設(shè)計(jì)特征，足以看出Adobe公司對(duì)扁平化設(shè)計(jì)風(fēng)格的接納與認(rèn)可（圖2）②。與此類似的還有辦公軟件WPS的圖標(biāo)與啟動(dòng)界面設(shè)計(jì)的全面改版（圖3）③。

這種幾乎拋棄所有美學(xué)修飾的設(shè)計(jì)手法能在擬物風(fēng)格的鼎盛時(shí)期逆風(fēng)而行并不斷壯大，實(shí)為極簡主義設(shè)計(jì)發(fā)展的必然趨勢(shì)。這種必然曾引導(dǎo)過漢字從象形文字到簡體中文的演變，也助推過歐洲繪畫藝術(shù)從寫實(shí)派到抽象——派的發(fā)展。從畢加索的作品中更能直觀的看到這位藝術(shù)大師關(guān)于繁與簡的探索思考（圖4）。

這種從簡到繁再到簡、從擬物擬像再到符號(hào)的變化過程不僅反映出人們審美趣味螺旋上升的變化規(guī)律，也是社會(huì)發(fā)展提高交流效率的必然要求。扁平化設(shè)計(jì)正是遵循這樣一個(gè)發(fā)展規(guī)律，才得以在寫實(shí)擬物的精致時(shí)代萌芽壯大。因此，扁平化設(shè)計(jì)的“簡”實(shí)質(zhì)是經(jīng)過充分腦力勞動(dòng)的“簡”，是對(duì)“取”與“舍”的慎重選擇。

當(dāng)下的扁平化設(shè)計(jì)已逐漸從交互界面蔓延至傳統(tǒng)平面設(shè)計(jì)領(lǐng)域，在網(wǎng)頁、插畫、海報(bào)、包裝、標(biāo)志、VI等設(shè)計(jì)中的扁平化設(shè)計(jì)應(yīng)用已不鮮見（圖5）④。符號(hào)化的圖形既有質(zhì)樸單純的童趣又有縝密理性的規(guī)劃，為傳統(tǒng)的平面設(shè)計(jì)增添了一股清新活力。它不僅在美觀性上提供了一個(gè)新的選擇，更從傳播角度大大的提高了低成本傳播的效率。

隨著移動(dòng)科技的發(fā)展，扁平化設(shè)計(jì)的優(yōu)勢(shì)也日漸凸顯。

圖1　擬物化與扁平化特征對(duì)比

圖2　Photoshop各版本圖標(biāo)演進(jìn)

圖3　WPS各版本圖標(biāo)演進(jìn)與啟動(dòng)界面

圖4　畢加索作品：牛

圖5　扁平化平面設(shè)計(jì)

首先，相較于擬物化，扁平化設(shè)計(jì)更適合“小屏幕”時(shí)代。來自阿里巴巴數(shù)據(jù)顯示，2015年天貓雙11交易總額中無線端交易額占比高達(dá)68.67%⑤，這一數(shù)據(jù)反映出目前網(wǎng)絡(luò)購物的主要渠道已從傳統(tǒng)的電腦端轉(zhuǎn)移至移動(dòng)端；由中國社會(huì)科學(xué)院社會(huì)學(xué)研究所社會(huì)心理研究中心發(fā)布的《社會(huì)心態(tài)藍(lán)皮書：中國社會(huì)心態(tài)研究報(bào)告（2015）》調(diào)查數(shù)據(jù)顯示，國內(nèi)大學(xué)生每天使用智能手機(jī)的時(shí)間約為5小時(shí)，占全天的22%。⑥從這些數(shù)據(jù)不難看出，手機(jī)“小屏幕”比電腦“大屏幕”更被現(xiàn)代人親近。在此“小屏幕”背景的基礎(chǔ)上對(duì)擬物化與扁平化進(jìn)行比較，后者的優(yōu)勢(shì)則更為明顯。比如在美觀性與識(shí)別性上，擬物化設(shè)計(jì)的豐富細(xì)節(jié)被縮小后容易顯瑣碎，而扁平化卻往往簡潔大方、恰到好處。同時(shí)，擬物化設(shè)計(jì)精致細(xì)膩的特征不僅增加了設(shè)計(jì)制作的人力成本和時(shí)間成本，也提高了接收端的流量成本，而扁平化設(shè)計(jì)則反之。

其次，在信息讀取速度上，扁平化設(shè)計(jì)也優(yōu)于擬物化設(shè)計(jì)。點(diǎn)開圖片信息時(shí)等待讀取的時(shí)間成本越高，信息被關(guān)閉讀取的幾率就越高，而除去硬件與網(wǎng)絡(luò)技術(shù)原因外，讀取速度的快慢是由圖片信息的文件大小決定的。擬物化設(shè)計(jì)為保證細(xì)節(jié)的飽滿、色彩的豐富、過渡的自然，不得不以相對(duì)較高的像素值為保障，文件也因此而相對(duì)較大，也就相對(duì)增加了被讀取失敗或被放棄讀取的幾率，造成高像素的“浪費(fèi)”。扁平化設(shè)計(jì)在造型上通常是規(guī)則幾何形，色彩上一般采用平涂色塊，并且沒有漸變過渡與精致細(xì)節(jié)，因此能有效的將文件控制在相對(duì)較小的范圍內(nèi)，也就為高速讀取提供了必要保證，并以此提高傳播的有效幾率。

再次，在視覺識(shí)別角度，扁平化設(shè)計(jì)不輸擬物化設(shè)計(jì)。在智能手機(jī)普及之初，擬物化設(shè)計(jì)逼真的視覺效果為減少認(rèn)知障礙、減低操作使用的學(xué)習(xí)成本起到非常大的助推作用，在人機(jī)之間能迅速的建立親密感。但在智能手機(jī)與電腦普及后的若干年里，人們的認(rèn)知障礙逐漸消失，操作的熟悉程度已然穩(wěn)定，同時(shí)也逐漸對(duì)漸變、陰影、高光等擬真效果表現(xiàn)出審美疲勞。扁平化設(shè)計(jì)的優(yōu)勢(shì)也在此時(shí)體現(xiàn)，它可以呈現(xiàn)更加簡單直接的信息和事物，在穩(wěn)定熟悉的操作基礎(chǔ)上靠簡潔的色塊與規(guī)則形狀識(shí)別信息，不僅比辨別花哨的細(xì)節(jié)特征更有效率，同時(shí)在視覺感受方面也更加明快和理性。

最后，扁平化設(shè)計(jì)的動(dòng)態(tài)成本大大低于擬物化設(shè)計(jì)。隨著生活節(jié)奏的加快，由“讀圖”獲取信息的效率優(yōu)勢(shì)日益凸顯，圖像的呈現(xiàn)方式也更加多元，從靜態(tài)圖發(fā)展為動(dòng)態(tài)圖便是近年來的讀圖新趨勢(shì)。動(dòng)態(tài)圖不僅能承載更多生動(dòng)有趣的創(chuàng)意思維、創(chuàng)造更高效的視覺吸引、呈現(xiàn)更飽滿的審美情趣，甚至還能滿足及強(qiáng)化圖像的敘事功能。擬物化設(shè)計(jì)要實(shí)現(xiàn)動(dòng)態(tài)圖需要花費(fèi)較高的人力和時(shí)間成本，因?yàn)槊恳粠瑒?dòng)態(tài)都可能涉及多個(gè)復(fù)雜形態(tài)的協(xié)調(diào)運(yùn)動(dòng)，而扁平化設(shè)計(jì)的輕快體量明顯更能滿足動(dòng)態(tài)制作的需求。

綜上所述，扁平化設(shè)計(jì)有著個(gè)性鮮明的設(shè)計(jì)特征，具備順應(yīng)時(shí)代的優(yōu)勢(shì)支撐，符合大眾審美趣味反彈規(guī)律，是極簡主義設(shè)計(jì)發(fā)展的必然結(jié)果。雖然扁平化設(shè)計(jì)依然存在種種不足，比如用大屏幕呈現(xiàn)時(shí)容易顯得空洞，氣氛渲染乏力，為追逐“平”的潮流而強(qiáng)逼畫面“平”，以及制作難度降低后導(dǎo)致的設(shè)計(jì)門檻降低，粗制濫造頻現(xiàn)等，然而縱觀歷史又有哪一個(gè)設(shè)計(jì)風(fēng)格是完美無缺、經(jīng)久不衰？扁平化作為設(shè)計(jì)風(fēng)格的新寵，可能轉(zhuǎn)瞬即逝，也可能在爭議的聲浪中更加完善壯大。本文無意貶損擬物化設(shè)計(jì)的存在價(jià)值，僅以分析扁平化設(shè)計(jì)存在的合理性探求新風(fēng)格的發(fā)展趨勢(shì)，但求拋磚引玉，引起對(duì)扁平化風(fēng)格更多關(guān)注與思考，還待有識(shí)之士齊心合力，共同構(gòu)建。■

注釋：

① 圖片來源：TekRevue（英文），http：//www.tekrevue.com/os-x-yosemite-vs-mavericks-icons/.

② 圖片來源：Adobe（中文），http：//www.adobe.com/cn/.

③ 圖片來源：WPS官網(wǎng)，http：//www.wps.cn/.

④ 圖片來源：昵圖網(wǎng)，http：//www.nipic.com/.

⑤ 數(shù)據(jù)來源：搜狐新聞網(wǎng)，http：//mt.sohu.com/20151112/n426111229.shtml？qq-pf-to=pcqq.c2c.

⑥ 數(shù)據(jù)來源：中國新聞網(wǎng)，http：//www.chinanews.com/life/2015/12-15/7672077.shtml.

［1］辛向陽. 交互設(shè)計(jì)：從物理邏輯到行為邏輯［J］. 裝飾，2015，261（01）：58-62.

［2］何潔. 視覺傳達(dá)設(shè)計(jì)的發(fā)展趨勢(shì)［J］. 裝飾，2002，107（03）：4-5.

［3］（美）Donald Arthur. Norman. 設(shè)計(jì)心理學(xué)——日常的設(shè)計(jì)［M］.小柯 譯. 北京：中信出版社，2015（5）：169-222.

［4］（德）Walter Benjamin. 迎向靈光消逝的年代［M］.許綺玲，林志明 譯. 桂林：廣西師范大學(xué)出版社，2004（8）：51-72.

Analysis the Features & Superiority of Flat Style

LUO Wei1， ZHANG Yi2
（Nanjing Forestry University， Nanjing 210037，China；2.Chongqing Vocational College of Art and Engineer， Chongqing 401336，China ）

Flat style is a new style of design which abandoned almost all adornment gimmick. It becomes a kind of new fashion by it's controversial features. It reveals the new aesthetic demand and the change of designer's attitude. This paper aims to analysis the features and superiority of flat style by compare it with the skeuomorphism style.

flat； skeuomorphism； features； superiority

J0

A

1008-2832（2016）10-0099-02

江蘇高校哲學(xué)社會(huì)科學(xué)研究項(xiàng)目（2015SJB038）：《數(shù)字媒體插畫設(shè)計(jì)方法研究》階段性研究成果