我的前端规范系列-图标工程化[好用的图标]

为什么要有图标规范

1.文字和图标能更好的搭配使用
图标是具有指代意义的图形，也是一种标识，即文字的一种延展，实际应用中也常与文字一起配合使用,按字体标准规范化设计的图标更容易对齐。
2.图标适配变得更简单，图标风格更统一,大小统一
矢量化后的图标，由于程序对颜色大小可控,且不失真的特点,更利于适配实现图标的72变。另外由于切图大小统一，不用把时间花费在调整图片容器上。
3.能快速修改和得到想要的图标
图标命名规范化后,编程人员可以很快配合ide找到想要的图标。 不用把时间浪费在找图上。

目标

1.图标规格统一
2.图标命名规范
3.图标切取统一
4.图标管理

图标命名规范

规范顺序

[图标名]-[状态?]-[形状?]-[描线?]-[方向?]@[1,2,3]x.png 带?号为可选

图标名

公用图标名

举例:[图标名]
举例:button
释义:按钮

非公用图标名

举例:[模块]-[类别]-[功能]
举例:nav-button-search
释义:导航-按钮-搜索

修饰名定义

形状

这里我们简单分三种情况,一种被方框包围-square，一种被圆圈包围-circle

是否实心

这里我们使用修饰符-o表示描边型，不带-o为实心型

常用状态svg和iconfont可以不需要

常用状态
激活 actived
禁用 disabled
悬停 hover

示例

带圈圈的加号非实心且激活
png：plus-actived-circle-o
svg/iconfont: plus-circle-o

建议使用svg和iconfont

png vs svn vs iconfont

格式	优势	劣势
png	渲染快	存在适配问题需要制作各种x图,程序不可控，适配后体积大
svg	支持单独和整合打包,支持多色彩,矢量,颜色大小可控,有成熟的管理工具	渲染比图片慢
iconfont	矢量，颜色大小可控,有成熟的管理工具	不支持多色彩,字体文件大,低像素屏有锯齿

那么简单得出svg和iconfont的特点

• 设计只需出一次图,图标集中处理,程序可批量改色改大小且不失真
• 可以直接获取别人的svg或 iconfont进行修改

工具管理示例

阿里UX矢量图标库

小结

如果设计不介意频繁改图片颜色，制作各种大小状态。使用png也是可以的，但基于以后项目换肤的要求还是建议svg和iconfont里二选一。

图标设计规范

图标要有重心

根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。
权重不一的图标会破坏视觉平衡

图标尺寸规范

规范

应该与字体搭配时和字体的尺寸保持一致尽量不要标新立异,因为只有和字体大小一致时并排时才能保持水平对齐[一下为@1x时的情况]。

劲量不要切入阴影，由于阴影的深度，如果没有切取得当，经常拿到阴影截断的图标,致使反复修改

图标切图规范

规范

不管图标是扁的 还是长的方的 都应该一致切成方的需要按设计图标时的容器轮廓线切图，因为程序设计时如果每个图标都要特定定义一个特别的容器来装的话，工作量和可维护性都会出现很大问题。