前言

在UI设计中，图标是最常见的，也是占据很重要的地位的元素之一。
在日常工作中，目前市面上出现了iconfont、iconpark等等大量的图标库出现，虽然能够大大地提高工作效率，但是在享受这些图标库带来的便捷的同时，也会出现设计师太过依赖图标库，并且平台图标规范不够统一等问题。今天就来聊聊，设计师应该如何设计出一套统一的，符合产品调性的图标。

图标的概念

先来说说什么是图标吧

图标是具有指代意义的具有标识性质的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。它不仅历史久远，从上古时代的图腾，到20、21世纪具有更多含义和功能的各种图标，而且应用范围极为广泛，可以说它无所不在。一个国家的图标就是国旗；一件商品的图标是注册商标；军队的图标是军旗；学校的图标是校徽；同时它也在各种公共设施中被广泛使用，如公厕标识、交通指示牌等等。
我们通过图标看到的不仅仅是图标本身，而是它所代表的内在含义。

图标的内在含义

随着计算机的出现，图标被赋予了新的含义，又有了新的用武之地。在这里图标成了具有明确指代含义的计算机图形。桌面图标是软件标识，界面中的图标是功能标识，在计算机软件中，它是程序标识、数据标识、命令选择、模式信号或切换开关、状态指示。图标在计算机可视操作系统中扮演着极为重要的角色，它可以代表一个文档、一段程序、一张网页或是一段命令。我们还可以通过图标执行一段命令或打开某种类型的文档，你所要做的只是在图标上单击或双击一下。

优秀的图标设计需要具备什么特点？

易识别

优秀的图标即不用阅读标签或文字提示,就可以被认知理解，而用户对于图标的理解，一般来自其使用与认知的经验，当图标的功能与预期认知不同时，容易造成用户混淆。简洁性

简洁的设计并非现代才有。简洁的设计才更加容易被记住，更加容易被理解，也更加易于被应用。在信息过载的现代设计，简洁的设计也更贴合大家的深层偏好。好的图标能够使整体页面增强设计的美感，过于花俏，包含太多的视觉细节的图标，会对用户造成干扰。

统一性

优秀的图标设计应该保持视觉统一，与品牌风格保持一致，这样可以提升改善图标的可用性与可学习性。总结一下，优秀的图标设计需要具备三个特点

图标都有哪些类型

图标的类型有很多，可按照视觉风格与产品功能两个维度进行区分

视觉风格

线性图标、面性图标、线面图标、插画图标、拟物图标、扁平图标等等
而具体使用什么风格类型的图标需要设计师依据自身产品的调性与功能来进行选择。

产品功能

应用图标、缺省页图标、引导页图标、tab图标、金刚区图标、瓷片区图标、功能区图标等等

如何画出一套视觉统一的图标

在进行图标绘制之前，设计师需要根据自身产品的品牌调性，来确定图标的风格与方向；
如育儿类的产品，可使用大圆角，增加图标的亲和力，线面结合，给用户活泼轻快的感受。
金融类的产品，可使用小圆角，给人更加严谨安全的感受。
不同的行业与企业文化等，对于图标的风格要求是不同的，需要设计师对自身产品进行分析总结，最后梳理出图标的规范，并运用到平台的图标上。如何保证图标统一性？

在确定了产品的品牌调性之后，梳理出图标的规范，应该从以下几个点来严格执行：图标的粗细、圆角、大小、透视、视觉比重都需要保持一致。描边粗细

使用统一的描边、线段粗细参数。

圆角大小

使用一致的圆角数值。

图标的大小

需要注意的是，图标的大小所指的并非尺寸的大小，而是 视觉上的大小需要保持一致，举个例子：相同尺寸的正方形、圆形、三角形，在视觉上的大小是完全不同的。如何保证视觉大小的一致性？

可以通过借助一个工具，来辅助设计师保证图标视觉大小一致性：图标盒子

图标透视角度

使用相近的透视角度；透视的角度过多，导致杂乱无章，对用户造成干扰。

图标的视觉比重

统一的图标应该保证图标视觉比重的一致；在绘制图标的过程中，图标的复杂程度与细节的多少，导致图标的视觉比重不一致，图标细节过多，留白就少，简洁的图标，留白就多，所以在设计图标的过程中，设计师需要把握好每一个图标的视觉比重，保证图标的一致性。

在完成所有图标的设计以后，将所有图标整理与收纳进设计规范页面，标注好，方便管理与修改。

总结

图标虽然是UI设计中，最常见的元素，也是UI设计师最经常接触到的内容，但是想要设计出一套符合自身产品调性且统一的图标，其实是有一定的难度的，还是需要设计师多多的去练习实践。

以上内容，是本人对于图标设计的一些理解，希望对大家有所帮助，如有不同意见，欢迎指正！
图片版权归原作者所有

Powered by Froala Editor