当前位置: 首页 > Web前端 > HTML

我的前端规范系列-图标工程【好用的图标】

时间:2023-04-02 19:45:25 HTML

为什么要有图标规范1、文字和图标可以更好的结合使用。图标是具有参考意义的图形,也是标识的一种,即文字的延伸,在实际应用中常与文字一起使用。根据标准字体标准设计的图标更容易对齐。2、图标适配变得更容易,图标风格更统一,矢量化图标的大小更有利于适配实现图标的72种变化,因为程序可以控制颜色和大小不失真。此外,由于裁剪后的图片大小统一,无需花时间调整图片容器。3.能够快速修改并得到想要的图标图标命名规范后,程序员可以用IDE快速找到想要的图标。不要浪费时间寻找图片。目标1.统一图标规范2.图标命名标准3.图标裁剪统一4.图标管理图标命名标准顺序[图标名称]-[状态?]-[形状?]-[画线?]-[方向?]@[1,2,3]x.png与?是可选图标名称公共图标名称示例:[图标名称]示例:按钮解释:按钮非公共图标名称示例:[模块]-[类别]-[功能]示例:nav-button-search解释:navigation-button-搜索修饰符名称定义shape这里我们简单分三种情况,一种是正方形包围的正方形,另一种是圆包围的-圆是否实心这里用修饰符-o表示笔划类型,不带-o表示固体类型。普通状态svg和iconfont可以不用普通状态激活。osvg/iconfont:plus-circle-o推荐使用svg和iconfontpngvssvnvsiconfont格式优缺点PNG渲染速度快,存在适配问题需要制作各种x图,程序不可控,后体积大adaptationsvg支持分离和集成打包,支持多色,矢量图,颜色大小可控,成熟的管理工具渲染比图片慢Iconfont矢量图,颜色大小可控,成熟的管理工具不支持多色,大字体文件,低像素画面简单到参差不齐找出svg和iconfont的特点设计只需要画一次,图标集中处理,程序可以批量更改颜色和大小不失真你可以直接获取别人的svg或iconfontformodification工具管理实例阿里UX矢量图标库总结如果不介意设计经常更换图片颜色,做出各种尺寸和状态。也可以使用png,但是根据以后项目换肤的需求,建议svg和iconfont任选其一。图标设计规范图标应该有一个重心。根据不同的图标形状类型使用不同的轮廓,使图标保持一致的视觉效果。请在1024×1024(64×16×16)画板上制作所有图标。不同权重的图标会破坏视觉平衡。与字体匹配时,图标大小规格应与字体大小一致。尽量不要标新立异,因为只有字体大小相同的并排才能保持水平对齐【@1x处的情况】。劲量不应切入阴影。由于阴影的深度,如果切割不当,经常会得到阴影被截断的图标,导致图标切割规范反复修改。不管图标是扁的还是长的,都应该剪成正方形。需要根据图标设计来裁剪容器的轮廓,因为如果在程序设计中需要将每个图标都专门定义在一个专门的容器中盛装,工作量和可维护性都会有很大的问题。