线性icon小结

Icon在UI中的重要性不言而喻，究竟有多重要呢？大家可以看到下边的站酷app个人中心的截图，就图片里的内容形式，大家可以总结到什么呢？

图1-1（图片来自站酷app）

没错，除了文字之外，剩下绝大部分内容都是icon。所以，做好UI，我们不得不重视icon。icon如此重要，那么该如何绘制好它呢？下边是我个人的一些总结。

| 辨别度

可以说辨别度是线性icon最核心的特性，这也是使用icon的初衷--人机交互的过程中帮助使用者快速定位并识别内容。我们可以看到下图的几个icon，在没有文字说明的情况下，你能否快速识别出他们所代表的意思？

图2-1（图片来自美团app）

这组icon来自美团，即使遮盖住了文字，我们也可以快速识别出图标所代表的含义，即使不能百分百确定，也八九不离十了。

图2-2

所以，能否快速快速识别出图标的含义，是判断图标好坏的最最基本的依据。为了验证图标的识别度，你可以在图标绘制完成后，请别人帮忙，猜测图标所代表的含义。

做好图标识别度的方法，我们需要发挥自己的联想能力。比如上图的发现icon，我们首先提取关键词“发现”，然后开始联想。你想到了什么呢？你可能联想到了“眼睛”，你也可能联想到了水手们航行使用的罗盘，你也可能联想到了望远镜等等。根据你的联想，绘制出图标，然后验证。

| 饱满度

除了特殊要求意外，icon的饱满度要尽可能做到合适，太饱满会让人觉度图标过重，给人沉甸甸的感觉，太疏松了会让人觉得轻飘飘，干瘪瘪的，像是漏气的皮球。

图3-1 图标的饱满度

图3-1中的两组图标，在同一组图标中，右边的图标视觉重量明显比左边的图标轻，这是因为中间的“眼睛”或者右下角的“时钟”显得过小了。要把握好图标的饱和度，需要特别注意好间隔、留白、重心等因素。在右边的一组图标中，“时钟”的宽度应该占总宽度的1/2，这样，视觉饱满度才合适。

| 统一度

做好图标的统一能给使用者带来和谐、整齐划一的感受，做不好统一会让人产生疑惑：这些图标是不是同一组的、是不是同一个app里的？就像陆军军装统一为绿色，海军军装统一为藏青色一样，统一了才能让人感觉是一个整体。

做好图标的统一包含以下几点：

| 线条粗细统一          | 圆角大小统一           | 体量大小统一          | 角度统一 

下边一一介绍

| 线条粗细统一

在@2X图下，线性icon常见的线条粗细有2PX、3PX、4PX。设计之前根据具体产品的调性进行选择并做粗细好统一。在大多数情况下会使用3PX粗细的线条，当然，一些强调品质感的app，会选择2PX粗细的线条彰显产品的品质感，例如网易云音乐Tab栏的icon（图4-1）；再者就是一些年轻化、二次元、用户比较年轻的app，会选择4PX的线条绘制图标。因为粗线条给人一种年轻、可爱的感觉。

图4-1（网易云音乐app）

| 圆角大小统一

圆角给人一种柔软感，好比佩戴的玉石，圆润、光泽。对于圆润、光滑、晶莹的物体，我们喜欢用温润如玉来形容它。反过来，直角则让人感觉干脆利落、严肃庄严，不拖泥带水，像是一把棱角分明锥子。如果把圆角比作女性，那么直角则是男性。

金融产品喜欢用直角的icon，而电商或者动漫、二次元的产品一般选择带圆角的甚至是大圆角的icon。

图4-2（京东金融app）

| 体量大小统一

关于体量大小的统一，可以使用图标盒子作为规范。平常我们绘制的图标大致可以分为圆形、正方形、瘦长形和矮胖形这四类。依据这些类别，就可以套用图标盒子进行绘制了。

图4-3 图标盒子

当然，在实际的绘制过程中，并不一定要严格按照图标盒子进行绘制，根据具体情况进行调节。

 | 角度统一 

角度统一就很好理解了。拿异形图标为例，下图的回环针和尺子，统一倾斜45°角。

图4-4 回环针和尺子

 | 其它

除了上边说到的方面，还有一些可以增加线性icon趣味性的点。比如双色icon、断点等。

图5-1 断点icon和双色icon

以上就是个人关于线性icon的一些小结，仅仅代表个人的观点，有说的不对的地方也请大家多多指教。以上内容，仅供大家参考。