扁平化設計是相對于擬物化設計(Skeuomorphic Design)而提出的。擬物化的用戶界面設計看起來就像是真實的物體,如圖1-1所示,在用戶界面中能反映出真實世界中音頻壓縮器的外觀和功能。在初期,這樣的設計可以讓人們更快地接受和明白設計的用途。

圖1-1
擬物化設計起始于20世紀80年代,其初衷是幫助用戶從真實世界向計算機界面平滑過渡。直到最近,作為擬物化設計忠實的擁護者,蘋果公司把這種設計理念運用在了公司所有用戶界面和界面設計指南中。從IOS 7開始全部換成扁平化設計,盡管當時有很多人批評。蘋果公司的擬物化設計與扁平化設計的對比如圖1-2所示。

圖1-2
其實筆者認為扁平化設計是設計發(fā)展的必然規(guī)律,就如幾千年來文字的發(fā)展。最初人們用圖畫文字(象形字)來記錄,這是一種最原始的造字方法,把想要表達的物體的外形特征描繪出來,慢慢地演化到繁體,再到現(xiàn)在的簡體。現(xiàn)在的扁平化設計也正在遵循這樣一個從繁到簡的發(fā)展規(guī)律,從寫實擬物到抽象扁平。
1.扁平化設計的三大特點
》做減法
同樣是鏡頭的設計,在扁平化中去除了漸變、陰影、質(zhì)感等修飾手法,僅用簡單的形體來表達,顯得干凈利落。做減法這一步應該是最容易的,如圖1-3所示。

圖1-3
因為扁平化設計有著鮮明的視覺效果,它所使用的元素之間有清晰的層次和布局,這使得用戶能直觀地了解每個元素的作用及交互方式。如今從網(wǎng)頁到手機應用無不在使用扁平化的設計風格,尤其在手機上,因為屏幕尺寸的限制,使得這一風格在用戶體驗上更有優(yōu)勢,更少的按鈕和選項使得界面干凈、整齊,使用起來格外簡單。
》精致的顏色
扁平化設計中,配色貌似是最重要的一環(huán),扁平化設計通常采用比其他風格更明亮、炫麗的顏色。同時,扁平化設計中的配色還意味著更多的色調(diào),例如,其他設計最多只包含兩三種主要顏色,但是扁平化設計中平均會使用6~8種。而且扁平化設計中,往往傾向于使用單色調(diào),尤其是純色,并且不做任何淡化或柔化處理(最受歡迎的顏色是純色和二次色),另外還有一些顏色也比較受歡迎,如復古色(淺橙、紫色、綠色、藍色等),如圖1-4至1-6所示。

圖1-4

圖1-5

圖1-6
》極簡的排版
由于扁平化設計使用的是特別簡單的元素,排版就成了很重要的一環(huán),排版的好壞直接影響視覺效果,甚至可能間接影響用戶體驗。
字體是排版中很重要的一部分,它和其他元素相輔相成。想想看,一款花體字在扁平化的界面中是非常突兀的。圖1-7至1-9所示是一些扁平化網(wǎng)站使用無襯線字體的例子。無襯線字體家族龐大,分支眾多,其中有些字體會在特殊的情景下產(chǎn)生意想不到的效果,但注意,過猶不及,不要使用那些極為生僻的字體,不能因為字體的新奇而影響了信息的傳達。

圖1-7

圖1-8

圖1-9
2.扁平化設計的未來
作為一名普通的設計師,可能不能去預測乃至引導設計的趨勢和方向,但可以從設計的發(fā)展史中找到一些答案。建筑設計和平面設計作為設計的分支,都經(jīng)歷過類似從擬物化設計到扁平化設計的發(fā)展,也許可以為我們提供一些參考。
用版式設計來舉例,版式設計的發(fā)展大概分為5個階段。
第1階段:西方歷史中最早的排版出現(xiàn)在古巴比倫,基本沒有排版的概念只需要字排列整齊、方便閱讀即可。
第2階段:在古埃及,這時候已經(jīng)有圖文繞排的概念,也有了裝飾的嘗試。
第3階段:到中世紀歐洲文藝復興時期,華麗裝飾達到極致,無論是文字還是配圖都非常精致,甚至一個句號都裝飾得相當華麗。
第4階段:包豪斯設計興起,也是現(xiàn)代主義的誕生,網(wǎng)格法排版出現(xiàn),人們察覺到內(nèi)容才是根本,設計或排版是為內(nèi)容服務的,所有的裝飾性元素統(tǒng)統(tǒng)被去掉,圖案變得扁平,跟Metro的想法一樣,用內(nèi)容裝飾內(nèi)容是這個時期的一大特點。
第5階段:人們對千篇- -律的簡潔設計感到乏味,版式設計向著多元的方向發(fā)展,既有簡潔、以內(nèi)容為中心的版式設計,也有華麗裝飾、渲染氣氛的版式設計出現(xiàn)。版式設計完全取決于需求方的需求。
從版式設計的發(fā)展史來看,現(xiàn)在的扁平風格大概屬于第4個階段,而網(wǎng)頁設計或UI設計將會像版式設計一樣,向多元的方向發(fā)展,也就是第5個階段。市場上既會有簡潔、扁平化的風格,又會有擬物、精致的風格,以及更多意想不到的風格出現(xiàn)。每種風格都會有自己的市場,每個人都能在市場上找到符合自己審美和習慣的風格,這種多元化的萌芽已經(jīng)開始出現(xiàn),例如,錘子手機,如圖1-10所示。

圖1-10