详细解析图标设计五维自检查法(2)

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

我们可以很确定的使用3px描边，因为它既符合品牌基因又符合用户性格(肥胖圆润显得可爱)。

4.饱满

很多时候我们做出来的图标不够精致，其中一个很大的原因就是不够饱满。如何判断图标是否饱满呢?我常用的衡量方法就是在图标上面加一个矩形，看图标的正形的面积是否还可以增加。例如下图，蓝色是正形，红色是负形：

很明显蓝色的正形面积是可以增加的，例如：

这就是在增加图标的饱满度，我也是按照这个思路来改版图标饱满度的。举个真实的例子，我们原版的续看图标是上下结构，而上面部门的图形太窄，导致左上角、右上角的空白太多(也就是绿色部分太多)，没有撑满矩形，如下图：

于是我对图标的结构进行了调整，尽可能的减少绿色部分，最后达到了下图这样的效果：

最后提醒大家，对于图标的饱满度，还需要结合整套图标的视觉效果来进行调试，虽然上面这个方法可以解决大部门图标的饱满问题，但还是要具体场景具体分析，切记，我们的目标是让整套图标看起来和谐、统一、精致!

5.细节

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

5.1 角度是否一致或者遵循某种规律：

我们定制的角度规范是30度的倍数，这样可以很大程度的提高图标统一性。

5.2 描边末端的细节处理

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

我们在处理这样的细节时，一定要保证统一性。

5.3 像素对齐问题

大家会觉得只要把一个尺寸的图标做好像素对齐，导出其他倍数的图标就是ok的，其实这样的想法是不对的，因为在导出0.5或1.5倍数关系的时候，像素很容易再次产生不对齐的情况。

举个例子，我们做图标是以2倍图为基础，然后统一导出3倍图，那这时候3倍图就是2倍图的1.5倍，导出的时候就发生了下面这样的情况：

虽然2倍图是像素对齐的，但3倍图却没有对齐，如果设计师没有仔细检查切图，就会发生线上图标发虚的情况，所以我们在输出切图时，一定要仔细核查，发现错误及时调整，免得造成不良影响。除了以上这些，还有视觉大小、圆角、描边粗细是否统一的细节，当然，这些都比较容易理解，就不一一举例说明了，大家在做图标设计的时候一定要多多注意。

总结

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

原文地址：TCD设计中心

作者： 菜心