6个步骤教你设计一个完美的Icon发布者：本站     时间：2020-06-05 15:06:13

6个步骤将会运用到改进一只狗上（确切地说，是一只柯基），这个图标是由iconfinder的用户Kem Bardly最近提交的。这个图标是有潜质的，但还不是够优美到可以称为“高质量”。我们给Kem一些简单的小技巧，只要做一些小小的改进。他的图标已经准备被作为优质图标通过了。下面展示的图片显示了Kem的图标改进前后的版本。在接下来的章节，我们将循序渐进地解释它是怎么从最初版变到最终版的。


左边的图片是原始图标。右边的图片是重新设计过的图标，运用了本文中提到的原则。

注意，文章中讨论的原则适应到网页图标时，他们通常也适用于印刷图标。典型的300 dpi的印刷材料，使得像素化呈现本质上是毫无意义的。如果你是一个平面印刷设计师，文中提到的所有原则都是适应的，但是你可以忽略像素化呈现的作品。

有效图标设计的三个特性

对于组成图标的3个属性：形式、统一审美和识别性，好的图标显示了一套系统的经过深思熟虑的方法。当新设计一套图标，把这些属性都考虑在迭代的途径中，从整体（形式）出发，进入到细节（识别性）。即使你只设计单个图标，这3个属性也仍然能被应用，能从单个图标中推测出。

毋庸置疑，设计一个有效的图标不止这3个属性，但有这3个精选属性是设计一个好的图标的开端。为了相对简洁性，我们专注于考虑这3个主要的属性。

形式

形式是一个图标根本的结构，或者说是它的组成部分。如果你忽视图标的细节，在主要图形周围画了一条线，那他们是形成了一个方形、一个圆形、一个垂直或水平的矩形，一个三角形或者更多有组织的图形？最主要的几何形状——圆形、方形和三角形——能为图标设计打下一个稳固的视觉基础。在Kem Bardly设计的柯基图标示例中，狗的头部是由两个三角形和两个椭圆形组成的。一个人开始会画一个最大最简单的形状，然后才定义越来越多的细节。另一个人从最简单的形状开始设计图标，然后添加更多的细节——但是只有尽可能多的需要沟通概念的细节被表达出来，它就会成为一个物体，一个想法或行动。


这张图片的关键线条展示了设计构型的基本形状

审美的一致性

单个图标的构成元素能运用到整套图标中，就是我们说的视觉的一致性。这些元素比如是圆形或方形的角，角度的大小（2像素，4像素…），被限制和保持一致的线条粗细（2像素，4像素…），图标风格（扁平的，线条的，被填充的线条或符号），配色等等。审美一致性是设计元素的集合，或是设计中你为其成为一个整体所贯穿使用的手法。在下面的例子中，会发现Kem图标中的这3只狗都有一些共同元素，比如2像素的圆角，2像素宽的眼睛和心形嘴巴。


这3只狗图标有共同的设计元素，形成了视觉的一致性

识别性

识别性是产品图标的基本，它造就了图标的唯一性。一个图标是否从根本上起了作用，依赖于观众能多么容易地去理解这个图形、它的含义及它描述的动作。一致性包括展示观众普遍会和你的想法联系在一起的特性，但是它也包括哪些独特的，出乎意料的元素，像把狗狗的鼻子设计为心形。记住识别性不仅仅是指对形状、想法或它表达的动作的理解，也指识别出你的图标。从这方面来说，美学的一致性和识别性能经常重合在一起的。下面的图标，我们能识别出一只是柯基犬，一只是西伯利亚的爱斯基摩犬。因为他们独特的颜色、头部形状和耳朵，但是仍然会认为他们是同一组图标，因为他们有共同的设计元素。