不知道是什么時(shí)候，好像一夜之間扁平化就流行起來(lái)了，不管是網(wǎng)站設(shè)計(jì)還是APP設(shè)計(jì)，到處都往扁平化發(fā)展，那么到底是怎么回事呢?為什么感覺(jué)一瞬間就流行起來(lái)呢?
其實(shí)扁平化并不是什么新鮮事物。對(duì)于網(wǎng)站設(shè)計(jì)而言，扁平化設(shè)計(jì)實(shí)用且好用。扁平化設(shè)計(jì) 2.0 中平衡了實(shí)用性與美觀性，其背后的設(shè)計(jì)哲學(xué)使其擁有長(zhǎng)久的生命力。
扁平化改變了什么?究竟有什么魔力?讓我們揭開扁平化設(shè)計(jì)的神秘面紗，看看其卓越之處，分析其技術(shù)核心，并探討哪些技術(shù)將薪火相傳。
當(dāng)我們?cè)谡務(wù)摗副馄交沟臅r(shí)候，我們?cè)谡務(wù)撌裁?
扁平化設(shè)計(jì)最早可追溯到瑞士極簡(jiǎn)設(shè)計(jì)風(fēng)格(也叫國(guó)際主義平面設(shè)計(jì)風(fēng)格)，扁平化設(shè)計(jì)在保留了舊有范式的同時(shí)又創(chuàng)造出了新的東西。把扁平化設(shè)計(jì)的五個(gè)元素剝離出來(lái)，從這五方面我們可以看出扁平化的真正奧義。
1. 長(zhǎng)陰影
在按鍵等大多數(shù) UI 設(shè)計(jì)元素中，長(zhǎng)陰影常常伴隨亮色調(diào)的控件出現(xiàn)。
陰影常常比較寬，且以 45 度角傾斜，鋒利的邊角使其一眼可辨。對(duì)陰影恰到好處的應(yīng)用可以起強(qiáng)調(diào)作用并使扁平的圖標(biāo)更具立體感。
然而，這種長(zhǎng)陰影有逐漸被淡雅的陰影取代的趨勢(shì)。拭目以待更短的陰影效果在未來(lái)的表現(xiàn)。
2. 亮色調(diào)
有趣的是，扁平化設(shè)計(jì)的出現(xiàn)使得大膽靚麗的色彩運(yùn)用得以重生。設(shè)計(jì)師們比以前更多地運(yùn)用了有趣又充滿活力的顏色。
事實(shí)上，一些設(shè)計(jì)師們甚至建立了專門的網(wǎng)站用以展示他們獨(dú)特的配色方案。
3. 簡(jiǎn)化排版
說(shuō)到排版，扁平化的排版不僅僅是把字體替換成無(wú)襯線的 Helvetica 或黑體。
當(dāng)然，扁平化的排版應(yīng)采用簡(jiǎn)單易讀的字體，這意味著無(wú)襯線和等寬字體稱為必然選擇。最好的字體應(yīng)該讓人將注意力集中到內(nèi)容本身。
盡管字體設(shè)計(jì)也是藝術(shù)的一種，設(shè)計(jì)師們應(yīng)該把可讀性放在第一位。扁平化設(shè)計(jì)使設(shè)計(jì)師們更加注重字體的選擇。甚至襯線字體也被簡(jiǎn)化。
4. 虛擬按鍵
透明且可點(diǎn)擊的虛擬按鍵，在提供了可視化的交互方塊的同時(shí)又不會(huì)遮擋住 UI 設(shè)計(jì)。
虛擬按鍵由于透明，簡(jiǎn)潔的特性，并不會(huì)吸引太多注意力。起初，虛擬按鍵以擬物設(shè)計(jì)革命者的姿態(tài)出現(xiàn)，其后在形狀與細(xì)節(jié)等方面有了長(zhǎng)足的進(jìn)步。虛擬按鍵與扁平化設(shè)計(jì)相輔相成，構(gòu)成了極簡(jiǎn)與抽象的設(shè)計(jì)風(fēng)格。
5. 極簡(jiǎn)與抽象
扁平化設(shè)計(jì)天生就是極簡(jiǎn)的。當(dāng)設(shè)計(jì)的靈感并非來(lái)源于現(xiàn)實(shí)生活，擬物化的設(shè)計(jì)質(zhì)感就理所應(yīng)當(dāng)被拋棄。
那么，剩下的就是用顏色，漸變，陰影，形狀，和其他視覺(jué)細(xì)微之處的框架內(nèi)容。扁平設(shè)計(jì)在本質(zhì)上，迫使設(shè)計(jì)師更具創(chuàng)造性 —— 設(shè)計(jì)服務(wù)于內(nèi)容呈現(xiàn)，而不是真實(shí)感的呈現(xiàn)。
極簡(jiǎn)主義的概念并不新鮮，但它因其潔凈美觀和網(wǎng)站的性能優(yōu)勢(shì)(如降低網(wǎng)頁(yè)加載時(shí)間)最近又開始流行 。這隨著扁平化設(shè)計(jì)重生，并使用了鮮艷的背景，簡(jiǎn)單的設(shè)計(jì)，并演變成大量留白的更簡(jiǎn)單的設(shè)計(jì)。
展望
扁平化設(shè)計(jì)最初的概念是用一個(gè)個(gè)沒(méi)有特征且清晰可辨的方塊呈現(xiàn)設(shè)計(jì)框架。但在與其他流行的設(shè)計(jì)語(yǔ)言融合之后，扁平化設(shè)計(jì)本身已經(jīng)發(fā)生了巨大改變。
扁平化設(shè)計(jì)一夜之間成為業(yè)界潮流，但它的發(fā)展成熟無(wú)疑還需要一些時(shí)日。扁平化設(shè)計(jì)的早期形式非常激進(jìn)的想要做出與擬物化渭涇分明的極簡(jiǎn)設(shè)計(jì)，但現(xiàn)在的扁平化設(shè)計(jì)逐漸加上了修飾與質(zhì)感。
讓我們看看出自設(shè)計(jì)師Ryan Allen的近乎扁平化設(shè)計(jì)(Almost Flat)或稱扁平化設(shè)計(jì)2.0。
大多數(shù)精美的近乎扁平化設(shè)計(jì)設(shè)計(jì)運(yùn)用在網(wǎng)頁(yè)領(lǐng)域，運(yùn)用“視差滾動(dòng)”可以在一個(gè)屏幕中顯示豐富的內(nèi)容。
Canal TP 公司運(yùn)用如字體與色調(diào)等簡(jiǎn)單的特色，與動(dòng)畫加上視差滾動(dòng)相結(jié)合，使兩種范式偉大結(jié)合。這種搭配有助于消除過(guò)分簡(jiǎn)單的扁平化帶來(lái)的副作用，使其更實(shí)用且適用于內(nèi)容復(fù)雜的站點(diǎn)。
扁平化設(shè)計(jì)不會(huì)過(guò)快消失，只是會(huì)增加動(dòng)畫與交互設(shè)計(jì)，以適應(yīng)更加復(fù)雜的網(wǎng)站。眾所周知，“設(shè)計(jì)追隨內(nèi)容”，扁平化則是呈現(xiàn)內(nèi)容的最佳設(shè)計(jì)范式。
網(wǎng)頁(yè)設(shè)計(jì)以實(shí)用為第一追求，每一個(gè)按鍵，點(diǎn)擊與滑動(dòng)都應(yīng)該有明確功能與視覺(jué)反饋。最重要的是，UI 控件需要有統(tǒng)一的風(fēng)格，讓用戶忽略頁(yè)面與設(shè)備的差異。這些基礎(chǔ)控件將被提取出各自特點(diǎn)構(gòu)成扁平化的圖標(biāo)。
看看「漢堡包式菜單按鈕」的出現(xiàn)——無(wú)論你是否同意這種做法，無(wú)疑，現(xiàn)在其已經(jīng)成為司空見(jiàn)慣的導(dǎo)航符號(hào)。
扁平化設(shè)計(jì)也在漸漸加入其他細(xì)節(jié)。
許多扁平化設(shè)計(jì)或近乎扁平化設(shè)計(jì)的網(wǎng)站包含大量圖片，這在傳統(tǒng)網(wǎng)站上是很少見(jiàn)的。扁平化的配色及排版與圖片完美結(jié)合，這不需要對(duì)圖片有太多修飾就可以獲得現(xiàn)代化的風(fēng)格。
比如，有些網(wǎng)站運(yùn)用近乎扁平化設(shè)計(jì)設(shè)計(jì)風(fēng)格，在網(wǎng)頁(yè)中采用深色背景圖片，扁平化的按鈕，導(dǎo)航及字體，令網(wǎng)站非常直觀簡(jiǎn)潔，現(xiàn)代且易用。
正如設(shè)計(jì)師Wells Riley所建議的，經(jīng)常審視你設(shè)計(jì)的實(shí)用性與易用性。美感只是設(shè)計(jì)的另一個(gè)維度，真正目的是解決用戶需求。
后記
扁平化設(shè)計(jì)實(shí)際上并沒(méi)有公認(rèn)的量化標(biāo)準(zhǔn)。它作為設(shè)計(jì)元素的一種可以運(yùn)用在各種更高層次的設(shè)計(jì)體系之中。將扁平化的設(shè)計(jì)元素嵌入各種設(shè)計(jì)之中常常有意想不到的驚喜，例如一個(gè)有過(guò)多內(nèi)容的網(wǎng)站，可以適當(dāng)運(yùn)用扁平化設(shè)計(jì)元素以適應(yīng)傳統(tǒng)的平面設(shè)計(jì)方案。
聯(lián)系客服
