前言

在UI设计中，从使用场景来看，图标主要分为这两类：应用图标（手机应用产品的启动图标）和功能图标（网站和APP中具有功能性操作和引导的图标）。篇幅所限，本文仅讨论功能图标相关内容。

图标设计是UI设计中基础且重要的环节，也是检验一个设计师基本功的重要指标。刚入行的设计师，可能会在设计图标的过程中遇到各种各样的问题：这组图标大小怎么不一样呢？这里的图标应该用什么风格呢？为什么看不懂这个图标表达的含义呢……没关系，这篇文章将告诉你怎么解决这些问题。

内容大纲

一、为什么要设计图标

二、图标的风格与气质

三、设计规范与流程

四、图标设计的评判标准

五、图标资源推荐

一、为什么要设计图标

1.1 什么是图标

图标分为广义和狭义两种：广义指具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。狭义指应用于计算机软件方面，能够表达软件产品中功能或操作的图形化的符号或标识。在UI设计中，主要针对的就是狭义的概念，图标是界面视觉组成的重要元素之一。

1.2 图标的基本特征

1.2.1 识别效率

图标具有高度浓缩并快捷传达信息、便于记忆的特性。这是由图标的属性决定的，与文字相比有先天的识别优势。且图标不受限于语种、信息长度等因素，具有更强的普适性。便于用户浏览和识别，提升信息传达效率。

1.2.2 风格传递

图标的风格类型众多，在使用图标时，可以结合产品的设计定位，选择相应的图标设计风格，传递产品的设计调性和理念。让界面看起来更加美观，提升用户的视觉体验。比如侧边栏设计，文字部分传达信息，图标部分透传视觉风格。

二、图标的风格与气质

2.1 扁平风格

扁平风格指的是抛弃渐变、阴影、高光等图层样式，仅通过线条与色块来表现图形形态抽象设计风格。其优势在于可以更加简单直接的将事物的形态展示出来，减少臃肿、复杂的视觉，更利于图标的多终端适配和响应式布局。在UI设计中，使用最多的为线性、面性、线面结合这三种类型。

2.1.1 线性

线性图标主要通过线条勾勒图形样式，在界面中使用的尺寸普遍偏小，适用于元素简单，仅凭轮廓就能感知事物含义的图标。

根据线条样式还可以分为：单色图标、双色图标、多色图标、渐变图标。

2.1.2 面性

面性图标像是物体的剪影，以块（面）的形式表达图标的含义。相较于线性图标，面性图标的面积更大，视觉重量更重，更容易吸引用户视线。

与线性图标一样，根据块（面）的样式可以分为：单色图标、双色图标、多色图标、渐变图标。

2.1.3 线面结合

线面结合是线性和面性的融合，使用较多的形式为：以线来表达形体，以面（块）来辅助。样式上更加丰富且具有趣味性，形式感更强。

根据颜色样式分为：单色图标、双色图标、多色图标、渐变图标。

2.2 轻质感风格

与扁平风格相比，轻质感通过增加色彩渐变、发光、投影等图层样式体现出柔和的立体感，给人轻盈、简洁、精致的感受。在使用过程中，可结合产品及界面风格，选择合适的配色与表现形式。

2.3 拟物化风格

拟物化风格图标是通过细腻地刻画描绘对象的形体、质感、肌理，给人一种非常逼真的视觉效果。因为拟物化图标复杂程度较高，视觉表现抢眼，所以不合适在页面中频繁使用，更常见于游戏类产品中，在其他类型产品中，大多使用在营销类需要视觉氛围烘托的界面。

2.4 其他风格

除了上面这些常见的基础风格外，还有像素风、磨砂玻璃、2.5D、3D、新拟态……虽然这些在UI设计中不常使用，但作为设计师一定要时刻关注流行风格与趋势，丰富自己的技能范围。

2.5 性格与气质

以扁平风格中的线性图标为例，不同描边粗细和圆角大小的组合形式，传达出不同的性格和气质，主要包括这四种类型：力量型（粗描边，小圆角）、可爱型（粗描边，大圆角）、严谨型（细描边，小圆角）、精致型（细描边，大圆角）

三、设计规范与流程

在绘制图标的时候，既要满足单个图标的好看，又要保证整组图标的和谐，同时还要方便后续补充拓展。所以每个图标都不是一拍脑门就可以画出的，而是要严格遵守一定的规范和流程，才能顺利完成图标设计的过程。

3.1 建立图标网格

不同图标的形态结构各异，为了保证视觉上的一致性和协调性，需要先建立图标网格来约束图标形态。图标网格一般由圆形、正方形、矩形、三角形和对角线组成，网格大小一般为4的倍数，便于不同尺寸图标的适配。通常还会在网格外围预留一定的安全范围，避免切图不完整的情况。

3.2 确定图标风格

根据产品属性和目标用户并结合具体的使用场景，选择相符的图标风格与气质。例如运动健身类产品，属于力量、粗旷的类型，就可以选择与自身产品气质相符的图标风格。

3.3 具象功能

根据需要绘制的功能关键词进行拆解和发散，找到与之对应的实物形象，释放它所代表的内在含义。例如说到荣誉，就能联想到奖杯、奖状、奖牌、皇冠等，通过这些关键词联想，找到相应的实物，进而选取合适的代表形象。

这里有一个小技巧，当你遇到一些不知道怎么选择正确的实物符号来传达你想要表达的信息时，可以先去各类网站输入你的信息关键词，看一看它们给你提供的图片灵感，能够快速为你指明方向。

3.4 简化结构

确定功能的具体形象后，下一步就是考虑如何让图标造型及结构更加简洁、易识别。需要我们观察思考，化繁为简，提取物体的主要特征。

3.5 善用布尔运算

有了简化的图标造型后，还需要使用一些绘制技巧让图标更加规范耐看，最普遍使用的就是布尔运算。通过基础图形的裁剪、拼贴组合，完成整个图标造型的勾勒，保证所有线条的规范，也避免在适配不同尺寸大小时出现拉伸变形的问题。

四、图标设计的评判标准

完成绘制后，如何评判我们的图标是否好看呢？是否适合我们的界面和产品呢？可以从识别性、统一性、耐看性、风格表达、品牌基因这五个方面进行检验和优化。

4.1 识别性

图标的作用就是帮助用户理解信息，所以识别性是一个图标最基础且最重要的属性，尤其是在没有文字说明的情况下，也要让用户快速理解，不产生疑惑。识别性可以分为两个方面：含义识别和视觉识别。

4.1.1 含义识别

含义识别是图形释意是否符合用户认知，即你的图标是否能被用户理解，不产生歧义。

4.1.2 视觉识别

视觉识别是指图标的颜色、大小、复杂程度等视觉层面的因素是否合理，会不会影响用户识别图标。

4.2 统一性

在绘制一组图标时，需要注意这一组图标在视觉上是否保持统一。对于统一性，可以从圆角大小、描边粗细、视觉大小、描边尾部细节、角度、正负形比例这几个方面入手。

4.2.1 圆角大小

一组图标要使用统一的圆角大小，设置一个统一的圆角数值。

4.2.2 描边粗细

描边粗细统一和圆角大小统一的逻辑一样，选择一个固定的描边值，避免出现粗细不一的情况。

4.2.3 视觉大小

物理尺寸一样的方形和圆形在视觉大小上并不一致，所以在绘制图标的过程中要注意保持视觉大小一致，也就是视觉体量的统一。可以参考图标网格中的辅助线灵活调整图标大小，做到视觉大小统一。

4.2.4 描边尾部细节

描边尾部分为圆角和直角两种情况，在绘制过程中要使用统一的端点样式，保持设计语言的统一。

4.2.5 角度

角度统一也是体现图标统一性的因素之一。最常见的角度统一方式就是按照一定的倍数来制定规范，比如15度的倍数。

如果是2.5D或3D的立体图标，就要保证在同等层级下，立体角度（视角）的一致。

4.2.6 比例

元素比例不一致会导致图标的视觉重点不统一。如下图左侧第一个图标和最后一个图标，线面比接近1:1，和另外两个图标明显不一致。调整比例后，线面比趋近一致，统一性也更强。

4.3 耐看性

图标有了识别性和统一性后，就可以成为一个满足基本识别功能的好看的图标，但是如何提升美感，成为一个耐看的图标，需要更加精细的调整。

评判一个图标是否耐看主要包括这两点：饱满度和透气感

4.3.1 饱满

饱满有一个简单的衡量标准，就是在一个图标网格中，所绘制图标的面积占比是否足够大。可以通过调整造型、描边粗细、细节等方式，使绘制的图标尽可能填满一个矩形，就可以解决大部分图标的饱满问题。

4.3.2 透气感

透气感要做到的就是适当留白。避免过多的细节，突出主体内容，方便用户快速识别。

4.4 风格表达

因为每个产品的定位和目标人群不同，整个APP的设计风格也不一样，在设计图标时，需要注意图标传达的风格和产品基调是否一致。风格表达可以从两个方面入手：属性表达和形式表达。

4.4.1 属性表达

属性表达就是图标的骨骼基调，比如圆角大小、线条粗细等，可以根据行业属性和使用人群进行判断。

4.4.2 形式表达

确定基础属性后，就是填充形式了，可以结合产品内容和品牌调性提取关键要素，融入设计创作中。比如韩国内容平台KaKaopage的图标设计，融入了品牌Logo的斜角符号。

4.5 品牌基因

在APP同质化严重的情况下，打造品牌差异化逐渐被重视。在图标设计中融入品牌基因，不仅可以做出差异性，还能提升品牌调性。下面就来看看如何在图标设计中融入品牌基因。

4.5.1 颜色

颜色是图标设计中重要的构成元素之一，也是最容易体现品牌感的元素。在设计图标时提取品牌色进行结合，与整体品牌调性保持一致。

4.5.2 图形

图形可以来自于品牌Logo、IP等，结合使用场景，选择合适的表现形式融入图标设计中。比如首页图标经常会用到Logo或吉祥物。

4.5.3 特性

特性就是产品的气质或特征，例如圆润、精致、淳朴等比较抽象的元素。比如一个的slogan是：复杂世界里，一个就够了，整个APP的图标也是简洁干净的；汽水儿是可爱有趣的类型，整个APP从启动图标到功能图标都使用了手绘的设计风格，体现趣味性。

五、图标资源推荐

我在入门阶段，接触过许多图标素材网站，经过时间的筛选和沉淀，给大家推荐六个常用的图标资源网站，数量不多，但每一个都是宝藏！

IconFont

阿里巴巴矢量图标管理、交流平台。可以自定义下载多种格式icon，也是一个寻找基本形的素材网站。

https://www.iconfont.cn

IconPark

飞书官方图标库。提供丰富多样的高质量图标内容，满足批量配置图标样式的能力。

https://iconpark.oceanengine.com/official

IconFinder

一个国际设计师团队打造的图标网站。可以下载多种格式icon，图标质量也很不错。

https://www.iconfinder.com

Fontello

这个网站里面都是基础图标，质量较高，可以批量下载。

https://fontello.com/

Dribbble-Myicons

追波上的用户，发布了丰富多样的高质量线性图标，非常适合积累素材库，可以在线性的基础上进行再设计。

https://dribbble.com/lineicons

Dribbble-Iconly Pro

这个也是追波上的用户，发布的是基础线性图标及相关动效，涉及图标动效的可以来这里看看。

https://dribbble.com/iconlypro

最后

关于图标设计的分享就到这里，掌握方法之后，最重要的还是练习，量变产生质变。我也在不断地学习、沉淀，希望借此机会和大家互相交流，共同进步。