一直進化的扁平化設計,2017年這麼玩!

平面化 VS 擬物化的戰爭已經過去好幾年了。扁平化設計徹底佔據了如今的主流設計趨勢。但是,大局已定的扁平化設計,是否已經固化不變了呢?並非如此。在過去的幾年當中,扁平化設計風悄然地進化,變得越來越多樣,也越來越有吸引力。

如今再來重新審視早期的扁平化設計,漸變、陰影和紋理的缺乏,讓它在視覺上顯得略為單調,而幾年的時間沉澱,扁平化設計中開始適時地融入了許多其他的設計元素,豐富了整個扁平化設計的思想,並且創造了不少值得一體的獨特扁平化設計分支。不論你所設計的是APP還是網站,在2017年所處的這個時間節點,枝葉繁茂的扁平化設計中,總會有那麼幾種風味獨特的設計風尚,能夠讓你傾心。

 

扁平化設計緣起

曾一直被蘋果公司所引領的擬物化設計風潮,在2010年的時候開始受到扁平化設計的衝擊。逼真的紋理、多樣的漸變和繁複的細節逐漸為人所厭倦,線條簡約的2D扁平化設計開始取代「抄現實」的設計手法,一時間,是擬物還是扁平的爭論充斥設計和技術圈,並快速蔓延到圈外的普通用戶,各執一詞,莫衷一是。

隨著喬布斯的過世、iOS 7和Android 4.0的發布,設計趨勢最終還是向著扁平化邁出了關鍵性的一步。醒目而高飽和度的色彩和形式感更強的排版取代細節和紋理成為抓人眼球的元素。

最初的扁平化設計,對於細節的剝離是非常徹底的,這使得設計師能用的元素大多隻剩下色彩和圖形,這種局面對於設計師和用戶都是困擾,細節的缺失讓設計並不足以支撐全部的信息傳達,這種局面下,許多微妙的扁平化分支就誕生了。

扁平化設計仍然是近10年來最具革命性的視覺設計趨勢,並且它還將一直向前推進。

 

Material Design

想要系統了解扁平化設計的快速發展歷程,Material Design是最值得研究的案例。這一扁平化設計語言是谷歌為其旗下的數字產品的界面所創造的統一的視覺設計語言。

Material Design吸取了扁平化設計最精華的部分,還巧妙地保留了擬物化的隱喻——紙,從而創建出如今所看到的Material Design,其中扁平化的元素被加上了一個微妙的維度,其外化的表現就是微妙的陰影。貼合物理運動規律的動效和微妙的視覺維度令Material Design 仿佛能夠跳出界面同用戶進行互動,在扁平化的風尚之下,它讓數字產品擁有了和現實世界在質感上有了某些相通的地方。

仔細審視 Material Design ,你會發現它許多「擬物」的特徵很好地軟化了近乎苛刻的早期扁平化設計。

Material Design 有著明確的概念,同時又隨著Google 旗下產品的演進而不斷地優化和更新。從某種意義上而言,Material Design 是扁平化設計的主要和重要的推動者,如果你想第一時刻了解它的變化,你可以跟著Android 的版本更新還適時查看它的調整。

 

扁平化 2.0

扁平化設計在幾年的時間沉澱之後逐步成熟,最終在2015年被設計師們階段性地歸納為「扁平化 2.0 」。

「扁平化2.0 具有更強的易用性,因為它將扁平化設計的主要特徵和高度可用的視覺線索結合到了一起,兼顧到設計的美觀和功能。同時,扁平化2.0 的高適用性,讓它幾乎可以和任何概念結合起來使用。和早期的純粹扁平化設計不同,扁平化 2.0 中融入了不少微妙的漸變和不多的紋理,提高了它的整體可用性。」

扁平化 2.0 的說法最早源於設計師 Ryan Allen :「扁平化 2.0 是演變的結果,它並非革命性的改變。扁平化設計和之前瘋狂流行的擬物化設計截然不同,而扁平化 2.0 是扁平化設計上的一個分支。如果說扁平化設計是聖誕樹的話,那麼扁平化 2.0 就是聖誕樹上的禮盒與糖果。它並不是浮華的裝飾,但是讓整個聖誕樹充滿了趣味和驚喜。」

扁平化 2.0 和 Material Design 一樣,打破了早期扁平化設計中的生硬規定,並且通過適度的調整讓視覺效果更加吸引人了:

  • 高亮和強調
  • 適度的漸變
  • 同色系下多種色調和色度
  • 微妙的陰影
  • 更廣泛的配色方案

扁平化 2.0 本身並不存在於UI和圖標設計的世界當中,實際上它已經延伸到視頻、攝影和圖片當中。

 

2017 的扁平化設計

進入2017年之後,扁平化設計仍然是主流,在設計手法和細節上,隨著時代的發展而演進,越來越成熟和多樣。

下面,是屬於2017年扁平化設計的特徵:

1. 扁平化元素

早期的許多扁平化元素在如今的扁平化設計項目中,已經並不適用了。按鈕的樣式比以往更加簡單,圓角矩形的按鈕搭配黑色或者白色的文本,在今天更加流行。LOGO和圖標採用了扁平化的風格,甚至只是由線條構成,這樣不僅和整體風格更搭,而且在很多時候能夠突出顯示。

 

2. 精簡的導航

漢堡圖標已經成為當前網站的標準配置,設計師可以將非關鍵因素隱藏在漢堡圖標之後的菜單裡面。

 

3. 大膽明亮的配色

由於扁平化設計對於配色的可接受性更強,網頁設計有了更多的可能性。這使得如今的網頁設計整體上比以往更加多彩有趣,許多網頁首頁甚至採用了圖片+色彩疊加的設計。

 

4. 極簡的首頁設計

作為目前通行的設計思路,絕大多數網頁不再將大量的內容塞滿首頁,即使擁有多個元素,也盡量讓首頁專註于單個任務,不再讓用戶在多個不同的目標或任務之間分心。

 

5. 更優秀的排版

將複雜的樣式從設計中剝離之後,字體排版的形式感就更加突出了,這種局面使得設計師在進行網頁設計的時候,更加傾向於通過優質的排版來強化設計感。

 

6. 更少擬物特效

雖然如今的動畫和特效越來越多,但是稍有特效去模擬一個現實生活中的特定的交互場景或者效果,它們通常是為了功能而存在,並且專註于體驗本身。從某種意義上來說,擬物化的設計並未回歸。

 

7. 動效與反饋

Material Design 是動效和反饋設計中的翹楚。將動效和反饋結合起來從而更好的引導用戶、同用戶溝通,這是如今交互設計和UX設計的關鍵。

 

8. 大量的留白

在屏幕越來越大的趨勢之下,通過屏幕留白來突出關鍵內容是極簡設計中最常用的手法,而在簡約風盛行的今天,留白也成了許多扁平化風格網頁中最常見的設計手法。當然,留白並不一定非得是白色。

 

9. 扁平化圖層

毫無裝飾的扁平化圖層同樣存在於許多網頁當中,它們能成為不同元素的載體,或者單純的營造空間感。

 

10. 超大的設計元素

超大的字體,超大的圖片,甚至超大的按鈕和圖標,都已經不是什麼新鮮的設計手法了,它們借助過人的體積感和強有力的對比來製造視覺奇觀,是非常有用的設計技巧。這種設計手法在早期的扁平化設計就有了,現在使用很頻繁。

 

結語

扁平化設計和柵格系統是天生的盟友,它們讓今天的網頁顯得更加整飭、易用。

扁平化設計在今天的流行是有道理的,整個產品的設計、研發、運營都從中獲益,這也是它成為一種持續風潮的根本原因。

 
本文地址: http://www.uisdc.com/2017-flat-design-evolving-trend


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化