图标设计干货总结

以前做图标都是凭感觉来设计，画的差不多点就完事了，没有考虑太多的理论因素，通过这次系统的查阅和实践才知道图标设计并不简单；接下来从五个方面分别设计图标需要考虑的点：

1.图标识别性

事物的价值在于他的用途是什么！

图标的用途是帮助用户理解信息，所以“识别性”就是图标最重要、最底层的价值，如果你设计一个图标，用户看不懂，即使视觉再美观，也是没有任何价值可言的！

识别性大致可以分为两个方面：一是含义识别，二是视觉识别。

1.1 含义识别

含义识别就是你的图标能不能被理解，用户能不能看得懂这个图标所代表的意思。

1.2 视觉识别

视觉识别与图标含义无关，主要是视觉层面阻碍用户识别的因素，如一下几点：

1.2.1颜色因素

色彩明度特别接近的颜色不能用在一起，比如柠檬黄和白色，如果白色图标放在了柠檬黄的底色上，白色就不容易被看清楚，而且很晃眼。

1.2.2 底色与线性图标的搭配

这里引入一个国外的测试结果，是之前在一位前辈的文章中看到；测试包括一组四种样式的图标:白底黑色实心图标，白底黑色空心图标，经过十天的时间，1260名参与者总共完成了超过25000次图标的认知测试。将得出的数据分成了四组进行双向方差分析，在相同的统计条件下，选择黑底白色空心图标要比其他三种组合的时间慢0.17秒，也就是说这些图标的信息表达能力会很差。（如图）

有底色的图标全部从线性改为面性，如改不成面性需要适当加粗描边，目的就是提高视觉识别性。

1.2.3 复杂程度

在图标设计前，我们一定要注意图标的使用场景，有时候我们设计的图标在设计稿时没有问题，但是一放到真是场景就会发现很多问题。

在图标尺寸较小的时候，一定要保证图标的简洁，否则就会影响的用户的识别。

切记，识别性是图标最重要的价值，尤其在没有文字说明的情况下，一定不要让用户产生困惑，不然你就是在消耗用户的体验，而不是改善用户体验。

2.统一

在图标的改版的时候，我们最常提起的就是图标的统一的问题，那对于统一的问题我们又该从那些方面入手呢，我总结了以下6点：

2.1 圆角大小

圆角大小的统一虽然经常被我们提到嘴边，但有时候还是经常会被忽略。（如图）

2.2 描边粗细

在做一组同等大小的图标时，并不容易发生描边粗细不一致的情况，但是有时候在做一套拥有不同尺寸的图标时，我们必须要根据图标大小来调整描边粗细，是整体看起来和谐统一。（如图）

这样一个图标描边大小为2px，一个图标的描边大小为4px，在视觉上就不能达到和谐统一的视觉观感。

2.3 视觉大小

总所周知，物理尺寸同等的方形要比圆形大，所以我们要在乎的是视觉感官上的大小统一，而不是物理尺寸；所以在做辅助线规范的时候会有圆形，方形，横向矩形，纵向矩形。其目的就是能够更加灵活的调整图标大小，使其在视觉重量上保持统一。

就像这一组图标，他们的视觉重量看上去就参差不去，给人看上去就有一种暴躁的感觉。

2.4 描边尾部细节

如果你的图标是有描边且断线的，一定要注意两个细节：一个是描边尾部的方与圆，另外就是短线的距离一定要做到统一，这个很容易被忽略。（如图）

2.5 角度

角度也是增加图标统一感的因素之一，最常见的角度统一方式就是按照一定的倍数来制定规范，比如30°的倍数。

另外一些图标考虑到断线的规律，为了使断点不凌乱，可以将断线处定为右下角45°，如遇到圆角拐角处，可挪动靠近拐角处进行断线，这样我们就会看到所有的图标断线位置都大致出现在同一个角度右下角的地方，这样就很大程度上提高了图标的统一性，并且在延展执行的时候节省了大量的思考时间（思考在哪里断线合适）（如图）

但是对于断线的位置是否一定要规定其出现的角度，我觉得不一定，也可以从其他角度考虑，但是最终的目的还是让整体统一和谐且延展性高。

2.6 正负形比例

正负空间比例很容易被忽略，虽然很少提及但是很实用。需要确保相同属性面积所占比例要一样，否则统一性也会很糟糕。这个因素看起来很简单，但是在现实生活中及其实用。（如图）

3.耐看

能够让图标耐看的因素有很多，这里展示一下四种：

3.1 饱满

很多时候我们做的图标不够精致，其实一个很重要的原因就是不够饱满。

那又如何判断图标是否饱满呢？常用的衡量方法就是在图标上加一个矩形，看图标的正形的面积是否还可以增加。（如图）

3.2 有变化的透气感

很多时候我们会发现我们做的图标有些死板，发闷，其实很多时候是因为透气感没有做好。

那什么是透气感呢？我们经常会说页面不够透气，没有呼吸感，其实无非就是留白做的不好，图标也是一样的。（如图）

4.风格要素

风格包含两个内容：一是属性表达，二是形式表达。

4.1 属性表达

属性表达就是图标的骨骼基调，比如圆角大小，线条粗细等；可以根据行业属性及用户人群来进行判断，比如商务行业和动漫行业就是完全不同的属性，商务行业可以偏方正严肃一些，而动漫行业可以偏圆润一些（当然也不绝对，只要有因果即可），再比如男性和女性，老人和小孩都有不同的属性表达。

比如同一种黑白线稿的形式表达，不同的圆角大小会给人不同的感觉。（如图）

所以不要小看前期的属性表达，他可以帮你确定大的骨骼基调。

4.2 形式表达

确定了基础的属性之后，就是填充形式的时候了。至于形式的种类实在太多了，但一定要有理有据，符合产品整体想要表达的感觉。

在这里我们要讲的重点是我们如何提取抽象风格，然后用在我们自己的设计上，设计师在这中间需要提取风格的关键要素，然后结合产品需求进行创作设计。

我们可以在风格上提取一下要素：组合，融白

组合：就是每个图标会由至少两个元素组成

融白：有一些白色融入，使整体更加透气

这就是对已有风格的一种提取及二次加工，也是我们常用的一种图标设计方法。

5.品牌效果

随着设计越来越同质化，品牌感逐渐被大家所重视，对于品牌这一块简单有一下几种归类：

5.1 颜色

颜色是最重要最容易体现品牌感的元素，所以图标上常结合品牌色来进行设计.(如图)

5.2 图形

图形可以取自logo,吉祥物等，比如首页图标经常取自logo本身（如图）

5.3 形象

如果你的产品有品牌形象，那一定要把它用起来，比如腾讯的动漫黑子就可以进行结合使用。（如图）

5.4 特性

特性就是提及一些气质或者特征，例如断线，圆润，尖锐等，素于比较抽象的元素。（如图）

总结

以上就是从识别，统一，耐看，风格，品牌五个维度来打造的自检框架，比较全面；对于图标设计，一定要长期积累，耐心的研究，不断的推敲你就会有新的发现！