画图标的五大步骤

作为UI设计师，画图标是日常工作中的比较重要的一部分，那么你图标的作用是什么？如何画图标？本期小编就来说说相关知识~

图标的基本认识

图标是具有指代意义的具有标识性质的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。

图标的分类

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

工具类图标，具有明确的含义、可以提示用户的图标，是工作中比较常用的图标。

装饰类图标，可能没有具体的含义，会带有活动、节日的运营目的。

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

图标的类型

1、线性图标（单色、多粗细、多色、断点、渐变、描边叠加）

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

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

混合图标除了我示意的这些，还有其他的样式，我就不一一列举了。

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

图标的性格

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

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

线条越细越感觉精致，线条越粗越感觉踏实；圆角越小越感觉硬朗，圆角越大越感觉可爱；

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

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

如何画一个图标

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

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

第一步：确认风格

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

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

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

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

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

第三步：查找参考

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

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

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

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

第五步：调整细节 

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

图标的统一性

大小统一

这里的大小统一不是指的物理尺寸的统一，因为人的眼睛会有视觉偏差，所以一般的大小统一是指视觉上的大小统一，说人话就是用你眼睛看起来是大小统一的。

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

圆角、描边粗细统一

圆角要使用的统一的圆角，描边的粗细也要统一

复杂程度统一

复杂程度就是一个图标是简约的还是复杂的，基本的线条多少，或者色块的多少，要大致统一，这样看起来才是一套的图标。

不同颜色占比统一

使用颜色要统一，每个颜色在图标中的占比要大致一样。

在调整完这些小细节之后，一个图标就绘制完成了。

以上就是本期分享的内容啦！希望对各位小伙伴有所帮助~

转载声明：本文来源于网络，不作任何商业用途