扁平化界面設(shè)計(jì)漫談

一、扁平化設(shè)計(jì)的歷史淵源

界面設(shè)計(jì)(UserInterface)隨著上世紀(jì)計(jì)算機(jī)技術(shù)的發(fā)展和成熟逐漸啟蒙,經(jīng)歷了從字符用戶界面(Characteruserinterface,簡(jiǎn)稱CUI)到圖形交互界面(GraphicalUserInterface,簡(jiǎn)稱GUI)的發(fā)展。1984年蘋果發(fā)布的Macintosh電腦取得輝煌的成功,并首次將用圖形用戶界面應(yīng)用到了個(gè)人電腦上,這是界面設(shè)計(jì)發(fā)展史上具有里程碑意義的重要事件。(1)

從廣義上講,Macintosh使用的圖標(biāo)就是"扁平"的:沒有光影、沒有細(xì)節(jié)、形式極簡(jiǎn)、甚至沒有色彩,如同一位剛從CUI中蛻變出來的新生兒,散發(fā)出濃濃的技術(shù)味道。但那種"扁平"和現(xiàn)在的扁平是不同的:當(dāng)時(shí)技術(shù)還不成熟,無法繪制高難度的圖形,只能用簡(jiǎn)單的線條和單一的黑色勾勒出圖形的大致輪廓,而現(xiàn)在的扁平化設(shè)計(jì)則是對(duì)主動(dòng)對(duì)形體高度概括簡(jiǎn)化,用最少的視覺元素獲得最好的傳播效果。

縱觀技術(shù)和藝術(shù)發(fā)展史,很多風(fēng)格和技術(shù)都經(jīng)歷了從"簡(jiǎn)單到復(fù)雜再到簡(jiǎn)單"的循環(huán),這個(gè)過程的始末絕非雷同,而是在經(jīng)歷了技術(shù)的成熟、市場(chǎng)的洗滌之后的結(jié)果,是繁華散盡后的返璞歸真,是有著本質(zhì)的改變和進(jìn)步的。

扁平化的設(shè)計(jì)也是如此。

從淵源上看,包豪斯時(shí)期就興起了對(duì)簡(jiǎn)約的追求和繁縟的摒棄,密斯·凡德羅的一句"少即是多",即使到今天依然被多少設(shè)計(jì)業(yè)者奉為圭臬,20世紀(jì)60年代的極簡(jiǎn)主義更是講簡(jiǎn)約發(fā)展到了極致,一直到后現(xiàn)代主義,才開始漸漸接受多元、個(gè)性、色彩和簡(jiǎn)單的裝飾。扁平化如今在設(shè)計(jì)業(yè)的大紅大紫,某種程度上來可以說是興與包豪斯的現(xiàn)代主義和源于瑞士風(fēng)格的極簡(jiǎn)主義的復(fù)興。


iOS6到iOS7,是蘋果界面的跨越

二、扁平化設(shè)計(jì)的近年發(fā)展

扁平化設(shè)計(jì)的興起不是偶然,而是歷史發(fā)展的和時(shí)代驅(qū)動(dòng)的必然結(jié)果。

在扁平化設(shè)計(jì)興起和最初的Macintosh圖形界面問世之間的近30年,也就是擬物化設(shè)計(jì)從萌芽、發(fā)展、成熟到轉(zhuǎn)型的近30年。在上世紀(jì)80年代,幾乎所有的研究機(jī)構(gòu)、3D制作公司關(guān)注的焦點(diǎn)全部集中在怎樣提高3D圖形的真實(shí)感上。(2)隨著技術(shù)的成熟,設(shè)計(jì)師和美工們爭(zhēng)相繪制出越來越逼真和復(fù)古的圖標(biāo),擬物化的設(shè)計(jì)在2012年左右?guī)缀跻寻l(fā)展到了極致--當(dāng)所有肌理和裝飾已經(jīng)精細(xì)到不能再精細(xì),所有光影和細(xì)節(jié)已經(jīng)逼真到不能再逼真,技術(shù)的炫耀已經(jīng)過時(shí),逼真的效果漸漸讓我們的雙眼疲憊和厭倦。

不僅如此,用單一的逼真設(shè)備作為圖標(biāo)的做法越來越行不通,因?yàn)閱我坏脑O(shè)備只能喻指單一的功能。傳統(tǒng)設(shè)備的更迭和偏執(zhí)擬物情節(jié)交織在一起,很可能造成一種惡果:已被淘汰很久的設(shè)備未來依舊被用作圖標(biāo)設(shè)計(jì)的主要題材。比如用指南針喻指地圖、用磁帶喻指錄音、用唱片機(jī)喻指音樂,都會(huì)造成識(shí)別功能的斷代,因?yàn)槟贻p人們根本都沒用過,甚至都不知道它們是什么。

2010年微軟WindowsPhone的發(fā)布,微軟在Zune界面設(shè)計(jì)的基礎(chǔ)上進(jìn)行改善,創(chuàng)造出一種簡(jiǎn)潔明亮、扁平磁貼、極具現(xiàn)代感的Metro風(fēng)格,這種風(fēng)格對(duì)移動(dòng)界面的影響可謂深遠(yuǎn)。WindowsPhone的大面積多色方塊組成的動(dòng)態(tài)磁貼和大字體組成的Metro界面,已經(jīng)將扁平化的設(shè)計(jì)發(fā)揮到了相當(dāng)?shù)母叨?,在交互和層?jí)上也極力拉近與用戶之間的距離,這樣的理念也是超前的。不僅是移動(dòng)終端,在PC操作系統(tǒng)上,Metro風(fēng)格也被采用在2012年10月發(fā)布的Windows8和今年的Windows10上。盡管在應(yīng)用市場(chǎng)兼容等問題上飽受詬病,但微軟走出的扁平化和Metro風(fēng)格還是飽受歡迎,以至于遭到了蘋果公司隨后的效仿。

2013年9月蘋果公司發(fā)布iOS7是iOS操作系統(tǒng)面世以來在用戶界面上做出最大改變的一次升級(jí),它全面拋棄了擬物化的設(shè)計(jì),將所有圖標(biāo)和界面去掉細(xì)節(jié)、質(zhì)感、光影,即所謂"壓扁",可謂顛覆性的調(diào)整。蘋果在全球龐大的粉絲群里力量是不容小覷的。國內(nèi)主流網(wǎng)路產(chǎn)品如騰訊QQ、360、新浪微博、包括后來居上的微信、操作系統(tǒng)如魅族的flyme3.0、小米的MIUI6等,都紛紛開始采用扁平化的設(shè)計(jì)風(fēng)格,在自己的產(chǎn)品界面甚至圖標(biāo)和logo上都一改以前的繁瑣,大舉"壓扁";在蘋果公司今年更新的iOS8和APPLETV上我們可以看到,更加扁平化的設(shè)計(jì)已經(jīng)越來越占領(lǐng)了我們的全部視野,為全球掀起扁平化設(shè)計(jì)的熱潮推波助瀾。扁平化設(shè)計(jì)成為了在移動(dòng)互聯(lián)和界面設(shè)計(jì)領(lǐng)域被談及最多的詞匯之一。

三、扁平化設(shè)計(jì)的美學(xué)特征

什么是好的界面設(shè)計(jì)?很多專家學(xué)者都有自己的理論,可以列舉出一二三四,比如簡(jiǎn)潔高效、重點(diǎn)突出等;而什么是美的界面?我們則很難達(dá)成共識(shí)。

美是一個(gè)很抽象主觀的概念,一千個(gè)人有一千種喜好,很多消費(fèi)者并不知道自己理想中的界面是什么樣子,但他們懂得在既有的成品中選擇自己的最愛,這就給了行業(yè)領(lǐng)導(dǎo)者引領(lǐng)設(shè)計(jì)潮流的機(jī)會(huì)和可能。有時(shí)候我們?cè)谟懻摼烤故窍M(fèi)引導(dǎo)設(shè)計(jì)還是設(shè)計(jì)引導(dǎo)消費(fèi)?筆者認(rèn)為,在界面設(shè)計(jì)這樣創(chuàng)造從未存在過的新興物領(lǐng)域,設(shè)計(jì)是完全可以引導(dǎo)大眾消費(fèi)的,此時(shí)設(shè)計(jì)也成了一種時(shí)尚和潮流,能夠引領(lǐng)消費(fèi)者的注目與喜好。


引用文獻(xiàn):

(1)《交互設(shè)計(jì)概論》,李四達(dá),2007年,清華大學(xué)出版社

(2)《About Face 3交互設(shè)計(jì)精髓》,2012年,艾倫·庫伯,電子工業(yè)出版社

(3)《美學(xué)原理》,葉朗,2009年,北京大學(xué)出版社

注:原文首發(fā)于中國工業(yè)設(shè)計(jì)協(xié)會(huì)IIDC

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評(píng)論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,087評(píng)論 3 423
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,521評(píng)論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評(píng)論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,207評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,603評(píng)論 1 325
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評(píng)論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,813評(píng)論 0 289
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,364評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,110評(píng)論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,305評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,532評(píng)論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評(píng)論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,033評(píng)論 3 396
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,268評(píng)論 2 375

推薦閱讀更多精彩內(nèi)容