这篇文章中我们会将这六个步骤运用到一只柯基犬的图标上。这个图标有潜质，但是还不敷以被认为是精良的。下图是修正前和修正后的比拟，接下来我们将详细解释详细步骤。
左边的是原来的icon. 右边的是按照本文原则重新设计过的icon.
有效icon设计的三个属性
系统和寻思熟虑的设计icon紧张依赖icon的三个属性：形式、审美统一、可辨识性。无论是设计一套icon还是设计单个的icon，都须要考虑这三点。
形式
形式是关于一个图标如何制作而成的最底层的构造。如果你忽略一个图标的细节，画一条线去表达它，看看它是不是变成了一个正方形、三角形、圆形、水平或者垂直的矩形？紧张的几何图形——圆、三角和正方形——是创造一个icon视觉设计的的根本。在我们的例子中， Kem Bardly设计的小狗的头部是由两个三角和两个椭圆组成的。正如我们画素描之前要用尽可能大的大略的形状打草稿然后再去添加更多的细节一样，我们也是从大略的形状开始设计一个图标，然后再去添加更多的细节。
这张图片的关键线显示了由基本形状定义的设计形式.
审美统一
我们说的审美统一是指在一个或者多个icon中共享同样的设计要素。比如说都是圆形或者方形的角，角的详细尺寸（2像素、4像素、等等），同等的线的粗细（2像素、4像素、等等）、风格（面、线、添补的线、字形）、颜色等等。审美统一让你的设计看起来是一个整体。不才面的例子中，三只狗狗都有共同的设计要素，比如2像素的圆角，2像素眼睛和鼻子的圆。
这三只狗狗用共同的设计和风格元素，创造了审美上的统一.
可识别性
可识别是一个icon作为一个产品的实质或一个icon独特的缘故原由。一个图标终极是否起浸染取决于不雅观看者能不能随意马虎的识别icon所描述的工具、想法、或者行为。可识别包括大家对付一个事物普遍的意见，但它也可以包括一些独特而意外的元素比如心形的小狗的鼻子。须要记住的是可识别性并不但是对事物纯挚的描述，它还包含你对此独特的理解。在这方面审美统一和可识别能够并且常常的相互重叠在一起。
每只狗狗的独特性他们可以被识别，然而同等的元素和风格又让它们看起来是一组的.
目前为止，我们理解了有效的icon设计的三个紧张属性。接下来，我们将深入理解如何用留个步骤来妥善处理这三个方面的问题。
六个步骤
1、从一个网格开始
我们这里利用一个32×32-pixel网格。我们的网格也包含一些基本的辅导来帮助我们在每个图标的设计中创建基本样式。
在这里，我们看到了一个 32 × 32-pixel 的网格, 用一个 2-pixel边界 (或 “禁区”) 来留出喘息的空间.
网格外面的2像素是我们所说的“禁区”。除非绝对必要，避免图标涌如今这个区域。“禁区”的目的紧张是为了在图标周围创建一些喘息的空间。
对付icon可以用根本形状概括的，你可以画一条外边缘线来做边界框，这些边界框常日是一个正方形、圆形、三角形矩形等~
圆形的iocn以网格为中央，常日会打仗到内容区的最外层的边缘，但不会进入禁区。把稳，最常见冲破禁区的情形是可以让一些微量的须要强调的元素向圆外延伸以担保设计的完全性 ，如下图所示。
用网格和轮廓线对齐的圆形图标
方形的图标也因此网格为中央但并不会这么做，在大多数情形下，它会扩展到紧张内容区的最外层的边缘。当须要和圆形或者三角形的图标保持同等的视觉重量时，大多数的长方形图标或正方形图标要对齐到中间的轮廓线（下图的橙色区域）。让图标本身的视觉重量去决定怎么去对齐这些轮廓线，这须要在练习中去觉得。看看下面方形的设计图，有三个同心方块被强调，浅蓝色、橙色、浅绿色。
调度成一样视觉重量后的方形和圆形的图标
在32-pixel的正方形里，你会把稳到20 × 28-pixel大小的水平或垂直的矩形。我们疏松的遵照这些矩形图标是横向或是竖向的，并试图使这些图标匹配20 × 28-pixel的尺寸。
调度后的垂直和水平方向的矩形与网格的关系
对角图标的大小因此圆形的边缘线来调度的。把稳，最外层的点与圆形的参考线基本同等就行，不须要特殊的精确，靠近就可以了。
调度后的对角图标大小与网格的关系
记住，你不用每次都严格遵照网格和参考线. 网格在这里的浸染是为了帮助你让图标保持同等性, 但是如果你须要在制作一个伟大的图标和遵照这个规则之间二选一的话，那就冲破它。有着“荷兰图标”美称的Hemmo de Jonge说过：一个独特icon的精华比统一风格要主要的多。
2、从大略的形状动手
用简单的轮廓线（圆形、三角形、方形）来开始你的设计。纵然一个图标在自然状况下是有机的，也最好从AI的形状工具开始。当我们开始制作图标，特殊是屏幕上小尺寸的图标，手绘导致的不规则的边缘会让一个图标看起来不那么精细。从基本的几何形状开始设计，将会使一个图标拥有更加清晰的边缘（特殊是曲线的情形下），并且可以更加快速的对图标加以调度，以及确保你遵照着网格和形式设计。
这个柯基的icon由基本的几何图形——两个三角和两个椭圆组成.
3、数据化: 边, 线, 角, 曲线 和角度
不要试图用自己的眼睛去随意定义图标的细节，比如线的粗细和角度等，要用严格的数字去定义它们。这些细微的差别会降落一个图标的质量
——角度
在大多数情形下，坚持利用45°角，或者它的倍数。由于像素的缘故原由，45°角的情形下是抗锯齿的，这个角度下会有一个完美的清晰的边缘线，人眼看起来会很舒畅。如果非要冲破这个规则，试着利用45°的一半（22.5°、11.25°、等）或15°的倍数，这么做的好处是，这些角度在抗锯齿上的表现仍旧很好。
近间隔不雅观看45°角度下的抗锯齿效果。
——曲线
还有一个会降落图标质量的地方是，不完美的曲线。这可能意味着专业和业余的差别。人的手眼之间的折衷是有极限的，不可能达到一个完美的精度。去依赖形状和数字来创建曲线而不是靠手绘。当你须要绘制曲线时，利用AI或者其它矢量软件。 手绘的弯角导致的不尽人意的效果.
正如我们看到的\"大众最初“的图像，手绘的不规则的曲线，严重危害了设计的质量。
这些精确的曲线是由AI里的贝塞尔工具创建的，而不是手工绘制.
——角
一个共同的圆角半径的大小是2pix。在一个32 × 32-pixel的图标里，2像素就足够大了，可以清楚的看到圆润但不至于太软。详细数值取决于你想要什么样的设计风格。
—— 精确的圆角
这是经由我们重新设计的柯基现在的样子
通过同等的圆角，光滑的曲线，统一的线的粗细，新版本的设计得到了大幅的提高。
——完美的像素
进行小尺寸的设计时，像素级别的校准是非常主要的。小尺寸图标边缘的锯齿可以使图标变得模糊。如果线不能对齐到像素网格之间会产生锯齿并且使图标变得模糊。以是讲图标对其到像素网格，使其边缘清晰，须要更加精确的角度和曲线。
我们之前有提到，45°角是最好的，由于它遵照了像素的堆叠办法，它会让形状有个完美的对角线。但是在高分辨率的屏幕上，比如说视网膜屏，这种完美的像素就显得不那么主要了。
—— 线的粗细
当涉及到线的粗细的时候，2种是空想的，3种有时候也是必要的。目标是在不引入太多毁坏图标同等的多样性条件下，供应视觉层次。当超过三种时会让图标失落去统一性。2像素和4像素的线非常好用。由于线的粗细恰好是成倍增加的。在大多数情形下，避免利用非常细的线，特殊是笔墨和扁平化的图标上，除非你你想制造一个“线形”的图标，依赖光芒和阴影来定义形状，而不是线。
这个iphone的图标演示了线粗细上的同等性。
4、利用同等的设计元素和风格
Hemmo de Jonge在2015icon沙龙上揭橥了关于图标设计的精彩的发言。在他长达两年的为荷兰政府设计图标系统的项目中。Hemmo和他的小伙伴们在每个图标上都放置了一个缺口。并不是严格每个都这样，但是大多数是如此。这个缺口成为了一种风格，把全体图标集联系到了一起。
利用同等的设计元素
在我们狗狗的例子里。我们采取了一个心形的鼻子。这个元素不仅把每只狗狗联系到了一起，而且授予了这些四条腿朋友们一些情绪化的东西。
狗狗图标里共有的元素。
在许多情形下，纵然一个图标集的风格发生了改变。他们之间统一的元素仍旧能够使它们看起来是一个整体。下面这张图是我们为这三个图标重新创建的风格，他们看起来仍旧是同等的。
保持元素统一的，其余一种风格狗狗的图标。
5、节制的利用细节和装饰
icon该当快速的传达一个物体、思想或者行为。太多小的细节将会引起混乱，从而让图标变得不随意马虎辨认，特殊是小尺寸的时候。一个或者一组图标的细节也是审美统一和可识别性的一个主要方面。最得当的添加细节的办法是，在可以识别出图标意义的条件下，尽可能的减少细节。
用最小的细节传达出这个物体是什么。
经由之前的一系列动作，我们已经基本上完成了我们的优化设计了。耳朵阁下的玄色轮廓线已经用毛发一样的颜色替代。脸部的轮廓也是用两像素的线勾勒出。把稳现在仍旧有一些元素是之前遗留下来的，比如小狗普通的鼻子。这个我们会不才一步办理。
6、让它有个性
每天都有才华的设计师制作出大量优质的图标，个中还有很多是免费的。不幸的是他们中的很多人过于依赖趋势或者那些最受欢迎的设计师的风格。作为一个创意行业的创业者，我们该当在图标以外去探求灵感，建筑、字体、工业设计、生理学、自然或其他领域。最近图标之间看起来越来越像，以是让你的设计是独特的变得更加的主要。
柯基狗上心形的鼻子让它变得独特而有个性。
在末了完成的图片上，我们有一个特殊的心形的鼻子，这给设计增加了一点新奇和希望。
这些大略的步骤该当被视为一个出发点，而不是一个明确的指南。并没有一个单一的办法来设计图标。在这篇文章中，我们概述了一个设计的根本知识，但其他设计师当然也可能有自己的见地和技能。成为一个更好的设计师，最好的办法便是尽可能多的去看，去阅读各种材料、定期的素描（带着速写本无论你走到哪里），和实践，实践，再实践。
结论
我们分享了如何创造一个优质图标的根本知识。这些基本的技能任何人都能通过练习和实践节制它们。记住，创造一个更好的图标，从一样平常性（样式）开始朝着分外性（可识别）努力。保持你的图标内部和外部。