从小 icon 到大 ICON

越来越多的交互设计师想要提高视觉设计能力，向全链路设计师发展，但是很多人并非美术专业科班出身，面对复杂多样的视觉设计技能，往往不知如何入手。在比较成熟的设计团队，排版布局、色彩、字体等都有可以直接复用的规范，而 icon、插画经常需要自己去画，所以绘制 icon、插画成为没有视觉设计经验的同学面临的最大困难。在日常工作中，我被询问最多的视觉设计问题，也集中在此。因此本文将针对如何学习和提高 icon、插画设计能力，分享我个人的一些经验和建议。

在做这次分享之前，我从零基础的同学那里收集了一些他们在学习中遇到的问题。问题有很多，但大体可以分成两类。一类是中长期问题，不知道应该先学什么再学什么，不知道怎么学；另一类是短期问题，不知道最基础的软件操作。

下文将尝试解答这两类问题，然后分享几个不成熟的小建议。

1. 如何规划学习路径

由于时间和金钱成本，大部分同学都不会专门去报个培训班学习 icon 和插画设计，而是自己摸索练习。自学面临的第一个问题是要学些什么，第二个问题是先学什么再学什么，第三个问题就是怎么学。学些什么取决于自己的工作需要、职业规划和个人兴趣，因此我们不展开讨论，主要关注后面两个问题。

就算把视觉设计技能聚焦到 icon 和插画设计上，还是让很多同学觉得脑壳疼：先学画 icon 还是插画？先学扁平风格还是拟物风格？要不要一开始就学习设计规范。。。  

面对一个陌生的技能，我们都很容易陷入迷茫，但是我们可以回忆一下我们学习其他技能的经历，从中获得一些启发。比如说，你是怎么学习英语的？

首先老师会教我们最简单的字母，然后是简单的单词，接着是简单的句子，再接着是复杂的句子，再再接着是简单的文章。。。

老师一开始会让我们复述她念过的词语，然后让我们模仿案例说一些新句子，最后引导我们自己组织语言和她进行自由交流。

从学习英语的经历中，我们可以得到两个启发：学习对象应该从简单到复杂，学习思路应该从临摹到借鉴再到原创。

学习对象：从简单到复杂

icon 是界面中最小单位的图形元素，插画可以看成是很多个简单图形元素组合成的复杂图形元素。如下图所示，我们可以从右边的插画中找到左边的 icon。因此，零基础的同学可以先学习 icon 设计，再学习插画设计。

从风格上看，扁平风格的 icon 比带有质感的拟物 icon 对技能的要求低一些，所以可以先学习绘制扁平风格的 icon，再学习绘制有质感的 icon。

越来越多的互联网产品使用动态元素来吸引用户的注意力，给用户提供愉悦的视觉体验，这是一个不可忽视的趋势。但是我们需要先集中精力把静态的元素画好，再尝试更难的动态设计。

很多教程一上来就教你怎么画出符合规范的 icon，这当然很重要，可是对于一个零基础的初学者来说，有限的注意力被分散到圆角、倾斜度、描边粗细等细节上之后，可能连最简单的造型都画不准。因此，我建议初学者一开始练习的时候，不需要太关注所谓的规范，聚焦在怎么把自己想要表达的信息图形化，怎么让图形更加美观即可。当基础表达能力足够了，再考虑如何构建界面中 icon、插画的秩序。什么场景使用填充 icon、什么场景使用描边 icon，什么场景使用 24*24 的 icon、什么场景使用 16*16 的 icon 。。。这些问题都稍后再考虑吧。

视觉设计除了满足用户审美需求、场景氛围营造外，更重要的任务是塑造和传递品牌形象。掌握了基本的视觉设计能力后，同学们可以朝这个方向努力。下图 Plus_X 为 11 街设计的 icon 就具有非常显著的品牌特征。

学习思路：从临摹到借鉴再到原创

大多数人都需要先输入足够多的素材，吸收消化后才能输出属于自己的表达。

在 icon、插画设计上，我们的输入主要通过临摹来实现；然后借鉴原作来创作一些作品来帮助我们进一步掌握原作的技巧；最后我们就可以利用掌握的技巧创作属于我们自己的作品了。

下面举个我学习扁平风格插画的例子。

几年前下图这种扁平风格的插画非常流行，我也非常喜欢，想要学会画这种风格的插画。所以我就先找了一张很漂亮的图进行临摹，你们可以猜一下哪张是原作。

答案是左边这张。

通过对优秀作品的临摹，我了解了扁平风格插画表现空间关系的技巧、增加画面细节和层次的方法。在这个基础上，我借鉴原作画了几张图，这时候只能生搬硬套原作的一些处理手法，没有完全脱离原作，但是对扁平风格插画的理解更深了。

最后我把扁平插画的技巧内化，脱离原作创作出了属于我自己的作品，在光影、构图上都加入了我自己的想法，算是完成了对这一风格的学习。

学习路径

通过上面的分析，我们可以得出一个简单的学习路径：临摹扁平风格的 icon > 借鉴扁平风格的 icon > 创作扁平风格的icon > 创作统一风格的成套扁平 icon > 创作成体系的扁平 icon > 创作有品牌特征的扁平 icon > 临摹扁平风格的缺省页插画 > 。。。

以一个笑脸 icon 为例：

1. 努力把 icon 画得和原作一摸一样，积累素材（实际上应该要临摹大量的icon，不止这一个）；

2. 尝试在原作的基础上做一些改变，比如说改变眼睛和嘴巴的比例，让他们看起来有些不一样；

3. 加入更多的想法，豆豆眼改成眯眯眼，嘴巴增加上面的弧度，变成一个和原作不一样的 icon；

4. 延展出更多的表情 icon；

5. 规范这些表情 icon 的描边、比例，绘制填充型 icon、彩色 icon 等并定义使用场景，建立 icon 的秩序。

6. 尝试将品牌特征，比如色彩、造型等因子融入到 icon 中

7. 。。。
   

这个学习路径仅供参考，大家还是要和工作需求、职业规划、个人兴趣想结合，灵活调整，选择适合自己的学习路径。

现在我们清楚第一步是从临摹扁平 icon 开始，那么我们如何开始第一步呢？

2. 如何开始第一步

认识软件

首先我们来认识一下常见的软件。这些软件大致可以分成三类。第一类是 Figma、Sketch、Ai，它们比较适合用来绘制扁平风格或者轻质感风格的 icon；第二类是 Photoshop，它当然也可以用来绘制扁平风格或者轻质感风格的 icon，但其实用来画拟物风格的 icon 才能体现出它的强大；第三类是 Cinema 4D，它比较适合用来建 3D icon。

从我们实际工作出发，Figma 其实基本上可以满足我们绝大部分的需求，毕竟扁平风格是主流。而且就算是想用来画一些复杂一点的 icon，Figma 也可以实现，下面右图是我用 Figma 绘制的轻质感 icon。所以对于初学者来说，先掌握 Figma 就足够了。 

学习常用工具

Figma 有非常多的工具，画 icon、插画最常用到的是以下四个工具：

图形工具：主要用来构建基础图形，很大一部分 icon 都可以用基础图形修改出来；Figma 官方教学链接>

布尔运算：主要用来把简单图形组合起来成为比较复杂的图形；Figma 官方教学链接>

钢笔工具：主要用来绘制不规则的图形；Figma 官方教学链接>

蒙板：主要用来修建组合图形；Figma 官方教学链接>

学会使用这四个工具，就能够临摹出大部分扁平风格的 icon 了。

对初学者来说最难掌握的应该是钢笔工具，所以我这里推荐一个钢笔工具练习网站>，大家可以在游戏中掌握钢笔工具。

收集优秀案例

掌握基本的软件操作后，我们就可以收集优秀案例开始临摹了。并不是所有案例都值得临摹的。这里我建议大家优先选择成熟产品、大平台的案例，比如 Google、iOS、Facebook、QQ。。。它们的 icon 都是由优秀设计师设计的，比较有学习价值。优先推荐 Google 的图标库>。

除此之外，我们也可以利用 Pinterest 的推荐功能，快速建立自己的素材库。

临摹的技巧

我们终于可以开始临摹了！我有几个临摹的小技巧可以跟大家分享：

1. 学会观察和拆解；

2. 眯着眼观察；

3. 不要描摹；

4. 拿起你的笔和纸；

5. 尽可能还原；

6. 总结经验。

举个栗子，我们来临摹一个 Google 的小船 icon。

首先我们需要把这个稍微有点复杂的 icon 进行拆解，把它拆成一些基础的图形，然后再想办法去实现它的细节。

如果你不知道怎么拆解，你可以尝试眯着眼观察它，就像是加了一个高斯模糊，这样会方面你观察它的主要轮廓，忽略细节。

值得注意的是，不要直接在原作上面建个图层描摹，描摹会让你失去自己观察原作比例、细节的机会。在原作旁边建个图层画吧！

一开始就想着怎么用软件上的工具画 icon，可能会分散你的注意力，让你不知道如何下手。那么你可以拿起你的笔和纸，用最原始的方式把它画出来，聚焦在它的造型、比例上。然后再用软件来实现它。

在临摹的阶段，应该要尽最大努力还原原作。你可以临摹完后观察一下自己画的和原作画的有什么区别，比如说造型、比例、倾斜角度、间距等等细节。

临摹完成并不代表学习完成，总结经验是非常重要的。你应该去思考一些问题，比如说，自己临摹得哪里不到位？这个案例哪里处理得好？为什么案例这么处理。。。

在临摹这个 icon 的时候，我一开始的想法是想用下面的海浪直接去切上面的船身，这样处理的图形比较规整；但是原作把船身的海浪拉高了，使浪的特征更明显，更有趣，在小尺寸下能看得更清楚。这就是原作值得学习的地方。

学习资源

对于零基础的同学来说，可能临摹 icon 也并非易事，需要一步一步跟着操作。所以我收集了几个教程供大家参考。

[B站]  [系统课] 图标——不用钢笔工具的ICON绘制教程>

[B站]  02-Figma基础-图标实战1>

[B站]  03-Figma入门-图标实战2>

[B站]  04-Figma入门-图标实战3>

[B站]  05-Figma入门-图标实战4>

[油管]  artworkbean>

3. 一些小建议

我有一些不成熟的小建议，或者会对大家自学有所帮助。

完成比完美重要

刚开始的时候，大家作品的完成度都会比较低，就算很努力也画不出好的作品。这时候不要太苛责自己，只要每个时间段都完成一些练习，就是很棒的成果。量的积累能够带来质的飞跃。

下面是我很久之前做的练习，现在看来这些 icon 非常粗糙，很多细节都没有处理。但是就是这些失败的作品让我一点点进步。

成套输出

这是我近一两年的体会。以前我经常做一些零散的练习，今天练 A 风格明天练 B 风格，总感觉收获不大，成就感也不高。后来我尝试做一些成套的作品，不用每天都思考今天要练什么内容，这样无论出图的效率还是质量都高了很多。成套输出还能帮助我更好的理解整体，观察到一些零散练习发现不了的细节。

尽快运用到工作中

实践不仅是检验真理的唯一标准，还是获得成就感的最好途径。学习了一项技能，把它运用到工作中，让用户看到你的学习成果，这是非常有成就感的一件事。

我之前有一段时间在学习 2.5D 风格的插画，然后刚好有项目用得上，这让我感到非常高兴，更有动力去学习新技能。

和生活联系起来

如果只是为了满足工作而学习视觉技能，那将是一件非常枯燥，需要毅力去坚持的事情。视觉设计和交互设计不太一样，用线框图、流程图、交互文档没办法表达你对生活的感受，但是 icon、插画可以。

比如说，我嘴比较馋，于是我画了一组食物 icon。这让练习技能成了一件快乐的事情，不需要消耗太多意志力去坚持。

如果你喜欢化妆，那你可以画一画你的化妆品；如果你喜欢健身，可以画一画你的健身器材；如果你喜欢旅游，可以画一画沿途的风景。

分享你的作品

一个人默默坚持太难了，你可以从沙雕网友那获得一些鼓励。勇敢地去分享你的作品吧，不管你画得有多稀烂，总有好心人（比如我）为你点赞！而且你还可以找到志同道合的朋友，大家一起练习、一起进步。

总结

最后我们来总结一下，本文介绍了：

如何规划学习路径：从临摹扁平 icon 开始，逐步升级

如何开始第一步：学习软件、工具、临摹

一些小建议：五个小建议

希望本文能够给希望提高视觉设计技能的初学者一点点帮助，THX～