ICON 圖標設計規範與原則

42 人贊了文章

icon承載了App大部分功能的引導入口，是交互設計中是相當重要的一環。

icon有一種象徵意義或隱喻性，並在日常生活中經常遇到。icon代表了一些行動、事、人、真實的、虛擬的視覺符號。

icon不僅是圖標這麼簡單，它承載了文字的含義，將文字圖形化，而讓人使用最少的時間來理解這個按鈕的含義，icon是審美與功能完美融合的元素。

一、icon設計原則

1，意義明確

這個很容易理解，當你要做一套icon時，它首先要有自己明確的含義：

• 這個放在那裡？
• 這個是幹什麼的？
• 這個想要傳達什麼含義？

能否讓用戶一眼就能看出來表達的含義，這是評判icon好壞的第一標準。

2，簡潔

含義表達清楚了，接下來就是icon的表達形式，因為面積小，所以過於複雜會帶有一些不必要的麻煩，比如看不清內容，含義模糊，這就要求設計師在去除冗餘的細節的同時，保證icon目的和功能性，並且整體風格要和整體的視覺協調統一。

3，可用性

可以通過查找性測試和預測性測試來得到icon的可用性。

查找性測試：被訪者需要按照任務點擊圖標，後台需要計算被訪者在不伴隨文本標籤的同時，找到正確圖標的操作時間，首次點擊的正確率。

預測性測試：需要被訪者推斷這個圖標所代表的功能，並推測點擊後會發生什麼。

4，一致性

當滿足以上幾條原則後，最後需要注意的就是所有icon的一致性，比如顏色，線條粗細，感情特徵，開口等等...

只有保持最終的一致性，你的設計才是完整的，如何保持一致性以及一些圖標設計的規則，我們後面會詳細的展開來說。

二、icon設計規則

畫icon和插畫一樣都是由最基本的形狀慢慢組裝來的，界面上所有的icon都可以近似成一個基本形狀，比如各個方向的長方形、圓、三角形、正方形等。

畫好你想要的icon，然後用一些基本的圖形來組合起來進行布爾運算，就會得到絕大部分你想要的

把繪製好的圖標模糊後，如果都是黑黑的，大小一致的黑團，那就說明視覺重量是一致的。

2，圖標的大小

圖標的大小不只是物理上的大小統一，眼睛在很多情況下都是欺騙你的，眼見未必為實。

比如兩個物理大小相同的形狀，一個圓和一個正方形。正方形總是看起來會大一些，因為填補了更多的空間。

所以我們需要把正方形縮小一點，才會讓視覺看起來大小相同。

3，柵格

一般繪製會調出網格系統，我們為了保持圖標的一致性，需要設定一些輔助的尺寸來保證視覺大小統一性

4，角度

大多數情況下，是使用45度角，或者他的倍數。先上圖：

鋸齒走向大家可以很明顯的看出來區別吧，如果是45度角，鋸齒的走勢是可以接受的，而別的角度鋸齒就沒有那麼整齊了，會有邊緣的透明度。

5，線的粗細

一般來說用2px或者2的倍數，必要的情況下可以用3px。

不要介入過多的粗細，因為會破壞一套圖標的統一性和凝聚力，並且不太建議用太細的線條，除非你刻意做線性風格圖標，比如airbnb的風格。

5，尺寸

沒有太大限制，現在24*24和48*48是目前比較標準icon尺寸。

6，工具

工具方面推薦使用ai繪製，因為在圓角和形狀切割方面有著較大的優勢，sketch的簡潔方便也是個不錯的選擇，但是在轉為svg格式的時候會產生許多不必要的東西，如多餘的圖層、純顏色層、蒙版等等。

三、icon設計細節

曾看過@菜心設計鋪分享的關於圖標斷線的方法，覺得很不錯，分享給大家

1，拼接處斷線

2，複雜處平衡

比較後還是覺的方案一舒服多了吧～

3，避免中心斷線

4，一筆畫完

當然如果實在不能一筆也別勉強。

設計圖標的時候需要考慮到使用場景及規則，

所有的視覺風格應該有相關聯的點，比如線條的粗細，圓角的統一，斷點的統一等。

結語：

最後我想啰嗦一句，功能圖標和桌面上的應用圖標不是一回事，比如應用圖標非常需要設計師打造一枚個性十足的icon，來引起用戶的注意。

而頁面的功能icon往往是相對安靜的存在，哪怕沒有了也是沒關係，比如抖音的底部工具欄是用文字來代替圖標。

關注一波，一起聊設計~

推薦閱讀：