SVG格式图标 —— 论一位UI设计师的自我修养
曾经有一个了解SVG格式图标大法的机会摆在我面前,我没有好好珍惜,七七四十九个小时之后算是参透了这套UI入门秘籍,现传授之。
让我来用传说中的5W2H分析法来说说人话。。。
WHAT SVG 格式图标,是什么?目的是什么?做什么工作?
答:她!就是你梦寐以求的:不管放大缩小怎么折腾~这可爱的小图标她都不会变形,而且你只需要输出一套资源,跟x2,x3 以及安卓的各种格式say bye~~ 开发哥哥也会很感动的有木有?
WHY 为什么要做?可不可以不做?有没有替代方案?
答:不仅不变形,还可以随便改大小,改颜色,你说要不要?follow your heart ~ 用了你就会深深爱上
WHO 谁?由谁来做?
答:当然是由我们的UI设计师宝宝啦~(巴拉巴拉变!把你变成。。。)
WHEN 何时?什么时间做?什么时机最适宜?
答:按你原来要切图的时机即可
WHERE 何处?在哪里做?
答:不在厨房也不在草地和沙发,用sketch 和 iconfont (必备)
HOW 怎么做?如何提高效率?如何实施?方法是什么?
不如举个例子:
第一步:首先来绘制一个我们常用的消息气泡的icon

第二步:绘制完毕,我们选择SVG格式,并做好切片,确保切片没有背景色

第三步:至此,我们在Sketch 里需要做的就完成了,接下来上传到阿里出品的iconfont,其实这一步给开发也可以,但是上传到iconfont,可以更加直观地找到文件,也可以在线协作。

第四步:记得授权给你的开发人员,让他注册一个iconfont 账号,像加微信一样把他加到你的项目里,这样就完成了。
HOW MUTCH 多少?做到什么程度?数量如何?质量水平如何?费用产出如何?
请注意:Iconfont不支持上传有渐变和投影的图标 ,这时候怎么办呢?我的经验是:按照传统的做法传送本地的文件包。经过这一两年的实践,这套方法至少减少原来工作量的百分之八十以上,再也没有出现过icon 变形以及大大节约了开发资源,并在一些紧急情况下(如前不久的全国哀悼日,所有APP都变灰色了)这时候不需要设计师,开发改几行代码就可以实现,这可谓是从底层的革命。
结语:设计项目的落地,离不开开发工程师,在做一项工作的时候多思考是否有利己利他提升效率及质量的好方法,并勇于去探索研究并付诸行动,是一个互联网从业者的优秀职业素养。这种思考和解决问题的技能可以嫁接到其他各行各业的。敢问路在何方?路在脚下~小伙伴们~奥利给~~!!















































































