一文讲明白图标设计（附网站推荐）

图标设计是界面设计中不可或缺的模块，同样是体现设计师视觉水平非常重要的部分。那么大家在设计图标时能够运用的风格有哪些？面对不同的应用场景又应该如何选择呢？下面小编梳理了关于图标的风格分类，让大家对图标有整体认识的同时，更好地运用到实际设计当中。

接下来，我们将从以下4个方面展开：

1. 对图标的风格类型分类有清晰的了解；用到匹配的应用场景中；

3. 图标如何设计及交付；

4. 小众实用的图标下载网站推荐。

简单聊下为什么用图标而不是文字？

首先，是否所有的设计场景都需要用到图标呢，答案是不一定。如果图标的语义不明、风格混乱那还不如用文字表示更为直接。

文字和图标作用的本质都是有效传递信息，与其说图标是一个图形，还不如说图标其实是一种符号，百度百科的定义是:「符号首先是一种象征物，用来指称和代表其他事物。其次符号是一种载体，它承载着交流双方发出的信息。

因此，图标相较于文字来说，显然更为通用，不受国家语言的限制；且在形式的表达上简单易懂，人的大脑对图形敏感度高，视觉化的图标能够帮助用户快速的定位准确信息，同时还能起到突出重点、增加页面的丰富度、强化品牌等作用。

接下来我们看看图标的应用场景如何分类？

为了对图标有个整体概念的了解，先从大的功能上划分，图标分为应用图标和功能图标。

应用图标也叫做启动图标，相当于LOGO在品牌设计当中的位置，代表着每款应用的视觉形象，所以一般具有高度的品牌识别度。

功能图标可以叫做操作图标，它的作用是在界面中辅助用户操作功能，功能图标的风格有很多种，也是本篇文章的主要内容。功能图标还可以从功能场景上细分为：操作指引、功能导航、状态图标、装饰图标、情感化设计图标。

功能图标的风格有哪些类型，如何应用？

在风格上，功能图标主要分为四大类：线性、面性、线面结合以及其他风格，不同的风格可以应用到不同的应用场景。

1. 线性风格

线性风格指的是，用线条描边勾勒出来的、偏简洁风格的图标。它不仅可以做单色设计，还能通过色彩、不透明度、描边变幻出各种丰富的延伸风格。

风格：简洁、轻量

主要应用场景：操作指引、功能导航、状态图标

1）单色

2）双色

3）多色

4）断点

2. 面性风格

面性风格指的是，用色块组成的的图标。它相比于线性图标更加有重量感，表现形式也更加丰富。

风格：丰富、重量

主要应用场景：操作指引、功能导航、装饰图标、情感化设计

1）单色

2）双色

3）渐变

4）质感

5）统一外形

3. 线面结合

线面结合风格指的是，用线条和色块组成的的图标。它相比于线性、面性图标更加有设计感。

风格：设计感、个性

主要应用场景：装饰图标、情感化设计

4.其他风格

其他风格指的是一些相对不常出现的风格。应用于装饰作用，也是表达设计师创新多用的设计形式。

风格：创新、有趣

主要应用场景：装饰图标、情感化设计

1）2.5D风格

2）轻拟物风格

3）像素风格

4）插画风格

图标设计流程

设计图标其实包含在整体设计之中，在最初的产品风格定义的时候，图标的大致风格也就定下来了。众所周知，定义风格我们需要用到情绪版和关键词，而这个关键词的提取对后期设计图标有很大帮助。因此，若是后期接到设计图标的需求时，先不要着急动手，咨询下前阶段的同事，拿到视觉形象化的关键词，更容易和整体风格匹配。

图标设计规范

图标的设计一定要有规整的设计规范，并且在项目时间允许的情况下，尽量在交付之前做一个设计组内的规范自查表：

1. 粗细一致：首先使用统一的描边、线条粗细

2. 圆角一致：使用一致的圆角数值

3. 透视一致：使用接近的透视角度，不要有的侧视有的正视图

4. 大小一致：视觉的大小保持一致，有均衡的大小感受

5. 风格一致：设计风格保持一致

图标的命名、导出与交付

图标的命名一般用英文或者拼音，如果初学者对于英文命名不好理解，那么推荐下面这个网站，它将常用图标命名汇总非常方便。

优波设计

图标的导出一般有PNG和SVG两种格式，主要看开发小哥哥的需求。导出方式也有几种：

1. 上传蓝湖，自动下载和标注；

2. 上传Iconfont，需要符合上传标准；

3. 手动导出本地图片。

小众实用的图标下载网站推荐

阿里巴巴图标库Iconfont大家已经很熟悉了，如果有更多的个性化需求可以看看下面推荐几个相对小众的图标下载网站。

IconPark

字节跳动旗下的一款图标下载网站，相比Iconfont，图标种类不算太多，但图标的规范非常统一，也可在右侧的操作栏更改图标属性，另外还有免费的插画库可供使用。

Iconduck

Iconduck有两个优势，一个是种类非常丰富，有超过十万个图标资源；第二个是可以满足设计师的创新需求。

Iconfinder

Iconfinder是一款全能的图标下载网站，它最大的特点是可以在线编辑，简化了下载-编辑-再上传的过程。

ikonate

ikonate同样是一款可以在线编辑的图标网站，可直接调节线条粗细，size大小。

图标设计的意义不言而喻，不管对设计初学者还是资深设计师来说都是体现其设计能力的重要部分，图标即符号，而符号连接着这个世界，随着互联网的发展，构建统一的视觉符号势在必行。因此，学习好图标设计也是未来的趋势之一。

- End -

来源：视觉半径公众号