如何提高自己的Icon设计水平

原文&＃xff1a;https://www.sohu.com/a/142657240_769205

笔者供职于Iconfinder,当用户将自己制作的图标上传到Iconfinder后&＃xff0c;我们都会对这些图标进行审核与评级。界定平庸与优秀的图标是件很有挑战性的工作&＃xff0c;因为这两者之间的差异往往很小&＃xff0c;然而正是这些细微的差异会对图标整体质量产生巨大的影响。细节决定成败这句话在图标设计上面体现的尤为明显。

文中所举例的图片来自于Iconfinder用户Kem Bardly&＃xff0c;他图标最初版本已经很优秀了&＃xff0c;但是仍有着很大的提升空间。我们给他提供了一些小的修改意见&＃xff0c;他修改了以后图标的质感立马就提升了一个档次。在接下来的文中&＃xff0c;我将一一列举这些图标绘制中的小窍门。

图标的三个特性

首先我们要知道(合格)图标的三个主要特性&＃xff1a;形状&＃xff0c;视觉统一和可识别性。在设计过程中&＃xff0c;这三个特性是设计师需要反复考虑的。即使我们在设计单个图标的时候&＃xff0c;这三个特性也要牢记着。当然图标不是仅仅这三个特性&＃xff0c;但是这些特性可以帮助我们很快的提高自己的图标设计水平。

形状

形状是一个图标的基本结构&＃xff0c;相当于图标的骨架。主要的几何形状 —— 圆形&＃xff0c;矩形和三角形 —— 构成了图标设计的视觉基础。在我们下图的例子中&＃xff0c;柯基狗的头是由两个三角形和两个椭圆构成的。大部分人都会选择先画大的部分&＃xff0c;然后再处理那些小细节&＃xff0c;其实图标需要着重表现的细节并不多。图标上细节也是越多越好&＃xff0c;这个后面详细再说。

视觉统一

在一个图标集里每一个图标都具有的元素的集合我们称之为图标的视觉统一。这些相同的元素可能是相同半径的圆角&＃xff0c;线宽&＃xff08;描边&＃xff09;&＃xff0c;用色等。比如下面的例子里&＃xff0c;Kem的图标集中&＃xff0c;小狗的耳朵上的圆角都是2像素的&＃xff0c;描边都是2像素的&＃xff0c;鼻子都是心形的。这些共享的元素将图标集里的每个单个图标都联系在一起。

可识别性

可识别性是一个图标的灵魂&＃xff0c;是真正让你的图标独一无二的关键。图标其实也是一种语言&＃xff0c;其作用就是来共同交流&＃xff0c;不同的是这里信息的载体不是文字而是图形。

你的图标是否成功就在于用户能否在极短的时候内很容易的破译你的信息。当然图标的可识别性作用不仅仅于此&＃xff0c;一个精妙的可识别性元素的使用会将整个图标集里的图标都联系成一个整体&＃xff0c;这里和上面说的视觉统一很相像。比如下面的图中&＃xff0c;我们可以一眼看出左边的是柯基&＃xff0c;右边的是哈士奇。因为它们有着自己特有的毛色&＃xff0c;头型与耳朵也可以看出来这两个图标出自同一个设计师之手或者直接来自同一个图标集&＃xff0c;因为相同的设计元素&＃xff08;眼睛&＃xff0c;鼻子&＃xff0c;描边&＃xff0c;圆角&＃xff09;。

六大窍门

1 使用网格

所谓“无以规矩&＃xff0c;不成方圆”&＃xff0c;网格对图标的规范化设计有着极大的“约束”作用&＃xff0c;不同尺寸的网格用途与用法也更不相同。在这里&＃xff0c;我们主要说的是32*32像素的网格。我们将网格划分为不同的区域&＃xff0c;不同的区域在整个图标里起到的作用也各不一样。

首先&＃xff0c;最外层的两像素的位置我们通常空着&＃xff0c;不加任何东西。这样做的原因是给图标创造出一些空间感&＃xff0c;而不至于太挤。我们称这个区域为“留白区”。里面的我们称之为“内容区”。

圆形图标处于网格中心位置时经常会触及到内容区的边缘&＃xff0c;但是不会侵入留白区。当然在一些特殊情况下&＃xff0c;比如为了保持设计的完整性&＃xff0c;有时候图标中的一些次要元素进入了留白区也是允许的。如下图所示

正方形图标大部分情况都会处于网格的中心位置&＃xff0c;但不会过度延伸导致占据留白空间。为了保持与圆形和三角形一致的视觉权重&＃xff0c;我们可以通过使用参考线将图标保持在网格的核心区&＃xff08;下图的橙色区域&＃xff09;。当然每个图标的核心区是由它自身的视觉权重所决定的。

2 勾勒

在图标设计的初始阶段&＃xff0c;我们可以通过使用圆形、矩形和三角形这些基本几何形状将图标的大致形状勾勒出来。如果我们直接手绘图标轮廓的话&＃xff0c;那么到图标制作阶段一些手绘所带来不精确的缺点就会凸显出来。不仅如此&＃xff0c;使用形状工具勾勒出草图的图标在后期尺寸调整的中也会有据可循。诚然一个图标集是由很多个元素构成的&＃xff0c;但是一个元素的脱节与不标准会影响图标集的整体质量。所以直接使用形状工具勾勒出草图能起到规范化的作用&＃xff0c;确保图标精确到像素级别。

3 常见的设计元素

通常情况下&＃xff0c;45°是一个完美角度。因为45度角所产生的锯齿会均匀的成阶梯状分布&＃xff0c;不会产生模糊效果。图标可以以一直清晰的状态展现出来&＃xff0c;这很符合人类眼睛的审美需求。当然在特殊情况下打破这个惯例也是允许的。尝试使用22.5度&＃xff0c;11.25度或者15度角的倍数。

曲线如果绘制的不好会极大的影响图标的质量&＃xff0c;所以从曲线可以看出设计师的功底。人眼可以轻易的看出曲线上细微的差异&＃xff0c;所以这对设计师的要求就很高。我们尽量使用形状工具或者数字来创建曲线。非要用手绘来解决问题的时候&＃xff0c;推荐使用Adobe Illustrator&＃xff0c;当然Vectorscrible和Inkscrible也可以完成精细曲线的绘制。下图中就是手绘曲线时导致左边右边的不对称。

我们在设计过程中往往会遇到图标边缘出现锯齿的情况&＃xff0c;这样的图标会模糊影响整体效果。出现这种情况是因为图形没有达到像素级别的对齐。

两种线宽是最合理的&＃xff0c;当然某些特定情况下三种也是必要的。我们引入不同的线宽的目的就是提升视觉层次感与多样性。使用太多的线宽会破坏整个图标集的一致性&＃xff0c;这里指的是超过三个。在大部分情况下&＃xff0c;我们要尽量避免使用过细的线条&＃xff0c;除非你是特意想制作一套“线性风格”的图标集。

4 使用统一的设计元素

Dutch Icon的Hemmo de Jonge曾在图标沙龙2015的活动上谈到了这一点。在他和荷兰政府合作的一个图标系统项目里&＃xff0c;Hemmo和他的设计伙伴加一个缺口。不是每一个图标都有这个缺口&＃xff0c;但大多数都是。这种做法可以将这些单独的图标有机的联系在一起。

重新回到狗狗的例子中来&＃xff0c;我们也使用了同样的手法&＃xff0c;那就是心形的鼻子。这个心形鼻子不仅将这些图标联系起来还表现了狗是人类好朋友这条信息。

大部分情况下&＃xff0c;即使图标集中的大部分元素都发生了变化&＃xff0c;但是相同的设计风格会将这些图标联系在一起。

5 把握细节尺度

图标中细节不是越多越好&＃xff0c;越详细越好。因为图标的主要功能就是在短时间内给用户传递信息。过多的细节会增加图标的复杂性进而影响图标的可辨识度。把握小细节的尺度是整个图标集的视觉统一性和可识别性中的重要一点。

6 跨界思维

现在每天都有很多设计师在各种设计网站上上传自己的图标作品&＃xff0c;其中不乏一些精品。但是这些作品大部分都很相似&＃xff0c;这些设计师说好听点是“紧跟时代潮流”&＃xff0c;说不好听点就是跟风。真正去“创作”图标&＃xff0c;你应该将目光放得更远一点&＃xff0c;去其他领域看看。比如&＃xff0c;建筑、隐私、工业设计、心理学和其他任何专业。从这些看似与图标设计毫无联系的领域里汲取灵感&＃xff0c;给你的图标注入不同的思想。

总结

方法其实只要多加练习其实很容易掌握&＃xff0c;难的是思想层面的转变。图标设计是一个由整体到个体&＃xff0c;由形状到可识别性的过程。要时刻牢记你是在设计一整套图标集而不是一个图标&＃xff0c;不要为了吸引眼球而刻意追求个体的标新立异。

译文作者&＃xff1a;王M争

原文作者&＃xff1a;Scott Lewis