通过6个简单的步骤即可实现更好的图标设计| 由斯科特·刘易斯（@atomiclotus）| Iconfinder博客

当我审查提交给 Iconfinder 的图标时，我对我们的设计师和我们的客户有责任确保网站上的所有高级图标都具有最高的质量。但是，“不够好”与 “高级质量” 之间的差异通常很小，通常变化很小。在本文中，我将设计指南精简为“六个简单步骤，以实现更好的图标设计”。这些步骤遵循声音图标设计的基础，应被视为指导，而不是教条的规则手册。精明的设计师知道他或她何时可以打破规则以获取最大利益。

[

](https://medium.com/@atomiclotus?source=post_page——-68a7c8fa0889————————————————)

在本文后面的示例图像中，我将重新设计由 Iconfinder 用户 Kem Bardly 最近提交的狗（确切地说是柯基犬）的图标。该图标对于 Premium 来说还不够好，因此我为 Kem 提供了一些易于理解的指针，并且进行了一些返工，因此该图标已准备好可以作为 Premium 图标获得批准。

图标设计的三个属性

经过精心设计的图标将采用有条不紊，审慎的方法来处理构成任何设计的三个主要属性。在设计新的图标集时，我会以迭代方式考虑这些属性中的每一个。即使我仅创建一个图标，这三个属性仍然是隐含的，并且可以从单个设计中推断出来。

1. 结构 - 结构是图标的基本形式。如果您忽略图标的详细信息并在主要形状周围画一条线，它们是否形成正方形，圆形，水平或垂直的矩形，三角形或更有机的形状？最成功的图标设计遵循简单，可识别的图案或形式。主要的几何形状（圆形，正方形和三角形）为图标设计创建了视觉上稳定的基础。

2. 字符 - 图标的字符由单个图标内和整个图标集共享的元素组成。这些元素包括圆角或正方形角，线宽，样式（平面，线，实线或字形），调色板等。

3. 身份 - 图标的 “身份” 是其本质或使图标与众不同的原因。身份决定了它是否 “有效”。图标运作良好的基石是识别或清晰度：观看者识别其描绘的对象，想法或动作的难易程度。品格和身份经常重叠。由几个图标共享的标识元素将成为一组“字符” 的一部分。

六个步骤

1. 始终从网格开始 - 最好在自己的文章中处理不同网格大小的好处。出于本文的目的，我们将使用 32 x 32 像素的网格。我使用的网格还包含一些基本指南，用于创建每个图标设计所遵循的基础表单。

网格的外部 2 个像素称为 “禁区”。除非绝对必要，否则避免让图标的任何部分进入该空间。禁区的目的是在图标周围创建一些呼吸空间。

图标结构的一部分是一般的形状和方向。如果在图标的外部边缘（如果需要的话）周围划一条线，则形状通常是正方形，圆形，三角形，水平矩形，垂直矩形或对角线矩形。

圆形图标位于网格的中心。圆形图标通常会接触内容区域的所有四个最外边缘，但不会进入 “禁止通过” 区域（但是如果图标的某些重音符号或次要元素超出了该范围，这是打破该规则的常见情况。圆圈）。

正方形图标也位于网格的中心，但是在大多数情况下，它们不会一直延伸到内容区域的最外边缘。看一下下面的 Square Layout 图片。有三个同心正方形，分别由浅蓝色，橙色和浅绿色指示。我的大多数图标都将与中间的正方形对齐（下图中的橙色图标）。何时对齐每个正方形取决于图标本身的视觉重量，只需练习就能了解何时使用哪种尺寸。

在 32 像素的正方形内，您会注意到 20 像素乘 28 像素的垂直和水平矩形。我松散地将这些矩形用于水平或垂直方向的图标，并尝试使任何这样定向的图标的尺寸匹配这些矩形的 20 像素乘 28 像素的尺寸。

对角线定向的图标与圆形内容区域的边缘对齐，如下图所示。请注意，锯的最外点大致与圆的边缘对齐。这是您不需要精确的区域，关闭就足够了。

请记住，您不需要每次都遵循网格并进行精确引导。正如 Hemmo de Jonge（俗称 “荷兰偶像”）所说的那样，“单个偶像的本质胜过固定凝聚力的重要性”。可以使用网格来帮助您使图标保持一致，但是如果要在使图标变大和遵循规则之间进行选择，则要打破规则 - 一定要谨慎行事。

1. 从简单的几何形状开始

设计图标的方式与绘制草图的方式相同：首先使用简单的圆形，矩形和三角形创建主要形状的粗略形状。即使我的图标最终在本质上大部分都是有机的，我还是从 Adobe Illustrator 中的形状工具开始。在制作图标时，尤其是对于屏幕上较小的图标，由于手绘而导致的边缘细微变化使图标看起来不太精致。从基本的几何形状开始，有助于使边缘更精确（尤其是沿曲线），帮助我快速调整设计中元素的相对比例，并确保我遵循自己的网格和形状。

1. 按数字：边，线，角，曲线和角度

尽可能在不使您的设计看起来过于机械和无聊的情况下，拐角，曲线和角度应在数学上精确。换句话说，请遵循这些数字，当涉及到这些细节时，请勿尝试盯着或徒劳。这些元素的不一致会降低图标的质量。

角度

在大多数情况下，我坚持 45 度角或其倍数。45 度角上的抗锯齿均匀地步进（有效像素端对端对齐），因此结果清晰明了，该角度的完美对角线性质是易于识别的图案，人眼非常喜欢很多。这种可识别的模式在整个图标集上建立了一致性，并在单个图标内实现了统一。如果必须违反此规则，则尝试以一半（22.5、11.25 等）或 15 度的倍数这样做。每个案例都不尽相同，因此我会根据具体情况决定使用哪个决策。使用 45 度的两半的好处是，抗锯齿的步进仍然相当均匀。

曲线图

One of the most noticeable areas that I find can degrade the quality of an icon and make the difference between Premium/professional and amateur-looking are the curves. While the human eye can detect very slight variations in precision, human hand-eye coordination cannot always achieve a high level of precision. I rely on shape tools and the numbers to create curves as much as possible rather than try to draw them by hand. When I do need to create curves manually, I use Adobe Illustrator’s constraint modifier key (Shift) or, even better, VectorScribe and InkScribe by Astute Graphics for even more refined control over my bezier curves.

Corners

I don’t always use rounded corners, but when I do, I usually use a 2-pixel radius. But, the value you choose depends on the personality you want your designs to have. I use 2-pixel radius corners because the corners are clearly rounded but not so much that it gives the icons a more “bubble” look. Whether or not you use rounded corners is an aesthetic decision to be made as part of the overall character of a set.

Pixel-perfection

Pixel-perfect is a popular buzzword in icon and user interface design these days, but it is important, especially when designing for small sizes. Anti-aliasing on the edges of an icon at small sizes can make the icon appear fuzzy. Space between lines that doesn’t align to the pixel grid will be anti-aliased and become blurry. Aligning the icon to the pixel grid makes the edges perfectly crisp on straight lines, and more crisp on precise angles and curves. As I mentioned in the previous paragraphs, 45-degree angles are second best to straight lines because the pixels used to define the angle are stacked, or stepped, end-to-end perfectly diagonally. The same is true of corners and curves: the more mathematically precise, the more crisp the anti-aliasing will be. It should be noted, however, that pixel-perfection is a less important issue, at least for anti-aliasing, for larger sizes and for higher resolution displays like retina.

Line Weights

When it comes to line weights, I find that 2 line weights are ideal, but 3 are sometimes necessary. More than 3 and a set can lose its cohesion. I prefer 2 pixel and 4pixel line weights. Ideally I try to keep every measurement in an icon to a multiple of 2. Occasionally an individual detail of an icon might require breaking this rule, but I try to stick to it as much as possible. In most cases, very thin lines are to be avoided, especially is glyph and flat icons. Unless you are deliberately creating Line style icons, you should not rely on lines to define shapes. You should rely on light and shadow to define shapes.

Use Consistent Design Elements & Accents Across Icons

Hemmo de Jonge of Dutch Icon gave a brilliant talk at Icon Salon 2015 in which he spoke at length about this element of icon design. In his 2-year-and-counting icon system project for the Dutch government, Hemmo and his design partner incorporated a “notch” in each of the icons. Not every icon has the notch, but most do. This kind of accent, used conservatively but consistently across an icon set can really help tie the set together.

Use Details and Decorations Sparingly

Icons should quickly communicate an object, idea, or action. Too many small details introduce complexity which can make the icon less recognizable, especially at smaller sizes. The level of detail you include in a single icon or in a set of icons can also be an important aspect of the character and identity of an icon/iconset. A good rule-of-thumb for determining the right level of detail in an icon/iconset is to include only the bare minimum of details needed to make the meaning clear.

Make it Unique

It seems that the number of very talented icon designers, creating really high-quality icon sets, many of them available for free, is growing every day. Unfortunately, a lot of those designers are relying way too heavily on following existing trends or copying the styles of the most popular designers. As creative professionals, we should be looking outside of the icon design industry to architecture, typography, industrial design, psychology, nature and to any other area we can find inspiration. Because so many icon sets look alike these days, it is even more important to make your designs unique. Uniqueness also helps make icons more recognizable, which is an important aspect of the identity of an icon.

These simple steps should be seen as a starting point, not as a definitive guide. There is no single way to design icons. I have outlined in this article the basics of my own approach to design but other designers certainly have their own opinions and techniques. The best way to become a better designer is to look at as much stuff as you can, read lots of stuff, sketch regularly (I carry my sketchbook everywhere with me), and practice, practice, practice.

https://blog.iconfinder.com/better-icon-design-in-6-easy-steps-68a7c8fa0889