提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
最近在绘制负责的一个B端产品整套图标,约110个。在绘制图标、与前端交接的过程中,发现一些问题,现总结出来与大家分享。
1. 产品中图标不规范存在的问题
在绘制自己的图标库之前,产品中使用的图标都是在iconfont中找。这种做法短期看来效率高,没什么问题。但是当产品慢慢健壮后,使用的图标越来越多,会发现一系列问题。
1.1 图标类型不一致
有的是线条型,有的是填充型。
1.2 图标圆角不一致
有的边角是直角90°型,有的边角是圆角弧度型并且弧度大小不一样。
1.3图标尺寸大小问题
Iconfont上icon大小与外框比例不统一,前端引用时要单独调整大小,影响开发效率。
1.4 图标线条粗细不一致
1.5 图标颜色色值不统一
1.6 图标命名不规范问题
这些问题不解决,不仅会给前端开发增加工作量,且整个产品看起来不专业。特别在一个页面同时出现多个图标时,这种影响尤其明显。
图1:未规范化的产品图标
2. 确定图标规范
根据上述总结的问题,整理出在图标绘制时需要注意的事项。并形成关于该产品的图标规范。
2.1图标类型:线型、面型
因为某些特殊场景的需要,有些图标提供线型、面积型2种样式,如提示信息图标;有些图标只有线型一种,如常用图标编辑
2.2 图标的圆角半径
绘制图标使用的是AI,模板为iconfont官网下载。主要线条宽度定义为64排序,经多次调试,最终将矩形圆角半径定义为15px。
2.3 图标大小及外框大小
图标外框大小统一为iconfont官方样例大小,1024*1024px。圆形图标直径为896px,长方形长宽为896*830px,正方形边长为830px。
图2:AI绘制图标网格参考线
2.4 点、线的大小
主要构图的线条宽度为64px(主要构图将会构成icon图标的主要形状)。
图标内部细节的线条宽度为52px。
细节元素如圆点和正方形,用90px作为直径或边长。
2.5 图标颜色
图标颜色统一为#000000。
2.6 图标命名规则
该规范紧适用于当前产品,如果是公司整体的命名规范,还需区分产品线及模块。icon-【circle圆、square方,可选】-【action动词,可选】-【图标名称】-【line,fill可选】
命名规则解析:
【circle圆、square方,可选】此项选填,是指图标的外形是什么形状,目前较常见的是圆形和方形,有些图标可能既不是圆形,也不是方形,根据实际情况而定。
【action动词,可选】此项选填,是指图标的含义,图标中多数是一个动作,如下载。
【图标名称】此项必填,就是图标含义的文字表征。
【line,fill可选】此项选填,如果一个图标有线型和面积型2种形式,则其他命名都相同,最后以line、fill区分。
图3:命名规则图示
3. 工具使用注意事项(使用AI绘制,上传至iconfont)
3.1 轮廓化描边
为保证导出的svg文件可以正常上传至iconfont,所有元素画完后,必须轮廓化描边(步骤:效果-路径-轮廓化描边)
3.2 图标有重合路径的处理
绘制图标时,我们一般使用简单的几何图形拼接,有时几何图形之间会有重叠。如果重叠图形不处理,这样上传iconfont是一切正常的,但是前端引用时就会出现问题;如果将重合路径的图形使用路径查找器工具组合后,问题就会解决。
图4:图标有重合路径时,路径处理前后对比
3.3 巧用替换工具
如果发现上传的图标有问题,需要修改。一般都会直接删除之前的图标,重新上传新图标。这样做在iconfont上看不出什么区别,无非就是图标位置换了下,但是对于前端开发来说,需要更改链接、改代码,比较麻烦。
而如果我们使用编辑图标-点击上传替换图标,前端只需要替换链接,不用修改代码,减少前端的工作量。
图5:巧用替换工具
参考:图标设计的三点最基本规范 https://www.25xt.com/iconweb/17892.html
封面:转载自网络侵删
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册