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

为何要有图标规范

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时的状况]。

劲量不要切入阴影，因为阴影的深度，若是没有切取得当，常常拿到阴影截断的图标,导致反复修改

图标切图规范

规范

无论图标是扁的 仍是长的方的 都应该一致切成方的须要按设计图标时的容器轮廓线切图，由于程序设计时若是每一个图标都要特定定义一个特别的容器来装的话，工做量和可维护性都会出现很大问题。