如何搭配不同样式的图标

找图标很容易。数以千计的设计师每天都在画图标，数以百计的网站常常以免费的形式提供给大家使用。图标的种类非常繁多，但是多样性也带来了一 个问题。

一个普通的应用程序需要10到20个图标。有些图标到处都可以用到，比如说 “设置” 和“编辑”。而另外一些图标则是专门为某个项目而设计的。

如上所示，这里的每一个图标都很讨人喜欢，可是放在一起，它们就“不般配”了。

所以，在你的网站，应用，或者是其它使用图标的用户界面上，应该怎样组合来自不同设计师或图标组的图标才能使他们看起来一致，而且令人愉快呢？

1. 颜色

当你看图标的时候，第一个最显眼的特征就是它们的颜色。混合来自不同图标组的图标，最简单的方式是按颜色归类：

这一招对于单色图标很简单，对于使用几种相近颜色的图标也很管用：

假如你很喜欢你找到的某些图标，但是他们的颜色不一样。你可以自己编辑他们的颜色，或者叫别人帮你。但是你也要知道大部分创作共用授权是允许小修改的。比如说颜色和大小改变。有一些图标公司甚至提供镶入式的重新着色：

如上图所示，可在 Icons8 (https://zh.icons8.com/ ) 右侧在线改变图标颜色。

2. 风格

扁平化设计和拟物化设计之间的战斗已经持续了很久很久。虽然到目前为止，扁平化设计处于上风。但是我不知道这会延续多久。就像我不知道5年或者10年内人们会穿什么。 大家把这称之为时尚。 

我只知道你要选一边，你要么就是全部扁平化设计，或者你就是全部拟物化设计。

看这一组，使用的是相近的颜色。但是…

混合扁平图标和拟物图标可能会有很多后果：混乱的界面，错误的装饰，有时，不再把按钮当成”按钮“了。

当然，在扁平图标和拟物图标之间还有很多“亚风格”。比如说，在扁平风格图标中，最有名的要数苹果人机界面指南和谷歌 Material Design。他们被详细记录到极致甚至线条的宽度都有说明：

这些指南非常受欢迎，很多设计师都在工作中遵循它们。

所以保持颜色和风格一致是首要的。其次就是一些微妙，但仍然很重要的细节。一个有经验的设计师会马上发现这样的缺陷。给用户的体会也是典型的“我不知道是什么原因，但是有一些东西困扰着我。”

3. 透视法

我们来看看这5个图标。它们都是拟物风格的，我适当的调整了一下颜色，所以他们看起来更一致。但是它们仍然看起来像是用于5个不同应用程序的图标。 

图标中的五件物品可以合并到一幅图中：

但是它们除了零零散散的分布在几个不同的地方之外，也没有什么一致性。在图标的世界里，一致性就是一切。

图标应该看起来像是面板，界面的一部分。不要忘了，图标最先是用于“线下的” 界面。这极大的影响着我们对它们在“数字”世界的看法。

 我想按他们，你呢？

4. 阴影效果

另外一种一致性就是光线，或者说是阴影效果。我们来观察一下这两个图标：

看起来好像阳光只照在其中的一个上面。光线的方向能让两个图标合并成一个整体，所以是很重要的。

注意：尽管阴影效果在拟物风格中用的最多，但是在扁平设计中有时也会用到。 而且基本原理是一样的——同一组中所有图标使用同样的阴影效果。

5. 视觉重量

视觉重量是图标被感知的大小 ，密度和重量。这个理论在此做出了深入的分析。简而言之，图标应该是看起来一样大小的。

来看看这两个图标：

现在眯着眼睛，让你只看到两个褪色的大概形状：

看到这两个形态的巨大差异了没？ 这可是犯了大忌了。这个例子确实是有一点极端。所以我们来比较一下两组比较相似的图标：

就视觉重量而言，上方的一组，明显是不均匀的。你只需要眯着眼睛看就知道了。

6. 细节

“麻烦就在细节里。”大家都是这样说的。细节是一个很广的话题，所以我在这里就具体一点：

要素重复

有些时候，设计师们在图标组中包含了某些元素或者是特性，所以他们的图标组看起来很独特：

上图每个图标右下角有像素化的部份——之后的每一个图标也应该如此。另一个使用重复要素的例子就是用户图标 (https://icons8.com/web-app/for/all/user)：

7. 细节的数量

另外一种情况：一致性也会被图标细节的数量所干扰。简而言之，一套图标应该是全部简单，或者全部复杂。任意混合这两种类型会产生不可预料的后果：

用户将分不清楚这到底是一个图标，还是一个图片。糟糕的用户体验。

8. 结语

正如我反复强调的那样。当你混合来自不同图标组的图标时，唯一要力求的就是要确保图标的一致性。一致性，一致性，一致性。一个有经验的设计师可以几乎是直观的通过特性判断出一组图标是否适合放在一起，那些可能特性（阴影，风格，线条）的类型是无限的。但是，在这篇文章里，我试图确定最重要的那个，也是最容易被忽视的那个。假如你们有什么要补充的，欢迎评论。