聊聊扁平化設(shè)計(jì)的六點(diǎn)優(yōu)勢(shì)

扁平化設(shè)計(jì)

現(xiàn)如今的扁平化設(shè)計(jì)并不是單純的一種風(fēng)格，而是涵蓋了諸多常見(jiàn)風(fēng)格、具備多種不同目標(biāo)或任務(wù)的一個(gè)設(shè)計(jì)集合體。目前扁平化設(shè)計(jì)被廣泛應(yīng)用于數(shù)字設(shè)計(jì)領(lǐng)域，并且常常通簡(jiǎn)約或者極簡(jiǎn)的視覺(jué)表達(dá)方式結(jié)合起來(lái)運(yùn)用，由于移動(dòng)端設(shè)計(jì)風(fēng)格的演變歷程的原因，扁平化設(shè)計(jì)常常被視作為擬物化設(shè)計(jì)的對(duì)立面。扁平化設(shè)計(jì)在過(guò)去的幾年當(dāng)中經(jīng)歷了積極而快速的進(jìn)展，目前正“入侵”著越來(lái)越多的平面設(shè)計(jì)領(lǐng)域。

今天的扁平化設(shè)計(jì)已經(jīng)成了網(wǎng)頁(yè)和UI設(shè)計(jì)中的主流設(shè)計(jì)方向，甚至可以說(shuō)是我們?nèi)粘Ｉ钪胁豢苫蛉钡牟糠?，并且開(kāi)始影響我們生活中的日常決策，并且具備解決各種問(wèn)題的潛力。

扁平化設(shè)計(jì)的起源

扁平化設(shè)計(jì)的進(jìn)展歷程當(dāng)然是有跡可循的，它的根源通常被追溯到名為“瑞士風(fēng)格”的一種裝飾設(shè)計(jì)風(fēng)格上。20世紀(jì)初的瑞士現(xiàn)代主義運(yùn)動(dòng)催生了這種設(shè)計(jì)風(fēng)格，隨著二戰(zhàn)結(jié)束，這種設(shè)計(jì)風(fēng)格開(kāi)始在歐洲流傳開(kāi)來(lái)，贏(yíng)得了更多的擁簇。這次設(shè)計(jì)風(fēng)格的革命是由蘇黎世藝術(shù)與工藝學(xué)院的Josef Müller-Brockmann 和 巴塞爾設(shè)計(jì)學(xué)院的 Armin Hofmann 所領(lǐng)導(dǎo)的。

在Design is History 中，瑞典風(fēng)格是這樣被描述的：“……這種風(fēng)格強(qiáng)調(diào)簡(jiǎn)約，可讀性和客觀(guān)性。這兩所設(shè)計(jì)院校為這種風(fēng)格貢獻(xiàn)了許多東西，包括非襯線(xiàn)字體，柵格和不對(duì)稱(chēng)式的布局。這種設(shè)計(jì)風(fēng)格還強(qiáng)調(diào)使用排版和攝影來(lái)作為主要的視覺(jué)傳播手段，所以，瑞士風(fēng)格下最有影響力的作品通常都是以海報(bào)的形式呈現(xiàn)出來(lái)的，他們認(rèn)為這是最有效的溝通手段?！?

Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955

Joseph Müller-Brockmann, Zürich Town Hall Poster, 1955

Armin Hoffman, 1959 poster for the ballet Giselle

這些海報(bào)已經(jīng)清楚 的展現(xiàn)出，這種風(fēng)格的粉絲是有多么熱愛(ài)簡(jiǎn)約的設(shè)計(jì)，線(xiàn)條方正、高可讀性的字體，以及多樣的幾何圖形和層次分明的視覺(jué)結(jié)構(gòu)。瑞士風(fēng)格，包括后來(lái)的包豪斯，隨后迅速在世界范圍內(nèi)得到了越來(lái)越廣泛的歡迎，并且在21世紀(jì)初獲得了新生。這就是今天所說(shuō)的扁平化設(shè)計(jì)。

雖然這種風(fēng)格最初呈現(xiàn)的方式大多是海報(bào)、郵票、明信片、書(shū)籍裝禎設(shè)計(jì)，但是它的出現(xiàn)，確實(shí)大大擴(kuò)展了數(shù)字設(shè)計(jì)領(lǐng)域的視野，特別是在UI設(shè)計(jì)的領(lǐng)域。

扁平化和極簡(jiǎn)主義設(shè)計(jì)讓網(wǎng)頁(yè)和移動(dòng)端應(yīng)用擁有了可用性更強(qiáng)的設(shè)計(jì)解決方案，這樣的設(shè)計(jì)更加卓有成效。扁平化設(shè)計(jì)和之前所流行的細(xì)節(jié)豐富的擬物化設(shè)計(jì)不同，它對(duì)交互和功能的支持更加優(yōu)秀，讓設(shè)計(jì)擁有了更多的可能性。

最初走出扁平化設(shè)計(jì)這一步的是微軟，在08年的時(shí)候，微軟便開(kāi)始從瑞士風(fēng)格、現(xiàn)代主義和包豪斯中汲取靈感，隨后在2010年推出了Windows Phone 7，它就是典型的扁平化設(shè)計(jì)。這個(gè)版本的操作系統(tǒng)中采納了大量的簡(jiǎn)單的形狀，清楚 的排版，明亮而對(duì)比明顯的色彩，復(fù)雜的細(xì)節(jié)和紋理都被移除了。三年之后所公布的iOS 7 中友好而直觀(guān)的UI設(shè)計(jì)和微軟雖然不盡相同，但是在設(shè)計(jì)理念上兩個(gè)系統(tǒng)互為印證，成為了扁平化設(shè)計(jì)在數(shù)字設(shè)計(jì)領(lǐng)域應(yīng)用的明證。

雖然此后的Material Design中陰影的運(yùn)用，一定程度上偏離了扁平化設(shè)計(jì)的思想，但是總體上，它依舊 是扁平化設(shè)計(jì)思想的繼承者和進(jìn)展者。

GIF for the Weather App

扁平化設(shè)計(jì)最基本、最突出的特征包括：

1. 簡(jiǎn)單的元素和形狀

2. 極簡(jiǎn)風(fēng)

3. 強(qiáng)功能性

4. 大膽而易讀的排版

5. 清楚 而嚴(yán)謹(jǐn)?shù)囊曈X(jué)層次

6. 關(guān)注細(xì)節(jié)

7. 明亮的色彩和對(duì)比度明顯的視覺(jué)感知

8. 幸免使用紋理、漸變和復(fù)雜的樣式

9. 采納柵格、幾何特征以及視覺(jué)平衡的原則

Restaurant Menu animation

扁平化設(shè)計(jì)的優(yōu)勢(shì)

扁平化設(shè)計(jì)的優(yōu)勢(shì)有很多，這也是它在數(shù)字設(shè)計(jì)領(lǐng)域流行的主要原因。現(xiàn)如今，扁平化設(shè)計(jì)也開(kāi)始逐步影響現(xiàn)代排版印刷設(shè)計(jì)了。那么扁平化設(shè)計(jì)的優(yōu)勢(shì)在那里呢？

可讀性和易讀性

通過(guò)形狀、色彩和字體來(lái)呈現(xiàn)清楚 的視覺(jué)層次

有效的支持web和移動(dòng)端的導(dǎo)航設(shè)計(jì)

自適應(yīng)性，適合響應(yīng)式設(shè)計(jì)

在各種屏幕上都具備良好的可讀性

對(duì)于開(kāi)發(fā)更加友好，降低在設(shè)備上的負(fù)載

除了上面所說(shuō)的一切，扁平化設(shè)計(jì)還為創(chuàng)意設(shè)計(jì)提供了廣闊的空間。

設(shè)計(jì)實(shí)戰(zhàn)：扁平化設(shè)計(jì)的應(yīng)用

扁平化設(shè)計(jì)的多樣性和靈活性使得它在設(shè)計(jì)領(lǐng)域占據(jù)的比重越來(lái)越高。

接下來(lái)，我們通過(guò)Tubik Studio 的設(shè)計(jì)師的設(shè)計(jì)作品來(lái)梳理一下它的功用：

UX線(xiàn)框圖

即使是在最初的線(xiàn)框圖繪制階段，扁平化設(shè)計(jì)的設(shè)計(jì)規(guī)原則和邏輯轉(zhuǎn)換同樣是適用的。線(xiàn)框圖設(shè)計(jì)本是UI和UX設(shè)計(jì)的最初也是最關(guān)鍵的部分之一，它將APP和網(wǎng)頁(yè)的基本執(zhí)行方案框架呈現(xiàn)在團(tuán)隊(duì)和客戶(hù)面前，它本身就具備一定的視覺(jué)化設(shè)計(jì)的特征。線(xiàn)框圖快速有效地將核心和基本的元素整合到一個(gè)簡(jiǎn)約直觀(guān)的框架中來(lái)。

UI界面設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中大量充斥這扁平化設(shè)計(jì)，你可以在其中看到各式各樣的扁平化設(shè)計(jì)元素的運(yùn)用。

UI交互概念設(shè)計(jì)

扁平化在UI設(shè)計(jì)中的應(yīng)用范疇非常廣，尤其是在移動(dòng)端的UI設(shè)計(jì)上。

Pull To Refresh

Portrait vs Landscape interaction

GIF for Pull Down

Tab bar interactions

UI導(dǎo)航元素

扁平化設(shè)計(jì)的另外一個(gè)重要應(yīng)用就是圖標(biāo)和導(dǎo)航元素的使用。簡(jiǎn)約和視覺(jué)化的特征讓它們?cè)赨I設(shè)計(jì)中更加靈活，在小尺寸下具有良好的可讀性，設(shè)計(jì)師可以使用鮮艷的色彩制造不同的視覺(jué)效果。

The set of flat icons

Flat icons applied in Veggie App

Flat icons and tabs design for Blog App

Flat icons applied in Saily App

Flat UI design elements for PassFold

UI插畫(huà)

越來(lái)越多的UI開(kāi)始采納扁平化的風(fēng)格的插畫(huà)，它們具有明顯的可定制性和針對(duì)性，有明確的業(yè)務(wù)目標(biāo)和視角，可以更為高效地解決用戶(hù)的痛點(diǎn)。

Cafe Coupon App

Weather App

Moneywise App

Illustration for SwiftyBeaver

Timeline App

Healthy Stickers

主題插畫(huà)

這些主題性非常強(qiáng)的扁平化插畫(huà)滿(mǎn)足了用戶(hù)在美學(xué)上的需求，同時(shí)具有點(diǎn)題的功能。

Free Colorful Wallpapers

Free Space Wallpapers

Star Wars Rogue One

Underwater Explorer

Halloween Haunted Castle

Rio 2016

Californication Bus

San Francisco Painted Ladies

插畫(huà)印刷品

現(xiàn)代扁平化設(shè)計(jì)已經(jīng)開(kāi)始入侵平面設(shè)計(jì)領(lǐng)域，在日常的插畫(huà)印刷品中也有很多采納這一風(fēng)格。

Tales of the Jazz Age Book Cover

Pikachu Poster

Muscles Magazine

Suicide Squad Poster

Spring Girl greeting card

品牌設(shè)計(jì)

扁平化的設(shè)計(jì)所提供的時(shí)尚外觀(guān)不僅具備靈活的特性，而且更容易得到數(shù)字化的支持，應(yīng)用在不同的渠道，因此許多品牌也采取了扁平化設(shè)計(jì)。

Logo mascot for Saily App

Logo lettermark for PassFold

Logo design for Andre

Logo for Design4Users

Logo lettering and mascot for Toonie Alarm

結(jié)語(yǔ)

所有的這些案例證明了扁平化設(shè)計(jì)的優(yōu)勢(shì)，但是如同現(xiàn)代主義設(shè)計(jì)和包豪斯一樣，扁平化設(shè)計(jì)有它本身的缺陷和無(wú)法克服的問(wèn)題，不要過(guò)度迷信。然而，扁平化設(shè)計(jì)開(kāi)啟了新的視角，尤其是在以用戶(hù)為中心的UX設(shè)計(jì)中，它確實(shí)有著獨(dú)特的優(yōu)勢(shì)。