腾讯设计师总结的图标设计五维自检法

@菜心设计铺 ：最在做图标的优调整，虽然改大，但在复盘的时候还是总结很多心得，在这里和大分享一。

图标是界面设计中最重要的元素之一，也是我们 UI设计师必备的技能，常工中我们经常接到含有图标设计、优化的需求。但到底什么样的图标才是优的？也许很设计师并没有太完整的评判系，只是凭感，样就造成输出效果不稳定、耗时太长等不良的果。

所以借着这次机会梳理了一套图标计检的评判体系，一共五个维度，大纲如下：

• 识别
• 性格
• 品牌
• 饱满
• 细节

一、识别

判事的价于它的用途什么。

图标的途是帮助户解信息，「识别性」就是图标最重要、最层的值，如果你设计一个图标，户看懂，即使视觉再美观，是无根之木，没有任何值可言。

识别以分为两个方面，一是含义识别，二是视觉识别。

先说含义识别，简单来说就是你的图标能不能被理，当并不是设计师自己能理就以，而是需要用户来决定。里和大家分享一个我判断图标是否易识别的方法——内部用户研法，说白就是随机问一团内部人，最问几种位，样得来的结果更加靠，案例下。

在改版「话题」这个图标的候，想了博的「#」，于是把「#」和气泡框结了一起，如下图：

这找来10个内部人员进行测，只有3个能懂图标的思（这3个人都是经常玩博的），在这的数据之下，不用犹豫，这个方案一定是不可取的。

在进调研时，最少要保证80%能看懂，才证明你案是可。

再视觉识别，顾思义这一点已与图标含义无关，视觉层面的问题，例如小、底色阻碍用户识别的因素。

这里引入一个国外的测试结果，是我在一位前辈的章中看到的，测验包括一组种样式的图标：白黑色实心图标，白黑色空心图标，黑白色实心图标，黑白色空心图标，经过10天的时间，1260名参与者总共成了超过25000次图标的认知测试。将得的数据分成组进行双向方差分析，在相同的统计条件，择黑白色空心图标要他种组合的时间慢0.17秒，就是说这种图标的信息表达会弱，如图：

在这样的论与数据的支撑，我对分图标进行了如改版：

有色的图标全从线性改成面性，如改成面性（例如时钟）需要适当粗描边，目的就是视觉识别性。

切，识别是图标最重要的价值，尤其是在没有文字说明的情况下，一定不要让用户产生困惑，不你就是在消耗用户验，而不是给用户验赋能！

二、性格

试想果一个人没有，个人就是没有灵魂的，图标也一样，没有即没有灵魂。

那如何造属于的性格呢，需要从用户和品牌出发，例如腾讯动漫的用户都是动漫、cosplay爱好者，给人一种萌可爱的觉，所以需要让图标尽量圆润一些：

像上图2号图标一，增大圆角，使图标起来更加圆润可爱。

基于这样用户群，我们将原有些单色图标，改成下这样色图标：

目是让图标可爱活泼性格更加明显。

三、品牌

品性是我们经常提到纬度，常用提取品基也有很多，颜色、图形、祥物等等，这里举两个例子，个是具象品基——祥物：

我们有自己品祥物——黑子，所以在图标设计时可以将其运用起来，如下图是结合黑子形象设计出来「逗币」图标：

再举个比较抽象例子，从 logo 提取品基。

由于 logo 的字体笔画比较粗，整体给人一种厚重饱满的感觉：

因此我们可以品牌logo 中提取「粗胖饱满」的品牌基因，这样的背景下就不用再纠结图标使用2px描还3px的描了：

我们可以很确的使用3px描，因它既符合品牌基因又符合用户性格（肥胖圆润显得可）。

四、饱满

很多时候我们出的图标不够精致，其中一很的原因就不够饱满。

如何判断图标是否饱满呢？我的衡量方法就是在图标上面一个矩形，看图标的正形的面积是否还可增。

例下图，蓝是正形，红是负形：

很明显蓝的正形面积是以增加的，例：

就是在增加图标的饱满度，我也是按照个思路来改版图标饱满度的。

举个真实的例，版的续图标是上下结构，而上面部的图形窄，导致左上角、右上角的空多（也就是绿色部多），没有撑矩形，如下图：

于是对图标的结构进行了调整，尽可能的减少绿色部，最后达了下图这的效果：

最后提醒大家，对于图标的饱度，还需要结整套图标的视觉效果来进行调，虽然上面这个方法可以解决大部图标的饱问题，但还是要体景体析，切记，的目标是让整套图标起来和谐、统一、致！

五、细节

细节也包含多方面，例如：

1. 角度是否一致或者遵循某种规律

我们定的角度规范是30度的倍数，样以很大程度的提高图标统一。

2. 描边末端的细节处理

下图就是一个错误的例子，一个描边末端是直角，一个又是圆角：

我们在处理样的细节时，一定要证统一。

3. 像素对齐问题

大家得只要把一个尺寸的图标做像素对齐，导出其他倍数的图标就是ok的，其样的想法是不对的，因为在导出0.5或1.5倍数关系的时，像素很容易次产生不对齐的情况。

举个例，做图标是以2倍图为基础，然后统一导出3倍图，那这候3倍图就是2倍图的1.5倍，导出的候就发生了下面这的情况：

虽然2倍图是像素对齐的，但3倍图却没有对齐，如果计没有仔细检查切图，就会发生线上图标发虚的情况，所以在输出切图，一定要仔细核查，发现错误及调整，免得造成不良响。

除了以上这些，有视觉大小、圆、描边粗细是否统细节，然，这些都比较容易理解，不举例说明了，大家在做图标设计时候定要多多注意。

总结

本梳理五纬自检法可以用在图标设计自我检查、改版优化等多个，或许它并不全，定具有参考价值，希望能大家带来启发和灵感，我们也会更加努力，争取做出更好作品和教程与在设计路上你们分享交流。

欢迎关注作者的微信公众：「设」