图标AntDesign系统图标库策略分析绘制规范理论基础尺寸所有图标

图标的作用

在设计系统中，图标是比较重要的一个领域，良好设计的图标能降低系统功能的理解成本，为页面增光添色。

本文只涉及图标库搭建与设计策略等。其他问题如：前端对接、导出文件格式等不在讨论之列。

Ant Design 系统图标库策略分析绘制规范理论基础尺寸

所有图标初始绘制时使用 1024*1024的尺寸

出血与轮廓框架

图标元素规范

点：最常用的是四种尺寸的点，分别为 80、96、112、128。如出现特殊尺寸需求按16的倍数延展。

线：常用的规格也是 4 种，分别为 56、64、72、80

圆角：8 倍数原则，最常用的是 3 种，分别是 8，16、32。图标内部空间直接直角处理。

角度：将常用角度定义为76度，可根据实际情况适当变化。

箭头：顶角大约保持 76 度的基础上，最常用的为 4 种，他们的宽度保持 8 倍数的原则，间隔为 24

搭配使用建议

图标的规范与调整一致性与节奏感

平衡与细致调整

视觉差异

弯曲的线条会比竖直的线条看起来细，因此在圆形的外边框上我们会适当的对 72px 的规格进行 4 px 的微调。所以方外框线宽 72 px，圆线宽 76 px。

倾斜的线条也会比竖直的线条看起来细。 因此倾斜的线条也会进行 4 px 的微调。所以正放的手机线宽72px 的话，斜放的手机线宽是 76px。

留白空间也可以影响线宽的设置。留白较少的空间应该采用较小的线宽以达成视觉重量平衡。

左侧笑脸72px 线宽，则右侧设置图标应为 68px 线宽

圆角的设置应该按自己品牌传递的情感而定，大圆角代表温和而感性，小圆角和直角更具有坚硬和理性（科技感）。

部分图标加入一些拟人化，具备生命力。

图标结构整理规范

保持节点的最小需求图标，去掉不必要的节点。

将最终的图形合并，便于输出

对尺寸上的小数点进行修正（采用1024*1024的大画布则不应存在小数点）

设计软件中的图标图层也要保持整洁。

命名与分类

此方面 Ant Design 没有进行详尽的说明，大致分类如下

风格：描边风格、填充风格、双色风格

类型：

方向图标

辅助图标

编辑图标

数据图标

品牌与LOGO图标

应用图标

所有图标直接采用英文命名或中文命名

在 figma 的调用分级仅有3级： icon / outline / iconName

组件库

在Ant Design 的 figma 组件库中实际的原始组件图标尺寸为 36*36，线宽在 3px 左右图标，根据每个图标不完全一致。应该每个图标由1024*1024的图标缩放而来。

Arco Design 系统图标库策略分析绘制规范

未找到公开资料，根据组件库推测。

基础尺寸

以 48*48 尺寸绘制原始图标，48*48 时线宽为 4px

轮廓框架

元素规范

整体看起来没有特别明显的标准规范。下面逐一过一下

点：不同的图标有不同的点，尺寸大概围绕这6*6扩展。圆度分为方和圆两种，没有明显规律。

线：全部使用4px绘制，但是方圆的设定，没有找到明显规律。比如同为箭头，但是扩大和向下的方圆不同，可能比较随意或者规律不明显。

圆角：除了少部分无圆角的图标，其他圆角都为3，针对大小图形都没有变化。

角度：常用角度为90度，其余角度根据情况各有不同。

命名规范

采用双层命名：edit/bg-colors

具体为：图标分类 / 具体名称

Semi Design 系统图标库分析

（未完待续）