從改版的 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，包含各種圖像、配色、排版，甚至是動畫，裡面的設計包羅萬象。如果你想知道潮流的話，去看看他們家的設計素材應該也會很不錯。

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