圖標設計的三個小原則

「隨著扁平風格的出現……」 這些虛的我就不說了。在自己開始做圖標練習之前，我對圖標的概念僅僅是好看、簡單，只要稍微練幾下就可以學會了，而開始接觸之後才知道，原來圖標設計這麼有講究。

在練習的過程中，我看了很多國外設計師寫的關於圖標設計的一些文章，從基本的視覺元素到人的系統感知，也終於理解為什麼如今的界面設計中，圖標會佔據如此大比例的原因了。

有人說：「人們對於抽象概念或藝術性強的圖像的理解能力並不差。」 每個人的視覺感知能力都能輕易的理解一些圖像所包含的意義，因此成熟的視覺感知是更有效的信息傳遞途徑。

所以我總結了以下三個原則來談談圖標設計需要注意的事項：

• 可識別性
• 視覺統一
• 差異性

可識別性

最新的 IOS 設計原則被人們概括為：大、黑、簡。我也去看了些相關數據，在視覺的設計中，最受歡迎的顏色也確實是黑色，其次是白色。所以沿用到圖標設計中，黑白圖標也是在界面中最廣泛被使用的。（除了那些概念設計）

為了讓圖標提升界面中信息的被理解性，很多設計師也會用黑白色去設計圖標，原因有兩個：

• 一個是顏色會干擾用戶的理解力；
• 界面中顏色多了，會消耗用戶尋找圖標的時間；

因此顏色是識別性中需要注意的一點，為了提高用戶的可識別性，我們的設計更應該遵循用戶習慣。有一部分設計師的想像力非常豐富，這是設計師的一大優勢，但是切忌將圖標設計的過於個性，讓用戶難以理解。

Instagram 的設計就是就是比較典型的新風格界面，圖標易於理解，且用黑色作為基調，識別性高，用戶也易於理解，這也是為什麼這些圖標沒有文字做解釋的一個原因。

不過我個人建議在圖標的設計中加入一點點自己的創意更能增加產品的趣味性，所以不要太壓抑自己的天性。上面的說明是為了讓大家在設計圖標時要注意的一些細節。當然，如果是一些個性化圖標，顏色也要突出。比如某些圖標的顏色儘可能保持實體物質的相近色，這樣也不會讓用戶在理解上有偏差。

在設計完這些圖標後，設計師要做兩個測試：一個是無背景測試，另一個是基於背景的圖標測試。第一個意思是，把圖標單獨放在一個畫布上，看看同事能不能知道這個圖標的意思。另一個是將圖標放在界面中，看同事（項目外的同事）是否能理解圖標的含義。

視覺統一

不同類型的圖標有不同的特徵，稍微一點變化，都會破壞整套圖標的統一性。包括複雜度、形狀、線條粗細等等。

我在臨摹整套圖標的過程中，很明顯能看出原作者對於圖標的把控性有多強，每處細節都調整的非常到位，以至於我在製作的過程中遇到不少麻煩。不過解決之後，自己在創意圖標的時候就發現輕鬆不少。比如：

• 整體風格的統一
• 圖標的大小控制

因為在設計的過程中發現這兩個問題比較多，所以在這裡單獨拿出來說。

整體風格的統一：我這次設計是一套杯子的圖標，為了統一風格我將所有線條的粗細都設置為 2 px，然後做了偏 MBE 風格的設計。為了能讓所有杯子統一，我在杯子里加入了酒，所以整套圖標也就成了裝酒的各種瓶子和杯子。而點小氣泡就是為了增加了一種趣味性且更統一。

圖標大小的控制：前期在設計的過程中，我發現我的圖標大小有波動，非常不統一，甚至是一個大一個小，所以我加了個限制，一來可以約束圖標的尺寸盡量統一，二來可以顯得更加規範。

差異性

設計一套圖標時，要盡量放大圖標之間的差異性，減弱圖標之間的相似性，這是最容易被設計師忽略的一項原則，往往為了保持視覺風格的統一性、使用同一元素而捨棄了各圖標的差異性。

假如一套圖標，長得都差不多，那用戶在界面中找某個功能要花費的時間會比想像中的長很多。他們會去探索圖標的功能作用，看跳轉的頁面是否是自己想去的界面，然後再返回。你可以將設計完的一套圖標展示出來：然後你說出一個名詞，讓同事去選擇是哪個，這樣可以很好的檢測圖標的差異性和識別性。

有人可能會誤解統一性和差異性的概念，統一是圖標樣式及風格統一，而差異是圖標與圖標之間的含義要明確。

還有一點，在設計的過程中一定要區分被選擇和未選擇的狀態，讓用戶知道我們的圖標給予了他反饋。

總結

最後來說說為什麼我們要設計圖標：

• 提升用戶對信息的感知速度；
• 通過視覺的感知，提高用戶的界面記憶；
• 更加節省空間，避免了長文的使用；
• 增強界面設計感，讓界面更加協調。

作為一個互聯網行業的設計師，我們更應該在圖標以外去尋找靈感，包括建築、字體、工業設計、心理學、自然或其他領域。

現在的圖標之間，風格和設計樣式看起來越來越像，所以每個人都應該提高自己的水平，設計出區別於他們的圖標，讓自己處於一個領先的位置。

END.