从零开始画图标系列：超全面的基础知识
从零开始画图标系列：超全面的基础知识
从零开始画图标系列：超全面的基础知识
在UI设计系统中，图标是最重要的组成部分之一，是任何UI界面中不可缺少的视觉元素。了解与图标相关的概念以及如何正确绘制它们是开始 UI 设计的必要条件。
网上有很多关于图标绘制的文章和教诲，但要么太笼统，要么太片面。即便是阅读了很多这种零散的知识，在我们的认知中也很难对它有一个更全面、更系统的理解，所以大多数初级的UI设计师总是不擅长画图标。
针对这个问题，我希望用一篇长文来讲解一下图标设计的所有要点和具体的设计方法，让所有的新晋设计师都能更快的上手图标设计。
本文分为5个部分：
○ 图标介绍：首先对图标有一个整体的认识，了解图标的总种类和应用场景。
○ 工具图标：最常见的工具图标规范，以及相应的设计案例演示。
○ 装饰图标：近年来，视觉图标的设计意识越来越广泛，并有相应的解释。
○ 启动图标：说明启动图标的相关规范以及如何高效设计。
○ 应用案例：介绍一个UI项目应该应用多少个图标规范，以及如何设计正确的图标。
对图标的基本理解
图标是一种图形标志。它有两个概念：广义和狭义。 ，覆盖面非常大。
对于UI设计师来说，我们主要关注的是狭义的概念，这是UI界面视觉构图的关键要素之一。
在当今最常见的扁平化设计风格中，界面的实际视觉构成只有图片、文字、几何图形、图标4个元素。
△ 由图片、文字、几何、图标组成的界面
可以说，图片、文字、几何图形的使用只需要排版技巧，而图标是UI设计中除了插画元素之外唯一需要我们“画”和“创作”的元素涉及到这两件事，难度暴增。
本来，在界面里扔一些方块和圆圈，贴几张图，填一些字，就可以做出界面了。比如Clear APP，不仅工作量少，而且符合极简主义的原则。何必？讨人喜欢的设计图标？
△ 清除APP截图
这涉及到图标角色的讨论。为了节省篇幅，更快速的拿到大家想看的重点干货，我就不从古代人类与图形符号的纠葛写起长篇大论了。现在，我们来说说图形界面本身，为什么图标有这么重要的地位，又离不开它呢？
有两个原因。虽然第一个文字也是图形符号，但相比图标，文字过于复杂，在识别效率上有先天劣势。此外，不同的语言有不同的文本长度。如果您切换到阿拉伯语或俄语，您可能无法将所有文本放在一行中。图标可以更高效的方式浓缩我们想要传达的信息，不仅易于识别，而且使界面更加简洁，便于排版，比如下面的例子。
△ 图标对比换成文字。
第二点是关于视觉的。在某些页面中，如果去掉图标，完全不会影响我们的运营效率和对内容的理解。但是没有图标，没有这些点缀，我们会觉得这个页面看起来太乏味和不愉快。最好的例子是应用程序的设置页面，请参见下面的示例。
△ 设置页面图标有无图标对比
既然你知道了图标的功能和重要性，那么你需要更多地了解我们要在工作中设计哪些图标。
它可以分为三类：
○ 工具图标
○ 装饰图标
○ 启动图标
下面，我们将分别进行介绍，并展示相关的设计类型，方便读者在开始学习具体设计之前，对UI设计创建的图标有一个更全面的了解。
工具图标
首先，让我们谈谈工具图标。这是我们在日常讨论中最常提到的图标类型，即在应用程序中具有明确功能和提示的图标。知识。作为最常见的图标类型，我们无需过多解释。
△ 常用工具图标
虽然很容易理解，但它包含了很多设计风格，可以分为线性和平面两大类，然后分别细分。
1.风格一：线性风格
线形图标，即用线条的笔划轮廓勾勒出图形。大多数人对它的风格的第一反应应该是使用了纯色的封闭轮廓。比如上例中，线形图标看似没有太大的创意空间，但其实有很大的调整空间。
我们在下面列出它们。
△ 线型工具图标
2.风格2：刻面风格
侧边图标，即用颜色填充内容区域的图标样式。同样，在这种类型的图标中，它不仅填充了纯色，而且还有多种视觉表现形式。
△ 通用风格的工具图标
3.风格3：混合风格
当然，在设计图标类型时，不一定是非线性的和通用的。有一些设计师热衷于创造和实验，还创造了一个混合图标，既有线性描边的轮廓，也有填充颜色的区域。常见样式如下：
△ 混合风格的工具图标
装饰图标
与工具图标相比，装饰图标具有更多的视觉效果。对于一些更复杂的应用，过于简单并不能弥补信息过多的信噪比问题。我们需要通过丰富视觉体验来增加内容的观看体验，减少一屏显示的内容量。
比如在分类列表中，只用线框和文字可以将大量内容浓缩到一屏，但实际浏览效率并不会提高，也不美观。
△ 装饰图标在识别中的作用
还有国内的界面设计环境，会根据运营需要专门设计。尤其是在电商领域，首屏图标会变成首页样式。风格以增加活动的气氛。
△ 节日活动中的装饰图标
装饰图标设计，虽然没有明确的规范怎么做，但效果如何？是的，但有四种最常见的类型，如下所述。
1.扁平风格
平面样式的装饰图标通常可以理解为以平面插图的形式绘制的图标。除了继承了平面纯色填充的特点外，它们还比普通图标多了一些细节和趣味。 .
△ 扁平式装饰图标
2.拟物风格
拟物风格的图标现在出现的越来越频繁，并且集中在大型的运营活动中，通常这些活动都会通过拟物化的方式进行头部被设计成有故事的场景，所以顶部的相关图标自然会更适合使用准物理设计形式。
△ Quake 风格的装饰图标
3. 2.5D风格
2.5D是一种具有卡通和像素艺术风格的平面设计。在一些非必要的设计环境下，使用2.5D会比较容易匹配主流的界面设计风格，趣味性和层次感更强。
△ 2.5D风格的装饰图标
4.七彩渐变
这是一个令人垂涎的原创词，我找不到更合适的描述，但我还是觉得夸张很符合它的气质。这个图标是通过一系列非常激进的渐变和对比色实现的，通常带有彩色阴影。
使用此类图标的区域通常呈现出丰富多彩的场景。它只能用于内容非常丰富和用户年轻的产品。这是一种很难控制的设计风格。
△ 彩色渐变风格的装饰图标
5.物理纹理
最后一个是真实摄影对象的设计风格。虽然创作和绘制并不完全依赖于我们，但想想也是合适的。因为这种图标出现的频率很高，所以以后要掌握它的实践。
△ 应用摄影对象的装饰图标
启动图标
最后，我们来谈谈启动图标。启动图标的设计比前两种图标更难说，因为它实际上是一个将“LOGO嵌入系统图标模板”的图标。
除了掌握必要的规范外，启动图标的主要对象设计是LOGO的设计，已经超越了图标绘制本身的知识点。因此，我会针对这个问题解释一些比较熟悉的设计方案，供新手学习。在这里，我们来看看它有哪些设计形式。
1.文本形式
使用文字作为图标主题的类型，通常这类应用的品牌LOGO本身就使用文字，所以这里复制字体。
△ 基于文本的启动图标
2.图标形式
对于部分工具，适合用简单图形传达应用功能的启动图标会使用工具图标来设计。
△ 图标式启动图标
3.图形图标
图形形式看起来和图标形式非常相似，但实际上完全不同于同一类型。之所以不是图标，是因为这类图标的主体图形是一个高度抽象的标志，传达的是品牌而不是图形的含义。
△ 图形启动图标
4.插图形式
对于一些比较纯粹的应用，比如看书、漫画、儿童应用，他们热衷于以卡通形象作为图标的主体进行设计。
△ 类似 Illustrator 的启动图标
5. 地震形式
尽管现在扁平化设计占主导地位，但许多应用程序的启动图标仍然以拟物化方式设计。因为对于这些应用来说，拟物化设计所传达的信息往往更加直观和准确。
△ 拟物启动图标
当然，其他的启动图标设计方法也数不胜数，比如明星头像、摄影、游戏原画等，但了解以上几类就足够了。
上面介绍的这三种图标是未来UI行业会设计的。虽然图标看起来很简单，但可以玩的花样很多。除了正确设计图标之外，高级和低级UI设计师之间的区别还包括他们掌握多少图标设计类型。
所以，在你开始学习之前，不要把设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等着你去尝试。
学习图标所需的软件
了解图表图标的类型，就要开始了解应该用什么软件来制作这些图标了。通常，用于 UI 的主要设计软件包括 PS、AI、Sketch 和 XD。理论上，它们都包含图标绘制的功能。如果我告诉你要精通这4个软件，那么画图标一点也不难。这是很不负责任的，所以为了对新手比较友好（如果你已经全部掌握了就略过吧），我来分析一下这四个软件进行图标设计的优缺点，以及需要的部分要掌握
1. Sketch / XD
这两个软件是我们设计UI界面的主力军。但你必须记住，它们的主要功能是完成 UI 界面元素的布局，而不是创建和绘制。
虽然都包含了路径、画笔、布尔运算等功能（Sketch比XD更全），但是当你想画一些很基础的线形或者曲面图标的时候是没有问题的，但是只要涉及到比较复杂的图形，它往往是无助的。
所以我建议各位UI新手不要从这两个软件入手，而是先掌握PS和AI，然后在想快速实现一些简单图标的时候自然知道怎么用Sketch和XD。
可以说PS和AI的应用决定了我们图标设计的上限，而Sketch和XD则是下限，所以上限越高越好。
2. Photoshop
2. Photoshop
PS是一个可以设计任何东西的设计软件，但本质上是一个“位图软件”。后面的文章会提到，界面中使用矢量格式的图标比较理想，PS不方便矢量操作，比如将矢量图层复制到其他软件。
在实际项目中，我们会使用PS来设计一些视觉表现比较复杂的图标，比如启动图标、拟物图标、实体图标等。
绘制图标所需的PS功能并不多，需要前期学习软件。过程，重点关注以下知识点：
○ 路径创建与调整
○ 钢笔工具和锚点
○ 路径层
○ 布尔运算
○ 图层属性
虽然PS在实际项目中是用来画复杂图标的，但是不妨碍我们用PS从最基本的图标入手，因为如果想掌握上面的知识点，简单的工具图标是最好的锐化石头，再学以后的AI操作，可以更快上手。
3. Illastrator
AI也是UI设计必学的软件。它的功能非常丰富，主要用于设计矢量图形。与PS相比，它对向量运算有更好的支持。它是最全面、最精细的路径细节调整软件，AI中的图形也可以直接复制粘贴到其他应用的画布中。
如果掌握了上面提到的 PS 基础，那么学习 AI 就会轻松很多。其中，AI设计图标中有3个特殊功能需要掌握和学习：
○ 形状发生器
○ 轮廓描边
○ 探路者
熬了几个晚上，掌握了PS和AI的相关知识点，为我们后续的学习提供了技术支持，可以进入下一阶段了。
结尾
这是icon系列的第一篇，信息量不小。所以为了大家方便，最后再总结一下。
○ 知识点1：在UI界面中，图标的主要作用是高效传递信息，美化界面。
○ 知识点2：UI中涉及的图标主要有3类，工具图标、装饰图标、应用图标。
○ 知识点3：工具图标是界面中用来传递信息的图形符号，主要包括线性、多边形、混合三种设计风格。
○ 知识点4：装饰图标是用于增强界面视觉体验的图形，主要包括平面、拟物、2.5D、渐变炫彩等设计风格。
○ 知识点5：应用程序图标是用来启动应用程序的图标，主要包括文字、图标、图形、插页绘画、拟物等设计形式。
○ 知识点6：学习画图标，优先学习PS和AI的路径相关功能，而不是Sketch和XD。
