編者按：又是一篇關(guān)于扁平化設(shè)計的文章，與優(yōu)設(shè)之前的諸多文章不同，今天的文章帶有階段性的總結(jié)的性質(zhì)，文章源自著名設(shè)計工作室 Tubik Studio，多圖預(yù)警~

著名的藝術(shù)家 Edgar Degas 曾經(jīng)說過，藝術(shù)并不是你所看到的東西，而是你讓別人看到所看到的東西。平面設(shè)計能夠通過調(diào)整形狀、陰影、字體的筆觸、字母間距來調(diào)整觀看者的情緒和感受，在這一點上，它和藝術(shù)是共通的。作為目前設(shè)計的大趨勢，扁平化設(shè)計，無疑也具備著同樣的特征。

關(guān)于扁平化設(shè)計的一些思考：

1. 《僅此一篇，讀懂卡片式設(shè)計長盛不衰的秘密》
2. 《MATERIAL DESIGN從這11個方面打破了我的思維局限》
3. 《陰影與層次！當現(xiàn)實世界照進UI設(shè)計》

扁平化設(shè)計

現(xiàn)如今的扁平化設(shè)計并不是單純的一種風(fēng)格，而是涵蓋了諸多常見風(fēng)格、具備多種不同目標或任務(wù)的一個設(shè)計集合體。目前扁平化設(shè)計被廣泛應(yīng)用于數(shù)字設(shè)計領(lǐng)域，并且常常通簡約或者極簡的視覺表達方式結(jié)合起來運用，由于移動端設(shè)計風(fēng)格的演變歷程的原因，扁平化設(shè)計常常被視作為擬物化設(shè)計的對立面。扁平化設(shè)計在過去的幾年當中經(jīng)歷了積極而快速的發(fā)展，目前正“入侵”著越來越多的平面設(shè)計領(lǐng)域。今天的扁平化設(shè)計已經(jīng)成了網(wǎng)頁和UI設(shè)計中的主流設(shè)計方向，甚至可以說是我們?nèi)粘Ｉ钪胁豢苫蛉钡牟糠?，并且開始影響我們生活中的日常決策，并且具備解決各種問題的潛力。

Toonie Alarm

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

扁平化設(shè)計的發(fā)展歷程當然是有跡可循的，它的根源通常被追溯到名為“瑞士風(fēng)格”的一種裝飾設(shè)計風(fēng)格上。20世紀初的瑞士現(xiàn)代主義運動催生了這種設(shè)計風(fēng)格，隨著二戰(zhàn)結(jié)束，這種設(shè)計風(fēng)格開始在歐洲流傳開來，贏得了更多的擁簇。這次設(shè)計風(fēng)格的革命是由蘇黎世藝術(shù)與工藝學(xué)院的Josef Müller-Brockmann 和 巴塞爾設(shè)計學(xué)院的 Armin Hofmann 所領(lǐng)導(dǎo)的。在Design is History 中，瑞典風(fēng)格是這樣被描述的：“……這種風(fēng)格強調(diào)簡約，可讀性和客觀性。這兩所設(shè)計院校為這種風(fēng)格貢獻了許多東西，包括非襯線字體，柵格和不對稱式的布局。這種設(shè)計風(fēng)格還強調(diào)使用排版和攝影來作為主要的視覺傳播手段，所以，瑞士風(fēng)格下最有影響力的作品通常都是以海報的形式呈現(xiàn)出來的，他們認為這是最有效的溝通手段?！?/p>

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

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

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

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

設(shè)計史有意思：

1. 《傳奇再現(xiàn)！設(shè)計師不得不讀的APPLE WATCH 秘史》
2. 《技術(shù)與人性的碰撞！給設(shè)計師的用戶體驗設(shè)計發(fā)展簡史》
3. 《不忘初心！帶你一步步回顧交互設(shè)計史》

GIF for the Weather?App

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

·簡單的元素和形狀
·極簡風(fēng)
·強功能性
·大膽而易讀的排版
·清晰而嚴謹?shù)囊曈X層次
·關(guān)注細節(jié)
·明亮的色彩和對比度明顯的視覺感知
·避免使用紋理、漸變和復(fù)雜的樣式
·采用柵格、幾何特征以及視覺平衡的原則

Restaurant Menu animation

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

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

·可讀性和易讀性
·通過形狀、色彩和字體來呈現(xiàn)清晰的視覺層次
·有效的支持web和移動端的導(dǎo)航設(shè)計
·自適應(yīng)性，適合響應(yīng)式設(shè)計
·在各種屏幕上都具備良好的可讀性
·對于開發(fā)更加友好，降低在設(shè)備上的負載

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

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

扁平化設(shè)計的多樣性和靈活性使得它在設(shè)計領(lǐng)域占據(jù)的比重越來越高。接下來，我們通過Tubik Studio 的設(shè)計師的設(shè)計作品來梳理一下它的功用：

UX線框圖

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

UI界面設(shè)計

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

UI交互概念設(shè)計

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

Pull To?Refresh

Portrait vs Landscape interaction

GIF for Pull?Down

Tab bar interactions

UI導(dǎo)航元素

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

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插畫

越來越多的UI開始采用扁平化的風(fēng)格的插畫，它們具有明顯的可定制性和針對性，有明確的業(yè)務(wù)目標和視角，可以更為高效地解決用戶的痛點。

Cafe Coupon?App

Weather App

Moneywise App

Illustration for SwiftyBeaver

Timeline App

Healthy Stickers

主題插畫

這些主題性非常強的扁平化插畫滿足了用戶在美學(xué)上的需求，同時具有點題的功能。

Free Colorful Wallpapers

Free Space Wallpapers

Star Wars Rogue?One

Underwater Explorer

Halloween Haunted?Castle

Rio 2016

Californication Bus

San Francisco Painted?Ladies

插畫印刷品

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

Tales of the Jazz Age Book?Cover

Pikachu Poster

Muscles Magazine

Suicide Squad?Poster

Spring Girl greeting?card

品牌設(shè)計

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

Logo mascot for Saily?App

Logo lettermark for?PassFold

Logo design for?Andre

Logo for Design4Users

Logo lettering and mascot for Toonie?Alarm

結(jié)語

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

【繼續(xù)探索扁平化設(shè)計】

1. 《扁平化2.0時代！聊聊今年六個全新的扁平化設(shè)計風(fēng)格》
2. 《幫你立刻上手！扁平化設(shè)計的8個實用小技巧》
3. 《快來學(xué)習(xí)！25個細致微妙的扁平化2.0風(fēng)格網(wǎng)頁設(shè)計》
4. 《漲姿勢！扁平化設(shè)計和MATERIAL DESIGN有什么不一樣？》

原文地址：uxplanet
原文作者：Tubik Studio
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com