如何设计一个更好的图标？这7点很容易忽略

静电说：不少小伙伴在设计图标的时候通常会有这样的反馈，就是在做单个图标的时候感觉很好，但是一旦要完成一套图标，那么问题就来了，这些图标看起来不统一，完全不像一套图标的样子。今天静电为大家分享的这篇文章，里边有7个可以做好图标的窍门，一起来看看吧。

技巧1-设置网格

做图标的第一步，一定，必须是设置网格，这些网格中包含了安全区域，关键的辅助线，以及外围的空白区域。如下图：

技巧2-保持一致性

在设计图标的时候，请使用一致的线条粗细，圆角半径和填充样式。这样看起来你的图标会显得统一并易于识别。

例如，下方的图标，线条的粗细为2px，拐角的半径是3px。

技巧3-保持精简

图标中的细节通常不能太多，甚至越少越好。比如一个icon，当它包含了太多细节，那么缩小的情况下用户会无法分辨，只需要设计出关键点的隐喻即可。

技巧4-使用相同的间距

在图标元素中使用相同的间距，留白空间，可以让你的设计看起来更和谐。你可以通过在Figma，Sketch，XD中按住ALT键来计算矢量线之间的距离。

技巧5-注意视觉平衡（矫正）

有时候软件的数据会给人错觉，比如同样大小的圆形和方形，你会觉得方形更大一些，圆形稍小。这就是视觉所产生的误差。作为设计师，我们要以视觉正确为第一要义。比如下方的两个图，看起来在作图软件中，三角形已经居中在圆中了（左图），但是人眼角度来观察，并没有。我们需要对这个三角形作出位置的调整，如右图所示。

技巧6-填补空间

如果一个图标非常“瘦”，那么不妨对其进行旋转，提高空间利用率，并辅以其它装饰元素，让画面显得更加均衡。如下图的两个图标。右图明显是更好的解决方案。

技巧7-结合样式

使用填充和轮廓样式来描述图标的当前态，一般来说，在菜单中，当前选中的状态，会从线性图标转换为面性图标，这样用户识别度更高。

原文：https://blog.prototypr.io/how-to-design-better-icons

另外，我的新书《Figma UI设计技法与思维全解析》已经由清华大学出版社出版发行啦，可以在京东或者当当直接购买。

PS.静电的UI设计教室春期课程已经开放招生，5月初开课。跟着静电一起提升核心竞争力，快速进阶吧。目前开课在即，早鸟价只限本周。赶紧加静电老师微信：hixulei咨询报名。