@菜心设计铺 ：之写过的《腾讯设师总结的图标设计五维自检法》受到了很多关注。转眼已经过去年有余，于图标也有了更加深刻理解，所以今天继续深挖这个话题，希望能够打造份全、可图标自检册，帮助在大家改版、面等景进行检优化。
事物的价值在于它的用途是什。
图标用途是帮助用户理解信息，所以「识性」是图标最要、最底层价值。如你设计个图标，用户看不懂，即使视觉再美观，也是根，没有任何价值可言。
识别性可以分两方面，一含义识别，二视觉识别。
1. 含义识别
含义识别就的图标能不能被理解。腾讯动漫阅读页的时候，具栏顶部新增一图标详页入口，始的效果如下：
发些人以它目录页，些人则根本不知道什么意思，这就属于含义识别层出了问题。
由于这个图标没有案搭配使，在含义识别上一定要重视，最后的方案就是采一个详字来进行设计，既满足了识别，又满足了统一的形式。
实这种取含义本身的案来进行设计是的含义识别性的手法，尤是在图标独立现的时候。
2. 视觉识别
视觉识别与图标含义无，要是视觉层面阻碍户识别的因素。目前我总结有几点。
颜色因素
明特别接的颜色在一起，如柠檬和白色，如果白色图标放在了柠檬的色上，白色就很容易看清楚，而且特别晃眼：
底色与线性图标的搭配
这里引入一外的测试结果，我一辈的文章中看到的，测验包括一组四种样式的图标：白底黑色实图标，白底黑色空图标，黑底白色实图标，黑底白色空图标，过 10 天的时间，1260 参与者总共完了超过 25000 次图标的认知测试。将得出的数据分四组行向方差分析，相同的统条件下，选择黑底白色空图标比其他三种组合的时间慢0.17秒，也就这种图标的信息表达能力会很弱，如下图：
所以这样的理论与数据的支撑下，去我对部分图标行了如下改版：
底色的图标全部从线性改面性，如改不面性（例如时钟）需当加粗描，目的就提高视觉识别性。
复杂程度
图标设，我们一注意图标的使用场景，时候我们设的图标，设稿的时候什么问题，但一到真实场景中就会发很多问题。
如面这组图标：
做设计的时候并没有么问题，但最后唯一被挑战的就是，当把图标缩小放在标签栏的时候会会过于密集而导致复杂？而这种复杂就很有可成图标的视觉识别。
比下面组图标也存在相同的问题：
所以在图标尺寸小的时，一定要证图标的简洁，否则就影响识别。
切记，识别性是图标最重要的价值，尤其是在没有文字说的情况下，一定不要让用户产生困惑，不然就是在消耗用户体验，而不是给用户体验赋能。
在图标改版的候，最常说的就是图标的统一性问题，对于统一性可以从哪些方面入，整理了以下 6 点，依次来。
1. 圆角大
圆角大的统一，虽然经常挂在嘴边，但有候还是容易被忽略，比如下面这组图标：
并没有完成圆角的统一性，比如免费图标的圆角显于其个，后面被人提，才纠正了这个细节：
2. 描边粗细
在做一组同等大小的图标时，并不容易生描边粗细不一致的情况，比我们很少把其中三个做成 4px，而其中一个做成 2px：
种错误，我得优的你，应该不犯。但是有时在做一套拥有不同尺寸的图标时，我们必须要根据图标大小来整描边粗细，使整看来和谐统一。
3. 视大小
众所周，物理尺寸同等的方形要比圆形大，所以我们要在乎的是视感官上的大小统一，而不是物理尺寸，所以在做辅助规范的时有圆形、方向、横向矩形、纵向矩形：
目的就是能够更加灵活地整图标大小，使其在视重量上持统一。
4. 描边尾部细节
果你的图标是有描边且断的，一定要注意两个细节，一个是描边尾部的方与圆：
另一个就是断的距离，一定要做到统一，个很容易被忽略：
5. 角
角，是增图标统一感的因素之一，最见的角统一方式就是按照一定的倍数来制定规范，如 30 的倍数：
再举一个他方面的例子，在做面这组图标的时候，最初没有考虑断线的规律：
看久了会觉得有些凌乱，于是我将断线处定为右角 45 ，如遇到圆角拐角处，可挪靠拐角处进行断线：
这样我们就会看到有的图标断线位置都大致现在右角的地方，最终效果如：
很大程上了图标的统一性，并且在延展执行的时候节省了大量的思考时间（思考在哪里断）。
但是对断的位置是否一定要规定其出现的角度，我得不一定，也以从其他角度考虑，但最终的目的还是让整统一和谐，且延展高。
6. 正负形比例
正负空间比例很容被忽略，以前我也很少讲，不我得很用。下图，很明显白所占比例不同，导致图标一致就有问题：
当比例整，统一就加强很：
个因素既简单又用，大家一定要熟练掌握。
以上就是关于统一纬度的所有总结，做统一虽然不会让图标加多，但是做不统一，可能就还不算及格，所以一定要重视起来。
能够让图标耐的因素有多，以目前的认知，主要有以下点。
1. 饱
多候做出来的图标不够致，其中一个大的因就是不够饱。
如何判断图标是否饱满呢？我常用衡量法是在图标上加个矩形，看图标正形积是否可以增加。
例如下图，蓝色形，色负形：
很明显蓝色的形面积可以增加的，例如：
这就增加图标的饱满度，我也按照这思改版图标饱满度的。
举个真实的例子，我们原版的续看图标是上结构，而上面分的图形太窄，导致左上角、右上角的空白太多（就是绿色分太多），没有撑满矩形，如图：
于是我对图标的结构进行了调整，尽可地减绿色分，最后达到了图这样的效果：
最后醒大，对于图标的饱满，还需要结合整套图标的视觉效果来进行调试，虽然上面这个方法可解决大分图标的饱满问题，但还是要具体场景具体分析。
2. 有变的透气感
很多时候我们会发现自己做的图标有些死、发闷，实就是透气感没做好。
什么是透气？我们经常说页面不够透气，没有呼吸感，无非就是留白做得不，图标也是一样的，比下面组面图形：
看来就很闷，果我们给它加一扇窗，也就是加白之：
样整就透气很，但是种透气做的并不是很，图标外形和里面融的白形状有雷同，样就导致图标看来没有变化的细节。
所以需要在透气的基础上再融入一些变化，比如下面的例，就体现了这种有变化的透气，不论是正形还是负形都有大的变化：
对于耐这一块，觉得应该会有多知识点，不过目前能总结出来的只有这点，后面会继续挖掘。
风格包含方面内容，一个是属性表达，一个是形式表达。
1. 属性表达
属性表达就是图标的骨骼基调，比如圆角大、线条粗细等，可以根据行业属于及用户人群来进行判断。比如商行业和动漫行业就是完全不同的属性，商行业可以偏方正严肃一些，而动漫行业可以偏圆润一些（当然也不绝对，只要有因有果即可）；再比如男性和性，老人和孩都有不同的属性表达。
比如黑白线稿形表，不圆大小会不感觉：
左侧会偏严肃些，右侧会偏可爱些。
所以千万不小看的属性表达，它可以帮确的骨骼基调。
2. 形式表达
确了基础的属性之后，就填充形式的时候了：
至于形式的种类实太多了，但一理据，符合产品整体表达的感觉。
我想讲的重点是我们如何取抽象的格，然后在我们自己的设计上，如波洞的这组图标：
格就是在面这组图标的基础上的二次原创，如入纹、IP形象等等：
设计师在这中间需要取格的键要素，然后结合产需求来进行创作设计。
下面来一个例，比看下面套谷歌的图标：
我们就以在它的风上提取出以下要素：
组合：就是每个图标由至少两个元素组成。
融：有一些色的融入，使整体更加透气。
有了这两个要素后，可以根据具体需求来进创作设计了，下两组图标是这么来：
这是已有风格提取及加工，也是我常用图标设计法。
随着设计越来越质化，品感逐渐被大家所视，于品这块，以前写过很多相关文章，这里再简单归类下。
1. 颜色
颜色是最容易体现品感元素，所以图标上经常会结合品色来进设计：
2. 图形
图形可以取 logo、吉祥物等等，比如首页图标就经常使用 logo 本身：
再比如 MONO 的标签栏图标，计非常大胆，提取 logo 上面的 4 个字母──M、O、N、O后，直将其作为图标，如下图：
但是这种方法还是有大的风险，毕竟每个字母功能本身的含义没什系，如果不是非常个性化的 app，谨慎使用。
3. 形象
如果你的产品有品牌形象，那一定要用起来，比如腾讯动漫的黑，就可以进行结使用：
4. 特
特就是提取一气质或者特征，例断、圆润、尖锐等等，属比抽象的元素。
去年在优化图标的候，发现腾讯动漫 logo 上字体笔画比较粗，整体给人一种厚重饱的觉：
因此可以在品牌 logo 中提取「粗胖饱」的品牌基因，在这的背景下就不用再纠结图标使用 2px 描边还是 3px 的描边了：
可以确定地使用 3px 描边，因为它既符品牌基因符用户性格（肥胖圆润显得可爱）。
以上是个从识、统、耐看、风格、品，5 个维度来打造自检框架，相比较上篇会更加全体系。于图标设计，定要长期积累，耐心研究，我也在不断研究路上，借此会理分享，希望大家互相学习进步。
欢迎关注作者的微信公众：「设」
浙公网安备33011002017549号