扁平化設計icon的三種做法

自從iOS7之後，扁平化設計(Flat Design)風格逐漸成為主流，彷彿提到這個名詞就會滴水一樣，地位快跟 UI/UX、RWD相當了！扁平化看似簡單，但其實執行過程中要考慮的層面並不少。如何用這樣的手法讓畫面看起來是豐富不單調，就非常需要設計師的技巧了。尤其在台灣，大多數的客戶嘴巴上說要扁平化，其實並不太能接受完全扁平化 (你知道的.....)，這時候就需要來點巧思囉～！

關於扁平化設計的技巧，可以先看看ERIK D. KENNEDY發表的系列文章

7 Rules for Creating Gorgeous UI (Part 1)  http://goo.gl/8LM7f3

7 Rules for Creating Gorgeous UI (Part 2)  http://goo.gl/5Os5j9

其中提到的一點『尋找光源』這個原理，我覺得是非常好用的概念，因為有光的地方才會有陰影，立體化的關鍵正是來自於光源。這裡延續前一篇文章  好用的App Icon Template 的案例 - 「HerTalk」來練習三種不同的表現風格。

style A

Step 1：從AI檔中取出已經設計好的logo。

Step 2：為了後製的方便，我會依照設計需求，將各元素分開複製貼入PS內。譬如這裡的「HerTalk」、「對話框」、「鑽石」我是分開複製貼入PS內，再一起調整比例大小至符合原本設定的規格。沒有添加任何裝飾，關鍵在於色彩的運用，是基本型。

Style B

「Her Talk」的主軸是以女性為主，但user端是男性，這是一個很微妙的連結。為了表達兩者之間的互動關係，我選擇了鑽石的image來說明這個故事的主題。例如經典的廣告台詞「鑽石恆久遠，一顆永流傳」或女性總會幻想的鑽戒等等。

那麼在icon上，單獨使用鑽石如何呢？

Step 1：可以加一點陰影。

陰影的選色，可以挑選跟底色同色系的顏色，混合模式為「色彩增值」。數值的部分，「角度」：90度，使用整體光源。「間距」：8，展開與尺寸皆設為0。

Step 2：鑽石的顏色選擇非常淺的灰色，做視覺上的調合。

這個做法，最常看見的多是用在按鈕、單純的圖型構圖。如果用在style A，可以，但總覺得花俏了一點。而且App Icon多數是縮小使用的，畫面盡量單純簡潔，在縮小的時候比較能保留細節。

Style C

太陽的位置是會移動的，除了剛才的陰影表現手法，最近也很常見到這種斜45度角，視覺感受比較強烈的表現方法。例如：Google Map、Gmail的Icon都默默改採這類型的方式呈現。在使用上需要注意圖型的外型，太碎的外型會顯得很雜亂，也因為太細碎，光是光影就要雕蠻久的，這類型的logo就不太建議。

首先，我們需要一點點透視的概念。

Step 1：使用「鋼筆」拉出陰影的型狀與方向。稍微留意角度，以透視的概念會有一點內縮。

Step 2：Ctrl + Enter，選取圈選的範圍(變成虛線) > Alt + Delete，填入前景色=黑色。

(設計師都知道，快捷鍵是你永遠的好朋友)

Step 3：不透明度設為「30%」，加上圖層遮色片，使用漸層工具，在遮色片上以反方向刷淡陰影。

Step 4：加強立體感的層次，以同樣的方法針對對話框的圓體部分再做一次，不透明度設為「14%」。

Step 5：加上圖層遮色片，使用漸層工具，在遮色片上刷淡陰影。完成！

結論：活用技巧才能幫作品加分。

在Youtube上搜尋關鍵字「Flat Design」會跑出很多教學影片，有一些原理相同但技法不同，雖然最後的結果是相同的，但因為圖型結構的差異，適合的技法也會不同噢。