为什么要有图标规范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-osvg/iconfont: plus-circle-o建议使用svg和iconfontpng vs svn vs iconfont格式优势劣势png渲染快存在适配问题需要制作各种x图,程序不可控，适配后体积大svg支持单独和整合打包,支持多色彩,矢量,颜色大小可控,有成熟的管理工具渲染比图片慢iconfont矢量，颜色大小可控,有成熟的管理工具不支持多色彩,字体文件大,低像素屏有锯齿那么简单得出svg和iconfont的特点设计只需出一次图,图标集中处理,程序可批量改色改大小且不失真可以直接获取别人的svg或 iconfont进行修改工具管理示例阿里UX矢量图标库小结如果设计不介意频繁改图片颜色，制作各种大小状态。使用png也是可以的，但基于以后项目换肤的要求还是建议svg和iconfont里二选一。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。权重不一的图标会破坏视觉平衡图标尺寸规范规范应该与字体搭配时和字体的尺寸保持一致尽量不要标新立异,因为只有和字体大小一致时并排时才能保持水平对齐[一下为@1x时的情况]。劲量不要切入阴影，由于阴影的深度，如果没有切取得当，经常拿到阴影截断的图标,致使反复修改图标切图规范规范不管图标是扁的 还是长的方的 都应该一致切成方的需要按设计图标时的容器轮廓线切图，因为程序设计时如果每个图标都要特定定义一个特别的容器来装的话，工作量和可维护性都会出现很大问题。