作為UI設計師，畫圖標是日常工作中的比較重要的一部分，那么你圖標的作用是什么？如何畫圖標？本期小編就來說說相關知識~

圖標的基本認識

圖標是具有指代意義的具有標識性質的圖形，它不僅是一種圖形，更是一種標識，它具有高度濃縮并快捷傳達信息、便于記憶的特性。

圖標的分類

圖標主要分為工具類和裝飾類。

工具類圖標，具有明確的含義、可以提示用戶的圖標，是工作中比較常用的圖標。

裝飾類圖標，可能沒有具體的含義，會帶有活動、節日的運營目的。

我們這次主要講一下工具類的圖標。

圖標的類型

1、線性圖標（單色、多粗細、多色、斷點、漸變、描邊疊加）

2、面性圖標（單色、多色、漸變、疊加）

3、混合圖標（面線混合）

混合圖標除了我示意的這些，還有其他的樣式，我就不一一列舉了。

以上圖標我是用同一個基本樣式來變化出不同風格，這樣可以更好的對比，但是美觀性上會略有犧牲。

圖標的性格

簡單知道了圖標不同的繪制手法之后，就要了解圖標的屬性性格。

影響圖標風格的主要因素有：線條的粗細、圓角的大小、顏色的使用

線條越細越感覺精致，線條越粗越感覺踏實；圓角越小越感覺硬朗，圓角越大越感覺可愛；

顏色的使用就是顏色本身的感覺。

繪制圖標時選擇哪種性格可以依據產品的定位來確定，比如二次元、兒童教育類的就適合活潑可愛的圖標，奢侈品牌類的就適合高端精致的圖標。

如何畫一個圖標

了解了那么多的基礎知識之后，該如何畫一個圖標呢？

下面告訴大家我畫圖標的“獨家秘籍”，以畫一個「外賣」的圖標為例。

第一步：確認風格

“如果是在已經有的一套圖標中增加一個，那風格和之前的保持一致就行，如果是要自己從零開始畫一套新圖標，那么可以依據產品的調性去確定圖標的風格。”

那么我這次的例子是要在一套圖標中增加一個圖標，所以風格直接統一就行。

第二步：羅列關鍵詞、聯想詞

外賣聯想詞：吃飯、美食、米飯、面條、盒飯、碗、餐具、吃 

這一步要發散思維，相關的詞匯都可以列出來，不斷的發散

第三步：查找參考

接下來就是按照上面幾個關鍵詞去網上瘋狂的找參考，我一般會去「Iconfont」「花瓣」看直接相關的圖標參考，有時候會用「度娘」看一些實物的參考，但是基礎不夠的話，看實物提煉會有點困難，還是直接看圖形參考會更直觀。

第四步：選取合適的參考繪制

找到一些覺得滿意的參考之后，可以按照關鍵詞，截圖放在一起，然后選擇比較好的，或者依照現有風格比較好提煉去進行繪制。這一步不是“抄”，而是借鑒參考，因為你直接“抄”不加任何修改，很容易整體風格不統一。

看到上面的參考會發現比較貼切的是外賣騎手的車，但是圖標樣式過于復雜，其他的圖標雖然相關，但是表示外賣會有點牽強。這個時候就要繼續聯想，外賣一般都是裝在盒子里面的，可以用外賣盒表示，再加一雙筷子，會更加貼切。

第五步：調整細節 

畫出了大概的樣子，最重要的一步就是調整細節，按照統一的風格去修改。比如大小統一、圓角統一、復雜程度統一、描邊的粗細統一、不同顏色的視覺占比統一等等。

圖標的統一性

大小統一

這里的大小統一不是指的物理尺寸的統一，因為人的眼睛會有視覺偏差，所以一般的大小統一是指視覺上的大小統一，說人話就是用你眼睛看起來是大小統一的。

我一般會使用同一個尺寸的底板來控制圖標的大小，例如都用一套圖標都用48x48的底板，在繪制圖標的時候不要整個填充，要留有一定的間隔，那么圖標在繪制的時候可以依據視覺進行調整，從而達到視覺統一。（網上也有很多推薦使用圖標柵格的，如果是想走技術流的可以自行百度“圖標柵格”）

圓角、描邊粗細統一

圓角要使用的統一的圓角，描邊的粗細也要統一

復雜程度統一

復雜程度就是一個圖標是簡約的還是復雜的，基本的線條多少，或者色塊的多少，要大致統一，這樣看起來才是一套的圖標。

不同顏色占比統一

使用顏色要統一，每個顏色在圖標中的占比要大致一樣。

在調整完這些小細節之后，一個圖標就繪制完成了。

以上就是本期分享的內容啦！希望對各位小伙伴有所幫助~

轉載聲明：本文來源于網絡，不作任何商業用途