研究了上百套图标，总监却告诉我图标要这样画！

今天还是一篇非常干货的原创文章。

内容分为两点：

• 快速绘制精致图标的经验与技巧，有效提升专业力
• 团队内有多个设计师协作的时候，如何制定图标设计规范，让设计更整体

归纳图标Z Z ?设计原则

图标的基础特征

动手设计之前，咱们先对完整的图标集进行f { C Z 5 q k分析。

弄明白在画整体的系统图标集合时，各个图标得具备哪些特征，有哪些切入点，可以作为我们在实际绘制时候的依据。

先来看几组 iconfont 的案例，看不太清的同学可以戳图片放大。

围绕上面这些案例，咱们可以归纳出O g ? L图标的几点设计原则。比如：

1. 设计图标需要考虑延续性，图标之间互相牵连影响

图标几乎不会以单个的形式出现，大多数都是以组? o !归类。符号整体性与统一性，都是依靠单个 icon 的共性特征建立起来的。

比如 iconfont 中的这组icon，图标圆形的外轮廓，就保持了一致。其次用户头像的代表符号，也很好保持了延续性。

正是这种小特征，共同组成了图标库的整体特征。

2. 设计手法趋同、图形内容差异

第二点好理解，设计风格、手法要素需要统一，但是内容传达的差异必须要拉开，避免图形趋同导致功能混淆。

比如下面两个案例，由于过于相近，导致用户很难理解图标含义，是天气，还是设置按钮，这种情况e 8 Y我们在设计时需要极力避免。

总结来说，就是图标的共性往往体现在设计手法上[ ^ Y 5 t V 4 7，比如颜色、形状粗细、细节的一K W z { 7 / O 3致性，这些都是设计| 0 6 1 U } ~ n风格的统一。

而图标的特性，往往体现在形状内容差异，形状会决定图标的信息传递含义。所以共性要趋同，特性要拉开，这个是设计图标集的基本原则。

3. 功N } 1能大于形式，图形能理解的情况下样式越简洁越好

不知道大家是否关注，曾经在设计圈风靡一时的ME9 4 S + G X C CB图标风格，产品圈却非常冷门，几乎没有产品在继续用这种风格作为功能性质图标。

△ 该作品来自于网络图片，仅作交流使用

因为虽然图标增加了小? X @ Q e D装饰后，显得有趣精致，但其实也增加了图标的识别难度以及识J E u O Q (别效率，反而背离了图标| : e B Z v # M ,的设计初衷。

所以对于系统功能图标而言，必要的简洁性，高效的识别率，才是关键。

如何制定图标设计规范

图标的设计约束性

聊完了设计主张及基本的特征。接下来7 Q A J咱们开始剖析图标的设计细节，包括分析制定图标的系统设计规范，应该从哪些方r M m i o I面入手。

规范一：基本尺寸比例

规范的第一点，就是图标的基础形状比例。这个比例，主要是约束长与宽，共包含了四个关系，分别为「正方形 : 横矩形 ：竖矩形 ：圆形」

这四个关系的约束m h – ] o，会让图标集里的所有图标大小，看起来是一致的、统一的。横矩形 0 ~ k $ t K A、} n a k = { e , –竖矩形这两个比例，会决定整套图标的饱满程度，横竖比例越一致，图标整体越饱满。

这点大家可以自己斟酌，如果是泛娱乐型的产品，icon可以更饱满一些。如果是偏工具化产品，那么还是可以优先保障图标的识别度，饱满程度倒是其P : { x } }次。

圆润饱满型：

刚正工具型：

规范二：线条粗细、正负形间距

定了比例后，接下里就是对图标的细节刻画。对于线性图标而言，最重要的细节就是线条粗细；对于面性图标而言，最重要的就是正负形之间的间距。

所以这些核心元素，在图标的核心线条、核心区域部分，间距样式都应当保持统一` H } c。

通常在移动端@2x内，主流icon的粗细为3px，而4K c P M J v Q Ipx大多数都是为功能性导航iconV u M ^ w，细一点的图标通常看起来会f y E T a Y x 2更精致一些。

当然也有部分产品使用的是2px，比如新版的YouTube，其次还有些较为l ~ 4 6 = a ]复杂的icon，单根粗细的线段不一定能满G I E ( O = ( G ;足其需求，所以还需要制定一条副线的粗细。

细节可以m s $ E Z根据产品的调性来定，统一即可。

规范三：圆角、角度个性化元素

大比例跟基q & ) ` r ^ | 2本元素确定后，3 H 1 i也可? f 4 z z以制定一些图标的个性化元素规范O R K E C t，比如图标的圆角大小、角度位置，等一些特殊的样式。

像T j $ k ^ q这些个性化的规范，颗粒度可以Case By Case来定义，圆润还是方正，可( + ) P 5以根据产品的视觉风格来定义就好。

这些规范样式定好，就可以充分的让图标集内的图标，从设计上O L ~ r B是保持一[ [ 4致的，且具有特色感。

图标的设计流程

上面讲了关于图标的J m . I Z分析及规范。为了方便大家掌握，接下来咱们就来讲讲，具体动手做，流程是什么样的。这z 5 f ~ O l N里我给个我的步骤作为参考：

第一步：绘制好图标基本网格

第一步，C 9 ? G Y ` M /当然是确定好图标icon的大小，以及上面我提到的基本尺寸比例，四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」的约束，构建好基本7 / : i 6 [骨骼。

我这里以图标容器大小为 5656，预, ` : X j r k 7留8px安全间距，图标最大大小为 4848。

由于视差关系，圆形在图标里面的尺寸是最大Z i U [ ? ] 3 / 6的，所以圆形的大小为4r ! 1848。因为我3 H L U想图标饱满一些，所以正方形的大小我两边各减去2，为424A X ; J2。

然后再绘制出横矩形（4836）与竖矩形（3648），各线段之间的间距保持一致。

然后各个形状居中对齐，这样四个关系「正方形 : 横矩形 ：竖矩v n { ,形 ：圆形」定好后，基本的容器就制定好啦。

第二步：设定图标基本规范

接着制定好图标的基本规范，为了方便大家看得清，我这里设定图标的线条粗细为3px，圆角为6px，干净简洁一些，让它看起来更饱满。

角度、断点啥的，我这里就不定义了，因为只是示例给大家看，讲一下流程，所以尽可能简单一些。大家在做练习的时候，也可以尝试自己去定义一下。

第三步：绘制图标

好了后就可以0 D _ A N u G ?开始绘制图标啦。我这里分别. D B = T 3 k绘制十五个，作为示例

然后就是使用路径工具，根据创意去绘制完善图标了。绘制的过程中，也可以不断调整，让图标看起来更协调，更饱满，更容易识别。

花了十五分钟左右，简单的十五个图标草稿就画好了，接下来咱们开始调整细节5 O Y 。n A H p g –

更详细的绘制方法：

第四步：整体性调整

所有的图标b * c i绘制好了后，a 8 s C ~ 7咱们就可以整体性的开始打磨细节，把图标形状的一些折角处、大小样式调整一致，让图标的节9 X t B x p奏更清晰，整体样式更统一。

这样一组精致的系统icon就绘制好啦。

接着咱们? _ j也可以加点特色风格进行尝试，E D ( 6比如填充一个颜色。

当然细看的话，图标部分细节还是有点糙，其实还可以再调调，但这个主要做示例N O `用，大家自己在做练习的时候，可别像我一样偷懒嗷

图标库下载

上面讲了很多方法经验，文末给大家来点实际的。

我珍藏} { t @ ) c g (了很多较为不错的大厂图u x z e @ 4 v标集合库，日常在画图标没灵感的q d V j V N ) &时候，就会打开看看这些，参考一下。

文件都是矢量格式的，编辑方便，还很全面。今天拿出来送大家白X ^ g ! g [ j p D嫖了

欢迎关注作者的微信公众号：「UX小学」