劉啟文

武漢理工大學(xué)，武漢430070

一、扁平化風(fēng)格概述

1.起源——瑞士國際主義平面設(shè)計

第二次世界大戰(zhàn)結(jié)束之后，平面設(shè)計的發(fā)展經(jīng)歷了一段時間的停滯。到20世紀中葉，一種全新的平面設(shè)計風(fēng)格終于在瑞士形成，而被稱為“瑞士平面設(shè)計風(fēng)格”。由于這種風(fēng)格明確并且簡約，傳達功能十分準確，因此很快就在世界范圍內(nèi)流行起來，成為二戰(zhàn)后國際上最為常見的設(shè)計風(fēng)格，因此被命名為“國際主義平面設(shè)計風(fēng)格”。

國際主義平面設(shè)計的核心是發(fā)展無飾線字體并給予廣泛采用。新一代的平面設(shè)計師利用一種十分直截了當?shù)臒o飾線字體，從而達到了高度無掩飾的視覺傳達效果（見圖1）。

圖1 瑞士國際主義風(fēng)格海報

瑞士的巴塞爾和蘇黎世兩個城市作為二戰(zhàn)前后最為重要的平面設(shè)計中心之一，對國際主義平面設(shè)計的形成起到了重要作用。作為設(shè)計的中心地區(qū)，涌現(xiàn)出了像艾米爾·路德（1914－1970）、阿明·霍夫曼（1920－）這樣重要的平面設(shè)計師。1959年瑞士出版的《新平面設(shè)計》雜志代表瑞士國際平面設(shè)計風(fēng)格真正形成了氣候。這本刊物成了瑞士國際主義平面設(shè)計風(fēng)格的基本陣地、中心地和發(fā)源地，這在平面設(shè)計的歷史中具有極其重要的作用和意義。

國際主義風(fēng)格通過秩序化的網(wǎng)絡(luò)結(jié)構(gòu)和近乎標準化的版面，以此獲得視覺上效果的統(tǒng)一。

在視覺表達上，數(shù)字網(wǎng)格采用非對稱的平面組織設(shè)計元素，字體和插圖照片標志均達到了視覺的統(tǒng)一，用無飾線體版面排成左對齊而右長短不一的形式，因此平面效果非常標準化、規(guī)范化和程式化（見圖2）。

圖2 左對齊長度不一的版式設(shè)計

瑞士國際主義平面設(shè)計風(fēng)格在全世界范圍內(nèi)的廣泛運用，讓信息傳達更加簡單快捷，并給當時色彩混雜、風(fēng)格凌亂的廣告、海報、媒體帶來了一股清新之風(fēng)。這種設(shè)計風(fēng)格的諸多特點在2000年初引起了當時世界最大的一家軟件公司的注意。

2.扁平化在交互設(shè)計中的問世

1990年的網(wǎng)站充滿了動態(tài)圖片，頁面十分凌亂。到了2000年，Java、動畫式片頭、閃動的動態(tài)壁紙，通過Myspace配置其文而風(fēng)靡一時。因此網(wǎng)站需要耗費較長的時間來加載這些極其凌亂的信息和移動部件。

微軟注意到了這種現(xiàn)象，并著手研究全新的操作系統(tǒng)。他們希望打破現(xiàn)狀，而這一切都開始于一種叫“Segoe”的字體，它的設(shè)計是一種簡單卻能準確傳遞信息的工具，沒有太多的裝飾和移動部件，是一種呈現(xiàn)清晰、準確信息的新方式（見圖3）[1]。

圖3 Segoe字體

2010年年初，微軟正式向外界展示了Windows Phone手機操作系統(tǒng)。2010年年末，微軟正式發(fā)布了Windows Phone系統(tǒng)的首個版本——Windows Phone 7，簡稱“WP7”。伴隨著WP7而誕生的則是微軟首創(chuàng)的metro UI，即扁平化設(shè)計的先驅(qū)嘗試。Metro UI是一種全新的用戶界面，和iOS、Android界面最大的區(qū)別是后兩者都以應(yīng)用作為主要的展示對象，而Metro界面則是強調(diào)信息本身，卻非繁雜的界面元素。動態(tài)磁貼在功能上的作用主要是提醒用戶“這兒有更多的信息”。在視覺效果方面，有利于形成一種身臨其境的用戶體驗[2]。

因此Metro UI 具有以下的特點：

（1）圖標沒有任何的陰影、反光效果、微笑曲線以及圓角等特效，讓文字做了主角[3]。如圖4中部分Metro UI的界面，圖案和按鈕都平面化地容納在動態(tài)磁貼里，不僅不干擾主要的信息而且能讓界面更加醒目、美觀。

圖4 Windows Phone 7

（2）不強制性地填滿版面，以留白為主，保持簡潔，因此手機屏幕上的按鈕容易按動而且明顯，物件與物件之間的留白也可以避免用戶誤觸。

（3）去除邊框以及其他的修飾元素，卻保留了基本色彩。大膽的顏色讓用戶的桌面變得更富個性。雖然少了其他的設(shè)計元素，但運用色彩并配合字體的調(diào)整，其內(nèi)容依然可以層次分明。

（4）在每一個動態(tài)磚（Tile）上，巧妙地使用文字和數(shù)字，傳達信息之余仍然可以讓畫面看起來不顯凌亂。

3.扁平化的發(fā)展與普及

北京時間2013年9月11日凌晨，蘋果（Apple）在秋季發(fā)布會上宣布iOS7將于9月18日推出，也由此昭示扁平化設(shè)計風(fēng)格正式成為全球UI設(shè)計的首選和發(fā)展趨勢。

iOS7是iOS面世以來在用戶界面上做出最大改變的一個操作系統(tǒng)。iOS7完全拋棄了此前的擬物化設(shè)計，全面采用了扁平化設(shè)計。圖5中展示的就是其前后對比。

圖5 iOS系統(tǒng)界面變化對比

自iOS7系統(tǒng)發(fā)布之后，扁平化設(shè)計風(fēng)格在世界范圍內(nèi)迅速獲得了廣泛的關(guān)注，雖然人們對該系統(tǒng)褒貶不一，但其引發(fā)的設(shè)計風(fēng)格改革浪潮卻勢不可擋，似乎一夜之間，所有的人都在討論扁平化設(shè)計，討論這種風(fēng)格的優(yōu)劣和進步意義。iOS7正式發(fā)布之后，一個月內(nèi)就有64%的蘋果設(shè)備升級到了最新的iOS系統(tǒng)，2014年初，iOS7在蘋果手持設(shè)備中的占有率竟高達78%。由此可見，全新界面的操作系統(tǒng)并沒有受到用戶的排斥和抵制，相反卻極受歡迎。

4.定義扁平化設(shè)計

“扁平化設(shè)計”譯成英文是“flat design”，這種設(shè)計風(fēng)格最核心的內(nèi)容就是拋棄了一切裝飾效果，如陰影、透視、紋理、漸變等有關(guān)3D效果的表現(xiàn)手法；大大減少了按鈕和選項，使得界面更加干凈整齊，用戶體驗更加簡便流程。這種設(shè)計風(fēng)格簡單直截地將信息和事物的工作方式展現(xiàn)出來，大大減少了產(chǎn)生認知障礙的幾率[4]。

如今扁平化設(shè)計備受設(shè)計師們的青睞，因為這種風(fēng)格能讓設(shè)計更具現(xiàn)代感，并且可以強力突顯設(shè)計中最為重要的內(nèi)容：內(nèi)容和信息。如圖5，iOS7系統(tǒng)中經(jīng)過扁平化設(shè)計的幾個經(jīng)典性圖標，都去除了大部分的3D效果和玻璃材質(zhì)，使圖標更具現(xiàn)代感，表達更有力。擬物化設(shè)計所具有的三維效果，本身是某段時間的流行風(fēng)格，而去掉了這些元素，就可以讓設(shè)計不那么容易過時，并且還能突出信息本身[5]。這就是此種設(shè)計風(fēng)格能在那么短的時間之內(nèi)而能風(fēng)靡全球的原因。

二、藝術(shù)風(fēng)格變遷問題的討論

1.有關(guān)中國傳統(tǒng)的藝術(shù)風(fēng)格——從篆刻說起

中國廣為人知的書法、國畫、篆刻等傳統(tǒng)藝術(shù)，多以寫意為主，并巧借自然之力，如以墨跡滲透、人為破損等手段以獲取渾然天成的效果，而將個人的情感融入作品之中。欣賞者可以從書法的筆劃勾勒、墨跡走向，即可讀出作者的心境與品性；也可以從國畫顏色的轉(zhuǎn)變、觀察角度看出畫家的視野和氣概。篆刻作為經(jīng)典的傳統(tǒng)藝術(shù)之一，同樣也能夠從中看到作者那獨具匠心、意味雋永的蘊含。

下面就從篆刻藝術(shù)的風(fēng)格變遷來探討印章中的經(jīng)典手法及其必然性。

篆刻具有3700多年的歷史，因此是一門古老的藝術(shù)。篆刻是書法、章法和刀法三者完美的結(jié)合體。一方印章，既有豪壯飄逸的書法筆意，亦有優(yōu)美悅目的繪畫構(gòu)圖，并且更得刀法的雕刻神韻，可稱得上是“方寸之間，氣象萬千”。

不斷發(fā)展著的篆刻已經(jīng)形成了眾多流派，圖6所列舉的風(fēng)格流派，從左至右依次為婉約、工整、豪放及氣派。熟悉中文的欣賞者可以第一眼讀出第一方印章的文字是“下里巴人”，第二方是“博古百年”，然而識讀第三方就有點難度了，更遑論第四方和第五方了。然而細看最后兩方印章，可見作者在鐫刻時順應(yīng)了字體的不工整，將邊框及文字進行了相應(yīng)的組合和人為破損，并實施大量的留白，以達到自然破損、渾然天成的效果，這也是篆刻家常用的手法。

圖 6 不同的篆刻風(fēng)格

當完全不懂篆刻藝術(shù)的欣賞者讀完以上五方印章，再加回憶，只能記得前兩方是“下里巴人”和“博古百年”，但卻不能記起具體的樣式、線條粗細。然而后兩方難于識讀的印章，反而給人留下了深刻的印象。當下次見面時，更容易記起是在什么時候看到過的。如果讀不出其中的文字，便會將其改換成圖案或者符號而加以記憶。符號記憶總是能給人以更加深刻的印象，這就是大部分提示牌除了使用提示語之外，還會添加生動的提示符號，旨在加深人們的短期印象。

文字的發(fā)展同樣如此（見圖7）。在文字發(fā)明初期，如左圖中的甲骨文，就是摹寫了物體最初的形態(tài)的。然而經(jīng)過幾千年的發(fā)展，現(xiàn)今的文字早已脫離了最初的形態(tài)，轉(zhuǎn)變?yōu)槎炷茉數(shù)奈淖?。但反過來看時，就會發(fā)現(xiàn)最初的文字在我們的眼中，已經(jīng)變成了圖案（或者符號）。如果要同時使用古今兩種文字，對古文，我們會選擇圖案記憶的方式，而對現(xiàn)今的文字則會選擇筆畫。這在一定程度上說明了人們對自己一眼就能辨識的圖案，會以其所表達的寓意進行記憶，而結(jié)果卻是對寓意本身印象更深卻更容易忽略圖案本身；對于不熟悉的圖案，人們首先會主動將它賦予自己所認定的寓意然后再實施記憶，其結(jié)果就會對圖案本身的印象更加深刻。

圖7 中文字體的發(fā)展歷程

隨著藝術(shù)表達方式的發(fā)展和完善，會越來越向人們并不熟悉但也不太陌生的效果給予刻畫（如人為破損、精心設(shè)計）；當人們在欣賞時，會以“不讀”的方式在作品中尋找自己可以領(lǐng)會的東西，并在無形之中按照作者的想法賦予寓意，以求得心靈上的共鳴，這大概就是“品味”吧。

2.西方美術(shù)風(fēng)格的變遷

西方美術(shù)風(fēng)格的變化和東方傳統(tǒng)藝術(shù)的發(fā)展有著相通之處，在風(fēng)格和表達方式上有著異曲同工之妙。有關(guān)西方美術(shù)風(fēng)格變遷的具體歷史在此不予贅述。這里通過三個不同時期繪畫大師的作品進行比較和說明（見圖8）。

（1）達芬奇的傳世巨作《蒙娜麗莎》以及她的神秘微笑一直以來都被人所津津樂道。然而隨著這幅畫的無限曝光，人們關(guān)注的不再是它的藝術(shù)價值，而是背后的故事。

（2）莫奈的《日出》可以說開創(chuàng)了印象派的新時代。拋棄寫實，運用光和影的變化規(guī)律，向人們描繪了另一種世界。莫奈的《少女》同樣值得瞻仰和欣賞。

（3）在愛德華·蒙克的表現(xiàn)主義代表作《吶喊》中，遠處火紅的夕陽、河邊扭曲的臉龐讓人第一印象就感受到了焦慮和痛苦。然而讓讀者印象更加深刻的卻是這幅畫對現(xiàn)實的線條描繪與抽離，能讓人過目不忘。

圖 8 不同時期不同風(fēng)格的代表作

從這三個不同時期的代表作可以看出，西方美術(shù)風(fēng)格的變遷在一步一步地“脫離現(xiàn)實”但又契合現(xiàn)實，甚至更加強烈地表現(xiàn)現(xiàn)實。從最初的寫實，到對光與影的摹寫，再到線條的描繪和抽離?？梢哉f西方美術(shù)同樣也伴隨著對現(xiàn)實不同角度的介紹，愈發(fā)向符號化、風(fēng)格化的方向發(fā)展，讓欣賞者看到第一眼時，不會嘗試著參照現(xiàn)實去理解畫里的內(nèi)容，反而會認真揣摩那些不易察覺的隱含意義。

從以上分析可以知道，藝術(shù)的表現(xiàn)方式種類繁多，但歸根結(jié)底，是需要找到一個真正能夠表達自己思想的形式。甚至可以大膽猜想，畫家們一直都在努力尋找人們在靜靜地欣賞之后能夠領(lǐng)會畫中最為準確的含義，所以畫家并不想以一幅誰都可以用司空見慣方式或者直接參照實物來理解的畫作，這應(yīng)該就是風(fēng)格變換和發(fā)展的另一種有趣的解釋。

3.圖案的可讀性分析

以上兩個案例分別從東西方藝術(shù)風(fēng)格變遷和多樣化方面解釋了人們對圖案不同的解析方式?jīng)Q定了對圖案本身的記憶。接下來再從生活中司空見慣的LOGO著手作進一步地分析與探討。

平面設(shè)計中最為常見的一個現(xiàn)象就是英文文字比中文文字更加耐看。

下面通過幾張圖片的對比予以說明（見圖9）：

圖9 圖案：我今年三十一

當看到圖9時，人的大腦會立刻做出如下的反應(yīng)：

第一，這是什么（符號或者文字）？

第二，文字描述的基本內(nèi)容是什么？

第三，文字要告訴的具體信息是什么？

熟悉中文的人在看到這張圖片時，做出的第一反應(yīng)該是以上三步。

緊接著，將上圖中的“三十一”改成阿拉伯數(shù)字“31”之后（見圖10），雖然文字的寓意沒有發(fā)生改變，但視覺的心理活動卻出現(xiàn)了變化。當人們重新閱讀這個圖案時，大腦會自動地對阿拉伯數(shù)字“31”進行圖形化處理。

圖10 “三十一”改成了阿拉伯數(shù)字“31”的新圖案

也就是說，此前筆者所提到的系列心理活動，會變成以下的情況：

第一，這是一個什么圖形（或符號）？

第二，這個圖形（或符號）具有何種含義？

第三，與圖形（或符號）混在一起的文字是什么？

第四，文字描述的具體內(nèi)容是什么？

第五，圖形（或符號）與文字結(jié)合之后，所描述的內(nèi)容有哪幾個層面的含義？

最后將圖案中所有的信息轉(zhuǎn)換成英文和阿拉伯數(shù)字（見圖11）。這時候，人們的大腦就會對其進行圖形化與符號化處理。這是一個自然的條件反射，幾乎不由人的意志所掌控。

圖11 轉(zhuǎn)換為英文和阿拉伯數(shù)字的圖案

根據(jù)以上案例可以發(fā)現(xiàn)，人們是在將文字的“實際表達含義”與圖形的“視覺形式美感”進行著比較。這本來就是不太嚴謹?shù)念惐确绞?。從“視覺誘目度”上說，圖形自然會比文字更勝一籌。外國人看待中文字，大腦中也會是在第一時間對其進行圖形化或符號化處理。這就是很多外國人喜歡用中文字紋身的原因，不是他們喜歡中文，而是中文字體被理解成了圖形。中文字的方塊形式，正好與他們國家的纖細文字有著極大的反差。

綜上，人們對圖案的認知過程可以如此歸納（見圖12）：

圖 12 人們對圖案的認知過程

這就是為什么當人們看到抽象的圖形，認為好看。而相對具象的，例如中文，或者易于分辨的圖案，會覺得稍微遜色一些的原因。

總結(jié)以上分析可以得出：造成這種感受的根源就在于大腦的反應(yīng)速度；對圖形反應(yīng)的速度越慢，就越覺得圖形好看。

三、分析小結(jié)

1.扁平化設(shè)計的必然性

從以上分析可以知道，無論是東方的傳統(tǒng)藝術(shù)，還是西方的美術(shù)流派，風(fēng)格的轉(zhuǎn)變往往都是朝著抽象化和寫意化方向發(fā)展的，而其目的之一，就是通過拉長欣賞者在作品前停留的時間，讓畫的蘊含在他們心中更為深長。

iOS7之前的iOS版本均采用了擬物化設(shè)計，所有的圖標和操作方式都是參照現(xiàn)實生活的相關(guān)實物進行繪制和設(shè)計，讓用戶第一眼看到之后就能按照一些簡單的生活常識去理解和操作。這樣的設(shè)計能夠有效降低學(xué)習(xí)的門檻和成本，并且在用戶使用的過程中更有代入感[6]。身處互聯(lián)網(wǎng)包圍的時代，越來越多的人用上了各種智能終端，并對大部分信息符號、使用習(xí)慣都熟悉的時候，擬物化設(shè)計會顯得臃腫和繁瑣，人們亟待一種無需太多干擾信息和3D效果以及用簡單線條勾勒的設(shè)計風(fēng)格。

于是扁平化設(shè)計應(yīng)運而生，并且在誕生之后并沒有受到用戶的抵制，反而大受歡迎，從而掀起了UI設(shè)計風(fēng)格轉(zhuǎn)變的浪潮，似乎一夜之間，所有的東西都扁平化了。通過以上分析，又可以得出這樣一個結(jié)論——藝術(shù)作品在發(fā)展的初期，都借助著人們熟悉的事物進行刻畫，以便于理解和領(lǐng)會。但當人們的審美習(xí)慣被培養(yǎng)起來之后，藝術(shù)作品同樣會更加抽象化和寫意化。而扁平化設(shè)計也是擬物化的抽象體現(xiàn)，它的問世可以說是順應(yīng)了時代發(fā)展的潮流，或者說，扁平化是UI設(shè)計發(fā)展必須經(jīng)歷的一個過程。

2.扁平化設(shè)計的原則

扁平化設(shè)計需要嚴格遵守《iOS7人界界面準則》，優(yōu)化視覺設(shè)計的界面元素，對所表達的符號或圖案做到簡化和概括。

因此設(shè)計主旨是：

（1）依從（Deference）用戶界面應(yīng)該有利于用戶理解內(nèi)容并能有效地與之互動；

（2）清晰（Clarity）文字在任何環(huán)境下都易于閱讀，圖標現(xiàn)象傳達準確清晰,裝飾也恰到好處,對功能的關(guān)注驅(qū)動設(shè)計；

（3）縱深（Depth）視覺上的分層界面和流程的過度動畫會更有活力,并大大提升了用戶使用過程中的愉悅感。

在UI設(shè)計時：

（1）充分利用整塊屏幕。重新研究視覺框架的使用問題，可以考慮讓內(nèi)容擴展到屏幕邊緣。

（2）重新考慮模擬現(xiàn)實的視覺表現(xiàn)。漸變、陰影和3D效果有時會讓界面變得臃腫，可能會喧賓奪主。相反，要盡可能突出內(nèi)容，讓界面只發(fā)揮一種輔助作用。

（3）通過半透明的毛玻璃效果暗示背后的內(nèi)容。毛玻璃效果可以提供情境，幫助用戶看到更多可用的信息，并給人一種短暫的背景暗示。

（4）大量使用留白。留白會讓界面更加通透，重要內(nèi)容和功能更為突出并易于理解。同時，留白可以傳達一種安靜平和的氛圍，這就會讓 app看上去更加高端大氣。

（5）用色彩簡化界面。使用一種主題色以突出主旨，并聰明地暗示app的交互性，于是這能帶來視覺風(fēng)格的一致性。

（6）使用系統(tǒng)字體以確保其易讀性。iOS7的系統(tǒng)字體能夠自動調(diào)整字間距和行高，這會讓文本內(nèi)容更加容易閱讀，而任意字號下都能擁有良好的閱讀感覺。

（7）大量使用無邊框按鈕。iOS7中,條欄按鈕均沒有邊框。無邊框按鈕能在內(nèi)容區(qū)域里的使用情境、顏色和動作導(dǎo)向的標題中暗示其交互性。除此之外，還可以通過纖細的邊框或者淺色背景讓按鈕更加突出。

[1]Alan cooper, Robert Reimann, David Cronin.交互設(shè)計精髓[M].劉松濤，譯.北京：電子工業(yè)出版社，2012：59-63.

[2]加瑞特（Garrett,J.J.）.用戶體驗要素：以用戶為中心的產(chǎn)品設(shè)計[M].范曉燕，譯.北京：機械工業(yè)出版社，2011：87-88.

[3]約翰遜（Johnson J）.認知與設(shè)計：理解UI設(shè)計準則[M].張一寧，譯.北京：人民郵電出版社，2011：103-107.

[4]科爾伯恩（Colborne,G.）.簡約至上：交互設(shè)計四策略[M].李松峰，秦緒文，譯.北京：人民郵電出版社，2011：37-41.

[5]騰訊公司用戶研究與體驗設(shè)計部.在你身邊，為你設(shè)計[M].北京：電子工業(yè)出版社，2013：66.

[6]諾曼（Norman）.設(shè)計心理學(xué)[M].梅瓊，譯.北京：中信出版社，2010：51-55.