作為UI設(shè)計師，在日常的工作中，避免不了做圖標規(guī)范。今天跟大家聊一聊，UI設(shè)計中的圖標設(shè)計。

規(guī)范的重要性不用多說了，沒有規(guī)范多個設(shè)計師繪制的圖標會有很多差異，描邊粗細、角度、圓角度等等。今天的文章和大家聊一下圖標的設(shè)計。

圖標風格

UI設(shè)計中的圖標風格類型有很多種，設(shè)計表現(xiàn)手法也千千萬，大致上我們可以把我們常用的圖標分為幾大類：面性圖標、線性圖標、漸變色圖標、多色圖標、線面混合圖標、擬物圖標、2.5D圖標，我們只針對常用的功能性圖標，線性圖標和面性圖標展開說一下。

???點擊獲取更多設(shè)計資源

https://js.design/community?category=design&source=bz&plan=bbqbz769

1.線性圖標

2.面性圖標

無論你是To C 還是To B 的產(chǎn)品，無論是移動端還是PC端，都離不開圖標的應用，而各種風格里最常用的就是以上2種風格的圖標。二、圖標設(shè)計原則1.表意的準確在圖形化的時代，雖然圖標一般都搭配文字使用。但是既然是傳達信息，含義就要準確。讓人一看就能大概知道是什么含義。比如下面圖標即便沒有文字說明，我們也能讀懂圖標表達的含義。繪制圖標時候，問自己幾個問題，這個圖標應用在哪里？要傳達什么含義？

這里需要注意的是，不要創(chuàng)新某種固化含義的圖標，比如關(guān)閉、搜索這類的，這不是創(chuàng)新，這是錯誤。但是你可以運用不同表現(xiàn)手法去設(shè)計。

3. 風格一致

很多新設(shè)計師，對一致性有一定誤解，這里的一致性指的是一個產(chǎn)品中無論是移動端還是PC端，某塊功能區(qū)出現(xiàn)的圖標要保持一致性的原則。比如APP中的金剛區(qū)、導航欄。

如滴滴的首頁、整個頁面采用了多種設(shè)計風格的圖標、但是同一區(qū)域要保持一致性原則，保證產(chǎn)品的一致性。

4. 粗細一致

拿線性圖標來說，在繪制圖標時候，保證描邊粗細一致、端點一致、傾斜度，原角度一致的原則去繪制。

5..簡潔

圖標的設(shè)計盡量簡潔為主，一般圖標區(qū)域都很小，有時候為了保證可點擊區(qū)域還要做一個虛擬的可點擊區(qū)域，來保證可用性。因此過于復雜的細節(jié)不適用功能性圖標，這里在設(shè)計的時候要求設(shè)計師去繁從簡的同時，還要確保圖標的表意明確。

6. .視覺大小一致

人的眼睛很神奇，他會誤導我們，所以我們在繪制圖標時候，要保證圖標的視覺大小一致，這里尤其保證同時出現(xiàn)的圖標視覺大小的一致。如下圖物理大小完全一致的正方形和圓形，我們會覺得圓形小了。當我們適當放大圓形圖標物理尺寸，在圖標設(shè)計中同理我們要在視覺上調(diào)整圖標大小。

在繪制圖標時候，我們要建立圖標柵格，來保證圖標的視覺大小一致。確保不出現(xiàn)小數(shù)點、像素模糊的情況。

特殊情況特殊對待

在我們實際項目中，繪制完圖標，規(guī)則不可能適用所有場景。這里一定不要被規(guī)范限制住，規(guī)范是為了更好的服務我們的設(shè)計。不是為了限制大家。

在實際工作中有些頁面圖標就是需要很纖細、或者稍微粗一些，再或者填充效果會更好。那么我們就根據(jù)實際的頁面效果去繪制圖標。最后在規(guī)范里增加一個特殊情況即可。

比如一些復選框的里的對勾，多數(shù)情況下粗一點會更能方便我們?nèi)c擊。如QQ音樂播放頁面，播放鍵就使用了填充效果。

圖標就分享到這里，希望對大家有所幫助，有不嚴謹?shù)胤綒g迎指正。