編輯導語：圖标設計是看着很容易，但是實際上做起來并不是如此。掌握圖标設計的一些細節，能夠确保設計出來的圖标達到像素級完美。那麼，如何強化圖标設計的細節？作者總結了12個關鍵點，與你分享。

大家好，我是Clippp。今天為大家分享的是「圖标設計關鍵點」。圖标在頁面中的尺寸很小，不怎麼起眼，卻包含着太多的設計細節。作為通用的視覺化語言，把握住其中的設計關鍵點至關重要。

之前有分享過關于圖标設計的一些文章，介紹過圖标的風格：9種醒目的UI圖标，帶來出色的用戶體驗；不同尺寸和風格的圖标如何設計：如何選擇合适的圖标？來看這份圖标類型和風格彙總。大家可以快速回看～

這次分享一些更為關鍵的圖标設計細節，确保設計出來的圖标能達到像素級完美。

一、清晰

大家先想想圖标在APP裡的主要作用是什麼呢？可以作為功能和信息的提示标識，引導用戶的操作。而且我們通過看圖獲取信息的速度要比閱讀文字獲取快得多，圖标作為一種通用化的視覺語言，讓頁面更容易被閱讀。

圖标代表的隐喻越準确，就越容易被用戶準确識别。

二、簡潔

圖标本身的尺寸就特别小，如果在裡面摻雜着大量沒必要的裝飾性元素，會讓圖标的閱讀變得很困難。可以通過使用盡可能簡單的設計元素來創建圖标，保證形狀的簡潔易懂。

如果在設計過程中發現圖标變得很複雜，大膽嘗試去做減法，删除不必要的細節，隻留下最重要的部分。

三、風格統一

在Dribbble中搜索“icons”，會看到很多不同風格的圖标樣式，但同一個集合中的圖标都會保持統一的設計風格。

不同風格的圖标可以在設計中穿插使用。例如在APP底部導航中，使用線形風格的圖标作為基本狀态，點擊選中時可以變換為面性風格，用來區分不同的狀态。

四、基礎網格

網格有助于我們建立一個明确的尺寸規範，常見的網格尺寸有16×16、24×24、32×32、48×48、64×64、96×96。

所有的圖标都将建立在基礎網格之上，圖标的每個部分都應該放在像素網格内。

五、安全區域

圖标的主體部分應該保持在安全區域内，這種情況适用于大多數的場景。安全區域可以作為設計建議，而不是一項必須的規則，如果有需要，我們完全可以在安全區域外擴展圖标的形狀。

六、關鍵形狀

如果想讓一組圖标放在一起看起來很和諧，那這些圖标的視覺權重應該保持一緻。在設計前首先确定圖标的基本形狀，例如圓形、正方形、矩形等，能有效幫助我們确定圖标的比例關系。

可以用數學面積公式來計算一下不同形狀圖标的權重，找出近似值。來吧，先從圓形開始：

在這個例子中，直徑d是20px，半徑r是10px，圓的面積約等于314px²。把圓的面積開個根号√，方形的邊長a大約為17.7px，四舍五入到整數，那麼邊長a為18px，接下來算算方形的面積：

邊長a為18px，方形的面積為324px²。最後算一下矩形的面積：

邊長b為20px，邊長c為16px。最後我們根據這些科學的尺寸設計一組相對和諧的圖标：

七、描邊寬度

除了保持相同的視覺權重，圖标的描線寬度也應該保持一緻，達到像素級統一，這裡我建議描邊使用整數值，這樣更便于設計。

另外，不要忘記元素之間的最小間距，應該大于或等于描邊的寬度。

八、圓角

圖标的和諧還在于邊角的統一。尖角不用說了，保持統一的垂直90度就可以。這裡需要重要說的是圓角，不能所有的形狀都使用同一個圓角度數，而是要根據圖标形狀的不同靈活調節圓角度數。

例如一個圖标有裡外兩個平行的圓角時，不能裡外都使用1px的圓角，這樣會讓圖标看起來不統一。

正确的做法是讓外面的圓角更大，設置為3px，裡面的圓角為1px，讓圖标看起來更和諧。

根據對象大小，設置不同的圓角數，保證視覺統一。

九、角度

同一組圖标保持相同的傾角設計，可以讓圖标看起來更統一。

圖标中所有傾斜的線條都限定為45度角，會讓圖标看起來更嚴謹和規範。

十、視覺平衡

在設計圖标時，既要利用作圖軟件把握嚴格的對稱和尺寸标準，也要注意多用眼睛去觀察圖标的視覺平衡，保證圖标看起來很統一。

最典型的情況就是繪制“播放”圖标時，使用軟件去調節三角形左右兩邊的完全對稱，圖标看起來反而會有點不平衡，看着感覺離左邊近，離右邊遠(右圖)。在這種情況下，我們就要在對稱的基礎上，将三角形向右移動一點，來保證視覺上的平衡(左圖)。

十一、透視 (2D/3D)

除了扁平的2D風格圖标外，也可以考慮使用3D風格的圖标樣式，讓圖标的體積感和空間感更強。

無論使用哪一種，同一組的圖标要保持統一的樣式，比如要用3D樣式，那麼這一組3D圖标要使用相同角度的透視。

十二、設計常識

上面提到了圖标設計的很多規則，在日常設計中建議大家将這些規則作為指導。但是任何規則都有例外，如果有必要，我們可以打破規則。

左邊的圖标使用了不同的圓角和角度，來保證圖标像素級的完美；在右邊的圖标中，右下角的圖形雖然超出了安全區域，卻保證了整個圖标的平衡。

十三、結論

圖标設計是看着容易，做起來卻很難的一類設計，把握這些關鍵細節能讓我們的圖标設計水平提升更多。

#專欄作家#

作者：Clippp，Clip設計夾。每周精選設計文章，專注分享關于産品、交互、UI視覺上的設計思考。

本文原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部