图标规范

图标的重要性

当一个界面完全由文本构成时，用户被迫阅读每个文字来找到自己想要的信息。而引入图标后，降低了用户的认知负荷，帮助用户更快导航，提高用户使用产品的效率。另外一方面、设计精致风格统一的图标提高界面的美观度的同时，也为用户带来了连贯一致的使用体验。

图标规范的内容

设计中常用的图标，从使用的用途来说图标分为两种，功能性图标和展示性图标。

• 功能性图标是为了引导用户理解和操作，需要表现精确和简介，方便用户识别其含义。功能性图标常规状态下为无彩色。

• 展示性图标通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击欲望，强调差异性，比如各种品类区的图标、徽章、等级图标等等。

但图标的风格并不止两类，以下简单的整理了一下图标的风格分类，设计中选择符合产品整体风格的图标即可

尺寸： 由于不同形状(三角形，圆形、长方形、正方形)具有不同的视觉大小，仅仅规范图标的大小是不够的，通常我们会设计一套图标 keyline，来保证不同的图标具有相同的视觉大小。

填充/描边：一般的系统功能图标采用描边。工作台的常用功能入口一般采用带背景的填充图标，原因是在空间有限的的区域，太多形状会显得杂乱，另一方面面型图标的视觉面积较大，短时间内更加容易识别。

除此之外，还包括圆角、端点、线宽、倾斜角度等其他规范。

落地

在产品中，图标通常有多种尺寸，我们一般会为每个尺寸的图标各创建一个 frame 来进行管理，其中，我们会把同一个图标的填充版和描边版创建为一个组件集，这样在调用时可以直接控制图标的填充和描边，在做有选中态和非选中态的组件时尤为方便。

如果是自己进行图标绘制，那么需要采用统一的图标绘制模板，保证图标视觉上大小的一致。

另外，在命名上，我们会用图标的内容为它命名而非表意，例如一个灯泡的图标，我们会直接命名为灯泡而非创意。

实际项目中，并不是所有项目都有十分充裕的时间来设计图标，所以我们可以从各类图标网站上寻找合适的 icon。

图标库推荐

在这里给大家推荐几个常用的图标库，在来不及画图标时，可以先用这些迅速建立起一个图标组件库。之后有时间了再慢慢更新为自己的图标。

Iconfont：国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，特点是图标非常丰富，MUX 倾力打造的矢量图标管理、交流平台。设计师将图标上传到 iconfont 平台，用户可自定义下载多种格式 icon，平台也可将图标转换为文字，便于前端工程师自由调整与调用。

Flaticon：世界上最大的免费图标搜索引擎之一，支持商用。

Iconmonstr：可自由更改图标大小，自带 24 像素网格方便设计更精确，智能压缩方便网页使用，支持多种格式输出。

Iconstore：一流的免费图标包素材站点，适用于网页设计与移动端设计。

Nova：每个图标都有线条和填充两个版本。

Iosicongallery：收录评估客户端的所有的 iOS 产品的图标，齐全精美，是设计师设计 iOS app 时，良好的灵感和素材网站。

Remixicon：Remix Icon 是一套面向设计师和开发者的开源图标库。质量很高，风格中性大气，因此适用于很多风格的项目，分为 “线性图标”和 “面型图标” 两种风格。相比于 Material Icons，RemixIcon 看起来风格会更统一、简约且精致硬朗一些。

IconPark：这是字节 CUX 设计团队出品和维护的开源图标库，如今已对外开放使用，特点是图标大小，线宽等多个属性均可设置，自由度较高。