平面化 VS 擬物化 的戰(zhàn)爭(zhēng)已經(jīng)過(guò)去好幾年了。扁平化設(shè)計(jì)徹底占據(jù)了如今的主流設(shè)計(jì)趨勢(shì)。但是，大局已定的扁平化設(shè)計(jì)，是否已經(jīng)固化不變了呢？并非如此。在過(guò)去的幾年當(dāng)中，扁平化設(shè)計(jì)風(fēng)悄然地進(jìn)化，變得越來(lái)越多樣，也越來(lái)越有吸引力。

如今再來(lái)重新審視早期的扁平化設(shè)計(jì)，漸變、陰影和紋理的缺乏，讓它在視覺(jué)上顯得略為單調(diào)，而幾年的時(shí)間沉淀，扁平化設(shè)計(jì)中開(kāi)始適時(shí)地融入了許多其他的設(shè)計(jì)元素，豐富了整個(gè)扁平化設(shè)計(jì)的思想，并且創(chuàng)造了不少值得一體的獨(dú)特扁平化設(shè)計(jì)分支。不論你所設(shè)計(jì)的是APP還是網(wǎng)站，在2017年所處的這個(gè)時(shí)間節(jié)點(diǎn)，枝葉繁茂的扁平化設(shè)計(jì)中，總會(huì)有那么幾種風(fēng)味獨(dú)特的設(shè)計(jì)風(fēng)尚，能夠讓你傾心。

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

曾一直被蘋果公司所引領(lǐng)的擬物化設(shè)計(jì)風(fēng)潮，在2010年的時(shí)候開(kāi)始受到扁平化設(shè)計(jì)的沖擊。逼真的紋理、多樣的漸變和繁復(fù)的細(xì)節(jié)逐漸為人所厭倦，線條簡(jiǎn)約的2D扁平化設(shè)計(jì)開(kāi)始取代“抄現(xiàn)實(shí)”的設(shè)計(jì)手法，一時(shí)間，是擬物還是扁平的爭(zhēng)論充斥設(shè)計(jì)和技術(shù)圈，并快速蔓延到圈外的普通用戶，各執(zhí)一詞，莫衷一是。

隨著喬布斯的過(guò)世、iOS 7和Android 4.0的發(fā)布，設(shè)計(jì)趨勢(shì)最終還是向著扁平化邁出了關(guān)鍵性的一步。醒目而高飽和度的色彩和形式感更強(qiáng)的排版取代細(xì)節(jié)和紋理成為抓人眼球的元素。

最初的扁平化設(shè)計(jì)，對(duì)于細(xì)節(jié)的剝離是非常徹底的，這使得設(shè)計(jì)師能用的元素大多只剩下色彩和圖形，這種局面對(duì)于設(shè)計(jì)師和用戶都是困擾，細(xì)節(jié)的缺失讓設(shè)計(jì)并不足以支撐全部的信息傳達(dá)，這種局面下，許多微妙的扁平化分支就誕生了。

扁平化設(shè)計(jì)仍然是近10年來(lái)最具革命性的視覺(jué)設(shè)計(jì)趨勢(shì)，并且它還將一直向前推進(jìn)。

Material Design

想要系統(tǒng)了解扁平化設(shè)計(jì)的快速發(fā)展歷程，Material Design 是最值得研究的案例。這一扁平化設(shè)計(jì)語(yǔ)言是谷歌為其旗下的數(shù)字產(chǎn)品的界面所創(chuàng)造的統(tǒng)一的視覺(jué)設(shè)計(jì)語(yǔ)言。

Material Design 吸取了扁平化設(shè)計(jì)最精華的部分，還巧妙地保留了擬物化的隱喻——紙，從而創(chuàng)建出如今所看到的Material Design，其中扁平化的元素被加上了一個(gè)微妙的維度，其外化的表現(xiàn)就是微妙的陰影。貼合物理運(yùn)動(dòng)規(guī)律的動(dòng)效和微妙的視覺(jué)維度令Material Design 仿佛能夠跳出界面同用戶進(jìn)行互動(dòng)，在扁平化的風(fēng)尚之下，它讓數(shù)字產(chǎn)品擁有了和現(xiàn)實(shí)世界在質(zhì)感上有了某些相通的地方。

仔細(xì)審視 Material Design ，你會(huì)發(fā)現(xiàn)它許多“擬物”的特征很好地軟化了近乎苛刻的早期扁平化設(shè)計(jì)。

Material Design 有著明確的概念，同時(shí)又隨著Google 旗下產(chǎn)品的演進(jìn)而不斷地優(yōu)化和更新。從某種意義上而言，Material Design 是扁平化設(shè)計(jì)的主要和重要的推動(dòng)者，如果你想第一時(shí)刻了解它的變化，你可以跟著Android 的版本更新還適時(shí)查看它的調(diào)整。

不容錯(cuò)過(guò)的Material Design 學(xué)習(xí)筆記《重磅教程!幫你全面徹底搞定Material design的學(xué)習(xí)筆記》

扁平化 2.0

扁平化設(shè)計(jì)在幾年的時(shí)間沉淀之后逐步成熟，最終在2015年被設(shè)計(jì)師們階段性地歸納為“扁平化 2.0 ”。

“扁平化2.0 具有更強(qiáng)的易用性，因?yàn)樗鼘⒈馄交O(shè)計(jì)的主要特征和高度可用的視覺(jué)線索結(jié)合到了一起，兼顧到設(shè)計(jì)的美觀和功能。同時(shí)，扁平化2.0 的高適用性，讓它幾乎可以和任何概念結(jié)合起來(lái)使用。和早期的純粹扁平化設(shè)計(jì)不同，扁平化 2.0 中融入了不少微妙的漸變和不多的紋理，提高了它的整體可用性?！?/span>

當(dāng)年優(yōu)設(shè)的文章在此：《快來(lái)學(xué)習(xí)！25個(gè)細(xì)致微妙的扁平化2.0風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)》

扁平化 2.0 的說(shuō)法最早源于設(shè)計(jì)師 Ryan Allen ：“扁平化 2.0 是演變的結(jié)果，它并非革命性的改變。扁平化設(shè)計(jì)和之前瘋狂流行的擬物化設(shè)計(jì)截然不同，而扁平化 2.0 是扁平化設(shè)計(jì)上的一個(gè)分支。如果說(shuō)扁平化設(shè)計(jì)是圣誕樹(shù)的話，那么扁平化 2.0 就是圣誕樹(shù)上的禮盒與糖果。它并不是浮華的裝飾，但是讓整個(gè)圣誕樹(shù)充滿了趣味和驚喜?！?/span>

扁平化 2.0 和 Material Design 一樣，打破了早期扁平化設(shè)計(jì)中的生硬規(guī)定，并且通過(guò)適度的調(diào)整讓視覺(jué)效果更加吸引人了：

·高亮和強(qiáng)調(diào)
·適度的漸變
·同色系下多種色調(diào)和色度
·微妙的陰影
·更廣泛的配色方案

扁平化 2.0 本身并不存在于UI和圖標(biāo)設(shè)計(jì)的世界當(dāng)中，實(shí)際上它已經(jīng)延伸到視頻、攝影和圖片當(dāng)中。

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

進(jìn)入2017年之后，扁平化設(shè)計(jì)仍然是主流，在設(shè)計(jì)手法和細(xì)節(jié)上，隨著時(shí)代的發(fā)展而演進(jìn)，越來(lái)越成熟和多樣。

下面，是屬于2017年扁平化設(shè)計(jì)的特征：

扁平化元素

早期的許多扁平化元素在如今的扁平化設(shè)計(jì)項(xiàng)目中，已經(jīng)并不適用了。按鈕的樣式比以往更加簡(jiǎn)單，圓角矩形的按鈕搭配黑色或者白色的文本，在今天更加流行。LOGO和圖標(biāo)采用了扁平化的風(fēng)格，甚至只是由線條構(gòu)成，這樣不僅和整體風(fēng)格更搭，而且在很多時(shí)候能夠突出顯示。

精簡(jiǎn)的導(dǎo)航

漢堡圖標(biāo)已經(jīng)成為當(dāng)前網(wǎng)站的標(biāo)準(zhǔn)配置，設(shè)計(jì)師可以將非關(guān)鍵因素隱藏在漢堡圖標(biāo)之后的菜單里面。

當(dāng)然，如果你不喜歡漢堡圖標(biāo)導(dǎo)航，也可以這么玩兒：《網(wǎng)頁(yè)｜厭倦了漢堡圖標(biāo)，這4個(gè)替代方案也許不錯(cuò)》

大膽明亮的配色

由于扁平化設(shè)計(jì)對(duì)于配色的可接受性更強(qiáng)，網(wǎng)頁(yè)設(shè)計(jì)有了更多的可能性。這使得如今的網(wǎng)頁(yè)設(shè)計(jì)整體上比以往更加多彩有趣，許多網(wǎng)頁(yè)首頁(yè)甚至采用了圖片+色彩疊加的設(shè)計(jì)。

當(dāng)然配色這件事還是有很對(duì)技巧的：《在配色這件事情上，總會(huì)有一些有趣且有用的小技巧》

極簡(jiǎn)的首頁(yè)設(shè)計(jì)

作為目前通行的設(shè)計(jì)思路，絕大多數(shù)網(wǎng)頁(yè)不再將大量的內(nèi)容塞滿首頁(yè)，即使擁有多個(gè)元素，也盡量讓首頁(yè)專注于單個(gè)任務(wù)，不再讓用戶在多個(gè)不同的目標(biāo)或任務(wù)之間分心。

極簡(jiǎn)的設(shè)計(jì)也有講究：《符合極簡(jiǎn)主義風(fēng)格的設(shè)計(jì)有什么講究？》

更優(yōu)秀的排版

將復(fù)雜的樣式從設(shè)計(jì)中剝離之后，字體排版的形式感就更加突出了，這種局面使得設(shè)計(jì)師在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，更加傾向于通過(guò)優(yōu)質(zhì)的排版來(lái)強(qiáng)化設(shè)計(jì)感。

關(guān)于字體排版趨勢(shì)：《2017年流行的這些字體排版趨勢(shì)，你都知道嘛？》

更少擬物特效

雖然如今的動(dòng)畫(huà)和特效越來(lái)越多，但是稍有特效去模擬一個(gè)現(xiàn)實(shí)生活中的特定的交互場(chǎng)景或者效果，它們通常是為了功能而存在，并且專注于體驗(yàn)本身。從某種意義上來(lái)說(shuō)，擬物化的設(shè)計(jì)并未回歸。

動(dòng)效與反饋

Material Design 是動(dòng)效和反饋設(shè)計(jì)中的翹楚。將動(dòng)效和反饋結(jié)合起來(lái)從而更好的引導(dǎo)用戶、同用戶溝通，這是如今交互設(shè)計(jì)和UX設(shè)計(jì)的關(guān)鍵。

動(dòng)效取悅用戶的效果可不是蓋的：《沿著這7個(gè)思路，你可以正確的使用動(dòng)效取悅用戶》

大量的留白

在屏幕越來(lái)越大的趨勢(shì)之下，通過(guò)屏幕留白來(lái)突出關(guān)鍵內(nèi)容是極簡(jiǎn)設(shè)計(jì)中最常用的手法，而在簡(jiǎn)約風(fēng)盛行的今天，留白也成了許多扁平化風(fēng)格網(wǎng)頁(yè)中最常見(jiàn)的設(shè)計(jì)手法。當(dāng)然，留白并不一定非得是白色。

這些留白的實(shí)戰(zhàn)案例不容錯(cuò)過(guò)：《無(wú)物勝有物！20個(gè)幫你學(xué)會(huì)運(yùn)用留白的輕網(wǎng)站》

扁平化圖層

毫無(wú)裝飾的扁平化圖層同樣存在于許多網(wǎng)頁(yè)當(dāng)中，它們能成為不同元素的載體，或者單純的營(yíng)造空間感。

超大的設(shè)計(jì)元素

超大的字體，超大的圖片，甚至超大的按鈕和圖標(biāo)，都已經(jīng)不是什么新鮮的設(shè)計(jì)手法了，它們借助過(guò)人的體積感和強(qiáng)有力的對(duì)比來(lái)制造視覺(jué)奇觀，是非常有用的設(shè)計(jì)技巧。這種設(shè)計(jì)手法在早期的扁平化設(shè)計(jì)就有了，現(xiàn)在使用很頻繁。

結(jié)語(yǔ)

扁平化設(shè)計(jì)和柵格系統(tǒng)是天生的盟友，它們讓今天的網(wǎng)頁(yè)顯得更加整飭、易用。

扁平化設(shè)計(jì)在今天的流行是有道理的，整個(gè)產(chǎn)品的設(shè)計(jì)、研發(fā)、運(yùn)營(yíng)都從中獲益，這也是它成為一種持續(xù)風(fēng)潮的根本原因。

原文地址：designshack

原文作者：CARRIE COUSINS

優(yōu)設(shè)譯文：@陳子木

·End·