知道如何设计好图标,对于设计师来说是一个不可或缺的技能。下面的图标设计指南可以帮助你快速绘制图标,让我们开始吧!


图标元素


1、大小

一致性是设计图标的关键,所有的图标绘制都要大小相同。并知道如何构建一个网格(例如8px或10 px),这样就可以设计所有图标大小了。例如我们有一个基于8px的网格,那么我们的图标大小是最好的16 px,24 px或32 px等。

通常我们绘制一个通用大小的图标,然后让开发人员调整大小。但当我们的图标涉及到一些细节时,就需要根据尺寸大小分别绘制它们。例如,我们的产品图标可能是24 px,但营销图标是80 px。这两个图标的使用将非常不同,所以我们需要在这些较大的尺寸上添加一些细节。

2、颜色

如果是产品图标,最好只使用黑色。如果是营销图标,可以使用两种颜色,图标颜色不要超过3种。

3、栅格

在绘制图标时可以使用基于像素划分的像素栅格,因为这样可以把对象对齐到每一个像素,这让图标里面的元素更加整齐。

而视觉栅格可以找出图标的中心,并感知到图标大小多大。我们在绘制图标时可以设定一个固定大小的容器,这样图标在导出时尺寸相同。添加内边距可以让图标在视觉上看起来更加平衡,避免以后开发时还需要重新调整。

在视觉上,图标中的主要部分应该垂直并水平居中。


4、描边填充

填充图标具有比较好的可识别性,描边图标则方便添加细节。

例如你想要绘制描边图标,则需要笔画粗细相同,并且笔画间距要比笔画本身更粗。

在绘制描边图标并进行填充时,首先考虑简化线条。绘制填充图标的描边版本,需要了解线条粗细,并添加一些细节。


绘制图标


1、几何图形

绘制图标通常都会选择一些常见的几何图形绘制,例如矩形和圆形。

需要绘制复杂的几何图形的话,首先使用矩形工具与椭圆工具绘制,也可以使用钢笔工具逐点绘制。需要绘制有角度的几何图形的话,可以使用像素栅格来逐点绘制。

2、抽象图形

抽象图形绘制可以使用钢笔工具逐点绘制曲线,也可以使用智能节点弯曲工具。将所有的点画成直线,然后用弯曲工具把节点变为顺畅的曲线。

角的绘制方式有几种:斜接(方形)、斜角、和圆角。

3、圆角半径

为图标绘制圆角时,需要确保所有圆角半径相同。同心形状需要调整圆角半径,让内部形状的圆角半径略小于外部形状的圆角半径。

4、内部元素

当我们需要在描边图标内部填充元素,最好使用与描边成比例的填充形状,并且一定不要太大。

5、隐喻

很多图标的绘制都用到隐喻,比如房子意味着主页,X意味着错误。缩小图标需要保留隐喻元素,而不是直接按比例缩小。

6、透视

很少设计师会给图标添加透视效果,但你想要添加透视,就需要把所有元素看为一个整体添加。

最重要的一点是:图标中尽量不要有文字。

上面讲了很多图标设计的知识,大家可以参考上面内容绘制图标,希望对你能够有所帮助。