@設研_倉倉君:作為一個UI設計師,畫圖標是日常工作中的比較重要的一部分,那么圖標的作用是什么?如何畫圖標?我來偷偷告訴你我的畫圖標“獨家秘籍”。
圖標的基本認識
圖標是具有指代意義的具有標識性質的圖形,它不僅是一種圖形,更是一種標識,它具有高度濃縮并快捷傳達信息、便于記憶的特性。
圖標的分類
圖標主要分為工具類和裝飾類。
工具類圖標,具有明確的含義、可以提示用戶的圖標,是工作中比較常用的圖標。
裝飾類圖標,可能沒有具體的含義,會帶有活動、節日的運營目的。
我這次主要講一下工具類的圖標。
圖標的類型
1、線性圖標(單色、多粗細、多色、斷點、漸變、疊加)
2、面性圖標(單色、多色、漸變、疊加)
3、混合圖標(面線混合)
圖標的性格
線條越細越感覺精致,線條越粗越感覺踏實;圓角越小越感覺硬朗,圓角越大越感覺可愛;顏色的使用就是顏色本身的感覺。
如何畫一個圖標
了解了那么多的基礎知識之后,該如何畫一個圖標呢?
下面告訴大家我畫圖標的“獨家秘籍”,以畫一個「外賣」的圖標為例。
第一步:確認風格
如果是在已經有的一套圖標中增加幾個圖標,那風格和之前的保持一致就行;
如果是要自己從零開始畫一套新圖標,那么可以依據產品的調性去確定圖標的風格。
我這次的例子是要在一套圖標中增加一個圖標,所以風格直接統一就行。
第二步:羅列關鍵詞、聯想詞
外賣聯想:吃飯、美食、米飯、面條、盒飯、碗、餐具、吃
這一步要發散思維,相關的詞匯都可以列出來,不斷的去發散。
第三步:查找參考
接下來就是按照上面幾個關鍵詞去網上瘋狂的找參考,我一般會去「Iconfont」「花瓣」看直接相關的圖標參考,有時候會用「度娘」看一些實物的參考,但是基礎不夠的話,看實物提煉會有點困難,還是直接看圖形參考會更直觀。

- 大小統一
這里的大小統一不是指的物理尺寸的統一,因為人的眼睛會有視覺偏差,所以一般的大小統一是指視覺上的大小統一,說人話就是用你眼睛看起來是大小統一的。
我一般會使用同一個尺寸的底板來控制圖標的大小,例如都用一套圖標都用48×48的底板,在繪制圖標的時候不要整個填充,要留有一定的間隔,那么圖標在繪制的時候可以依據視覺進行調整,從而達到視覺統一。(網上也有很多推薦使用圖標柵格的,如果是想走技術流的可以自行百度“圖標柵格”)
- 圓角、描邊粗細統一
圓角要使用的統一的圓角,描邊的粗細也要統一
- 復雜程度統一
復雜程度就是一個圖標是簡約的還是復雜的,基本的線條多少,或者色塊的多少,要大致統一,這樣看起來才是一套的圖標。
- 不同顏色占比統一
使用顏色要統一,每個顏色在圖標中的占比要大致一樣。
原文地址:Leo設研所(公眾號)
作者:設研_倉倉君
轉載請注明:學UI網 » 我做出了違背祖訓的決定,把這篇五步圖標設計大法傳授你們