一、ICON概述

icon是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。一整套优质的图标对于设计质量的影响是非常巨大的，这考验着设计师对图形塑造的系统性思维，同时也能反映一个团队对于细节的追求。本文结合Antdesign、Tdesign及zcool上优秀文章与实践经验，从以下几个方面来整理icon使用规范。

01.图标设计原则

02.图标尺寸规范

03.图标设计韵律

04.图标库的应用

#01图标设计原则

简洁

简化参数：消除小数点以及非整数的角度路径简洁：删除线条上多余的锚点图标简洁：去掉不必要的装饰，保证图标简洁。

精确

造型准确：选择表意准确的图标，降低用户的认知成本特征准确：必要时可以针对性的强化图标的特征命名准确：icon空间命名准备，方便自己调用，输出后，方便他人查找。

节奏

单个图标：控制图标线条的疏密 ，尤其是处理高密度图标时要考虑线条的节奏感。系列图标：在遵守精确、简洁的基础上，适度调整系列图标的变化节奏。

#02图标尺寸规范

删格规范

栅格作为图标绘制的底层结构，是一切属性设计的基础。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。图标常见尺寸为16*16；20*20；24*24；32*32 这四种输出尺寸。这些尺寸均可以清晰的显示在常规的显示器上。

为保证图标设计风格的统一，在Tdesign中以16*16px的删格、线条粗细1px，作为统一的设计标准。

图标尺寸模板与参考线

图标删格规范在Adobe Ai中的绘制技法

a.新建【单位px、RGB模式】画板；

b.在菜单栏中找到 Illustrator - 首选项 - 参考线和网格，打开网格设置面板

c.设置2x2网格（网格线间隔2px,次分隔线2)

d.绘制16px方形,填充#000 16%作为背景,绘制辅助线与参考线,接下来就可以制作icon了。

删格网格对齐原则：

由于屏幕像素的特性，非整数像素将会以灰度半透明显示，那样将影响图标的清晰度以及整体的含义表达，所以在栅格内绘制时应尽量对齐像素点，最大程度上保证图标的清晰度。

注意：在处理一些对称图形时居中处理，不应为了对齐栅格而打破画面平衡。

#03图标设计的韵律

线条

在绘制 16*16px 的图标时，建议线条宽度为1px，这样以便在小尺寸的栅格内保证更多样式的可能性及清晰度，在 16px 时为 1px， 在24px、32px 时等比加粗即可。

在特殊情况下如复合图形，由于该类图标结构更为复杂，线条的粗细可以适当调整0.8px。

在处理长线线条的长度时建议使用 2 的倍数，这样更易进行对称处理。而短线上建议使用 3 个像素。

线段末端直角处理，但在表现一些文字类图形或带有三维空间的透视图形时应与栅格相切。

圆角

保持 1px 的外圆角，内角无圆角，外柔内刚。

在处理“箭头”等具有方向性的标记时，在其顶端应采用0.5px 的圆角，以便于突出其指向性。

角度

线条如需倾斜最好与栅格内 45° 辅助线相平行，或使用 15° 的倍数。以便在低分辨率的情况下仍有较高的线条清晰度。

不仅要注意图形部分的夹角，也要特别关注一些负形的夹角度数。

断口

断口多存在于复合图标上，其宽度根据具体图标的样式进行具体分析，需起到平衡视觉重量的作用 （最大宽度 ≤ 2px 且为 0.5px 的倍数）。

繁简度

在确保高识别度的情况下，寻求内部结构以及外部轮廓上的最简，化繁为简。

弧线

弧线优先遵循正圆/正圆局部拼接。

按规范整理图标示例：

#04图标库

对于团队：

统一的设计规范可以保持不同项目成员在设计时的一致性，以及建立公司、团队统一共用的图标库。

对于个人：

在日常工作中，根据已设定的图标规范，按照项目、业务、类型、功能、基础等图标，整理完善自己的图标库，方便在后续工作中复用，从而提高工作效率。

在线图表库

再给给大家推荐几个设计师常用的在线图标库，复制链接到浏览器打开。

1.Tdesign规范-图标模块：

https://tdesign.tencent.com/design/icon

能满足大部分基础图标使用，图标基本符合本章节所提到的设计规范，支持矢量格式下载，下载后可直接等比例缩放使用。

2. 阿里巴巴矢量图标库：

https://www.iconfont.cn

阿里图标库是一套免费开源的图标集合，收录了丰富多样的图标。阿里图标库提供了强大的图标搜索、筛选、管理功能，用户可以自由选择目标图标并进行二次编辑。其优势在于大量图标资源、多种图标样式、支持矢量格式下载、创意二次编辑、方便使用、易于管理。

3.字节跳动开源图标库：

https://iconpark.oceanengine.com/official

提供2600+高质量图标，图标统一为官方上传，保证了设计风格统一。可在线统一设置图标风格类型、大小、线条粗细、端点样式、拐角样式、颜色等。另外还提供了在线分类管理功能，方便设计师查找下载。

最后

都看到这里了点个赞呗，设计规范可以让我们在做设计时更有逻辑依据,组件方便调用、提升效率,还可以作为走查依据。web设计规范系列章节结合大厂设计规范（antdesign、Tdesign等）以及实际工作经验整理的心得笔记。在此分享给大家,希望能给您带来帮助。 我们下一篇见《web设计规范07-基本图形设计探析》

查看更多文章,请关注微信公众号:设计便利签

摘录：本文部分内容、图片摘自T-design设计规范
致谢：特别感谢酷友葆莱：https://ervinch.zcool.com.cn ，为了写出能够让设计小白一文读懂图标规范并能够在实际工作中落地和调用，一些比较基础的问题特别咨询了葆莱设计师，最后才写出来此篇文章。