如何将不同的图标，纳入到同一个系统中？

想要将不同的图标纳入到一个系统当中来，设计师主要的工作目标就是确保一致性。

找图标这个事情，对于设计师而言，其实都不是太大的问题了。不仅有大把的网站提供免费的图标下载，而且设计师自己改和设计都不是什么大事。不过，这当中涉及到一个非常现实的问题。

对于常用的那十几个图标，并不难找，成套的都一抓一大把，就像「设置」和「编辑」的图标，但是，有许多图标对于特定的项目而言，是独一无二的，你想在通用的图标合集中找到一个能用的，可能性并不大。如果在其他的地方找到了主题匹配的，但是在风格样式上，又无法保持一致，这就很尴尬了。总不能直接拿来用吧？那多容易出戏。

单独看这些图标的时候，你可能**觉得单独看都还行，但是放在一起就不那么合适了。

那么如何将来自不同的 UIKit 的图标汇总整合成为一套，甚至于让网站和 APP 等不同地方、来源不同的图标，变成一致而令人愉悦的设计？

一、色彩

图标所传递的诸多信息当中，色彩是最为直观的一种。将不同来源的图标先在色彩上统一起来，比如使用同一种颜色。

虽然说使用单一色彩很便捷，不过你如果能运用现有的配色方案来进行图标的色彩统一，效果就更好了：

如果你真的喜欢你所找到的图标，但是它们的色彩又不一样，可以先自己调整，或者找一位专业的图标设计师来帮你。值得注意的是，绝大多数素材的分享授权许可证是包含编辑授权的，你可以更改色彩和尺寸。

二、风格

拟物化和扁平化设计之间的斗争已经持续多年了，目前来看扁平化设计是主流，但是我并不知道这种局面还**持续多久，因为如今的扁平化设计当中就包含了不少拟物化的设计技巧和元素。在未来的5到10年**流行什么，就很难说了。时尚和流行就是这样。

我所知道的是，你必须挑选一种风格。要么扁平，要么拟物。

你看看这套图标，配色是一致的，但是风格并非如此。

将扁平化和拟物的设计风格混搭到一起，必然**导致界面的杂乱无章。

不过，在大的风格设定之下，设计师依然有足够多的选择。比如在扁平化的设计风格当中，iOS 的 Apple Human Guideline 和 Google 所推动的 Material Design 都是非常典型的扁平化设计风格设计规范，两者在细节和风格的把控上都非常的严格，甚至具体到每一条线的粗细：

基于那些专门为特定操作系统所定制的、系统化的图标来设计新的图标，其实是最可靠的办法。这些被广大设计师所接受的设计规范，在日常设计中指引着许多设计师的工作。

因此，在色彩和风格上保持一致是最重要的。此外，还有一些微妙而值得注意的细节，需要设计师特别上心。因为这些图标的设计已经趋于经典，而重度用户和经验丰富的设计师，能够一眼就分辨出不够贴合的图标细节。所以，设计师常常能够听到这样的反馈：「我也不知道哪里不对，就是觉得不对。」

三、透视和视角

下面的5个图标，同样都是采用的拟物化的风格，为了统一，我细微调整了一下它们的色彩，看起来更加一致。但是不管怎么调整，它们看起来就像是5个完全不同的应用程序的图标（事实上它们就是）。

如果，按照透视图将这5个图标放置进去，就可以清晰地看到，它们所处的视角和位置是截然不同的。

它们分散在透视图的不同位置，明显是不一致的，而这一点则完全违反了图标设计的一致性。

图标应该看起来就是整个界面的一部分，它们之间的关系是平等的，在视觉和感知上应该保持着同等的关系。

四、阴影

在阴影的设计上，图标之间也应该保持这种一致性。看看下面的两个图标吧：

这两个图标源自同一套图标，但是看起来却只有一个图标被太阳照到了。光的方向同样很重要。因此，想要让图标保持一致，最好是让图标在光照角度上也保持着一致。

小贴士：虽然阴影多数情况下被认为是拟物化设计中才**用到的，但是实际上，包括 Material Design 在内的扁平化设计风格中也**用到阴影。所以原则上，它是泛用的，设计师需要保持设计上的一致。

五、视觉重量

图标给人的大小、密度和重量感，就是我们常说的视觉重量。而在同一套图标当中，图标的视觉重量应该保持一个非常接近的程度。

看看下面两个图标：

当你眯起眼睛感知这两个图标所形成的色块的时候，就能够更加明显的对比两者的视觉重量了：

差异确实非常的大。这个例子看起来非常极端，所以我们再继续找点别的案例来进行对比：

就视觉重量而言，上面的一组明显是不平衡的，你只需要眯眼斜视就可以很快判断出来。

六、细节

魔鬼藏于细节。但是细节中所藏的魔鬼类型还是非常多样的，这个主题我们不妨展开了来说。

1. 重复的元素

有的时候，设计师**加入了一些一致的、重复的元素，来确保图标看起来足够独特。

看看下面这组图标，**在右下角加入一些像素化的元素，每个图标都有，并且各不相同。而这组用户头像图标也是如此：

重复的元素，重点在于重复的一致性。

2. 细节的数量

另外一种情况，则是细节数量上的不一致。这种不一致**扰乱整体的一致性，简而言之，就是这组图标应该在复杂度上保持均衡，否则，用户将**因为混乱而难以判断各个图标的属性。

结语

正如同我刚开始所说的，想要将不同的图标纳入到一个系统当中来，设计师主要的工作目标就是确保一致性。经验丰富的设计师**从各个角度和属性上来针对图标进行优化，今天的文章已经将潜在的、需要关注的问题都梳理出来了，图标的设计工作做好了，界面的设计才**更加顺畅。

原文作者 : Icons8

译者/编辑 : 陈子木

译文地址：https://www.uisdc.com/combine-icons-from-different-sets

本文由 @陈子木 授权发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自 Pexels，基于 CC0 协议