# 图标

Icon 作为 UI 构成中重要的元素,它一定程度上影响整体 UI 界面呈现出的风格,资产云提供一套适用于中后台场景的线性 Icon,以一致、易用的标准进行设计,从而降低用户的理解成本,提升界面的美观度。

# 设计原则

# 精确

设计图标时,选择最简单流通的样式,避免使用含义模糊的图形,准确表达含义;在图形绘制时保持偶数原则,去小数点;在图标输出时也应遵守命名规范,精确文字描述,便于查找。

# 简单

制作时,简化参数,处理线条和轮廓时删除多余锚点,不做多余修饰,保持图标简洁。

# 舒适

绘制时,考虑线条的节奏感,遵守适度原则,让图标的构图呈现舒适感。

# 设计规范

# 珊格规范

AC Design选择以16*16的尺寸作为图标绘制的统一栅格尺寸。
截屏2022-03-16 上午11.01.18.png

# 出血位

在图标的设计过程中预留出血位的做法,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地。资产云图标的设计上实际画布应控制在栅格中心14*14的区域,周围留有1的出血。在一些特殊情况下如 icon 过长或者有突出的边角等,允许内容适当延展,以确保图标视觉重量上的统一。
截屏2022-03-16 上午11.07.06.png

# 辅助线

辅助线有助于约束图标的大小以及一些线条的走向,在制作时应尽量根据辅助线进行绘制以保持各图标间视觉重量的统一。我们对栅格内的圆形、方形、斜线等路径进行了规范并生成了一套辅助线系统。在图标设计的过程中应根据设计对象的特性选取相应的辅助线来控制图形样式。
截屏2022-03-16 上午11.09.24.png
由于屏幕像素的特性,非整数像素将会以灰度显示,那样将影响图标的清晰度以及整体的含义表达,所以在栅格内绘制时应尽量对齐像素点,最大程度上保证图标的清晰度。
截屏2022-03-16 下午12.27.52.png
根据绘制对象的形象特征去选择辅助线,在必要时,可以将内容扩展到辅助线之外。
截屏2022-03-16 下午2.09.00.png
在特殊情况下,根据图标结构繁简,线条的粗细可以适当进行调整。
截屏2022-03-16 下午1.41.04.png

# 角度

线条如需倾斜最好与栅格内 45° 辅助线相平行,或使用 15° 的倍数。以便在低分辨率的情况下仍有较高的线条清晰度。
截屏2022-03-16 下午2.16.37.png

Last Updated: 4/25/2022, 6:31:05 PM