图标字体的制作与应用

图标字体的制作与应用

图标字体已出现多年,在各种项目中的应用已经比较常见了,图标字体矢量图形的特性及应用就成为UI设计师应当了解的一个重要技巧。


1.制作图标字体的目的:

图标字体资源小,能够为App瘦包,方便管理,可以解决不同显示设备下图标图形清晰度的问题,不用再为不同设备适配不同尺寸的图像资源,节省了可观的工作量。同时前端也能从矢量技术中获得效率上的提升。

当下设计输出图标资源主要会涉及这些格式:

PDF/SVG:矢量格式有PDF和SVG,在使用PDF时也可做到矢量,无限放大与缩小并不会影响图像的清晰度,但PDF是根据不同设备的分辨率,去自动生成对应的资源,以此来达到矢量的目的,所以PDF实际上会增大我们应用的体积与资源的消耗。SVG对应的就是我们今天要介绍的图标字体。


PNG/JPG:PNG与JPG格式大家都很熟悉了,即传统意义上的切片,每次切完之后,还需压缩一遍切片大小,甚至需要修改切片的命名,例如与开发同步命名规则,不是设计师改,就是开发改命名,相对比较麻烦。例如Android,现在全面屏等高清屏的分辨率都很高,以往一些旧的资源使用@2x的切图,在高分辨率的屏幕上会出现模糊的情况,我们需要再去替换掉模糊的切片,费时费力。


GIF/APNG/WebP:GIF也是大家都很熟悉的动图格式,GIF的一大缺点是显示质量不高,仅支持8位色,显示的色彩效果不甚理想,图片甚至有锯齿。APNG是逐步兴起的一种动图格式,在后文会简单介绍一下。WebP也是一种正在慢慢流行起来的新图像格式,但iOS上的Safari浏览器并不能很好地支持。


2.图标字体的3大优点:

2.1 轻量性

一个图标字体比一系列的图像资源在数据尺寸上小不少,一旦图标字体加载之后,图标就会马上渲染出来,不需要载入图像资源。可以减少运算请求,还可以配合HTML5离线存储做性能优化。简单来说对性能优化甚至有小帮助。

上图是美图秀秀工具模块图标资源大小的对比,可以看到用切片的大小是413kb,换成图标字体的话仅需41kb,相当于减小了大概10倍的体积。

2.2 灵活性

图标字体比较灵活好控制并能全局管理,它可以被定制大小、颜色、阴影以及任何可采用的CSS样式,可在任何背景下显示。而使用位图必须得为每个不同大小与不同效果的图像输出不同的图像资源。

2.3 兼容性

图标字体支持所有现代浏览器,包括低版本的IE浏览器。移动端方面,iOS和安卓也都能完善地支持。


2.4 图标字体的缺点

图标字体只能被渲染成单色。


3.制作过程:

制作前基础知识普及

1. 在制作图标前注意统一好图标的画布模板尺寸,用栅格来绘制图标;

2. 制作工具方面,虽说Photoshop和Sketch也都能制作SVG的格式,但是Photoshop在图标绘制方面并没有Adobe Illustrator来的方便快捷,而且用Photoshop绘制出来的图形在制作成svg时可能会出现错误。当下Sketch也可以完成图标绘制的工作,但从Sketch导出SVG会带有颜色通道信息,最终制作出来的图标字体并不支持修改颜色。这一点需要大家注意;

3. 将Adobe Illustrator中绘制的图形另存为SVG格式,必须是扩展图形;

4. 避免出现图形绘制过程中断点的现象;

5. 不可用色彩叠加的方式来设计图标造型,不可用渐变色。

在画完整套图标以后,可以着手去写一份规范文档,简明扼要地将一些绘制规则记录其中,便于团队中其他小伙伴参考使用。

在源文件中,图层区分好中英文命名、Grid、切片大小区域,画布区域按功能模块去区分,在一份源文件中把图标的相关信息整理好。

制作SVG需要扩展后的图标,所有图标都需要扩展并且路径需要闭合。借助Adobe Illustrator的资源导出面板即可一次性导出我们做好的图标。若需要切片也可以比较方便地去导出图片资源,同时方便切片命名的填写。命名这个步骤相较于Photoshop会方便很多。

总的来说Adobe Illustrator无论绘制图标还是管理文件目前都是最方便的图标字体制作工具。


输出SVG之后就可以借助网站去生成图标字体,比如大家很熟悉的阿里巴巴图标库,还有一个比较有名的是的网站Iconmoon.io,这里我们选择Iconmoon制作。

将图标全部添加到网站中,可以选择哪些需要生成字体,哪些不需要。可以根据我们的需求去增删个别图标。

下一步就是给图标输入键值,每个图标对应相应的键值,开发根据这些数值去调用图标。

这里可以对比阿里巴巴图标库的制作过程,在这一步时会比较麻烦,需要一个个图标点开去修改键值,并不直观,比较花时间。因此我们不选择阿里巴巴图标库来制作图标字体。

对比:阿里巴巴图标库-输入键值步骤

键值设置规则 :大的模块-具体功能-图标语意-状态,这样刚好会产生四个字母数字组合,构成了一个键值。

键值是16进制的,字母从a依次到f,数字从0到9,超出这个范围是不被支持的。

导出以后会生成一个资源包,fonts文件夹里面是我们的字体文件,我们可以在电脑上安装这个字体包。

包中还有一个demo.html的文件需要注意,用Windows系统查看这个文件会发现后面出现了两个小图形,这代表在安卓5.0以下,这个图标显示有问题,我们需要修改键值。

可以在Sketch里面去安装图标字体的插件,这样我们就可以在Sketch中使用图标字体。可以随意地修改大小、颜色,甚至转曲,变成形状图层使用。


4. 图标在动画方面的输出工具:

目前主要有两种方式可以输出这些路径动画,一个是Airbnb设计团队的Lottie(airbnb.design/lottie/),另外一个是欢聚时代的SVGA(svga.io/designer.html)。从官网上可以看出,SVGA的主要特点是动画矢量图片的实现。Lottie在路径动画支持较好,但在涉及到需要图片资源时会比较麻烦,因为Lottie所需要的After Effects插件Bodymovin导出的带透明通道的PNG图片资源会带有黑边,需要手动替换掉这些有问题的切片,以保证动画效果。SVGA的出现,按照官方的话来说,就是为了解决这个问题。Bodymovin官方没有解决这个问题,但Bodymovin西西汉化版插件 zhuanlan.zhihu.com/p/25 解决了这个问题,具体可查看 airbnb.io/lottie/suppor。 在使用After Effects时,推荐使用英文版,中文版可能导出的文件会有乱码。

Bodymovin输出的资源所包含的文件


这是一个简单的动画资源,可以看到使用SVGA会比Bodymovin资源小很多,并只有一个文件,而Bodymovin是json+images。

但是SVGA具体在其他方面的属性支持如何,还有待验证,Lottie目前是更加成熟的实现工具。这两种格式可以同时存在于App中,但并不推荐这么做。

最后推荐一下APNG格式,在做新功能推荐时,可能图标需要做小动效来吸引用户点击,或是趣味性的表情,这时候APNG格式就是一种很好的解决方案。

APNG格式可以理解为PNG的序列帧组成的动画,但并没有被PNG官方承认。

iOS 10之后,信息里的表情动画用的就是APNG格式,安卓也支持APNG。

在电脑浏览器上如果遇见不支持APNG的也能会显示第一帧,就是一张静态PNG。与GIF格式对比,GIF显示效果并不好。APNG可以在体积小的同时保证更好的效果。APNG的制作需要借助一个工具。(gif与apng对比效果:isparta.github.io/compa



在After Effects中做好动画后,将序列帧拖动到iSparta这个面板就可以转换成APNG的格式了,非常方便快捷。(iSparta下载链接:isparta.github.io


总结:

图标字体如果涉及到整套图标需要全部替换改版时,还没有比较快捷的替换方法,只能在网站上一个个手动替换图标,或者新建项目重新开始,重新去输入每个键值。除此以外,图标字体无论从美观度、清晰度、工程化、尺寸、性能、灵活性、过渡动画的可以让能性,分辨率适配等等方面,均优于传统图像格式,可以省出更多时间专注于设计Icon与优化界面上,减少繁琐的重复性劳动。而图标字体在动效方面也有非常简单易用的Lottie等工具提高工作效率,相信未来会有更多支持更复杂动画的工具出现。


发布于 2018-12-13