总监出品 ！UI设计师必须掌握的图标基础扫盲文
· 2026-09-05 17:49:46
图标设计的课程做了很久也很多 ，但不管怎么做 ，设计师必扫盲大家都还是须掌会持续提出五花八门的问题，多数问题不是握的文没看完课程还是没练习导致的 ，而是图标纯粹的认知上的盲点 ，且这些盲点往往又非常基础 。基础
所以 ，总监我要做个基础的出品图标基本概念的扫盲 ，让所有初学者在学习图标设计之前 ，设计师必扫盲先对 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 工具生成 ，大幅度提高图标设计的效率。
以上就是我们整理的日常可以接触到的最常见的图标风格类型 ，还有其它设计风格就不一一例举 。只要理解这些风格图标的适用工具以及绘制思路 ，就可能在看到其它图标设计风格后举一反三，自己构思出它们适用的工具和技法的应用。
结尾
图标的入门到掌握是一个比较艰苦的过程，基础工具图标的绘制是整个图标设计的核心基础 ，它的练习量是需要以千记的（大概需要一整个月的练习） ，偷懒是跨不过入门的门槛的 。
最后 ，比掌握图标设计技巧更重要的技能 ，就是选择适合当前界面的图标风格的能力，这也是我们在正式课程中建议优先训练和掌握的技能 。
作者 ：超人的电话亭
文章推荐：
NCT十周年庆典下月包含首尔 ！喷泉秀×服装展×跳蚤市场 粉丝狂欢月来了 ！