总监出品！UI设计师必须掌握的图标基础扫盲文

图标设计的课程做了很久也很多，但不管怎么做，大家都还是会持续提出五花八门的问题，多数问题不是没看完课程还是没练习导致的，而是纯粹的认知上的盲点，且这些盲点往往又非常基础。

所以，我要做个基础的图标基本概念的扫盲，让所有初学者在学习图标设计之前，先对 UI 图标的设计有个统一的认知框架，尤其是对图标的类型和使用的软件、技法的认识，然后再去展开具体操作的学习。

一、图标设计学习的基本认识

图标设计是 UI 界面设计中的一环，也是一个相对特殊的技能分支。常规的 UI 界面设计过程是一个排版、布局的过程，即将几何、文本、图片、图标按照一定的思路排列到一个固定的画布区域中去。而图标设计这是一个“绘制”过程，要使用特定的绘图工具来实现图标的图形轮廓并填充适当的色彩。

既然使用的工具和技巧不同，就可以给出一个新的结论：

学习图标设计和学习界面设计不是一件事……

也就是说，你光学会怎么做界面也做不了图标，这是两个没什么相似点的独立技能。UI 界面设计之所以好学且简单就是因为那只是排列内容，而图标设计就是真正的“设计”，包含了创作和绘图的过程，这比界面设计的门槛高了不少。

这就形成了另一个反直觉的概念，即图标虽然是界面的组成部分，图标设计也是界面设计中的子集，但图标设计本身却比界面设计更难、门槛更高，入门图标设计需要投入比界面设计更多的学习精力和练习时长。

同时，图标作为一种平面视觉图形的统称，意味着它没被限制在一个特定的设计形式还是风格中，有数之不尽的创意和拓展性，而不同的设计创意和风格就需要应用不同的设计工具或技法。

这就是图标设计的另一个特性，想做不同风格的图标往往就意味着你要掌握一套新的工具和技法，想要学会所有图标风格的设计是不可能的，所以常规的图标学习都是掌握一些基础风格的设计以后，未来需要应用哪种图标的风格再单独去学习即可。

虽然图标的每种风格都要单独学习，但它们总还是有一些共性和基础知识点是相通的，包含两个部分：图标规范和图形绘制方法。

图标规范即图标作为 UI 界面的一部分需要具备的条件，如尺寸定义、栅格应用、图形表意、一致性等要求。作为基础知识点大家可以翻以前的分享了解，不在这里展开。

图形绘制方法，则是使用设计软件画出图标图形轮廓的方式。而图标大多都是比较规整、严谨的图形（少数手绘风除外），所以要使用矢量绘图的方式绘制，也就是要掌握设计软件中矢量绘图工具的使用。

不管是 UI 设计软件还是平面设计软件、3D 建模软件都包含了矢量绘图工具，它们的底层应用逻辑是相通的，但对矢量绘图的功能实现上却有一定差异。尤其是 UI 设计软件，作为界面设计工具来说，它的矢量绘图功能是非常简陋的，对于图标绘制上存在先天的短板。

所以这又有一个新的反直觉的结论，那就是：

UI 设计软件并不适合用来画图标……

PS：这也导致我们做图标课程里最大的麻烦，用 UI 软件不适用缺陷多，用别的软件又涉及受众零基础不懂操作的问题。

了解完上面这些基本概念以后，我们可以总结，图标设计的学习可以分为三个部分，分别是：

但在真正的 UI 设计过程中，图标设计的要求并不仅仅局限在这三个部分中，还有一个最重要也是最容易被忽视掉的能力 —— 图标风格的选择能力。即筛选出合适的图标设计风格融入页面的整体设计，不仅要提升所处页面的视觉水平，还能保证视觉的统一性的能力。

这四点共同组成了在 UI 设计过程中和图标有关的核心技能，前三者依靠主动练习来达成，后者则要通过经验的积累来提升。

二、图标设计软件的主要解析

前面我们知道了，不同图标设计风格需要使用的工具和技法是不同的，而这里我们就要了解，图标设计中会涉及到的软件有哪些，以及它们各自的特性和优缺点。

1. UI 设计软件

首先讨论的必然是 UI 设计软件，包括 Figma、即时设计、Mastergo、Sketch 等。这些软件设计的主要应用场景是完成 UI 界面的排版布局，只提供了非常基础的矢量图形编辑功能和图层视觉效果，所以它们只能绘制一些图形和效果都相对简单的图标类型，无法完成精度要求高或复杂的图标设计。

这些软件中 Sketch 的矢量功能是做得最好的（遥遥领先），其它软件包括 Figma 也仅仅达到勉强能用的水平（很多细节问题和反直觉操作），所以想画好图标光掌握 UI 设计软件是不够的。

2. Adobe Ai

Adobe Ai 是最强大的矢量绘图工具，包含了大量的矢量编辑、绘图工具，可以实现任意复杂或精确的图形效果。但是，Adobe Ai 有较高的入门门槛，需要单独学习，且很多复杂的图形还需要结合 PS 进行输出，适合成为一个纯粹的图形轮廓绘制工具使用。

3. Adobe PS

Adobe PS 是一个多功能的平面视觉绘图工具，相比 Ai 它的矢量图形编辑能力较弱，但优点是它可以实现所有我们可以想到的平面视觉特效。包含了插画、弥散、拟物等特征的风格，都可以很轻易地通过 PS 的功能实现，而这些进阶视觉功能都是 UI 软件和 Ai 提供不了的。

4. 3D 类软件

3D 类软件即 Blender、C4D、Maya 等包含了从建模到渲染的软件类型，用于实现一些 3D 效果的图标。想实现什么效果看设计师自由发挥，最后渲染完导出成位图置入界面即可。Figma 或 Ai、PS 中虽然也有实现 3D 效果的插件，但是它们可实现的结果局限性非常大，只能生成指定一两种风格的图标。

5. AIGC 类工具

AIGC 类工具即 Midjouney、Stable diffusion、ChatGPT、即梦 AI 等人工智能生成软件，通过输入指令文本 Prompt 来生成对应的图形结果。

不管网上怎么吹嘘 AIGC 的能力，或给出完成度极高的案例成果，都不要轻易相信它们已经十全十美，可以完整接入商业应用中。图标是一种相对严谨的图形，尤其对于整套图标来说更需要细节的统一，而这恰恰是 AIGC 最薄弱的环节，在短期内它还完全无法替代真实的绘制过程。

以上就是 UI 设计中进行图标设计会关联到的主要软件类型，看起来虽然多，但一定要牢记，并不是学图标设计就要把这些软件全部学完，而是要根据我们的实际需求学习。

并且，如果只画图标，那么每个软件内所要掌握的工具和功能是非常有限的，远低于正常学习该软件的难度。所以从效率角度出发，学习不同软件尽量从实例操作教程入手，而不是看该软件的零基础教学。

三、认识这个图标怎么画？

了解完图标涉及的软件类型和特性以后，下面我们就要基于图标风格出发，来认识主流的图标设计风格有哪些以及它们适用的软件工具。

Style1：一般工具图标

一般线性和面性图标通常使用最基础几何+布尔和少量的钢笔锚点控制，就可以完成绘制。所以勉强可以使用 Figma 等 UI 设计软件直接绘制，能使用 Adobe AI 可以实现更精细可控（像素完全对齐）的结果，这个看项目的实际需要决定。

Style2：复杂工具图标

复杂工具图标和基础的差异，就是图形不再只是使用简单的矢量工具能画出来了，所以这类图标基本只能选用 AI 来完成，要应用更复杂的钢笔工具以及路径查找器功能。

Style3：玻璃拟态/新拟态/弥散型图标

玻璃拟态、新拟态、弥散型图标，都属于 UI 设计独有的图标设计风格，而这些风格对图标轮廓的要求并不高，只有简单的图形能塑造这些质感，所以使用 UI 设计软件就足以完成。

Style4：拟物风格图标

拟物风格虽然是前几个世代的 UI 主流风格，但现在依旧有一定的应用场景，比如复古相机应用、DJ 调音台工具、声卡插件界面等等。想要实现高精度的拟物设计图标，就只能使用 PS 来完成，因为要应用 PS 中的复杂的蒙版工具，以及绘制光影、纹理用的滤镜和后期处理。

Style5：轻拟物风格图标

轻拟物风格图标是在拟物基础上进行简化后的图标设计风格，保留了一定的拟物特性，但又让图标的视觉效果看起来没有那么复杂。最简单的轻拟物设计图标可以用 Figma 等 UI 软件勉强实现（京东闪送图标教程里的），如果要做精度更高的轻拟物设计风格，就只能用 PS 才能完成。

Style6：插画风格图标

插画类图标分两种，手绘型和矢量型。手绘型要借助数码手绘工具完成，所以基本只能用 PS 来画（iPad 上的另说）。而如果是矢量插画型的，则使用 AI 来绘制更合理。

Style7：2.5D 风格图标

2.5D 风格也称轴测图风格，属于插画风格的一种，但它有相对标准的绘制步骤和要求，所以算成一个独立的分类。绘制 2.5D 图标需要应用大量的矢量图标，以及进行边角的对齐，所以 AI 是完成 2.5D 风格中最合适的软件。

Style8：3D 风格图标

3D 类风格包含了很多细分的风格，如 lowpoly、轻质感、微软风等就不做细分了，想要实现这些效果只能使用 3D 软件进行建模和渲染。虽然 3D 软件有很多，但 3D 图标的模型和效果都很基础，它们都能够轻易实现。但基于免费和教程量的影响，Blender 是完成这类图标的最佳工具。

Style9：游戏风格图标

游戏类图标只是个大类的统称，也包含了各种各样的图标风格类型，但最有代表性的，就是手绘风格。而这类风格想要进行原创的话只能使用 PS 来绘制，但因为游戏图标细节多，图形要求不太严谨，所以可以借助 AIGC 工具生成，大幅度提高图标设计的效率。

以上就是我们整理的日常可以接触到的最常见的图标风格类型，还有其它设计风格就不一一例举。只要理解这些风格图标的适用工具以及绘制思路，就可能在看到其它图标设计风格后举一反三，自己构思出它们适用的工具和技法的应用。

结尾

图标的入门到掌握是一个比较艰苦的过程，基础工具图标的绘制是整个图标设计的核心基础，它的练习量是需要以千记的（大概需要一整个月的练习），偷懒是跨不过入门的门槛的。

最后，比掌握图标设计技巧更重要的技能，就是选择适合当前界面的图标风格的能力，这也是我们在正式课程中建议优先训练和掌握的技能。

作者：超人的电话亭