6个简单步骤，让图标设计更完美

在设计新的图标集时，请以迭代方法考虑这些属性中的每一个，从一般（表单）开始，然后继续到特定的（可识别性）。即使你正在创建单个图标，这三个属性仍然是隐含的，可以从单个设计中推断出来。

毫无疑问，三个属性构成了有效的图标设计，但下面详述的三个属性是一个很好的起点。为了相对简洁起见，我们专注于三个主要属性。

形式

如果忽略图标的细节并在主要形状周围画一条线，它们会形成正方形，圆形，水平或垂直矩形，三角形还是更有机的形状？主要的几何形状 圆形，方形和三角形为图标设计创造了视觉上稳定的基础。在下面的图中，狗的头部由两个三角形和两个椭圆组成。就像人们通过绘制最大，最简单的形状然后精炼到越来越大的细节来开始绘画一样，人们会从最简单的形状开始一个图标然后添加更多细节，但只需要传达概念所需的细节被代表，无论是对象，想法还是行动。

美学统一

在单个图标和图标集中共享的元素就是我们所说的美美统一。这些元素是圆角或方角，角落的特定大小（2像素，4像素等），有限和一致的线条重量（2像素，4像素等），风格（平面，线条，填充）线或字形），调色板等。一套图标的美学统一性是在整个图标中重复的设计元素和/或选择的集合，以视觉方式将它们结合在一起作为一个整体。在下面的例子中，请注意三只狗中的每只狗都有共同的元素，例如2像素的圆角，狗脸周围的2像素厚的笔画和心形的鼻子。

可识别性

可识别性是图标的本质或使图标独特的产物。图标是否有效最终取决于用户理解其描绘的对象，想法或行动的容易程度。可识别性包括显示用户通常与该想法相关联的属性，但它也可以包括独特或意外的元素。请记住，可识别性不仅指理解所描述的对象，想法或行为，还指识别的独特图标集。在下图中，我们分别将两只狗分别视为柯基和哈士奇，因为它们有独特的颜色，头部形状和耳朵。

到目前为止，我们已经看到了有效图标设计的三个主要属性。在下一节中，我们将深入探讨六个步骤，以妥善解决这三个受关注的领域。

六个步骤

①始终从网格开始

出于目的，我们将使用32×32像素网格。我们的网格还包含一些基本指南，以帮助我们创建每个图标设计的基础形式。

网格的外部2个像素是我们所说的“禁区”。除非绝对必要，否则避免将图标的任何部分放在此空间中。禁区的目的是在图标周围创建一些空间。

圆形图标以网格为中心，通常在内容区域的所有四个最外边缘，而不会进入禁区。请注意，打破禁区规则的一个常见原因是，为了保持设计的完整性，某些重音要或次要元素需要延伸到圆圈之外，如下所示。

方形图标也在网格中居中，但在大多数情况下，不会一直延伸到内容区域的最外边缘。为了使用圆形和三角形图标保持一致的视觉重量，大多数矩形和方形图标将与中间的关键线对齐（下图中的橙色区域）。何时对齐每个关键线由图标本身的视觉权重决定; 感觉何时使用哪种尺寸只需要练习。看看下面的方形布局图。上面提到的三个同心正方形以浅蓝色，橙色和浅绿色显示。

在32像素的正方形内，你会注意到20×28像素的垂直和水平矩形。我们松散地遵循这些矩形，以获得水平或垂直方向的图标，并尝试使任何图标的尺寸如此定向，以匹配这些矩形的20×28像素尺寸。

对角线方向的图标与圆形内容区域的边缘对齐，如下图所示。请注意，锯的最外面的点大致与圆的边缘对齐。这是一个你不需要准确的领域。

请记住，你不需要每次都遵循网格和指南。网格可以帮助您使图标保持一致，但如果您必须在制作图标并遵守规则之间做出选择，请打破规则。

②从简单的几何形状开始

通过使用简单的圆形，矩形和三角形等主要形状来开始图标设计。在制作图标时，特别是对于屏幕上的较小尺寸，手绘的边缘略有变化会使图标看起来不那么精致。从基本几何形状开始将使边缘更精确（特别是沿曲线），并可以快速调整设计中元素的相对比例，并确保遵循网格和形式。

角

在大多数情况下，坚持45度角或其倍数。45度角的抗锯齿均匀步进（活动像素端对端排列），因此结果清晰，这个角度的完美对角线是一种易于识别的图案，人眼非常喜欢。这种可识别的模式在一个图标集中构建一致性，并在单个图标内建立统一性。如果你的设计要求你必须违反这个规则，那么尝试分成两半（22.5度，11.25等）或15度的倍数。每种情况都不同，因此逐案决定。使用45度的一半的好处是抗锯齿的步进仍然是相当均匀的。

曲线

虽然人眼可以检测到精确度的微小变化，但手眼协调并不总能达到高精度。依靠形状工具和数字来尽可能地创建曲线，而不是手工绘制它们。当需要手动绘制曲线时，请使用Adobe Illustrator（或矢量软件），或者更好的是，使用Astute Graphics的VectorScribe和InkScribe对Bezier曲线进行更精细的控制。

正如我们在上面的“之前”图片中看到的那样，手绘线条会产生不规则的曲线，从而降低设计质量。

圆角

常见的圆角（或半径）值是2个像素。在一个32×32像素的图标中，2像素的半径足够大，可以清晰地看到圆角，但不会使角落软化，从而改变设计的个性。你选择的值取决于为设计提供的特点。

从几何形状开始，我们现在添加了一个2像素的轮廓，展示了形状工具以及圆角等细节的一致性如何改进设计。

这个大大改进的版本显示了新设计的要点，具有均匀的圆角，平滑的曲线和耳朵周围线条重量的基础。

像素完美

在设计小尺寸时，像素完美对齐非常重要。小尺寸图标边缘上的消除锯齿会使图标显得模糊。未与像素网格对齐的线之间的空间将消除锯齿并显得模糊。将图标与像素网格对齐将使边缘在直线上完美清晰，在精确的角度和曲线上更加清晰。

如上所述，45度角最好（在直线之后），因为用于定义角度的像素是完全对角地堆叠或阶梯式端对端。角落和曲线也是如此：它们在数学上越精确，抗锯齿就越清晰。但请注意，像素完美性较低，至少对于抗锯齿，较大尺寸和较高分辨率的屏幕，如“Retina”显示器。

③线宽

当涉及线宽时，两个是理想的，但有时需要三个。目标是提供视觉层次和多样性，而不会引入太多变化，从而破坏图标的一致性。三个以上可能失去其凝聚力。2像素和4像素线宽的好处是它们是2的倍数，因此可以轻松地以均匀的增量进行放大和缩小。在大多数情况下，避免非常细的线条，尤其是字形和平面图标。除非你刻意创建“线条样式”图标，否则依靠光影而不是线条来定义形状。

④ 使用一致的设计元素

在我们的狗狗例子中，我们采用了一个带有心形鼻子的共同风格元素。使用心形作为鼻子的视觉不仅将图标联系在一起，而且增加了一个元素，并传达了对我们的四条腿朋友的感情。

在许多情况下，即使图标集的主要方面发生了变化，例如风格，构建审美统一的元素仍然可以将集合绑定在一起，如下所示。我们以字形样式重新创建了相同的三个狗图标，而不是平面样式，并且它们在美学上仍然是一致的。

⑤谨慎使用细节和装饰

图标应该快速传达对象，想法或行动。太多的小细节会引入复杂性，这会使图标识别不易识别，特别是在较小的尺寸下。在单个图标或图标集中包含的详细程度也是美学统一性和可识别性的重要方面。确定图标或集合中正确的细节级别，一个好的经验法则是包括使意义清晰所需的最少的细节。

⑥让它独一无二

在最后的图像中，我们在心形鼻子中有一种独特的触感，为设计增添了一丝新颖和轻松的感觉。

这些简单的步骤应该被视为一个起点。没有单一的方法来设计图标。在本文中，我们概述了一致的设计方法的基础知识，但其他设计师当然有自己的观点和技术。成为更好的设计师的最佳方法是尽可能多地查看视觉参考，阅读各种材料，以及练习，练习，练习。

总结

我们分享了如何创建优质图标的基础知识。这些基础知识是技术技能; 任何人都可以通过练习来学习和掌握它们。请记住，要创建更好的图标，请从常规（表单）开始，然后针对特定（可识别性）工作。通过关注图标或集合的共享元素（美学统一），让你的图标在内部保持一致，并在整个集合中保持一致。一旦掌握了技术基础知识，你就可以将精力集中在使图标真正脱颖而出的方面。