最近好几个朋友在画icon的时候遇到了问题，不知道从何入手，也不知道怎么评判自己画的icon。这里正好有一篇ICONFINDER的设计师写的文章，文章讲述了图标的三个属性，以及画好图标的六个步骤。
ICONFINDER和阿里推出的Iconfont图标库类似，可以搜索出各种图标，图标会分为“Free（下载免费）”“Premium（优质，下载需收费）”两类。
在本文的例子中，笔者会重新设计一个狗的图标（它的名字叫作Corgi）。这个图标对于“Premium”来说还不够好，笔者会提供一些简单的指南，稍作优化，这个图标已经达到了“Premium”的标准。
那么正文开始了。
二、图标设计的三个属性
好的图标通常会有三个重要的属性，而这三个属性在大多数设计中是共通的。在设计新的图标时，我会以迭代的方式考虑每一个属性。即使我只设计一个图标，这三个属性仍然是隐含的，能从单个图标中看出来。
1. 结构
“结构”是图标的基础形式。先不看图标的细节，在图标的主要形状周围画一条线，会构成正方形、圆形、水平或垂直矩形、三角形还是更有机的形状？最成功的图标设计往往有着简单的、可识别的图案或形式。主要的几何形状有：圆形、正方形、三角形。这些形状为图标设计创造了视觉上的稳定感。
2. 特征
图标的“特征”由单个图标和图标集共同的元素组成。这些元素包括圆角、直角、线宽、样式（平面型、直线型、纹理填充线型），色板，等等。
3. 辨识度
图标的“辨识度”指的是其本质或图标的独特之处。“辨识度”决定图标是否“有效”，即识别度和清晰度，也就是说用户能否轻松地识别图标所描绘的对象、想法或行为。“特征”和“辨识度”往往相辅相成，多个图标共同的辨识度元素形成了整个图标集的特征。
三、图标设计的六个步骤。
1. 始终从网格开始
不同大小的网格有各自的优势。在本文中，我们将使用32*32像素网格。我使用网格的时候，还会注意一些基本的规则，下图就是我设计每个图标时所遵循的基本规则。
网格的外部2个像素，我叫作“禁区”。除非绝对必要，否则我不会让图标的任何部分进入此空间。禁区的目的是在图标周围创造一些呼吸的空间。
圆形的图标从网格的中心开始。圆形的图标通常会触及内容区域的外面四条边，但是不会进入“禁区”。（图标的某些元素或小部件也可以超出该范围）
方形的图标也是从网格的中心开始的。但在大多数情况下，方形的图标不会一直延伸到内容区域的最外边缘。下图中有三个同心的正方形，分别为浅蓝色、橙色、浅绿色。我做的大多数图标会和中间的正方形对齐（下图中橙色的正方形）。而是否要对齐每一个像素方格由图标本身的视觉重量决定。
在32像素的正方形内，有两个20像素乘以28像素的矩形（见下图，一个垂直，一个水平）。我会大致遵循这两个矩形来设计图标，这样我的图标方向会相对一致。
看完文章的你，想要一些学习软件或者有不懂的都可以找我咨询，加我建立的UI学习q群：927910296，进群可以找我领取相应的笔刷素材大礼包，还可以跟群里的其他设计大佬和学习者一起交流学习，获取更多其他软件学习资料。 想学UI设计的小白或者零基础都可以领取到学习资料ps笔刷神器+ps和AE软件
也有通过对角线定向的图标（如下图）。请注意，图标“锯”最外面的点差不多和圆形的边缘对齐。这里你做的时候不需要非常精确，大概靠近就可以。
你不需要每一次都遵循上述网格和参考线。单个图标的优秀比整个图标的一致性更重要。网格可以帮助你保持图标的一致性，但如果设计超棒的图标需要打破规则，那就打破规则。谨慎一点就好。
2. 从简单的几何形状开始
设计图标的方法与画草图的方法相同：先用简单的圆形、矩形、三角形创建主要形状的大形。即使我的图标最终大部分是有机形状的，我也会从Adobe Illustrator中的形状工具开始。在制作图标时，特别是对于屏幕上较小的尺寸，手绘所带来的微小的边缘抖动会使图标看起来不精致。从基本几何形状开始有助于使边缘更精致（特别是曲线），也能快速调整设计中元素的相对比例，并确保图标遵循网格和形状。
3. 数据化：边缘、线条、圆角、曲线和角度
数字上不精确的圆角、曲线和角度为让你的设计看起来奇怪。所以，在涉及细节时，不要只用眼睛看或者手绘。这些细节的不一致性会降低图标的质量。
角度
大多数情况下，我会使用45°角或它的倍数。45°角的“消除锯齿”（Photoshop中使用选区工具时能看到这个勾选项）分布比较均匀（见下图）。45°角的完美对称性使其成为一种易于识别的特征，人眼看起来很舒服。45°角可以在图标集中构建一致性。如果情况不允许用45°角，我会将其一分为二（22.5°，11.25°），或者使用15°的倍数。每个图标案例不尽相同，所以要根据具体情况做出决定。使用45°角的一半的好处在于，这些角度的“消除锯齿”仍保持得不错。
曲线
曲线是最引人关注的地方之一。“高级／专业”和“业余”之前的差别往往在于曲线。虽然人眼可以看出精确度的微小变化，但人的手眼协调却不能总是达到高精度（下图紫色背景的图标为手绘的曲线，很不精致）。我会通过形状工具和数字来构建曲线，而不是通过手绘。当一定要手绘时，我会用Adobe Illustrator的约束修改键（Shift），或者使用Astute Graphics的VectorScribe和InkScribe来更精确地控制我的贝塞尔曲线，这样更好。
圆角
我通常使用2像素的半径。但是，你用的圆角半径值取决于你想表现什么样的个性。2像素的圆角，不是太大，但是给图标带来了更“泡沫”的外观。是否使用圆角是整个图标集特征的一部分。
像素级完美
“像素级完美”是现在图标和用户界面设计中的流行语。在设计小尺寸图标的时候，“像素级完美”很重要。小尺寸图标边缘上的“消除锯齿”会使图标显得模糊。没有与像素网格对齐的线之间的空间也变得模糊。图标边缘与像素网格对齐才能显得清晰完美，而通过精确的角度和曲线能更加清晰完美。不过，像素级完美并不是最重要的问题（至少对于消除锯齿、大尺寸和更高分辨率的显示屏，如Retina屏，来说）。
线宽
关于线宽，我认为2像素最理想，但有时也需要3像素。我通常选择2像素和4像素线宽。理想情况下，我尝试将图标中的每个值都保持为2的倍数。有时，单个图标的细节可能不满足这个规则，但我会尽可能遵守。尽量避免使用非常细的线条，尤其是字形和平面图标。除非你故意要创建线条形式的图标，否则不要依赖线条来定义形状。你应该使用光线和阴影来定义形状。
4.在图标间保持一致性和相同的调性
Dutch Icon的Hemmo de Jonge在2015年的Icon Salon上发表了精彩的演讲，并详细讲述了他的图标设计元素（见下图）。在他为荷兰政府开展的为期两年的图标系统项目中，Hemmo和他的设计合作伙伴在每个图标中都加入了“缺口”这一元素。不是每个图标都有缺口，但大多数都有。在图标集中统一地使用这种调性，可以使图标间产生更多的关联。
5.谨慎地使用细节和装饰
图标应该快速地表达物体、想法或行为。太多的小细节会引入复杂性，这会使图标不易识别，特别是在小尺寸的时候。单个图标（图标集）中的细节的详细程度是其特征和辨识度的重要组成部分。那么，什么才是图标（图标集）正正好好的细节程度呢？经验表明—只包含能使意义清晰的最少细节就是正好。
6.让你的图标独一无二
现在很多设计师过于依赖流行趋势，或者重复一些受欢迎的设计师风格。这会扼杀创意。作为创意专业人士，我们应该在图标设计以外寻找灵感，例如，建筑、排版、工业设计、心理学、大自然以及我们可以找到灵感的任何其他领域。现在很多图标集看起来都相似，所以，让你的设计独一就很重要。独特性还有助于使图标更易于识别。（注意下图狗狗鼻子的形状）
四、总结
这简单的6个步骤是大家设计图标的一个起点，并不是什么权威指南。笔者在本文中概括了自己的设计方法和知识，其他设计师当然也有他们自己的观点和技术。成为一个更好的设计师的最佳办法是尽可能地多看，多阅读，定期素描（可以随身带着素描本），还有就是，练习，练习，练习。（左边是原来的icon，右边是优化后的icon）
网友评论