在UI设计系统中，图标是最重要的组件之一，是任何UI界面中不可或缺的视觉元素。理解与图标相关的概念以及正确的绘制方式是入门级UI设计的必备条件。
关于互联网上绘制的图标有很多文章和教导，但它们不是太笼统，它们太片面。即使在阅读了大量这些零碎的知识之后，我们很难对我们的认知中的——系统有更全面的了解，因此大多数初级UI设计师总是绘制坏图标。
在回答这个问题时，我希望用一篇长篇文章来理解图标设计的所有关键点和具体的设计方法，这样所有设计新手都可以开始使用图标设计。
本文分为五个部分：

图标介绍：首先，您对图标有了全面的了解，并了解图标的类型和应用场景。

工具图标：最常见工具类型图标的规范，以及相应的设计案例演示。

装饰图标：近年来，越来越广泛地使用视觉图标设计理解，并做出相应的解释。
启动图标：说明启动图标的规格以及如何有效地设计它。
应用案例：介绍在UI项目中应用多少图标规范，如何设计正确的图标。
对图标的基本了解
图标是图形标识符。它有两个概念，广泛和狭隘。广义上指的是在现实世界中具有明确含义的所有图形符号。狭义是指计算机设备界面中的图形符号。它具有非常大的覆盖范围。
对于UI设计师，我们专注于狭义概念，这是UI界面视觉组合的关键元素之一。
在最常见的平面设计风格的瞬间，界面的实际视觉构图只有4个元素，图片——文本——几何——图标。
可以说图像——文本——几何只使用排版技巧，而图标是UI设计中唯一要求我们除了插图元素之外“绘制”——“创建”的元素。事情的困难已经增加。
在原始界面中，抛出一些正方形——并粘贴几张图片——填写一些单词，可以制作界面，如Clear APP，不仅工作量小，而且符合极简主义原则，为什么不感恩设计图标？
这涉及到图标角色的讨论。为了节省空间并进入每个人都希望更快看到的关键干货，我不会从古代人类和图形符号之间的纠缠开始，并谈论图形界面本身。有这么重要的位置，不是吗？
有两个原因。虽然第一个文本也是图形符号，但文本与图标相比过于复杂，并且在识别效率方面存在固有的缺点。而且，不同的语言具有不同的文本长度。如果您更改为阿拉伯语或俄语，则可能无法在一行中安装所有单词。图标可以以更有效的方式压缩我们想要传递的信息，不仅易于识别，而且使界面更简洁，更有利于排版。
第二点是关于视觉欣赏。在某些页面中，如果删除了图标，则不会影响我们的运营效率和对内容的理解。但是没有图标，缺少这些装饰，我们会觉得这个页面看起来太无聊，不好，最好的例子就是应用程序设置页面。
既然您已了解图标的作用和重要性，那么您需要了解我们想要在工作中设计哪些图标。
可分为三大类：
工具图标
装饰图标
启动图标
下面，我们将分别介绍它们并显示相关的设计类型，以便读者在开始学习特定设计之前，可以更全面地了解UI设计创建的图标。
虽然很容易理解，但它包含很多设计风格，可以分为两类：线性和扁平，然后分开细分。
1.风格1：线性风格
线性图标（图形）由线条的描边轮廓勾勒出轮廓。大多数人对其风格识别的第一反应应该是使用纯色封闭轮廓。例如，在模式示例中，线性图标的创意空间似乎不多，但实际上有很多调整空间。
2.风格2：面部风格
面部图标，是一种图标样式，使用内容区域的颜色填充。类似地，在这种类型的图标中，它不仅是一种应用纯色的方式，还有许多类型的视觉表示。
3.风格3：混合风格
当然，在设计图标类型时，它不一定是非线性和非保形的。有些设计师热衷于创作和尝试，并且还创建了具有线性笔划和颜色填充的混合图标。区域。
装饰图标
与工具图标相比，装饰图标具有更多视觉效果。对于一些更复杂的应用，过度简单无法弥补过度的信噪比问题。我们需要丰富视觉体验以提高内容的观看质量并减少在一个屏幕上显示的内容量。
例如，在类别列表中，可以使用线框和文本将大量内容集中到一个屏幕中，但实际的浏览效率不会增加，并且它并不美观。
还有一个国内接口设计环境，将根据操作要求进行专门设计。特别是在电子商务领域，第一屏幕上的图标将被改变为主页的风格，这将增加事件的氛围。
装饰图标设计，虽然没有明确说明如何做，效果如何好，但最常见的类型有四种，下面分别介绍。
平面样式
平面装饰图标通常可以理解为在平面插图中绘制的图标。除了继承平面纯色填充功能外，它还具有比普通图标更多的细节和乐趣。
2.对象的风格
准风格的图标现在越来越频繁出现，并且集中在大规模的经营活动中。通常，这些活动会通过对象的方式将头部设计成类似故事的场景，因此使用自然顶部的相关图标。对象的设计将更合适。
3. 2.5D风格
2.5D是具有卡通和像素绘画风格的平面设计类型。在一些非必要的设计环境中，使用2.5D将更容易与主流界面设计风格相匹配，它具有更强的乐趣和分层。
4.多彩渐变
这是一个词汇的原始术语，找不到更恰当的描述，或者觉得夸张的点与其气质是一致的。这种图标是通过一系列非常激进的渐变和对比来实现的，通常是彩色阴影。
使用这些图标的区域通常呈现出色彩鲜艳的场景，只能用于内容非常丰富且面向用户的产品。这是一个非常困难的设计。
5.物理地图
最后一个是采用真实摄影对象的设计风格。虽然它不完全属于我们的创作和绘画，但考虑它是合适的。由于此图标经常出现，因此有必要在以后掌握它。启动图标
最后，我们来谈谈启动图标。启动图标的设计比前两种图标更难，因为它实际上是“徽标进入系统图标模板”的图标。
除了掌握必要的规格外，发射图标主体的设计是LOGO的设计，它超越了图标绘图本身的知识。因此，在将来，我将为此问题解释一些简单易懂的设计解决方案。我们来看看一些设计形式。
文字形式
用作图标主体的文本类型通常是应用程序本身的品牌。 LOGO使用文本，因此在此处复制字体。
2.图标表格
对于某些部分工具，将使用工具图标设计适合使用简单图形传达应用程序功能的启动图标。
3.图形图标
图形表单看起来非常接近图标形式，但它根本不属于同一类型。它不是图标的原因是因为这种图标的主图形是一个高度抽象的标识，传达了品牌标识。不是图形的意思。
4.插图形式
对于一些纯粹的应用程序，如阅读，漫画和儿童应用程序，他们热衷于使用卡通人物作为图标的主体。
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
PS是一款专为一切设计的设计软件，但它本质上是一个“位图软件”。如下文所述，理想的是在界面中使用矢量格式图标，而PS不便于矢量操作，例如将矢量图层复制到其他软件。
在实际项目中，我们将使用PS来设计具有相对复杂视觉性能的一些图标，例如启动图标，工件图标，物理图标等。
没有很多PS功能需要用于绘制图标。您需要在学习此软件的过程中对其进行过滤。关键点有以下几点：
路径创建和调整
钢笔工具和锚
路径图层
布尔运算
图层属性
虽然PS用于在实际项目中绘制复杂图标，但它并不妨碍我们使用PS从最基本的图标中绘制。因为我们想要掌握上述知识点，所以简单的工具图标是最好的锐化工具。 Stone，然后学习AI的操作，你可以更快地开始。
3.弹簧
AI也是UI设计必须学习的软件。它非常通用，主要用于设计矢量图形。与PS相比，它具有更好的矢量运算支持。它是用于调整路径细节的最全面，最精细的软件，AI中的图形也可以直接复制并粘贴到其他应用程序的画布中。
如果你掌握了上面提到的PS基础，那么学习AI要容易得多。其中，AI设计图标中有三个特殊功能需要掌握和学习：
形状发生器
轮廓中风
路径查找器
在花了几个晚上掌握PS和AI的相关知识点后，我们为后续研究提供了技术支持，我们可以进入下一阶段。
结束这是图标系列中的第一篇文章，信息量也不算小。因此，我们将在最后总结它，以便每个人都能更容易记住。
知识点1：在UI的界面中，图标的主要功能是有效地传递信息并美化界面。
知识点2：UI中涉及三种主要类型的图标，例如工具图标，装饰图标和应用程序图标。
知识点三：工具图标，是用于在界面中传达信息的图形符号，主要包括线性，面部和混合设计风格。
知识点四：装饰图标，是用于增强界面视觉体验的图形，主要包括平面，仿制，2.5D，渐变等设计风格。
知识点5：应用程序图标是用于启动应用程序的图标，主要包括设计表单，如文本，图标，图形，插图和工件。
知识点6：学习绘制图标，优先考虑PS和AI的路径相关功能，而不是Sketch和XD。