案例分析:聊聊扁平化設(shè)計(jì)的六點(diǎn)優(yōu)勢(shì)
著名的藝術(shù)家 Edgar Degas 曾經(jīng)說(shuō)過(guò),藝術(shù)并不是你所看到的東西,而是你讓別人看到所看到的東西。平面設(shè)計(jì)能夠通過(guò)調(diào)整形狀、陰影、字體的筆觸、字母間距來(lái)調(diào)整觀看者的情緒和感受,在這一點(diǎn)上,它和藝術(shù)是共通的。作為目前設(shè)計(jì)的大趨勢(shì),扁平化設(shè)計(jì),無(wú)疑也具備著同樣的特征。
扁平化設(shè)計(jì)
現(xiàn)如今的扁平化設(shè)計(jì)并不是單純的一種風(fēng)格,而是涵蓋了諸多常見風(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)歷了積極而快速的發(fā)展,目前正“入侵”著越來(lái)越多的平面設(shè)計(jì)領(lǐng)域。
今天的扁平化設(shè)計(jì)已經(jīng)成了網(wǎng)頁(yè)和UI設(shè)計(jì)中的主流設(shè)計(jì)方向,甚至可以說(shuō)是我們?nèi)粘I钪胁豢苫蛉钡牟糠?,并且開始影響我們生活中的日常決策,并且具備解決各種問(wèn)題的潛力。
Toonie Alarm
扁平化設(shè)計(jì)的起源
扁平化設(shè)計(jì)的發(fā)展歷程當(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)格開始在歐洲流傳開來(lái),贏得了更多的擁簇。這次設(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)約,可讀性和客觀性。這兩所設(shè)計(jì)院校為這種風(fēng)格貢獻(xiàn)了許多東西,包括非襯線字體,柵格和不對(duì)稱式的布局。這種設(shè)計(jì)風(fēng)格還強(qiáng)調(diào)使用排版和攝影來(lái)作為主要的視覺(jué)傳播手段,所以,瑞士風(fēng)格下最有影響力的作品通常都是以海報(bào)的形式呈現(xiàn)出來(lái)的,他們認(rè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
這些海報(bào)已經(jīng)清晰的展現(xiàn)出,這種風(fēng)格的粉絲是有多么熱愛簡(jiǎn)約的設(shè)計(jì),線條方正、高可讀性的字體,以及多樣的幾何圖形和層次分明的視覺(jué)結(jié)構(gòu)。瑞士風(fēng)格,包括后來(lái)的包豪斯,隨后迅速在世界范圍內(nèi)得到了越來(lái)越廣泛的歡迎,并且在21世紀(jì)初獲得了新生。這就是今天所說(shuō)的扁平化設(shè)計(jì)。
雖然這種風(fēng)格最初呈現(xiàn)的方式大多是海報(bào)、郵票、明信片、書籍裝禎設(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í)候,微軟便開始從瑞士風(fēng)格、現(xiàn)代主義和包豪斯中汲取靈感,隨后在2010年推出了Windows Phone 7,它就是典型的扁平化設(shè)計(jì)。這個(gè)版本的操作系統(tǒng)中采用了大量的簡(jiǎn)單的形狀,清晰的排版,明亮而對(duì)比明顯的色彩,復(fù)雜的細(xì)節(jié)和紋理都被移除了。三年之后所發(fā)布的iOS 7 中友好而直觀的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ì)思想的繼承者和發(fā)展者。
GIF for the Weather?App
扁平化設(shè)計(jì)最基本、最突出的特征包括:
- 簡(jiǎn)單的元素和形狀
- 極簡(jiǎn)風(fēng)
- 強(qiáng)功能性
- 大膽而易讀的排版
- 清晰而嚴(yán)謹(jǐn)?shù)囊曈X(jué)層次
- 關(guān)注細(xì)節(jié)
- 明亮的色彩和對(duì)比度明顯的視覺(jué)感知
- 避免使用紋理、漸變和復(fù)雜的樣式
- 采用柵格、幾何特征以及視覺(jué)平衡的原則
Restaurant Menu animation
扁平化設(shè)計(jì)的優(yōu)勢(shì)
扁平化設(shè)計(jì)的優(yōu)勢(shì)有很多,這也是它在數(shù)字設(shè)計(jì)領(lǐng)域流行的主要原因。現(xiàn)如今,扁平化設(shè)計(jì)也開始逐步影響現(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ì)于開發(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線框圖
即使是在最初的線框圖繪制階段,扁平化設(shè)計(jì)的設(shè)計(jì)規(guī)原則和邏輯轉(zhuǎn)換同樣是適用的。線框圖設(shè)計(jì)本是UI和UX設(shè)計(jì)的最初也是最關(guān)鍵的部分之一,它將APP和網(wǎng)頁(yè)的基本執(zhí)行方案框架呈現(xiàn)在團(tuán)隊(duì)和客戶面前,它本身就具備一定的視覺(jué)化設(shè)計(jì)的特征。線框圖快速有效地將核心和基本的元素整合到一個(gè)簡(jiǎ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ì)師可以使用鮮艷的色彩創(chuàng)造不同的視覺(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插畫
越來(lái)越多的UI開始采用扁平化的風(fēng)格的插畫,它們具有明顯的可定制性和針對(duì)性,有明確的業(yè)務(wù)目標(biāo)和視角,可以更為高效地解決用戶的痛點(diǎn)。
Cafe Coupon?App
Weather App
Moneywise App
Illustration for SwiftyBeaver
Timeline App
Healthy Stickers
主題插畫
這些主題性非常強(qiáng)的扁平化插畫滿足了用戶在美學(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
插畫印刷品
現(xiàn)代扁平化設(shè)計(jì)已經(jīng)開始入侵平面設(shè)計(jì)領(lǐng)域,在日常的插畫印刷品中也有很多采用這一風(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í)尚外觀不僅具備靈活的特性,而且更容易得到數(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ì)開啟了新的視角,尤其是在以用戶為中心的UX設(shè)計(jì)中,它確實(shí)有著獨(dú)特的優(yōu)勢(shì)。
原文作者:Tubik Studio
原文地址:uxplanet
翻譯:@陳子木
譯文地址:http://www.uisdc.com/flat-design-history-benefits