扁平化設計

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

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

Toonie Alarm

扁平化設計的起源

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

  在Design is History 中，瑞典風格是這樣被描述的：“……這種風格強調(diào)簡約，可讀性和客觀性。這兩所設計院校為這種風格貢獻了許多東西，包括非襯線字體，柵格和不對稱式的布局。這種設計風格還強調(diào)使用排版和攝影來作為主要的視覺傳播手段，所以，瑞士風格下最有影響力的作品通常都是以海報的形式呈現(xià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

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

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

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

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

  雖然此后的Material Design中陰影的運用，一定程度上偏離了扁平化設計的思想，但是總體上，它依然是扁平化設計思想的繼承者和發(fā)展者。

扁平化設計最基本、最突出的特征包括：

1. 簡單的元素和形狀

2. 極簡風

3. 強功能性

4. 大膽而易讀的排版

5. 清晰而嚴謹?shù)囊曈X層次

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

7. 明亮的色彩和對比度明顯的視覺感知

8. 避免使用紋理、漸變和復雜的樣式

9. 采用柵格、幾何特征以及視覺平衡的原則

Restaurant Menu animation

扁平化設計的優(yōu)勢

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

1. 可讀性和易讀性

2. 通過形狀、色彩和字體來呈現(xiàn)清晰的視覺層次

3. 有效的支持web和移動端的導航設計

4. 自適應性，適合響應式設計

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

6. 對于開發(fā)更加友好，降低在設備上的負載

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

設計實戰(zhàn)：扁平化設計的應用

  扁平化設計的多樣性和靈活性使得它在設計領域占據(jù)的比重越來越高。

  接下來，我們通過Tubik Studio 的設計師的設計作品來梳理一下它的功用：

UX線框圖

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

UI界面設計

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

UI交互概念設計

扁平化在UI設計中的應用范疇非常廣，尤其是在移動端的UI設計上。

Pull To Refresh

Portrait vs Landscape interaction

GIF for Pull Down

Tab bar interactions

UI導航元素

扁平化設計的另外一個重要應用就是圖標和導航元素的使用。簡約和視覺化的特征讓它們在UI設計中更加靈活，在小尺寸下具有良好的可讀性，設計師可以使用鮮艷的色彩創(chuàng)造不同的視覺效果。

The set of flat icons

Flat icons applied in Veggie App

Flat icons and tabs design for Blog App

結(jié)語

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