icon设计的故事

cainiaofei

1471

收藏 2017-03-30

带你了解icon前世今生，推荐获取灵感的网站，并教你制作icon过程中的技巧，干货满点。

人为什么喜欢图形

国内外的旅游胜地都会有一些标志性建筑。通过这些小的线形icon就能够知道这些建筑代表哪个国家。

我们通过看这些国家的标志性建筑物的小icon，就能知道仔细去看其实这些并不复杂。就是把这些icon做了一些线宽或外部轮廓的描绘。其实都是对一些方，圆，三角等基础形状进行拼接。

所以我们从这个图大概就能得出一个结论。通过基础形状来进行拼和组装，这些图形能够赋予他们一些特殊的个性或价值，最终完成一个具象的样式，建筑或其他。

说到旅行，我们在旅行中其实经常会乘坐各种交通工具，比如飞机；短途的旅行有火车，地铁。我们在特殊的情况下经常会有一个非常重要的事情要解决那就是上厕所。

看到上图两个卡片，我们就知道男性和女性的区别。两个简单的造型，左边和右边上面都是圆，下面的分别是两条腿和裙子。但是其实从图形的角度来看，就是两个英文字母，两个圆，两条线和一个三角。但我们就能读出或者是看出它所代表的具体的含义。

所以我们就能大概知道人对于图形的理解和认知是比较适应的，或者是说人的脑子经常会对于图形或这些比较形象化的符号十分敏感。

有简单一些的示意图来代表男女或者是代表男厕所女厕所，当然也有比较复杂的。我们经常在一些高档的星级酒店或是一些特定高级场所，常能看到上图这种样式的icon，也就是剪影的样式。上面是一个男士礼服，一个女士礼服。其实就是用礼服这个概念，这样一个icon来代表深层的含义，影射男和女的关系。

所以可以知道，我们能够用不同的图标来代表相同的含义，运用到不同的场景中，也会有相应的变化。

当我们看到一个很复杂的图标的时可能会联想很多的场景和故事。但当我们看到非常简单的内容时，可能就会觉得这个场景比较简单，或者是说不用让人过多的思考。那我们从这个简单的造型里面就可以知道，一眼扫过去能看到比较明显的一个区别就够了。但是，其实也有很多人看电影时，觉得不是特别的明显。因为有些时候线条的粗细也会影响到我们的观察和判断。

洗手间是一个非常生活化并且很私密的地方。其实很多国家，区域，大洲，都会有各种各样的奇思妙想，他们对于这方面的一些理解，一些思维的碰撞和爆发衍生出来很多有趣的设计。

这张图我们可以知道是不同领域不同国度的国家。体现着不同的文化。可以看出是印度文化中的男女洗手间的区分。

所以可能一个很不起眼的符号或者图像，会让我们的认知或印象非常的深刻。我们会发现每一次去到一个陌生或是偏高档的地方，他们的洗手间都会让我们花一些时间和精力去看。单纯从文化和艺术角度来看，有一些还是很带感的。

大家对icon，这些图标会非常敏感说明我们把图像赋予了一个非常高的价值和连接性。我们用的语言可能不同，但却可以通过图像图形来进行沟通。所以这方面的图形可以说是人与人之间或者是人与物之间的一个联系。

用简单的话来说图标就是一个符号，可以代表某个对象，也可以象征性代表一种语言。

这些图标icon其实是世界上非常通用的语言。不论国籍种族年龄和性别，它是每个人都可以理解的一种语言。看似不起眼的一个小图标其实可以包含很多的信息。人类其实自古至今一直都是使用图标来表达自己，然后传达一些信息。比如，洞穴的一些绘画，埃及的象形文字等等。都可以看作是图标的一种表现形式。

补充一个小tips:

大家如果感兴趣的话可以去这个网站看一看。关于图形设计发展历史的网站。涵盖了图标设计历史中的所有里程碑。

以上我们对于图形的发展史和人类相较于文字来说对于图形更敏感，已经有了一个初步的印象，接下来沿着图标，再往下深入了解一下这些图标的分类。

上图九个小图标就是线性图标。可以看到这一组是与医学，基因，科学相关。其实我们一眼就能看到这些图标传达的含义。

做设计的小伙伴需要注意以下几点：

第一点，这些图标要很切实地代表该有的含义，然后就是这些小的细节。大家要找到一个共性，就是这些图标里面都有段点。

除了这些图标所代表他们的真正实在的意义外我们要提出一个叫设计语言。这里面的设计语言就是这些断点。

这一组和上一组区别主要是两点：

第一点的就是这些基础图形都是封闭的。还有一点非常明显的就是多了很多的颜色。

这些封闭的基础图形都有一样大小的圆角和圆形结构。所有这些图标都有一些颜色，而这些颜色明度和视觉，以及他们给人的整体性是一致的。

有了以上两组分析图表的经验后，这一组我们就很快能找出规律。首先，同样有这些割裂的点和线断开的样式。然后就是他们用了填充和描边两个效果。

以上我们看到了线性图标和填充图标，一些具体的样式。我们也在里面也找到了一些规律，比如，一些线条的连接处，他们的过度效果是怎么样的。还有这里面也加了一些呃颜色，为了整体的图标可以表达一种情绪，情感。无论是可爱，灵活还是炫酷。

刚刚提到颜色，这一组图标首先最大的感觉就是颜色非常丰富。给我们整体的感觉比较舒服。当然，这一组图标的亮点就是在于配色。

现在在这组图标中找一下我们刚刚提到的设计语言，首先我们可以看到这些颜色我觉得很舒服，五颜六色的。然后我们可以看到这些样式都是圆形的一个底，上面会有个主体物，主体物给我们的感觉都会是比较立体突出的。每个细节都有厚度，还有一个长头影，朝向一个角度倾斜的过渡影子。

为了保持光源的一致性，上面所有主体物的投影，以及下面整个底托的投影都是往一个方向走的。

在看一套图标的时候其实有几个维度，第一就是要看它的真正的实用性。第二看美观。有些时候在不同的场景下我们考虑的点其实是不一样的。这套图标其实美观性肯定比之前的要高很多，因为他细节比较丰富，颜色比较多样。

在是否使用，识别度的这个维度上来讲其实就比较弱一些了。我们可以看到，第一个音乐，第二个是系统的清洁或者加速，第三购物车，第四个客服，然后是设置，等等。但这个放大镜和七星瓢虫可能就不是那么的明显。下图是放大后的图，细节很好，但辨识度很差。

设计师在做图标的时候都会有颜色滥用的时期。这个时期其实是该有的阶段，这个滥用其实是一个褒义词。这个过程中会用很多花花绿绿的颜色来完善或填充自己的设计上的一些问题或者是掩盖一些其他的结构的问题。很多同学在做图标时，颜色用的很好，但是细节处理上并不好。

这一组图标其实从它的实用性和识别度来说都还是挺好挺高的。大家可以看到整体性很高，整体感觉很好。我们其实可以看到最明显的颜色就是红色，但是没有用那种饱和度很高的颜色，很红很红的那种大红。因为整个画面从整个视觉感觉上来说，还是要做到明度和整个的感觉是比较统一的才可以。

其实这是很长一段时间比较流行的一种风格，是一种轻质感。有些拟物化感觉但也不是很多。它里面会掺杂着很多非常用心的一些设计的小细节。大家可以把这张图保存下来，然后未来在临摹质感或者配色时可以给自己一些参考。

我们在做一些icon的时候，下功夫的点也比较多，比如说这一套的结构，底板可以是圆的也可以是方的，可以看到底下这个底板是六边形。然后在六边形的这个结构上加往右下角方向的长投影，这样的效果也会比较舒服。还有轻质感体现在整个背景和图标背景板属于同一色系，通过影子进行厚度烘托，整体效果就比较舒服。

当平面造就的微质感，轻微的厚度已经满足不了设计师的脑洞和需求时，大家就会来做一些2.5d，甚至3D的一些图标，比如这一套。

首先还是找共性，第一个，就是可以看到这些图标都是右上角俯视的效果，所以可以看到这些2.5d图标的至少三个面，之前的图标只可以看到两个面。而且背景底板都用了绿色草坪的感觉。所以可以看到每一套图标都先要找出一种设计语言出来，无论是背景板，底板还是说下面的颜色我们都要找出一个设计语言出来。

上图也是展现了三个面，但换了一个方向，也是俯视的效果。我们通过这些不同的颜色和形状可以看出不同样式的帐篷。但是有一点不同，这个又加了影子，但是这些影子也是非常实的，不会有边缘的虚化。所以，我经常会用这种方式来表现一种扁平化的质感。这些，我们其实都可以理解为是一种扁平化的设计语言。

这些其实是相对于苹果IOS6包括6之前的那种高光的玻璃效果，所以我们可以看到刚刚发的这几套UI案例都是一种比较扁平的风格，没有很厚重的效果。

这两年的趋势经常会提到一个词叫内容为王，会去掉很多的按钮和质感，来保证让用户看到的都是以内容为主的东西。去掉一些我们认为的出彩的设计，但是这些出产的可能会干扰用户或者是说不痛不痒比较鸡肋的一些东西。往往这些拟物化的图标，包括一些拟物化的或是比较复杂的一些线条，在一些游戏的UI，或是游戏的图标，一些特定的情况下才会用一些复杂的icon。

所以其实可以看到上图的这四个图标相对来说就有点像是四幅非常美的画。有的可能是用了一些扁平的质感，但是相对来说还是比较复杂。可以看到那个头盔，也是看到了各种各样的高光，渐变，质感，包括一些细节。所以这些，往往都是会用到游戏的以外的图标，甚至可能放了一个游戏画面的截图，这个在很多游戏的图标上体现的会非常多。