扁平化： 移動(dòng)互聯(lián)網(wǎng)時(shí)代的設(shè)計(jì)新趨勢

毛悅溢

簡介

扁平化設(shè)計(jì)（Flat Design），簡單來說是平面設(shè)計(jì)的一種風(fēng)格——這種風(fēng)格在當(dāng)下經(jīng)常被運(yùn)用在移動(dòng)設(shè)備應(yīng)用程序以及網(wǎng)頁當(dāng)中，除此之外，在更廣范圍的平面設(shè)計(jì)領(lǐng)域也都可以見到扁平化設(shè)計(jì)的影子。自2007年1月第一代IPhone發(fā)布以來，智能手機(jī)、平板電腦等各種移動(dòng)設(shè)備已經(jīng)融入了人們的日常當(dāng)中，成為工作、生活和娛樂不可或缺的部分。正是在這種移動(dòng)設(shè)備大規(guī)模占據(jù)人們生活的環(huán)境下，扁平化設(shè)計(jì)應(yīng)運(yùn)而生。

2008年，扁平化設(shè)計(jì)的概念首先由谷歌公司提出，它意味著最大限度地減少使設(shè)計(jì)立體的風(fēng)格元素的運(yùn)用，包括陰影、漸變和紋理等等，扁平化在設(shè)計(jì)上更加注重簡單的元素、字體和顏色，其中又特別強(qiáng)調(diào)對色彩的運(yùn)用。與扁平化相對的通常有兩個(gè)概念，豐富設(shè)計(jì)（Rich Design）和擬物化（Skeuomorphism） 。陰影、高光和斜角等在豐富設(shè)計(jì)中被大量使用，而在擬物化風(fēng)格中，設(shè)計(jì)力求展現(xiàn)物體的真實(shí)形態(tài)。值得注意的是，扁平化和擬物化在原則上并不互相排斥，我們時(shí)?？梢栽诒馄交脑O(shè)計(jì)中看到擬物化的痕跡，只是在如何展現(xiàn)物體的真實(shí)形態(tài)上他們采取了不同的方法。

扁平化風(fēng)格在設(shè)計(jì)領(lǐng)域的風(fēng)頭日漸興起，這背后的原因可以歸結(jié)為兩個(gè)。首先，扁平化設(shè)計(jì)誕生與移動(dòng)設(shè)備的溫床之中，而移動(dòng)設(shè)備受制于電池，有續(xù)航焦慮的問題。諸如3D渲染、動(dòng)畫效果等高性能要求的技術(shù)，在移動(dòng)設(shè)備上被限制使用。因此，在技術(shù)層面上，移動(dòng)設(shè)備需要一種能極大地降低功耗、延長續(xù)航和提高響應(yīng)速度的設(shè)計(jì)，而扁平化設(shè)計(jì)正是能滿足這一需求的風(fēng)格。此外，隨著互聯(lián)網(wǎng)飛速發(fā)展，我們進(jìn)入了一個(gè)信息爆炸，信息碎片化的時(shí)代。在這樣一個(gè)信息過剩的時(shí)代中，我們每時(shí)每刻接收到信息已經(jīng)遠(yuǎn)超負(fù)荷。此外，我們剛在桌面電腦上經(jīng)歷過一個(gè)由復(fù)雜而精美的軟件界面和豐富和華麗的網(wǎng)頁組成的時(shí)代，各種絢麗特效充斥著視覺，有時(shí)候我們注重交互界面的觀感勝過了交互的目的本身。因此，從審美層面來說，我們需要一種簡潔、干凈、舒服的視覺效果來取代過去的過剩的復(fù)雜。扁平化設(shè)計(jì)也是在這種趨勢中成長起來的。它化繁為簡、去偽存真，用最簡單的觀感去突出需要傳遞的內(nèi)容和信息。設(shè)計(jì)中使用的簡單元素、字體和色彩也是服務(wù)于信息和交互本身，幫助用戶更快地理解使用方法或交互過程，去除認(rèn)知障礙。

和極簡主義的關(guān)系

從對扁平化設(shè)計(jì)的描述來可以看出，它和極簡主義（Minimalism）存在很強(qiáng)的內(nèi)在聯(lián)系。極簡主義是一種藝術(shù)流派，興起于二戰(zhàn)后恢復(fù)時(shí)期百廢待興的美國。極簡主義以簡潔、實(shí)用的氣質(zhì)出現(xiàn)在人們的視野中，指導(dǎo)重建工作，服務(wù)于實(shí)業(yè)。 我們可以在很多現(xiàn)代流派的建筑、室內(nèi)設(shè)計(jì)、物件、裝置等作品中看到符合極簡主義的風(fēng)格。它們摒棄了復(fù)雜的線條、形狀、紋理和圖案，用二維化的表現(xiàn)手法去展現(xiàn)創(chuàng)作者的意圖，用簡單的幾何來傳遞美感。時(shí)至今日，極簡主義有了越來越多擁躉，甚至它已經(jīng)超越了一種藝術(shù)流派的范疇，成為一種思想或者生活態(tài)度。顯而易見，極簡主義也早已經(jīng)蔓延到了平面設(shè)計(jì)的領(lǐng)域。扁平化設(shè)計(jì)，除了受到上文所提及的技術(shù)層面和審美層面兩個(gè)需求影響，很大程度上也可以說是源自于極簡主義。扁平化設(shè)計(jì)的特征，絕大多數(shù)都符合極簡主義的描述。

在作者看來，扁平化設(shè)計(jì)和極簡主義可以說是互為表里的關(guān)系。在藝術(shù)上，極簡主義希望用最簡潔、直觀的方式去表達(dá)，可以讓削弱觀眾理解主旨的障礙、減輕審美疲勞。而在界面上，扁平化同樣以簡單、直接的視覺和交互呈現(xiàn)在用戶眼前，以保證信息的有效傳遞、降低學(xué)習(xí)成本。簡單來說，極簡主義是指導(dǎo)思想，而扁平化是展現(xiàn)極簡的具體方法論。

主要特征

扁平化設(shè)計(jì)所要簡化的主要體現(xiàn)在兩個(gè)方面。首先自然是視覺上的簡化，通過去除三維效果和過度的細(xì)節(jié)，減少動(dòng)畫和特效，并用簡單的幾何形狀和顏色組合來呈現(xiàn)簡單、整潔的畫面。扁平化在追求視覺上的簡化以外，也對交互提出了要求。交互上的簡化，包括減少傳統(tǒng)的瀑布式的列表的使用、放棄復(fù)雜的菜單和選項(xiàng)，并且充分利用簡化的視覺元素本身和觸控這一種新的交互形式，給使用者帶來直觀、純粹的體驗(yàn)。在交互的設(shè)計(jì)上，同樣需要經(jīng)過深思熟慮，以符合使用場景以及人的行為習(xí)慣和思維模式，從而降低用戶的學(xué)習(xí)成本，使用起來自然而流暢。

在了解扁平化設(shè)計(jì)的基本特征之后，我們可以通過分析一些推崇扁平化風(fēng)格的設(shè)計(jì)師從他們的工作中總結(jié)出來的經(jīng)驗(yàn)和原則，來更加深入的進(jìn)行剖析。

設(shè)計(jì)師Carrie Cousin提出了一些能讓設(shè)計(jì)展現(xiàn)扁平化風(fēng)格的明顯特征。首先是沒有添加額外的效果，尤其是傳統(tǒng)的三維化元素，諸如陰影、浮雕、漸變等等。從圖層的角度來說，扁平化的設(shè)計(jì)和三維的設(shè)計(jì)可能是一樣的，但是各個(gè)圖層平面在扁平化設(shè)計(jì)中是不相交也不連接的。如何將各個(gè)平面聯(lián)系起來，展現(xiàn)成一個(gè)統(tǒng)一體依賴于對設(shè)計(jì)的層次感的體悟，和對元素的排布。第二個(gè)特征是使用簡單的元素。我們可以看到現(xiàn)在很多吸引人的并且充滿現(xiàn)代感的網(wǎng)頁，經(jīng)過觀察，它們僅僅是由幾何圖形以及文字構(gòu)成，過去常見的諸如精美的背景、復(fù)雜的圖案和裝飾性的紋理都在被逐漸淘汰。 其次，由于扁平化僅僅使用簡單的視覺元素，因此它又尤為重視對字體的使用。大部分優(yōu)雅的手寫體和復(fù)古字體，通常都和扁平化的風(fēng)格相違和。通常會(huì)選擇一個(gè)簡潔的主要字體，搭配一個(gè)次要字體使用。同樣的，顏色對于扁平化設(shè)計(jì)也是至關(guān)重要。扁平化風(fēng)格中使用的顏色更加的鮮艷，明亮。往常的設(shè)計(jì)以2-3種顏色做為主色調(diào)，但在扁平化設(shè)計(jì)中，可能6-8種顏色被平均的使用。盡管色調(diào)增多，但我們在扁平化設(shè)計(jì)中一般使用的是大的色塊，因此在局部，或者在一個(gè)視覺元素中，往往使用的是一種顏色，或者是同類色。相比于以往的設(shè)計(jì)，扁平化在顏色的使用上更為豐富，但在顏色的變化和排布上顯得沒有那么復(fù)雜。最后一個(gè)特征，Carrie稱之為極簡主義設(shè)計(jì)方式，在設(shè)計(jì)過程中始終以極簡作為指導(dǎo)思想，盡量使用簡單的元素，降低視覺復(fù)雜程度

必須強(qiáng)調(diào)的是，簡單的元素、簡化的視覺效果并不意味著簡單的設(shè)計(jì)。例如大膽的在局部使用幾何和顏色，從而形成視覺上的焦點(diǎn)，引導(dǎo)用戶關(guān)注和使用，同時(shí)在非重點(diǎn)的部分進(jìn)行視覺效果的弱化，造成對比和沖擊，讓設(shè)計(jì)成為一個(gè)有機(jī)的整體，如何做到這些對設(shè)計(jì)提出比傳統(tǒng)風(fēng)格更大的挑戰(zhàn)。

設(shè)計(jì)師錢嘉文提出了對扁平化設(shè)計(jì)在特定場景使用的理解，除了和上文中提到的一些重合的地方之外，他也提出了很多獨(dú)到的見解。例如扁平化設(shè)計(jì)在文字的排版上要注重四個(gè)原則——親密、對齊、對比和重復(fù)。簡單來說就是意思相近內(nèi)容的親密，同一頁面元素之間的對齊，不同等級(jí)元素之間的對比以及相同級(jí)別元素的重復(fù)。在字體方面，他推薦使用無襯線的字體， 而在形狀/色塊方面，則強(qiáng)調(diào)了色塊和內(nèi)容文字的大小比例的協(xié)調(diào)關(guān)系。作者同樣指出了圖標(biāo)對于扁平化設(shè)計(jì)的重要性，好的圖標(biāo)不僅能提升整體的設(shè)計(jì)感，也能更加輕松的將信息傳達(dá)給觀眾。提煉圖標(biāo)至關(guān)重要，而這也是一項(xiàng)需要付出很多的時(shí)間和精力的任務(wù)。

發(fā)展歷程

在對扁平化的簡介中提到，扁平化設(shè)計(jì)的出現(xiàn)和風(fēng)靡依托于越來越普及的智能移動(dòng)設(shè)備，因此我們可以通過觀察和分析移動(dòng)設(shè)備的用戶界面的歷史來獲悉扁平化風(fēng)格的發(fā)展和演變。

微軟公司在2010年的下半部分發(fā)布了Windows Phone 7， 它是該公司第一款專門針對手機(jī)的操作系統(tǒng)。這個(gè)系統(tǒng)的用戶界面率先使用了簡約的、充滿現(xiàn)代感的二維化設(shè)計(jì)，也正是在這一代系統(tǒng)的發(fā)布中，微軟向顧客介紹了Metro這一標(biāo)志性的設(shè)計(jì)語言。Metro意味著都市，是現(xiàn)代化的象征，可以看作是復(fù)古（Retro）風(fēng)格的對立面。

微軟在這款界面的設(shè)計(jì)中，采用了方形作為的基本視覺元素和交互的單位。方形的色塊不帶有任何陰影、漸變、高光之類的三維效果，在顏色上也選擇了單色作為主色調(diào)。此外，方形色塊也可以被同樣尺寸的圖片所取代。這套設(shè)計(jì)可以說是扁平化的入門之作，色塊的交互形式在當(dāng)時(shí)為手機(jī)用戶帶來了新鮮感和便利，但是它也有很多不足之處。例如在圖標(biāo)的設(shè)計(jì)上雖符合簡約的標(biāo)準(zhǔn)，但是卻顯得有些單調(diào)。在圖標(biāo)以及文字/數(shù)字的排版布局上也缺乏深思熟慮，雖然直觀但是比較粗糙。此外，界面中用了一些圖片代替色塊，很容易在更換圖片后顯得畫面雜亂。

到了2012年第四季度，微軟發(fā)布了個(gè)人電腦的新一代操作系統(tǒng)Windows8，同時(shí)將Metro更名為Modern UI。這個(gè)系統(tǒng)的用戶界面基本上采用了和Windows Phone 7一樣的以大面積色塊做為主體的設(shè)計(jì)，這體現(xiàn)了觸控屏幕的發(fā)展和平板電腦的興起。Windows 8在界面上有了更多的變化，例如不再采用單一的色彩作為基調(diào)，而是讓色塊和色塊之間有豐富的顏色。此外圖標(biāo)的設(shè)計(jì)更為精細(xì)，很多都能體現(xiàn)出微軟自身的特色。在字體的選用和文字的布局上有了長足的進(jìn)步，不再和它的前身一樣呆板。

隨著微軟在界面上不斷推動(dòng)扁平化設(shè)計(jì)往前發(fā)展，它的競爭對手也開始在同樣的設(shè)計(jì)風(fēng)格上發(fā)力。在2013年9月，蘋果公司發(fā)布了第七代移動(dòng)設(shè)備操作系統(tǒng)iOS 7。在蘋果的著名設(shè)計(jì)高級(jí)副總裁Jonathan Ive的主導(dǎo)下，本代的iOS進(jìn)行了徹底的改頭換面。

在這一代iOS中，擬物化的元素，例如立體的雜志架，日歷上的羽毛和游戲中心的毛氈基本上都被拋棄，取而代之的是一套重新設(shè)計(jì)的基于扁平化的按鈕和界面。大部分的按鈕都是以清爽的白色線條或者最簡單的色塊來表現(xiàn)出自己的特征，我們可以看到蘋果在圖標(biāo)的設(shè)計(jì)上，就有比微軟深的多的功底。值得注意的是，在圖標(biāo)的底色上蘋果仍舊采用了一定的漸變色，嚴(yán)格來說屬于偽扁平化，同時(shí)圖標(biāo)和背景之間的層次感比較強(qiáng)烈，讓用戶覺得每一個(gè)按鈕都非常的有機(jī)。在文字上，蘋果可以說和微軟有異曲同工之妙。

到2014年底，谷歌公司發(fā)布了第五代安卓操作系統(tǒng)（Android 5.0 Lollipop）。在過去的一段時(shí)間里，谷歌圍繞著Google Now的界面和交互設(shè)計(jì)拓展出一套極具特色和說服力的設(shè)計(jì)語言——Material Design，而Android5.0是第一款帶有其血統(tǒng)的操作系統(tǒng)。

這一代的安卓同樣重新設(shè)計(jì)了完整的一系列圖標(biāo)，而與iOS不同，它并沒有采用固定形狀的圖標(biāo)，而是讓所有圖標(biāo)保留自身的特色，因此顯得更加生動(dòng)和直觀，再經(jīng)過精心的搭配和排布，整體觀感也十分和諧。仔細(xì)觀察可以看出，圖標(biāo)保留了一定的陰影和少量的高光，因此也同樣屬于偽扁平范疇。相比于iOS7那種清澈剔透的毛玻璃質(zhì)感，Android5.0更加著重用配色來展現(xiàn)一種簡約和現(xiàn)代的氣質(zhì)。這款系統(tǒng)的另外一個(gè)核心特色是它的響應(yīng)式的動(dòng)畫和轉(zhuǎn)換效果。

到現(xiàn)在，時(shí)間過去接近兩年，這幾家公司的系統(tǒng)也經(jīng)歷了一到兩個(gè)大版本的變遷，在用戶界面上也發(fā)生了諸多革新?lián)Q代。

隨著生產(chǎn)力的進(jìn)步，我們在物質(zhì)上漸漸地豐富，而隨著互聯(lián)網(wǎng)的高速發(fā)展，我們也進(jìn)入了一個(gè)信息爆炸的時(shí)代。與內(nèi)容上的過剩相對的，是人們在形式上和設(shè)計(jì)上，開始追求由繁入簡。正如越來越多的人在生活上崇尚極簡主義，扁平化設(shè)計(jì)也在平面設(shè)計(jì)領(lǐng)域得到了很大的發(fā)展。扁平化的設(shè)計(jì)風(fēng)格拋棄多余的細(xì)節(jié)，通過二維化、幾何化、色塊化等手段對事物的進(jìn)行視覺和交互上的提煉。通過扁平化設(shè)計(jì)，我們可以更快速的表現(xiàn)設(shè)計(jì)師的意圖，也能更精準(zhǔn)的傳達(dá)內(nèi)容。

（作者單位：浙江理工大學(xué)）