淺談今年常用(yòng)的(de)扁平化(huà)設計風格

作者：龍 時(shí)間：2018-08-01 浏覽：

時(shí)至今日，扁平化(huà)已不再是流行一時(shí)的(de)設計風潮，而是一種美(měi)學風格。扁平化(huà)大(dà)膽的(de)用(yòng)色，簡潔明(míng)快(kuài)的(de)界面風格一度讓大(dà)家耳目一新，當它對(duì)元素效果抛棄的(de)如此徹底之際，它又将效果撿起來(lái)，改裝成另一番模樣，使得(de)扁平化(huà)進化(huà)爲扁平化(huà)2.0。

扁平化(huà)設計特質

對(duì)于扁平化(huà)的(de)定義，依然沒有一個(gè)固定範式，但概括起來(lái)有下(xià)面四個(gè)特征：

1）沒有多(duō)餘的(de)效果，例如投影(yǐng)、凹凸或漸變等

2）使用(yòng)簡潔風格的(de)元素和(hé)圖标

3）大(dà)膽豐富且明(míng)亮的(de)配色風格

4）盡量減少裝飾的(de)極簡設計

扁平化(huà)所追随的(de)細節依然不變，然而這(zhè)些“規範”開始松懈了(le)。随著(zhe)扁平化(huà)進化(huà)到2.0時(shí)代，我們再來(lái)看看2016年，有哪些是扁平化(huà)設計以前從未有的(de)。

扁平化(huà)2.0的(de)全新細節

爲了(le)避免純粹的(de)扁平化(huà)設計，一些細微的(de)效果逐漸被運用(yòng)其中。

扁平化(huà)曆來(lái)被人(rén)所诟病的(de)方面即交互不夠明(míng)顯，按鈕難以找到等。現在這(zhè)些問題都可(kě)以通(tōng)過增加一些小小的(de)效果而得(de)以解決。但這(zhè)些效果的(de)運用(yòng)也(yě)是符合扁平化(huà)的(de)簡潔美(měi)學的(de)。

一、微陰影(yǐng)

微陰影(yǐng)，就是極其微弱的(de)投影(yǐng)，這(zhè)是一種幾乎不被人(rén)所立刻察覺的(de)投影(yǐng)，它可(kě)以增加元素的(de)深度，使其從背景中脫穎而出，引起用(yòng)戶的(de)注意。但在使用(yòng)這(zhè)一效果時(shí)候需要注意，要讓它保持柔和(hé)感和(hé)隐蔽性。

利用(yòng)元素的(de)形狀，使其從背景中獨立出來(lái)。即使元素與背景有著(zhe)同樣的(de)顔色，依然可(kě)以通(tōng)過微陰影(yǐng)加以區(qū)分(fēn)，而視覺上還(hái)能保持色調一緻的(de)簡潔性。

有人(rén)這(zhè)時(shí)會提到長(cháng)陰影(yǐng)，但長(cháng)陰影(yǐng)通(tōng)常運用(yòng)的(de)地方隻是在LOGO、圖标等元素的(de)内部，它是扁平化(huà)的(de)一種設計風格的(de)延伸。

二、幽靈按鈕

這(zhè)不是指一個(gè)幽靈形狀的(de)按鈕。恰恰相反，這(zhè)類按鈕的(de)形狀非常簡單，僅僅是一個(gè)矩形或一個(gè)圓角矩形的(de)邊框，内部爲透明(míng)。看上去若有若無，類似于幽靈的(de)出沒方式。

也(yě)許你已經在很多(duō)扁平化(huà)設計風格中見過它們了(le)。它們通(tōng)常會設計得(de)比普通(tōng)的(de)按鈕略大(dà)，浮動于大(dà)圖背景、視頻(pín)的(de)上方。你可(kě)以在飽覽整張圖片或整個(gè)視頻(pín)的(de)同時(shí)也(yě)能看到它的(de)存在，爲了(le)讓它獲得(de)聚焦，通(tōng)常它位于比較顯眼的(de)位置，例如屏幕的(de)中間。

幽靈按鈕的(de)顔色通(tōng)常爲黑(hēi)或白，這(zhè)是因爲它需要和(hé)周圍環境所協調。如果可(kě)以，試試别的(de)色彩也(yě)未嘗不可(kě)。例如無色的(de)黑(hēi)白圖片搭配有色的(de)幽靈按鈕。

同時(shí)，也(yě)需要注意，與幽靈按鈕搭配的(de)也(yě)多(duō)半是無襯線的(de)字體，中文也(yě)是細黑(hēi)等類似的(de)字體。這(zhè)樣就讓按鈕和(hé)其字體都在外觀上取得(de)一緻性。

三、低調漸變

談到避免極端的(de)扁平主義，漸變的(de)運用(yòng)就有回暖之勢。而新的(de)漸變不同以往，它往往是以更爲低調的(de)姿态出現的(de)，比如隻用(yòng)于背景色或氛圍色，不再喧兵(bīng)奪主，并且隻在兩種顔色之間漸變過渡。下(xià)面是雙色漸變的(de)實例。

可(kě)以看出這(zhè)一案例中，網頁已經讓漸變成爲了(le)一種設計元素。霸占整個(gè)屏幕的(de)圖片充滿震撼，而讓其也(yě)參與到過度的(de)漸變中，讓圖片散發出霓虹燈一樣的(de)效果，搭配幽靈按鈕，這(zhè)幾乎是信手拈來(lái)的(de)絕佳創意。

四、圓形

毫無疑問，扁平化(huà)設計就是Google的(de)Material Design的(de)前身，這(zhè)在Material Design的(de)設計風格中可(kě)以看出扁平化(huà)的(de)影(yǐng)子，但後者不但繼承其簡潔的(de)優勢，還(hái)進一步在用(yòng)戶體驗上得(de)以發揮。

最明(míng)顯的(de)是，除了(le)模拟現實環境裏紙質重疊的(de)微投影(yǐng)，那恐怕就要數圓的(de)運用(yòng)了(le)。扁平化(huà)中圓形的(de)元素越來(lái)越多(duō)，可(kě)以說圓形在移動端的(de)優勢是特别明(míng)顯的(de)。由于圓形很好的(de)模拟了(le)手指印，因此一個(gè)圓的(de)存在看似就是一個(gè)可(kě)觸的(de)地方。這(zhè)對(duì)于喚起用(yòng)戶的(de)操作發揮了(le)極大(dà)的(de)作用(yòng)。

由于圓形本身的(de)特殊性，使它極易從背景中分(fēn)離出來(lái)，因此将重要的(de)元素設計爲圓形也(yě)是心機滿滿。例如下(xià)面這(zhè)家餐廳的(de)網頁設計，圓形本身具有一種親和(hé)感，非常契合餐廳這(zhè)類溫馨休閑的(de)品牌氛圍。

五、雙色搭配

早期的(de)扁平化(huà)配色是非常鮮豔大(dà)膽的(de)，它可(kě)以在高(gāo)飽和(hé)度中挑選六到七種顔色進行搭配。如今，扁平化(huà)設計的(de)配色選擇雖然仍然朝明(míng)亮大(dà)膽的(de)方向走，但隻局限于有限的(de)顔色選擇，雙色調配色是目前逐漸流行起來(lái)的(de)另一種配色方向。

大(dà)家都知道通(tōng)過配圖來(lái)強調配色。最初的(de)扁平化(huà)的(de)設計，隻有十分(fēn)有限的(de)素材資源，因此色彩的(de)選擇相對(duì)也(yě)有限。近來(lái)，扁平化(huà)項目包含了(le)大(dà)量的(de)影(yǐng)像。由于這(zhè)一轉變，就能從衆多(duō)明(míng)亮或鮮豔的(de)色系中進行選擇配色。

六、動态要素

更多(duō)的(de)視頻(pín)和(hé)動畫(huà)特效的(de)運用(yòng)，使得(de)扁平化(huà)更加生動活潑。然而這(zhè)些讓網頁看起來(lái)更生動的(de)手段，無一獨立于整體頁面的(de)風格而獨立存在。它們依然是簡潔的(de)，符合網站整體的(de)審美(měi)方向的(de)。

與其把新趨勢看作是一種方向，不如将其視爲過程。扁平化(huà)的(de)未來(lái)還(hái)需要在此基礎上不斷發展新的(de)創意。