本帖适用于：UI designer, Android Developer

猜猜以下三张截图，有哪些地方使用到切图的Resource？

答案是框起来的地方有使用到切图，而其余的元件，都是由研发实现的，包含你看到的这些小icon。

事实上这些icon，都是字元，只要在APK里嵌入自己建立的iconfont TTF档，它所占的容量大小，会比全部icon都使用切图还要少95%。

也因为它是以字元的形态显示，具有向量的特性和以下的优势：

1.放大、缩小都不会失真，只要按照定义文字的方式去标示规格即可。

2.它可以以下阴影的参数，也可以上渐层颜色，设计师能发挥的空间并不少。

3.提高更换元件（换图）的工作效率：尚若App里各个不同画面有用到一样的icon，日后你对某个icon的设计不满意，或是想要改变隐喻图示，也只要更新该字元，以及TTF档，就可以一次替换所有场景的icon，而不需要重新切图。

怎么做？其实很简单，只需要以下几个步骤：

1.先把你的icon画在24*24px canvas size的档案，并输出成SVG格式，颜色不指定，但一般我会用黑色，进阶参数可以设定向量图案的精度。

2.打开icomoon.io网页，建立一个新的project（它同时也可以管理多个project），点进绿色手指指向的地方。

3.接着把你设计好的icon SVG   import。

4.完成置入所需要的SVG后，在generate font按下download，就可以下载完整的TTF档（里面包含了json，方便多人协同编辑与版本管理）。

5.每一个icon都会有专属的unicode，要使用的时候，设计师要先请研发定义相应的iconfont ID，就能方便大家识别与维护。

6.标注的时候，只要定义字级就可以决定显示的大小，唯一要注意的是，在设计原档里，每个icon元件，都要保留一份透明背景的canvas，以便测量尺寸，最终的是单位要设定成dp，而不是使用sp。

相信你已经了解iconfont的使用方法，如果有更好的实作方式，也欢迎交流。

本人备注一下：我们公司的研发人员一直不太喜欢使用iconfont，他们说需要写一些代码，而且用起来不是那么直接，所以我们现在只能采用笨拙的方式，我来切出每个用到的icon，然后大小标注起来，而且每个icon在每个界面大小明显能看到不同。所以个人观点不能让一部分试用，如果你们公司的研发人员看懂了这篇文章，并且开始使用这种方法，应该是双方受益的事情。