图标设计的六步指南

小编：@沪江UED图标的优秀之处表现在最基础的3个特征：基本框架、一致性和识别性。 除此之外细节的注重也是重点。以下有6个步骤可以协助你做出统一的图标系列哦。

图标和矢量素材网站（比如我所在的Iconfinder）有成千上百的高品质图标和免费的图标合集，为设计师们提供便宜、方便、精心设计的矢量图标素材。每个提交到Iconfinder的图标集都会被评估，以确保这些图标对我们的用户有吸引力，甚至有潜在的商业价值。我们有责任向设计师和网站客户提供最好品质的图标素材。

在评估图标的过程中，我们发现“还可以”和“高品质”的差别往往是非常小的。做很小而细微的改变，就可以对图标的设计和价值有很大的提升。和大多数网站不同，我们很少直接拒绝不符合要求的图标集。相反，我们会向设计师提出具体可行的、提升图标质量的建议。

本文旨在探讨一套包含六个步骤的图标设计指南。这些步骤遵循了完整的图标设计基本原则，包括一致性、可读性和清晰性。有关高效的图标设计原则，设计师John Hicks在他的著作The Icon Handbook 中详细探讨过，谷歌的Material Design设计规范也有系统图标的规范。本文讨论的六步设计指南是一个指导性原则，而非教条。要成为一个伟大的设计师，应当学会何时遵循规则，何时打破规则。

在本文中，我们将六步原则应用在Iconfinder用户Kem Bardly提交的小狗（准确的说是柯基）图标上。原版图标有一定潜力，但还不是“高品质”的。我们向Kem提了一些简单的建议。一些调整之后，现在他的图标集已经达到了“高品质”水准。下图是Kem的小狗图标前后对比。在下面的章节中，我们将介绍如何一步步的从初版改为最终版。

左图为原始图标，右图是根据本文所阐述的指导步骤，重新设计后的优化版本

注意，虽然本文中讨论的准则以web图标为例，但它们也同样适用于印刷品图标。只不过印刷品常规使用300Dpi的设置，像素对齐就没有了意义。如果印刷品设计师看到这篇文章，所有原则都是适用的，只是可以忽略像素对齐这部分。

优秀图标设计的三个特征

优秀的图标设计会在基本框架、一致性和识别性这三个方面做到审慎和条理清楚。当设计一个新的图标集时，应该从整体（即框架）逐步进入到细节（识别度），迭代优化。即使只是创建一个图标，这三个方面也适用。

当然，优秀的图标设计还包含很多其他特性，只是从这三个方面出发比较合适。

基本框架

框架是一个图标的基础结构。如果忽略图标的细节处理，沿着主要形状勾线，是不是会出现一个正方形/圆形/矩形/三角形或其他的基本图形？主要的基本几何形状（圆形、方形和三角形 ） 构成了图标视觉稳定的基础。例如Kem Bardly的柯基犬图标，狗的头部是由两个三角形和两个椭圆组成的。

一开始只需要描绘出最大的最简单的形状，然后再添加更多的细节——就像作画的步骤，也是先画简单的形状，然后逐步细化。切记，做图标时只要增加能够传达概念的细节即可。

图中的主要线条显示出构成设计基本框架的基本几何形状

美学一致性

美学一致性指的是一个图标中内含的共同元素，或者同一个图标集中统一使用的视觉元素。例如圆角/方角，圆角的尺寸（2px/4px/…）、线宽（2px/4px）、样式（平面/线形/填充线型/立体的）、配色等等。这些设计元素在整个图标或图标集中重复出现，可以在视觉上让它们呈现为一个有关联性的整体。

在下面的例子中可以看出，Kem的图标集有一些共同的要素：2px的圆角不断出现在狗狗面部的各种元素上，以及三条狗狗都拥有的心形的鼻子。

这三种狗狗拥有一致的设计和样式，整体上有统一感

可识别性

可识别性指一个图标的本质特性，或使这个图标独特的地方。图标是否有用，最终取决于观看者是否能够轻松地领会它所描绘的对象、想法或动作。要做到可识别，可以让图标展示观察者通常能够关联的特征，也可以让图标拥有一些特殊、独特的视觉元素，例如心形的鼻子。

在下图中，我们能认出两只狗分别是柯基犬和哈士奇，因为它们各自有其独特的颜色、头形和耳朵；同时也认为他们是同一组图标，因为它们有共同的的设计风格和元素。

两只狗狗图标的特殊特性使得他们可识别，一致的设计语言和样式元素也提供了统一感

到目前为止，我们已经看过了有效的图标设计的三个主要属性。在下文中，我将深入探讨能解决这三个方面的具体六个步骤。

六个步骤

1. 从网格入手

关于多种多样的网格尺寸，可以另开一篇文章了。就本文而言，我们使用32×32px 网格工作。这个网格还包含了一些基本的指南，来帮助我们创建图标的基础框架。

32×32像素的网格，外圈2像素范围为“禁入区域”

网格靠外的2像素范围，我们称为“禁入区域”。如非必要，不要把图形放在这个区域内。禁入区域的目的是为图标提供一些透气的空间。

一个常见的可以进入“禁入区域”的情况：某些次要或少量的形状需要延伸进去，以保持设计完整性，如下图所示。

圆形图标和网格的对齐例子

方形图标也在网格中居中，但在大多数情况下，它不会一直延伸到内容区域的边缘。为了保持圆形图标和方形的图标视觉重量一致，大多数方形图标会对齐中间的关键格线（以下图像中的橙色区域）。图标自身的视觉重量决定什么时候对齐到各自的关键格线。要确定什么时候用多大的尺寸的格线，需要积累。看看下面的正方形图像，上面提到的三个同心正方形分别显示在淡蓝色，橙色和浅绿色区域。

正方形和圆形图标在网格线中对齐的例子（考虑视觉体量感，圆形图标的实际大小更大）

在32×32像素网格里，有两个20×28像素的纵向和横向的长方形。我们做那些水平或垂直方向的图标时会粗略的沿着这些矩形制作，并尽量让纵向和横向上的尺寸与这些矩形框架一致。

竖向和横向矩形图标在网格中对齐的例子

斜向的图标需要对齐到圆形内容区域的边缘，如下图所示。注意图例中的锯子头部尖端。它大致对准了圆形边缘就可以了，不需要非常精确的对齐，接近就足够了。

斜向图标在网格中对齐的例子

请记住，你并不需要每一次都严格按照网格原则来做。网格能够帮助你做出的图标保持一致，但如果在让图标变得更完美和遵守规则之间进行选择，还是打破规则吧。只要谨慎就好。就如Hemmo de Jonge（更广为人知的绰号是 Dutch Icon）所言：单个图标的特性设计比一套图标的统一性更重要。

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

从简单的圆形、长方形和三角形开始设计图标的主要形状。即使一个图标最终是拟物的，那也要从Adobe Illustrator形状工具开始画起。手绘边缘的细微差异会让图标看上去少一些精致，尤其是屏幕上使用的小尺寸图标。使用网格，从基本的几何形状开始画将会使图标边缘（尤其是曲线边缘）更精确，并允许你在设计中相对迅速的调整一定规模的相关元素。

这是组成柯基图标的基本几何图形：两个三角形和两个椭圆

3. 使用数字：边，线，角，曲线和角度

在保证设计看起来不会过于机械乏味的前提下，尽可能在圆角、曲率和角度上保持数学上的精确统一。在这些细节上不能过分追求数字上的完美但也不能完全放任不管。这些元素的不一致会降低一个图标的品质。

角度

大多数情况下，使用45度角或其倍数。45度角的边线在抗锯齿情况下能均匀的分布（有效的像素能够头尾对齐），所以结果是清晰的。而且完美的45度对角线是一种人眼容易识别的视觉模式。这种可识别的模式能够构建单个图标之内和整个图标集之间的一致性。如果您的设计决定了你必须打破这个规则，尝试减半去做（22.5度，11.25度等），或者使用15度的倍数。使用45度的对半的好处是在抗锯齿情况下仍然会均匀展示。 每一种情况不同，具体问题具体分析。

抗锯齿情况下，45度斜线的显示效果

曲线

不完美的曲线会降低图标水准，并且区分出专业和业余品质。虽然人眼能够感知到非常轻微的位置变化，手眼的合作却常常不能达到高精度水平。尽可能使用形状工具和参数来创建曲线，而不要手绘出形状。当你确实需要手动绘制曲线时，使用Adobe Illustrator（或其他矢量软件）中的constraint modifier key（Shift键），更好的做法是，使用VectorScribe和InkScribe这种比贝塞尔曲线控制得更为精确的矢量绘图插件。

在原始版本的图标中，手绘造成的不规则曲线线条降低了设计的质量。

手绘的曲线使整体图标品质感下降

改为几何曲线之后

角

常见的圆角（或半径）值是2像素。在一个32×32像素的图标，2像素半径足以清楚地看到弧度，也不至于使转角过于圆润（看起来有泡泡感），以致以改变设计的个性。您的选择取决于你想要赋予整个图标集什么样的设计个性。

精确设置形状中的角的半径

至此为止，在原设计基础上的改进：建立几何形状的基础框架，增加2像素描边，使用形状工具和一致的圆角细节。改进结果如下图：

改进至此的效果

像素对齐

设计小尺寸图标的时候，完美的像素对齐是非常重要的。在小尺寸下，抗锯齿功能会让图标的边缘模糊。手动将图标边缘对齐到像素网格，不仅会让直线边缘清晰，也能够使角和曲线显得更加清楚完美。

上文提到过，除了直线，45度斜度的曲线在抗锯齿情况下显示效果最好。角和曲线也一样。线条越符合精确的几何定义，在抗锯齿情况下显示的越清晰。

需要注意的是，在大尺寸或者更高分辨率情况下，例如Retina屏幕，像素对齐的效果就不那么明显了。

线宽

谈到线宽，两像素是比较理想的，但有时也会用到3像素。我们需要在图标中展示视觉层次和变化，但使用太多种线宽（超过三种）会破坏整体一致性。2像素线宽的好处在于，2和4都是2的倍数，图形会有很强的扩展性。

大多数情况下，不要使用很细的线宽，特别是在字形和平面图标中。请使用光线和阴影来定义形状，除非你刻意营造一个“线型”图标。

这个iPhone的图标线框元素是一致统一的

4. 使用统一的设计元素和符号图标

Hemmo de Jonge（Dutch Icon）在2015年的图标沙龙会议的演讲中，谈到了图标设计的这一方面。在他和荷兰政府合作了已有两年的图标系统设计项目中，Hemmo和他的设计合作伙伴，给图标增加了一种槽口。不是每个图标都有槽口，但大多数都有。这种特性贯穿了图标集，并真正使这些图标凝聚成一个合集。

图标集的大多数图标都拥有同样的设计元素

在我们的狗狗图标例子中，我们采用心形的鼻子作为一个共同的风格元素。这个元素为设计增加了一点可爱有趣的因素，使整个图标合集拥有统一性，也表达了我们对人类的朋友狗狗的感情。

狗狗图标集里的统一设计元素

在许多情况下，即使图标集的样式都改变了，一个建立美感的统一的元素依然可以使图标看起来是一组，如下所示。我们重新创造了风格相同的三个图标，他们仍然拥有一致的审美。

另一个风格的狗狗图标集，也拥有相同的设计元素

5. 少量使用细节和装饰

图标应该能够迅速表达它对应的对象、想法或行动。太多的小细节会使其变得复杂，减弱识别性，特别是在小尺寸的情况下。在图标或图标集里包含的细节程度也是统一审美和可识别性的重要部分。根据，要使图标达到高质量，最好是使所需要细节最少。

用少量的细节传达出图标要表达的内容

上面的版本已经非常接近最终版本：耳朵周围的黑色描线变成皮毛的褐色，面部周围的描边去掉，但脸上白色区域上方的2像素描边依然保留。请注意，我们仍然保留了原始版本的一些元素，如扁平的鼻子。我们将在下一步骤中优化它。

6. 创造独特性

创造高品质的图标集（其中很多是免费的）的有才华的设计师越来越多。然而，很多设计师过度依赖趋势或出名设计师的流行风格。作为创意行业的专业人士，我们应该在图标行业外开阔视野。建筑、平面版式、工业设计、心理学、自然等等，我们可以在任何其他领域找到灵感。市场上的图标集之间的差异越来越小，你的设计独特性就越来越重要。

在最终版本中，我们将鼻子改成了小小的心形，显得新奇、轻快。

心形的狗鼻子让图标显得独特有趣

这些简单的步骤是设计改进的起点，不是最终的修正步骤。设计图标没有唯一的办法。在这篇文章中，我们提出了一个基础的方法来设计，但其他的设计师肯定也有他们自己独特的见解和技巧。要成为一名优秀的设计师，最好的办法是多看、多读，多手绘（随身带本本子吧），然后练习！练习！再练习！

smashingmagazine

译文地址：沪江UED

作者：Scott Lewis

译者：兔子