如何強化圖標設計細節?我總結了12個關鍵點!
1.清晰
大家先想想圖標在APP里的主要作用是什么呢?可以作為功能和信息的提示標識，引導用戶的操作。
而且我們通過看圖獲取信息的速度要比閱讀文字獲取快得多，圖標作為一種通用化的視覺語言，讓頁面更容易被閱讀。
▲ 圖標代表的隱喻越準確，就越容易被用戶準確識別。
2.簡潔
圖標本身的尺寸就特別小，如果在里面摻雜著大量沒必要的裝飾性元素，會讓圖標的閱讀變得很困難。
可以通過使用盡可能簡單的設計元素來創建圖標，保證形狀的簡潔易懂。
▲ 如果在設計過程中發現圖標變得很復雜，大膽嘗試去做減法，刪除不必要的細節，只留下最重要的部分。
3.風格統一
在Dribbble中搜索“icons”，會看到很多不同風格的圖標樣式，但同一個集合中的圖標都會保持統一的設計風格。
▲ 不同風格的圖標可以在設計中穿插使用。例如在APP底部導航中，使用線形風格的圖標作為基本狀態，點擊選中時可以變換為面性風格，用來區分不同的狀態。
4.基礎網格
網格有助于我們建立一個明確的尺寸規范，常見的網格尺寸有16×16、24×24、32×32、48×48、64×64、96×96。
▲ 所有的圖標都將建立在基礎網格之上，圖標的每個部分都應該放在像素網格內。
5.安全區域
圖標的主體部分應該保持在安全區域內，這種情況適用于大多數的場景。
安全區域可以作為設計建議，而不是一項必須的規則，如果有需要，我們完全可以在安全區域外擴展圖標的形狀。
6.關鍵形狀
如果想讓一組圖標放在一起看起來很和諧，那這些圖標的視覺權重應該保持一致。
在設計前首先確定圖標的基本形狀，例如圓形、正方形、矩形等，能有效幫助我們確定圖標的比例關系。
可以用數學面積公式來計算一下不同形狀圖標的權重，找出近似值。
來吧，先從圓形開始：
▲ 在這個例子中，直徑d是20px，半徑r是10px，圓的面積約等于314px²。
把圓的面積開個根號√，方形的邊長a大約為17.7px，四舍五入到整數，那么邊長a為18px，接下來算算方形的面積：
▲ 邊長a為18px，方形的面積為324px²。
最后算一下矩形的面積：
▲ 邊長b為20px，邊長c為16px。
最后我們根據這些科學的尺寸設計一組相對和諧的圖標：
7.描邊寬度
除了保持相同的視覺權重，圖標的描線寬度也應該保持一致，達到像素級統一，這里我建議描邊使用整數值，這樣更便于設計。
▲ 另外，不要忘記元素之間的最小間距，應該大于或等于描邊的寬度。
8.圓角
圖標的和諧還在于邊角的統一。尖角不用說了，保持統一的垂直90度就可以。
這里需要重要說的是圓角，不能所有的形狀都使用同一個圓角度數，而是要根據圖標形狀的不同靈活調節圓角度數。
▲ 例如一個圖標有里外兩個平行的圓角時，不能里外都使用1px的圓角，這樣會讓圖標看起來不統一。
正確的做法是讓外面的圓角更大，設置為3px，里面的圓角為1px，讓圖標看起來更和諧。
▲ 根據對象大小，設置不同的圓角數，保證視覺統一。
9.角度
同一組圖標保持相同的傾角設計，可以讓圖標看起來更統一。
▲ 圖標中所有傾斜的線條都限定為45度角，會讓圖標看起來更嚴謹和規范。
10.視覺平衡
在設計圖標時，既要利用作圖軟件把握嚴格的對稱和尺寸標準，也要注意多用眼睛去觀察圖標的視覺平衡，保證圖標看起來很統一。
▲ 最典型的情況就是繪制“播放”圖標時，使用軟件去調節三角形左右兩邊的完全對稱，圖標看起來反而會有點不平衡，看著感覺離左邊近，離右邊遠(右圖)。
在這種情況下，我們就要在對稱的基礎上，將三角形向右移動一點，來保證視覺上的平衡(左圖)。
11.透視 (2D/3D)
除了扁平的2D風格圖標外，也可以考慮使用3D風格的圖標樣式，讓圖標的體積感和空間感更強。
▲ 無論使用哪一種，同一組的圖標要保持統一的樣式，比如要用3D樣式，那么這一組3D圖標要使用相同角度的透視。
12.設計常識
上面提到了圖標設計的很多規則，在日常設計中建議大家將這些規則作為指導。
但是任何規則都有例外，如果有必要，我們可以打破規則。
▲ 左邊的圖標使用了不同的圓角和角度，來保證圖標像素級的完美;在右邊的圖標中，右下角的圖形雖然超出了安全區域，卻保證了整個圖標的平衡。
結論
圖標設計是看著容易，做起來卻很難的一類設計，把握這些關鍵細節能讓我們的圖標設計水平提升更多。
最后為大家精心挑選了700+圖標合集源文件，可以直接用在移動端、網頁端設計中!
更多關于“UI培訓”的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。
京公網安備 11010802030320號