设计师的利器--图标篇：如何设计出表意清晰又符合标准的图标

哈咯～大家好，最近忙一直没时间写总结，这几天抽了2个晚上写了一下，从今天起失踪人口回归啦，以后会坚持写的（其实是懒……

今天来跟大家分享一下自己总结的图标设计的一些心得和经验，欢迎各位设计师共同探讨哈。

图标设计是方寸之间的一个设计，但是方寸之间皆有讲究。

小伙伴们有没有遇到过这些问题： 

“为什么我的图标画得那么炫酷老大却说不合格呢？”

“我该用线性图标还是面性图标比较好呢？”

“这个图标我该画多大才合适？用什么颜色好？”

在尺寸有限的移动端界面里，图标可以更加简单高效的表达含义，并且给用户正确和友好的指引。

那我们如何设计出表意清晰又符合标准的图标呢？

一、图标的样式

我们常见的图标种类有以下三种：

① 面性图标 

▲美团10.9.401

面性图标的视觉表现力强，视觉占比更强，能更好的突出业务重心，方便用户抓到重点。如美团首页金刚区图标就是采用了面性图标。 

② 线性图标 

▲支付宝10.1.87

线性图标则给人轻松、简约的感觉，比较强调功能性。比如支付宝金刚区这几个跟钱包、支付相关的图标，这类型的功能应该尽可能给用户安全、放心、可靠的感觉，精简克制的设计再合适不过了。

③ 线面结合图标

▲闲鱼6.7.10

线面结合图标集合了线型和面形的优点，可以结合出更多设计的可能性，图标的内容更丰富，图标更显俏皮和更有趣味性。比如闲鱼就是采用了线面结合图标。

了解了图标的基本样式以后，我们来讲一下图标的使用场景，什么时候该用线性，什么时候该用面性图标。

二、明确图标使用场景

我们在上面已经了解到，面性图标的视觉表现力强，更容易捕捉用户的视线。

所以面性图标常用的使用场景有： 

① 首页图标        

② 个人中心金刚区板块          

③ 标题点缀,让板块更加凸显（例如新浪微博板块标题）

而线性图标则给人轻松、简约的感觉，比较强调功能性。

线性图标的常见使用场景为：

① 功能入口        

② 辅助功能按钮        

③ 列表流板块   

而线面图标则给人俏皮、趣味的感觉，市面上还是比较少用线面结合的图标的，因为它既有线性、又有面性图标的特点，在整个视觉构成上就会显得有点复杂。

线性图标的常见使用场景为：产品希望往年轻化、趣味化发展时再去考虑线面结合图标。

▲站酷3.1.0.0

So：从整个产品角度和功能角度来看，如果功能为主流量入口，尽量采用面性图标。

板块信息层级一般，则采用线性。

要想设计好图标，统一的设计规范可少不了，下面我们来讲一下如何统一图标的设计规范。

三、统一图标设计规范

① 风格一致，视觉比例统一    

② 选中状态使用品牌色，图标颜色符合业务色    

③ 统一设计细节，如圆角数值、描边粗细、统一挖空、统一断点

在我们画图标的时候，有方有圆，有长有短，如何更好的把握视觉统一呢，当然是图标盒子啦～如下图所示

四、图标如何选择合适的颜色

有些设计师在做图标的时候觉得，“唉，感觉这个黄色好像更好看些，那就选黄色吧。”

这种认知是比较狭隘的理解，我们需要考虑一下这个黄色的图标能给用户带来怎样的感受，是否能够满足当前业务类型给用户的这种感受。

五、突出核心功能入口

当平台上新功能，为了吸引用户的注意力，提示用户该入口，为要推的内容提高曝光度，带来流量时，我们要拉开这个图标和其他功能入口图标的差异，帮助用户快速操作。比如美团首页的美食、酒店住宿、领水果都加上了角标设计。

▲美团10.9.401

相信说了这么多，大家也有一定的了解和感悟了，下面给大家推荐几个常用的图标设计网站，大家没有思路的时候可以去激发一下灵感～

六、常用icon网站

https://www.iconfont.cn/   

阿里图标库，上面有超过九百多万的icon，都是免费的噢～

https://icons8.com/

收录了差不多13万个icon，可以在线调试图标的颜色和风格等再选择是否下载。

https://www.iconfinder.com/

收录了超过400多万个icon，有的收费有的免费。

https://www.easyicon.net/

收录了超过64万个icon，支持在线编辑，有多种图标尺寸，有的收费有的免费。

好啦今天的分享就到这里啦，各位设计师还有什么网站推荐和关于图标设计的看法，欢迎评论区讨论哈～～