@折折熊 的设计博客
用最简单地方式改变世界

不得不说的icon-font

[注:内容均摘录于etaoUX团队提供的相关资料]

先普及一下背景知识。icon-font,从字面上理解就可以看出,把图标和字体结合的一种技术。它主要应用于现在越来越多的跨平台设备中。其实它用到的是SVG矢量图形(为什么不用flash矢量,因为iOS不支持),其实很早就存在,只是设计同学没有怎么接触。而且ie9以下的浏览器都不能支持(ie害了整个中国互联网的进步)。

它的优势简单来看有两点:

1、无论你是什么分辨率,是否retina,无论你怎么放大(一定极限内),它可以保证图标不会出现任何模糊;

2、可以通过css直接控制图标大小、色彩甚至是投影和浮雕等效果;

3、一份字体文件可以存放很多图标,调用管理非常方便;

4、容量非常小,30个图标只有20k不到的文件大小;(因为它是矢量的)

目前,我所看到国内的主流网站,还是很少普及这个功能,so,那些买了苹果高清屏幕的同学,访问网站时是不是还是为那些毛边而感到痛苦。etao网在去年就已经推行了iconfont。如下图:

放到数倍,这个logo还是没有任何损耗。(etao网不仅是推行了iconfont,而且也支持响应式布局,不信可以缩小你的浏览器宽度看看。注:这里绝对没有任何广告...)

为什么要推行iconfont?最简单的一点就是在移动优先的多设备发展当下,分辨率越来越高,尺寸大小越来越不同,如果要为10个设备分别设计不同大小的图标,不仅设计成本很高,而且后期维护也好,用户访问也会有很大的障碍。

那怎么做icon-font?(以下完整内容摘录于阿里妈妈资深交互设计师桑行同学撰写的《矢量技术研究和实践》)

1、在PS中用路径绘制

  • 清晰:在PS中完成绘制,水平垂直避免半像素。

  • 斜线,弧线保持饱满(PS中绘制是为了解决像素问题)。

  • 大小:原则上以16px大小为图标标准大小(国际标准)。

  • 重量:在实际设计中需要尽量保持图标重量的统一,这个标准是基于16px大小的基础上进行调整。

  • 线条:线的宽度为2像素,必要时采用1像素也可。

  • 间隔:图形间隔1像素

  • 倒角:倒角以圆润为主,主要为两像素,不能出现半像素(部分没有规范的图标发现一个改一个)。

  • 过度圆润:当一个图标所有的角都是倒角的时候,就有可能出现“过度圆润”现象,尽可能避免。

  • logo:logo类图标保持清晰为主,并不一定非要圆角。清晰标准仍然是16px

  • 路径:路径确保封闭,为单一图层,能够全部复制。


2、在AI中中转

  • 合并:把路径合并为单一图层。

  • 上色:给路径着色,不用给边着色(不上色无法粘贴到字体)。

  • 放大:因为字体文件已经设置了较高的清晰度,所以路径会需要比较大的比例。方法是:在ps中16px的图形 为基础,粘贴到AI后,选中路径对象,直接双击缩放,弹出缩放设置窗口,键入缩放  6260%。

  • AI的完整画布大小:1000px  X  1000px   (设置大画布是为了在字体中保持完整性)  

  • 闭合:确保路径闭合。


3、粘贴到FontLab

  • 新建:新建一个空编码,双击灰色编码可以激活,右键重新更改名字为需要的编码,保持两个名字相同(以F 开头,往后排序,需要注意的是,编码是16进制的,也就是0-f,缝f进一位)。 

  • 粘贴:在AI中ctrl+c,在fontlab中ctrl+v粘贴,粘贴成功就可以预览中看到图形,失败则表示粘贴不成功或者 路径没有闭合。

  • 对齐:对齐在清晰度中非常重要。在fontlab中,最小宽度为1000,图标超过时可以扩大(不扩大会导致字体 放大时候显示不完整),上下的位置是上限800,下限-200,超出不影响。快速对齐方法:在设计的时候,角 落中画一个矩形作为参考像素(对齐像素),和图形一起放大,在fontlab中作为对齐标准,对齐完后删除矩 形。

  • 重新绘制:在字体中出现弯曲,变形等现象,应返回ai重新编译,减少多余控制点。仍然不行的话在ai放大图 形后粘贴到字体缩放。(这是因为字体的容差引起的,另一方法是更改字体容差,不过效果不显著。这也是图 标字体不适合过渡复杂的原因) 


4、配置后交给前端

  • 更新配置文件:在线下载最新的配置文件(http://ux.etao.com/uxiconfont.yml),添加新的图标位置,并且更改为相 应的代码。

  • 换算16进制编码:随便打开chrome浏览器,右键审查元素,在弹出的选项卡中选中“console”,空白处填 入转换代码(chrome会记录操作,方向键向上可以唤出最新使用的转换代码)parseInt('0xf02a',16),把引号 内内容替换为16进制的代码,回车可以得到换算后的数值。

  • 填写配置文件:uid,换算后的数值;code,16进制编码;name,图标名字;tags,标签,方便通过搜索寻 找;category,类型(1为类目,2为常用,3为后台,对号入座)

  • 完成配置后交给前端 


再附上桑行同学整理的图标字体制作注意事项:(该注意事项是根据一淘UX矢量制作模板为制作场景的说明)

最后,对icon-font有兴趣的同学可以移步这里去看看etaoUX做得研究参考:图形设计生成总结  ,或者详细阅读桑行同学撰写的《矢量技术研究和实践》。


评论 ( 1 )
热度 ( 1 )

© 独立设计 | Powered by LOFTER