擬物和扁平到底誰香？

昨天米醋跟大家分享了圖標中的像素圖標，今天我們繼續來說一下擬物化圖標和扁平化圖標。

擬物化圖標在iOS 6的時候發展到了最高峰，材質、光影的表現是擬物化圖標的核心理念。蘋果iOS 6有一個非常優秀的設計細節，那就滑竿上的圓形金屬按鈕，如圖所示。這個按鈕不僅表現出了金屬的材質，而且在傾斜手機的時候還會像真正的金屬一樣改變光澤。這是追求擬物化設計的最高境界，在最大程度上還原真實環境。

擬物化圖標

擬物化圖標的最大優勢就是認知性很強，就算是老年用戶也能一眼看明白其代表的意思，如圖所示。雖然擬物化圖標的認知性很強，但是它有一個致命的缺點，這種圖標不太適用於界面整體的功能化展示，而且製作成本很高，需要花大量的時間來設計視覺上陰影和質感。

認知性很強的擬物化圖標

在擬物化設計轉為扁平化設計的過程中，為了平衡設計效率與視覺效果，演變出了一種「微質感化」的設計，也就是用儘可能少的樣式來表現圖標的質感，如圖所示。

微質感化設計

扁平化圖標

現在的界面設計越來越注重簡潔性，扁平化圖標也就變成了界面圖標的主導形式。扁平化圖標看似簡單，但是對於初學者而言，要把控好形體還是比較困難的，這就會導致設計出來的圖標不夠美觀或是不能直接表達出圖標所蘊含的寓意。另外，扁平化圖標還是需要將關鍵形狀刻畫到結構上，這一點也很考驗設計師的能力，如圖所示。

將複雜圖標簡化為簡潔圖標

因為扁平化圖標造型簡單，易識別，經常運用在界面和菜單欄中。在繪製這類圖標時一定要注意外觀的統一性和識別性。很多新手設計師會通過網路去下載圖標素材，東拼西湊成一套圖標，這不僅降低了界面的檔次，而且很難統一圖標的整體風格。見圖這些圖標從單個來看都沒有問題，但是放在一起後就很凌亂了，這是圖標設計中的一個大忌諱。

風格不統一的圖標

扁平化圖標分為面式圖標和線式圖標兩種類型。面式圖標需要注意形狀的圓角和黑白面積，在繪製的時候一定要把握好形狀的輪廓造型，如圖所示。

線式圖標需要統一線條的寬度以及線段的連接方式等，如圖所示。

面式圖標由於填充面積比較大，整體會顯得比較飽滿，視覺平衡度也比較高。而線式圖標的優勢是比較有設計感，在視覺上顯得更輕盈，同時拓展性也比較好。在我們常見的iOS系統中，經常會將正（面式）負（線式）圖標當成選中和未選中的狀態，如圖所示。

正負圖標表示的選擇狀態

案例分析

下面來分析一下在一套扁平化圖標如何才能做到設計的統一性。

首先要從形體方面下手。統一形體可以從以下3個方面進行考慮，如圖所示。

統一每個圖標的黑白面積。保證每個圖標的黑白填充比例一致，從而統一圖標與圖標之間的黑白節奏。

統一每個圖標的風格。扁平化圖標中有面式和線式兩種，在設計時要保證類型風格的一致性。

統一每個圖標的細節。例如每個圖標的圓角大小和留白寬度要統一等。

統一形體

做到形體的統一性後，可以通過顏色的關係來豐富圖標。在處理有顏色的圖標時，不僅要加強圖標的層次感，更應該統一圖標的顏色風格，如圖所示。

統一圖標的顏色風格

最後把握圖標的節奏平衡和視差平衡。圖標的內部結構要注意元素之間的比例，可以是黃金比例分割，也可以是感性的平衡分割。嚴謹的圖標比例可以參照蘋果iOS圖標的規範設計，先打好內部統一結構線後再繪製圖標和分配元素比例，如圖所示。

iOS圖標的內部結構線

如果覺得iOS的結構線太複雜，也可以靠經驗來判斷圖標的節奏平衡和視差平衡。在同一個尺寸規格條件下，不同形狀的圖標，就算是在參考尺寸範圍內進行設計，也會在面積佔比上引起視平衡，這是因為人的肉眼存在視差問題，所以在做設計可以暫時拋開條條框框，以人的真實情況做出判斷後再進行調整，如圖所示。

節奏平衡和視差平衡

明天米醋將給大家繼續分享圖標中的

線性圖標和立體圖標

我們明天不見不散！

回復【AE教程】獲取全套AE動效視頻課程

你這麼好看，不妨點個在看

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！