图标系统分析与学习-设计系统02 图标的作用 在设计系统中，图标是比较重要的一个领域，良好设计的图标能降低系统功能的理解成本，为页面增光添色。 本文只涉及图标库搭建与设计策略等。其他问题如：前端对接、导出文件格式等不在讨论之列。 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 系统图标库分析 （未完待续）
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/21380.html
