毛悅溢
簡介
扁平化設(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é))