Icon遵循三个基本属性，每一个属性都是一个更新迭代时需要考虑的方法，即使是设计单一的。
结构：这是icon的基本形体表现，如果忽略一个icon的细节或者使用各种各样的线条，最终它们形成矩形、圆形、三角形或者更多形状，而最成功的icon遵循最简单原则：可识别性，而这些是建立在圆形、矩形、三角形等这些几何形状基础之上的。
特征：每个icon的特征都会存在一些共性，无论是在一个icon内还是一套。这些构成特性的基本元素也是圆形、角度、线宽、样式（面、线、填充、投影、字体等）、色彩等等。
共性：每个icon都不会是单独的存在，另外又是什么特性使得这些icon保持独一无二的？显然，就是一种共性，这决定了是否是一套作品的基础，这些icon又是如何保持这些基础和共性，用户是否很容易识别出来它所代表的具体含义，有时共性和特征经常重合，可以通过几个icon的共有特性，组成一套独一无二的icon。
接下来说说与之相关的六个基本步骤：
1.以网格作为基准
不同的网格大小的好处就是便于最后的导出，对我们将会使用一个32px的网格，通过这个网格来创建一些基本的形式，每个icon都遵循这样的网格。
在网格的外部会有两个像素的空间，我称为“禁区”，这个区域任何的元素都不会进入，当然也不是绝对。“禁区”的目的就是让创建的icon有一个可以"喘息"的空间。
icon结构一般都是：正方形、圆形、三角形、呈对角线的矩形作为基本形式，而这也就是icon的边界框。
而圆形的icon都会集中在网格之中，会与边框有四个角的接触，但不会到“禁区”。
对于方形的icon也是集中在网格之中，但不是绝对，大多数的情况下会延伸到内容区域的最外边缘。看看下面的方形布局的icon，有浅蓝色、橙色和浅绿色三个同心的正方形，我会将大多数的元素调整到中间区域（橙色框之下的图像）。当对齐到这个方框之内，保持视觉重量的平衡，这个阶段需要不断的调整，反复的确定合适的尺寸。
在32px的正方形边框之中，会发现高28px、宽20px的情况，这取决于这些元素的对于水平和垂直方向上的要求，并要尝试做出各种各样的尺寸，例如下图中在（28x20）px的矩形之内最为匹配。
关于下面图片中的对角线icon排列，我们需要注意到圆形边缘区域。这个锯子的icon大体上是对准在圆形边缘的，我们不需要知道它确切的面积，接近就好。
请记住，我们不需要每次都按照网格和参考线。Hemmo de Jonge就曾经说过“一套保持一致性的icon，相比较单个icon，往往更加重要”，所以网格能有效帮助icon的一致性，但如果在遵守规则和创新之间选择，对于打破规则依然需要谨慎。
2。创建简单的几何形状
设计icon时，可以先画一下简单的草图，以此通过基本的形状：圆形、矩形、三角形作为icon最开始的形状。当开始制作icon时，发现对于一些尺寸较小的屏幕时，调整的边缘会有一些细微变化，使得icon看起来不那么的精致。基本上几何形状开始时是有助于使得边缘曲线更加的精确，快速的调整设计元素，并确保对应上网格和形式。
3.精确：边、线、边角、曲线、角度
尽可能的不使设计看起来是机械而乏味的，边角、曲线和角度应该保证在数字上的精确。换句话说，参考数字而不是眼球，特别是对一些细节处理的时候。不一致的元素会使icon的质量降低很多。
角
大多数的情况下，我都会坚持使用45度，或者是它的倍数，有一个原因是在45度的时候，边缘的锯齿是最均匀的（有效像素对齐到两个端点）这样的角度会形成完美的对角线，而且是很容易识别的，人眼也看着更加自然。当然，这个角度是建立在一个icon的整体性和与其它icon的一致性基础以上的，如果必须要打破这种平衡，我也会尽量是建立在度数减半（22.5度、15度等）的基础之上。根据每个案例的不同，我们所提出的具体情况也会不同，使用的45度好处主要是抗锯齿。
曲线
我感觉对于icon的质量，初级设计师和专业设计师最明显的区别就是曲线部分。人眼能觉察到这些精密的变化，但人的手和眼又达不到那么精确调整，我主要靠基本形状和数值，以创建曲线时尽可能不要试图手工绘制它们，当需要手动调整的时候，我也会按住“shift键”，或者通过一些插件来更加精确调整贝塞尔曲线。
圆角
有时候并不会总是使用圆角，但当我需要有2像素的半径圆的时候，选择的值取决于自己所希望的设计样式，我在这里使用了2像素的圆角半径，因为这样角此处会显得清晰圆润，不论如何使用圆角，都应该给icon一个整体性的圆角，这是符合美学基础的。
像素
像素能否在icon和UI界面中完美的显示是比较常见的问题，而且也是非常重要的，尤其是对于小尺寸的屏幕设计时，一个icon的边缘锯齿在小尺寸上可以使icon变的模糊。将行间距对齐到像素网格，可以有效的避免锯齿和模糊情况，对齐的icon的像素网格会使得与网格的边缘完美的对应一条直线、精确的角度和曲线。正如在前面提到的：45度可以其次考虑，因为像素之间的堆叠或渐变是点对点的关系，需要保持一定的角度。同样适用的是曲线和倾斜度：更加精确的数字就是越容易出现锯齿状，应当指出的是像素完美的呈现也并不是非常重要的问题，特别是对于较大的尺寸和更高的分辨率的视网膜屏。
线宽
谈到线宽，发现2px的线宽会是比较理想的，有时也会是3px。而超过3px的就会失去精致的感觉，我更喜欢用2px和4px的线条，理想情况下我会尽量保持每次测量的是一个icon的偶数倍，除非是个别的细节要处理，才会打破这项规则。但是我会尽可能的坚持这样的调整下去。在大多数的情况下，非常细的线条是要避免的，特别是字体和平面上的icon，除非要刻意为之的营造线性icon的样式，否则就不应该使用线来定义icon的形状，而是依靠光影来定义形状。
4.使用统一的设计元素
Hemmo de Jonge两年中设计了无数的icon，在2015年一场关于icon设计的沙龙上谈到了一些设计元素：每个icon都应该保持一个相同的“缺口”（注：就是每个icon都有一个相同的设计点，以保证这是一整套icon）。尽管不是每个都有，但是大多数的icon都会有“缺口”，这样来保持icon的一致性，并使得整体上看上去变得更加的完美。
5.有节制的使用细节和装饰
icon应该迅速的传达给用户意思或者行动指示，太多的细节会带来复杂性，使icon更加不容易辨认，尤其是icon在比较小的尺寸下。但是细节也在一个icon或者一套icon中都是表现特性和共性的重要方面，用于确定一个icon或icons以适度作为最好的原则，只要能足够的明显表达意思，就应该最高限度的减少细节。
6.保持唯一性
那些非常有才华的icon设计师能创造出真正高质量的icon，而且这一数量每天还在增加，其中还有很多是免费的。不幸的是，还有很多的设计师只会依靠现在的趋势或简单复制当前流行设计。我要说的是，作为创意专业人士，应该努力寻找设计之外的设计：建筑、平面、工业设计、心理学，等其它学科的知识，因为很多icon看起来相似，在这些地方找到灵感，使你的设计变的独一无二，而且唯一性还有助于icon更加易识别，这是icon特性的一个重要方面。
上面的简单步骤可以被看成一个icon设计的出发点，而不是作为一个明确的指导，设计icon也没有单一的办法。我在文章中提到的是自己设计方法。但是其它的设计师肯定有自己的见解 和技术概述。要成为一名优秀的设计师，最好的办法还是看到尽可能多的东西，读到更多的信息，另外最重要的一点就是练习、练习、练习（注：重要的事说三遍）。
作者：Scott Lewis
http://blog.iconfinder.com/better-icon-design-in-6-easy-steps/
网友评论