五步教你画图标，看看我的“独家秘籍”

作为一个UI设计师，画图标是日常工作中的比较重要的一部分，那么图标的作用是什么？如何画图标？我来偷偷告诉你我的画图标“独家秘籍”。

图标的基本p # r E V ~认识

图标是具有指代意义的具有标识性质的图形，它不仅是一种图形t 0 K V 2 \ . z，更是一种标识，它具有高度s C m . & b a浓缩并快捷传达信息、便于记忆的特性。

图标的分类

图标主要分为工具类和装饰类。

工具类? e ~ &图标，具有明确的含义、可以提示i C l k用户的图标，是工作中比较常用的图标。

装饰类图标，可能没有具体的含义，会带有活动、节2 z D n \ H 4 [日的运营目的。

我们这n N D P次主要讲一下工具类的图标。

图标的类型

1、线性图标P z 6 z 5 Z Q（单色、多粗细、多色、断点、渐变、描边叠加）

2、面性图标（单色、多色、渐变、叠加）X % R

3、混合图标（面线混合）

混合图标除了我示意的这v 3 s 4些，还有其他的样式，我就不一一h % B S – P / a (列举了。

以上图标我是用同一个基本样式来变化出不同风格，这样可以更好的对比k M 4 E，但是美观性上会略有牺牲。

图标的性格

简单知道了图标不同的绘制手法之H f p r后，就要了解图标的属性性格。

影响图标风格的主要因素有：线条的粗细、圆角的大小、颜色的使用

线条越细越感觉精致，线条越粗越感觉踏实；圆角越小越感觉硬朗^ e Z 9 ] } X，圆角越大越感觉可爱；

颜色的使用就是颜色本身的感觉。

绘制图标时选择哪种性格可以依据产品的定位来确定，比如二次元、儿童教育类的就适合活泼可爱的图标，奢侈品牌类的就适合高端精致的图标。

如何画一个图标

了解了那么多的基础知识之后，该如何画一个图标呢？

下面告诉大家我画图标的“独家秘籍”2 ~ . r W，以画一个「外卖」的图标为例。

第一步：确认风格

“如果是在已经有的一套图标中增加一个，那风格和之前的保持一致就行，] Q ! K f 1 w m (如果是要自己从零开始画一套新图标，那么可以依据产品的调X ! * ~性去确定图标的风格。”

那么我这次的例子是要在一套图标中增加一个图标，所以风格直接统一就行。

第二步：罗列关键词、联想词

外卖联想词：吃饭、美食、米饭、面条、盒饭、碗、餐具、吃

这一步要发散思维，相关的词汇都可以列出来，不断的发散

第三步：查找参考

接下来就是按照上面几个关h e . u F键词去网上疯狂的找参考，我一般会X k h @ K去「Iconfont」「花瓣」看直接相关的图标参考，[ D F @ \有时候会用「度娘」看一些实物的参考，但是基础不够的话，看实物提炼会J V ;有点困难，还是直接看图形参考会更直观。

第四步：选取合适的参考绘制

找到一些觉得满意的参考之后，可以按照关键词，截图放在一起，然后选择J _ ^ 1 _ E C \比较好的，或者依照现有风格比较好提炼去进行绘制。这一步不是“抄”，而是借鉴参考，因为你直接“抄”不加任何修改，很容易整体风格不统一。

看到上面的参考会发现比较贴切的是外卖骑手的车，但是图标样式过于复杂，其他的图标虽然相关，但是表示外卖会有点牵强j B g @ &。这个9 j q } s l 3时候就要继续联想，外卖一般都是装在盒子里面的，\ 8 3 * C M +可以用外卖盒表示，再加一双筷子，会更加贴切。

第五步：调整细节

画出了大概的样子，最重\ / x ! 1 I X m ;要的一步就是调整细节，按照统一的风格去修改。比如大小统一、圆角统一、复杂程度统一、描边的粗细统一、不同颜色的视觉占比统一等等。

图标的统一性

大小统一

这里的大小统一不是@ | d U A 0 n u指的物理尺寸的统一，因为人的眼睛会有视觉偏差，所以一般的大小统一是指视觉上的u R S大小统一，说人话就是用/ 4 a { – t Z你眼睛看起来是大小统一的。

我一般会使用同一个尺寸的底板来控制图标的大小，例如都用一套图标都用48×48的底板，在绘制图标的时候不要整个填充，要留有一定的间隔，那么图标在绘制的时候可以依据视觉进行调整，从而达到视觉统一。（网上也C 1 ` W k有很多推荐使用图标栅格的，如果是想走技术流的可以c ^ Q –自行百度“图标栅格”）