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

2026-07-21 18:45:45/娱乐/26598 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. UI 设计软件

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

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

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

2. Adobe Ai

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

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

3. Adobe PS

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

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

4. 3D 类软件

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

总监出品

!UI设计师必须掌握的图标基础扫盲文

5. AIGC 类工具

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

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

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

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

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

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

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

Style1 :一般工具图标

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

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

Style2 :复杂工具图标

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

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

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

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

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

Style4 :拟物风格图标

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

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

Style5:轻拟物风格图标

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

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

Style6:插画风格图标

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

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

Style7:2.5D 风格图标

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

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

Style8 :3D 风格图标

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

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

Style9:游戏风格图标

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

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

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

结尾

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

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

作者 :超人的电话亭

#免责声明#

本站提供的一切资源、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。