iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
1
Modern Web

從前端走到設計,下一步?系列 第 9

Day9-潮流在改變:扁平化設計

從改版的 LOGO 談扁平化設計

這是我們現在每個人都熟悉不過的 icon:

但在我的最初的記憶裡,Google 的 LOGO 是長這樣的:

發現這兩個的差異了嗎?除了字體不同之外,最大的差別是「陰影」。

「扁平化設計」是這幾年的設計趨勢,不只是 Google,也有很多 LOGO 為了因應扁平化趨勢而 redesign,例如那時候改版鬧得沸沸揚揚的 Instagram

什麼是扁平化設計?

傳統的 LOGO 喜歡用陰影、浮雕、漸層創造出立體感,進而提升圖像的擬真感。但是後來發現這樣的 LOGO 容易給人過多的資訊。換句話說,陰影或是特效等,其實通通都是多餘的。
扁平化的設計特色在於,用純色或是高對比度的色塊,以完全平面的方式設計,帶出一種簡約的設計感。

這麼說或許還有點抽象,用兩張圖來看 Apple 在扁平化設計上的大改變吧。

(圖片來源:https://onextrapixel.com/top-5-things-need-know-flat-design/)

應該很明顯可以看出圖一是舊版的 iPhone 介面,圖 2 是較新的。
只是為什麼我們很明顯的可以感覺得出來?

圖 1 的每個 icon,都有非常明顯的陰影;而圖 2 沒有。
圖 1 的 icon 大多都有漸層色調,以第一個 icon:Messages 來說,光背景的綠色就明顯有三種以上,而白色也不只一種白;相對於圖 2 的 Messages,將原本很明顯可以看出多種綠換成漸層綠,而綠的分別不再那麼明顯,與白的交疊部分也沒有再做陰影,降低整個圖示的複雜度。
這也符合前面所提到的,去除陰影所帶來的立體感,也就是扁平化設計的概念。

順帶一提,扁平化設計通常會搭配非襯線字體。畢竟襯線字體帶給人華麗、高貴之感,但扁平化設計是希望能夠降低圖示複雜度,帶出簡約風格,因此搭配非襯線字體較不違和。

扁平?擬真?

設計是一項非常容易被框架住的學問,一旦有前人設計,後人就很難跳脫。每個 icon 大多都是從實體的物件模仿出來的,我們在看實體物件時會有陰影,因此我們在設計圖樣時也希望能藉由浮雕、陰影等方式創造出它的立體感。滿有趣的是,有一派說法說這是人類的「過度學習」。

扁平化的歷史悠久,不過近年才開始風行。優點的部分,隨著電子產品的普及,每個人的裝置大小不同,扁平化設計方便拓展,相較於過去的擬真圖樣,在縮放過程中陰影容易變形扭曲,造成重新設計的不便。

而前面所提到的,扁平化圖示簡單、資訊單純,極簡風格讓使用者一目瞭然。但是,更因為扁平化的純色塊,導致設計師在顏色搭配上更為重要,要如何在多采多姿的圖樣裡能一眼抓住使用者的心,更是一門重要的色彩心理學。

扁平化真的比較好嗎?

前面有提到,過去的 icon 可能是人類過度學習而來的。而如今人類漸漸學會看懂了抽象圖示,也是設計上的一大步。人類的視覺習慣,是可以經過各種資訊學習而來的,因此下一代的設計潮流會在哪,也沒有人知道。

但是 Google 每年都有在更新他們自己家產品的設計指南:Google Material,包含各種圖像、配色、排版,甚至是動畫,裡面的設計包羅萬象。如果你想知道潮流的話,去看看他們家的設計素材應該也會很不錯。

不過設計這種東西也沒有標準答案,哪天人類倦怠了,想換胃口了,說不定就有下一代的產物出現了呢。


上一篇
Day8-設計三大元素:配色、字體、icon
下一篇
Day10-比賽辛酸史:勇於參賽,不抱期待
系列文
從前端走到設計,下一步?30

尚未有邦友留言

立即登入留言