在当今的数字时代，图标icon已经成为设计领域不可或缺的元素。从电脑、手机、软件、网页到游戏界面，图标icon都扮演着重要的角色。图标icon不再是用于识别的简单图形符号，其独特的造型趣味、丰富的表现形式和人性化的互动越来越受到用户的青睐。Pixso本文带大家从零开始设计图标icon！
1. 设计图标的要点
注意网格
数字设计中的许多东西都是由网格管理的，图标也不例外。在设计图标时，需要密切关注像素网格以及图标如何融入其中。确保图标接近像素网格的最简单方法是使用整数。
接下来，在Pixso中画一个简单的主图标并打开像素网格。在左边，你会看到一个由线条组成的图标，这些线段完全符合像素网格。在右边，线条的高度略微下降。你可以通过观察组成像素网格的线条来判断，它们直接穿过网格。
现在让我们看看构成日历的拐角处。它们在网格上的位置并不完美，在这些情况下，我们需要确保组成拐角的起点和终点在网格上。
先四处看看
设计一个新颖的、独特的、标志性的图标很有吸引力，但我们也要遵循图标的设计标准。用户已经非常熟悉大部分代表性的标准功能特定图标。
想想我们随处可见的放大镜，上面写着“搜索”。放大镜并不是唯一能代表“搜索”的图标，但我们经常使用它，现在放大镜已经成为了标准的搜索图标。使用不同的图标需要用户学习新事物，这会减慢他们的理解速度。
Pixso工作台内置阿里巴巴海量图标库和字节跳动出品的高质量开源图标库，设计师们可以输入关键词找到相应的图标进行参考并拖拽入自己的画板使用。
在设计图标之前，环顾四周，确定工作时可能需要记住的任何标准。这是否意味着设计图标没有创作自由的空间？其实并不是！如果图标不代表标准约束的功能，我们可以保持创造力的源源不断。如果是这样，我们仍然可以取得创造性的突破。只要图标及其功能仍然可以被立即识别，设计师就可以完全添加自己的设计风格！
不要有过多的设计细节
我们经常在小地方点击图标，比如iPhone上的标签栏。随着图标的呈现变得越来越小，太多的细节开始丢失。当在进行图标设计时，要为你选择的细节类型制定策略。在小部分上放松，确保你的图标清晰可见，即使是小尺寸的。
如下图的人群图标所示：左图的细节恰好，右图在相同大小的画布里叠放了太多元素，整体显得非常拥挤。当右边的图标缩放到手机屏幕上时，就会变成黑色的一团，可读性很差。
当图标太复杂时，它可能会变成视觉噪音，或者对用户没有任何帮助。简洁可以降低认知成本，这在图标设计中非常重要。但是，不要过度简化图标，因为它不会是一个有效的设计。
保持一致
当我们设计一个图标时，他们应该感觉像一个集体。它们看起来不一样，但它们有相似的视觉特性，这让用户感觉它们是相关联的。
在设计时，请选择一致的样式。例如，如果一个图标使用了一定半径的圆角，请确保对所有其他图标都这样做。风格、尺寸和细节层次都应保持一致。这有助于形成一致的视觉语言——这是品牌的关键部分！
对于三维图标设计，同一图标集，设计师必须确认投影方向或透视角度。如Pixso社区中的3D玻璃质感图标所示，尽管使用了不同的颜色，但是整体图标看起来非常协调。所有的icon都有以下特性：相同的倾斜角度和层厚度、圆角大小、投影参数，上层都为玻璃质感、下层都为色块叠加。
注意差距
注意小细节或元素过于接近。在较小的尺寸下，不考虑间距的元素可能很难阅读，也失去了意义。如下图所示，文件夹与学士帽距离太近、文件夹里面的分割线太细，使得整个图标都黏在一起，视觉重心往下掉。另外，当把图表放置到 tab bar 中时，变成了黑乎乎的一团，可读性极差。
测试你的图标
确保图标与用户清晰、快速沟通的最佳方法是对其进行测试。完成图标设计后，最好进行快速测试。
向朋友或团队的其他成员展示图标。让他们告诉你，当他们看到图标时首先想到的第一件事。如果它与你打算交流的内容一致，那么说明你的图标设计得非常合理、实用！
如下图所示，电池里面的矩形长度代表了不同的剩余电量，用户一看就知道当前的电量状态，从而做出后续行动。
用简单的形状构建
一切都可以分为基本的形状。定义图标后，尝试将其划分为简单的形状。这是开始构建和简化图标的最佳方式。
如下图的房子图标，基本形状为三角形和矩形。在画出基本形状后，调整尖角处的圆角大小，最后减去顶层的矩形作为房子的门口，即可完成绘制。
2. 如何 one by one 从头开始设计图标
我们讨论了设计图标时的注意事项，现在让我们把它付诸实践吧。为了做到这一点，我们将在Pixso中完成一个简单的化妆品图标的绘制过程。
第1步：熟悉你的图标主题
首先，让我们了解一下化妆品的外观。一个简单的方法是在Pixso内置的海量图片库中进行搜索。
搜索结果显示了各种不同形状和大小的化妆品瓶瓶罐罐。但是，它们具有一些共同的定义特征：由瓶身和和瓶盖组成。我们希望确保在我们的设计中包含这两个基本特征，因为它们将使我们的化妆品图标易于被广大用户识别。
第2步：分解
接下来，我们将开始寻找基本形状。有没有我们可以用来建造的圆形、正方形或矩形？通过一些草图和迭代来帮助您识别它们。Pixso发现了以下内容：化妆品的瓶身可以设计成圆角矩形，瓶盖可以是矩形，这些将是我们设计图标的基石。
第3步：开始构建！
有了这些信息，我们可以把它转移到到Pixso上了。首先创建一个24x24像素的画板，将其命名为“化妆品图标”，然后打开像素网格。工作区应该如下所示：
在它上面，开始画出构成我们之前确定的定义特征的基本形状。确保所有形状都紧贴像素网格，就像我们在下面的示例中所做的那样。
如果像素没有捕捉到网格，请检查边框设置。确保边框设置在形状的外部或内部，而不是居中。如果边框居中，可能会出现像素网格之外的元素。
结合任何形状，都可以使用布尔运算来简化工作。假设我们想通过在中心的瓶身添加更多细节：我们可以从瓶身上切下较大的矩形，并将它们变成一个形状。
调整图标的圆角大小。此外，我们可以按“Enter”召唤出锚点，并通过键盘的上下左右或鼠标来移动锚点：
为图标增添色彩：
第4步：测试
为了确保我们的图标清晰易读，我们需要对其进行测试。与同事或朋友分享你绘制的图标。问他们看到了什么？他们会立即认出你的图标是化妆品吗？
第5步：整理
在最终完成图标之前，请仔细检查任何小数点。查看面板属性中的数字，确保它们是都是整数。
第6步：导出
保存你的作品并将其导出与同事共享！我们设计了一个非常简单的化妆品图标，其中包含少部分的细节。你可以在此基础上为图标的设计和风格增加复杂性，但是，请记住，过程和关键样式应该始终保持一致。
通过以上的分享，相信你对图标设计已经有一个全面的认识。无论你从事该行业多久，强大的工具可以帮助你更有效、更准确地完成工作。赶快打开Pixso试试吧！
