LOFTER-网易轻博

译文地址                                                                       更多文章

    Iconfinder，一个矢量图标作品交易的网站，那是我工作的地方，上面有很多精心设计的矢量图标作品，对于广大互联网的优易们来说，既便宜而且下载起来很方便。很多的高品质图标作品和庞大的免费套装也都非常实用。
为了保持Iconfinder对广大优易们的吸引力，以及发现优质图标的潜在商业价值，提交给我们的每个图标资源，我们都会去严格审查和评估。
在审核提交给网站的图标资源时,我们有责任确保我们的设计师和客户所看到的所有优质图标都尽可能名副其实。为了实现这一点，我们需要不断地去探索“不够好”和“优质”之间的差别。这种差异通常非常小，我们经常需要做一些微小的变化，不过别小看这种微小的变化，它对改变图标的设计和价值影响非常大。
与许多其他图标网站不同，我们很少拒绝不完全满足我们的质量要求的图标资源。相反,我们将给出非常具体可行的建议，告诉设计师应该如何提高图标质量。

       本文讲述了了一套设计准则，一共六步。这六步遵循完整的图标设计的基本原则，包括众所周知的一致性，可识别性和清晰度。不论是图标设计师 John Hicks 在他的《图标手册》中讨论的希克斯设计原理，还是谷歌推出的系统图标素材设计指南，都已经详细讨论了图标设计的有效性原则，本文中所讨论的六个步骤应该被看作是一个设计指导，而不是教条式的设计规则。要想成为一个伟大的设计师，你必须知道，在什么时候去遵循这些规则，在什么时候去打破它。我们将会在这里一一展示这些技巧。
        本文给出的示例，是通过六步去修改一个名为Kem Bardly的设计师所提交的一只狗的图标(确切的说是威尔士矮脚狗），这个图标很有潜力，但还不能被认定为很优质，我们为Kem提供了一些简单的提示，经过稍加改造，他的图标现在已经通过了优质作品的审核。下图显示了Kem的图标的前后版本。 接下来我们将为大家进行一步步的解说。

上面左侧是原始图标，右侧则是根据文中提到的建议修改后的 （图片：Kem Bardly）

注意,虽然在本文讨论的准则是面向网络图标,但也适用与打印图标。典型的300(DPI)印刷材料对pixel-perfection基本无意义。如果你是一个平面设计师看到这篇文章,文章讲到所有的原则也是适用的,不过你可以暂时不去理会pixel-perfection碎片。

图标设计有效的三个属性

       一切图标设计，都应具有：样式、美学统一以及可识别性这三个基本属性，而那些优质的图标，都将这些展示的非常合理，你一眼就能看出设计师是经过仔细斟酌的。当设计一套新的图标时，需要以一种迭代方法去考虑这几个属性，先从整体入手，在深入到具体的细节（从样式到可识别性）。 即使你设计一个单一的图标，这三个属性仍然是隐含其中的，你可以在它的基础上进行扩展。

        你想的没错，一个好的图标设计肯定不止这三个属性，但是我们下面讨论的这三个基本点，将是一个良好的开始，为了尽可能的简洁，我将会聚焦在我们认为的这三个基本属性上

样式

        样式是图标的基本结构，或者说是怎么组成图标的，如果咱们先别去理会图标的细节，就只是在主要形状上做连接线，是不是会看到一些形状，比如方形，圆形，长条，竖条，三角形，或其他更复杂的形状（比如五角星，桃心等等）。 主要的几何形状 – 圆形，正方形和三角形 – 为图标设计创建了视觉上稳定的基础。在我们的Kem Bardly的这个作品中，狗的头部是由两个三角形和两个椭圆组成。就像大家平常画画时做的那样，一开始画出大量的简单的草稿，然后一步一步的细化，慢慢趋于更好，设计图标也这个道理，开始绘制简单的形状，然后逐步添加内容—–注意只有在意图、想法、功能等这些概念需要通过如此多的内容所传达的时候。

此图中的基线显示了定义设计形状的基本底层形状。 （图片：Kem Bardly。图中单词，左边三角形，右边椭圆）

美学统一

         在单个图标和成套图标中共用一个元素就是我们所说的美学统一。这些元素是方角还是圆角，圆角的话像素是不是固定（2px，4px等），线宽是否一致（2px，4px等）还有风格构成什么（面，线，填充线，或者字形），颜色是什么。一整套图标的美学统一，是重复的设计元素以及元素组，或者就是一组元素从视觉上将他们联系在一起，形成一个体系。在下面的例子中，请注意到来自Kem的三个狗中的每个共同的元素：例如2px的圆角，围绕狗的脸和心形的鼻子也是2px的宽度。

这三个狗的图标共享着共同的设计风格和元素，创造出美学上的统一。 （图片：Kem Bardly）

可识别性 

      可识别性是图标的本质或者说是什么使你的图标独一无二的。图标是否达到效果最终取决于用户能不能容易地理解其描绘的意图，想法或功能。可识别性包括要展示给用户用户相关联的属性，它可以包括独特或意想不到的元素，比如柯基犬的心形鼻子这一特征。需要记住的是，可识别性不仅指对所描绘的意图，想法或功能的理解，而且还能看得出这一套图标的统一特征。 在这方面，美学统一和可识性经常交互作用。在下面的图片中，我们认为两只狗分别是柯基犬和西伯利亚哈士奇，因为它们独特的颜色，头部形状和耳朵，同时仍然认为它们是一套图标的一部分，因为tanene有着共同的设计样式和元素 。

每只狗的独特特征使它们可以单独识别，而通用的设计风格和元素使它们又可以被识别为是一组图标。 （图片：Kem Bardly）

      到目前为止，我们已经研究了我们认为的有效的图标设计的三个基本属性。在下一节中，我们将深入探讨六个步骤如何妥善处理这三个值得关注的问题。

真的只有六步

1、通常以栅格开场

        不同大小的栅格的好处在于可以独立的处理每一个格子。在我们讲的这个例子中，我们将使用一个32x32px的栅格。我们的栅格还包含一些标注，以帮助我们创建每个图标设计的基本形状。

 

在这里，我们看到一个32×32像素的网格，具有2像素的边界（或“禁区”）作为缓冲空间。

       栅格的外的2px是我们所谓的“禁区”。尽量避免把图标的任何部分放在这里，除非真的有这个必要。禁区的目的是在图标周围创建一些缓冲空间。部分形状往往是一般常见的形状，只要你愿意，这些形状通常是一个正方形，圆形，三角形，水平矩形，垂直矩形或斜矩形。圆形图标在网格中居中，通常要接触到内容区域的最外边缘，但不要进入禁区。请注意，如果要打破禁区，常见原因是：为了保持设计的完整性，某些重要或次要的元素需要延伸超出圆圈，如下所示。

圆形图标与栅格和基线对齐（图片：Scott Lewis）

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

圆形和正方形图标相对于网格的对齐和大小（图片：Scott Lewis）

      在下面32像素的正方形内，你会注意到20×28像素的垂直和水平矩形。我们随意的水平布放或者垂直这些图标，并试图使任一个图标的长度为导向，从而去匹配这些20x28px的矩形。

垂直和水平方向的图标相对于栅格的对齐和大小调整（图片：Scott Lewis）

对角线方向的图标与圆形内容区域的边缘对齐，如下图所示。注意，锯子最外面的点大致与圆的边缘对齐就行。这不是一个需要精确的区域，靠近就好了。

对角线方向的图标相对于栅格的对齐和尺寸示意（图片：Scott Lewis）

记着，你不需要每次都遵循栅格和指南。网格是在帮助你使图标一致，设计一个伟大的图标你必须在遵守规则和打破规则之间做选择— 只是需要谨慎一些  。 Hemmo de Jonge，众所周知他的外号是Dutch Icon，说：

“个别图标的特质超过了一套图标的地位”

2、从简单的几何形状入手

        一开始，您可以通过简单的圆形，矩形和三角形粗略勾勒出主要形状。即使一个图标的大部分性质最终将是自然的有机体，我们也得从Adobe Illustrator中的形状工具入手。说到制作图标，特别是在尺寸较小的屏幕上，用手工绘制的边缘上的细微变化会使一个图标看起来不那么精致。从基本的几何形状入手将使的边缘更精确（特别是曲线），而且您能快速调整设计中元素的相对比例，以及确保您遵循栅格和样式。

这里是组成柯基狗图标的基本几何形状，两个三角形和两个椭圆。

3、依据具体数据设置：描边，线条，角落，曲线和角度

尽可能不使设计看起来过于机械和无聊，角，曲线和角度应在数学上加以精确。 换句话说，涉及到细节时，依据具体数据，不要试图眼睛或手绘它。因为这些元素的不一致会降低图标的质量。

角度

在大多数情况下，保持45度角或其倍数。在45度角上的锯齿步进是均匀分布的（源于像素端对端对齐），因此消除锯齿后结果会很清晰，并且该角度在对角线上，让图案容易识别，这也让人眼看起来非常舒服。这种可识别的模式在一套图标中建立了一致性，并在单个图标中建立了统一性。 如果您的设计要求您必须违反这个规则，您可以请尝试以一半（22.5度，11.25等）或15度的倍数。 每种情况都不同，因此都试一试。 使用45度的一半的好处是，锯齿的步进仍然分布相当均匀。

45度角的常规锯齿的特写镜头

曲线

        使用的曲线是不是完美,专业和业余之间的差异，这意味着，它是可以降低图标质量的最显著的差异之一。手眼协调总是不能达到很高的精度，而人眼却是可以检测到非常细微的变化。所以创建曲线时尽可能多地依靠形状工具和数据，而不是手工绘制。当你需要手动绘制曲线时，可以使用Adobe Illustrator的（或你的矢量软件）约束快捷（Shift键）或者使用vectorscribe和inkscribe这两个插件，这样会更加有效，插件可以通过精巧的图形对贝塞尔曲线进行更精细的控制。

手绘的拐角导致较差的结果。 （图片：Kem Bradley）

        正如我们在文字开始的那张对比图片中看到的那样，手绘线条会产生不规则的曲线，从而降低设计的质量。

这些非常精确的曲线是使用Illustrator的贝塞尔曲线工具创建的，而不是手绘。

拐角

常见的圆角半径值为2像素。 在32×32像素的栅格中，2像素半径足够大，可以清楚地看到圆角，但不会因为软化角落导致设计的个性的改变（给予“泡泡”感）。 你选择的风格取决于你想赋予设计的个性。 无论你使用圆角是不是仅考虑到整体的美观性。

精确的圆角

在开始使用几何形状之后，我们又添加了一个2像素轮廓，示意了形状工具以及细节（如圆角）的一致性是如何改善设计的。

这是目前为止我们重新设计的科吉尔图标的进展

这个大大提高了的版本显示了新的设计的特点，具有均匀的圆角，光滑的曲线以及耳朵周围线宽的基础。

完美像素

      在设计小尺寸时，像素完美对齐非常重要。 在小尺寸图标边缘的锯齿会使图标看起来模糊。 不与像素网格对齐的线之间的空间会因消除锯齿而看起来很不清晰。 将图标对准像素网格可以使边缘在直线 、角度和曲线上完全清楚。

        正如之前所讲到的，45度是最好的（直线），因为用于定义的角度的像素被堆叠，或阶梯化，完美的贯穿对角。角和曲线也是如此：它们在数学上越精确，消除锯齿后就越清晰。 然而，请注意，该像素的完美在在更大的尺寸和更高分辨率的屏幕，如“视网膜”显示器是不太有效的，至少在消除锯齿上是这样。

线宽

当涉及到线宽时，使用两种线宽是理想的，但有时三种也是必要的。目标是提供视觉层次和多样性，但不宜引入太多的种类，那样会破坏整体的一致性。超过三种会使得图标失去凝聚力。    2px和4px线宽的优点是它们是2的倍数，因此，容易以偶数增量放大和缩小。在大多数情况下，避免使用非常细的线，特别是在字形和平面图标上。 除非你有意创建一个“线型”图标，不用线，而是依靠光和阴影来定义形状。

这个iPhone图标演示一致的行(hang)宽。 （图片：Scott Lewis）

4、让一致的元素和调子贯穿图标

Hemmo de Jonge曾在荷兰图标图标沙龙2015中发表了精彩的演讲，在演讲中他详细讲述这种设计方式。两年里，在给荷兰政府的图标系统项目中，Hemmo和他的设计团队在大多数图标中都留有一个缺口。 这种调子，坚持地使用，使图标集保持一致，可以真正把它们联系在一起。

使用一致的设计元素（图片：荷兰图标）

      在我们的狗这个的例子中，我们采用了一个共同的风格元素——心形的鼻子。 使用心形做为鼻子的奇特视觉不仅将图标连接在一起，而且添加了一个异想天开的元素，并传达了对我们这个四条腿朋友的爱。

我们的狗图标使用常见的设计元素（图片：Kem Bradley）

        在许多情况下，即使图标集的主要方面被改变，例如风格，但是构建美学统一的元素仍然可以将一套图标联系在一起，如下图所示。 我们已经以字形样式替换平面样式重新创建了相同的三个狗图标，但是它们在美学上仍然看起来一致。

在我们的狗图标中使用通用的设计元素，但是具有不同的风格（图片：Kem Bardly）

5、使用少量的内容和装饰

图标应快速传达概念，想法或行动。 太多的小内容将引入复杂性，这可能使图标不太容易识别，特别是在较小的尺寸里。在单个图标或一组图标中包含的复杂程度也是美学统一性和可识别性的重要方面。 囊括使意义明确的最少的内容，是确定细节水平的一个很好的判断方式。

最少的内容传达对象是什么。 （图片：Kem Bradley）

在上面的版本中，我们非常接近我们已经完成的那个改进后的设计。 耳朵周围的黑色轮廓已修改为棕色毛皮覆盖的区域。 脸部周围的黑线擦除了，但在柯基犬面部白色标记上方的2像素空间仍然可以检测到。 然而，请注意，我们仍然有一些来自之前版本的元素，例如纯鼻子。 我们将在下一步中解决这个问题。

6、独特性

许多有才华的设计师创造高质量的图标集，其中有许多是免费的，而且似乎每天都在增长。可是不幸的是，许多设计师过于依赖趋势或最流行的设计师的风格。作为创意的专业人士，我们应该多看看图标设计以外的领域，像建筑，印刷，工业设计，心理学，自然或任何其他领域，我们可以在其中找到灵感。因为最近这么多的图标集看起来相似，所以使你的设计独一无二变得更为重要。

Corgi的心形鼻子使这个图标独特和个性化。 （图片：Kem Bardly）

在最后的“修改”的形象，我们的心形鼻子有一个独特的体验，这给设计增加了一点新奇和希望。

这些简单的步骤应被视为一个起点，而不是一个确定的指南。并不是只有单一的方式去设计图标。 在本文中，我们概述了众所周知的设计方法的基础，但其他设计师肯定有自己的意见和技术。成为一个更好的设计师的最好方法是尽可能多的看各种作品，阅读各种材料，定期绘画（随身携带素描本），以及练习，练习，再练习。

上面左边的图片显示了原始图标。右边的图像显示了重新设计的图标，体现了本文中所讲的原则。（图片：Kem Bardly）

总结

我们分享了如何创建高品质图标的基本原理。 这些基本原理只是技术技能; 任何人都可以学习和练习。 记住，要创建更好的图标，从一般（形状）开始，朝着特定（可识别性）工作。 并通过调整图标或集合的统一元素（美学统一性），使您的图标保持内部一致，以及在整个集合中保持一致。 一旦掌握了基本技术，您就可以将精力放在使图标脱颖而出上：让你随心所欲的创作更好的作品。