不能忽视的细节-合理的使用图标

图标的意义

其实前端领域有个共识：友好的界面可以增强用户体验。

然而，在实际项目中，一说到体验，我们就会专注于用户交互、性能这些内容，而常常忽视一些细节，比如圆角、边距、阴影，以及本文中讨论的：图标！

即便我第一次发文用的技术社区，一样忽视了它的使用：

图中的按钮只是用颜色做了区分，而没有增加图标，在我看来，没有图标的按钮就像穿上好看的衣服，却没有化妆一下，作为“前端”工程师，怎么能不注意脸面呢？

上图中两个按钮，仅仅是加了个图标，感觉就明显的不同，左边的按钮好像秃了头一样，有点左轻右重的感觉。

图标还可以使产品显得更加专业：

图中的快捷菜单，一对比，就感觉左边像个半成品，当用户想找一个功能时，图标的定位速度要快上5倍。

合理的使用图标

现代项目中，字体图标，或SVG图标非常容易获得，大量的图标网站可以免费下载，哪个项目还没有一两个图标库呢？

但是我们很多时间，只顾着写功能了，“无暇”顾及这些细节，而实际上，即便在没有UI工程师的帮助下，我们自己也可以做的更好，有了图标的按钮会给用户更多的亲切感，合理的使用图标，会让用户更快的识别功能，从而减少误操作，对高频用户帮助会更大。

图标库里有很多图标，很多时候我们不一定非要挑选完全匹配的，图标能够基本达意即可。

比如上面的图标都是比较常用的，我们只用保证项目中图标尺寸、颜色、风格一致即可。

但有此时候，还是要区分一下的，比如，项目中有很多地方会有删除功能，而删除的图标也五花八门，一个库里可能有多个图标都可以，但不同的图标还是有细微的区别的，比如：

这个图标的本意是：关闭，它表示彻底从库中删除，用做不可恢复的删除。

交通中的禁行标志，表示从列表项目中删除，一般用作权限的删除，不可恢复。当你有个表格，表格中每一行中有个删除图标时，可以用这个，列表中也常用。

垃圾桶标志，表示删除到垃圾桶，逻辑删除，可以恢复。当你的项目中，删除的数据可以有地方恢复，建议用这个图标。

总结
图标本是一个很小很小的事，但却可以让用户对产品的整体印象有所改变，哪怕你的项目没有UI设计师，自己美化一下，还是能加分不少的，洗个脸，画个妆再出门嘛。