绘制一套统一的icon

刚开始做ui设计的时候对于icon的绘制都是增加一个画一个有时候甚至直接下载使用。

并且全部用ps一把梭。

后来随着能力增强开始自己绘制统一的icon，并且在考虑以多少尺寸绘制一套icon，并且可以再sketh中进行多个尺寸的扩展，这样我就可以在sketch组件中定义icon组件随时可以更换icon（sketch组件的优点可以看看我的关于sketch组件的文章）

所以这个时候开始要查阅资料了看看别人有没有经验可借鉴

于是找到了这篇文章http://m.ui.cn/details/479516

内容有点多所以我吸收转换成自己可用的。

首先我说一下文章里要提取出来的内容

设计时常用图标尺寸一般在12-36px之间（@1倍图）。为了方便绘制的时候查看页面效果，我们可以从中选择一个尺寸作为绘制尺寸，然后通过设定缩放倍率来获得其他尺寸的图标。

所以作者通过偶数和4的倍数得到了12、16、20、24、28、32、36。

然后通过这几个基础尺寸风别扩大或者缩小1.5   2    2.5   3    3.5倍看得到的数值是否最大覆盖12、16、20、24、28、32、36。这组数字

最后作者得出下面的结论

若绘制面型图标

L=12时，p=1，i=1.5、2、2.5、3，可选图标大小为：12、18、24、30、36；

L=16时，p=1，i=1.5、2、2.5，可选图标大小为：16、24、32、40；

若绘制线型图标

L=12时，p=1，b=1、2，i=1.5、2、2.5、3，可选图标大小为：12、18、24、30、36；

L=16时，p=1，b=1、2、3，i=1.5、2、2.5，可选图标大小为：16、24、32、40。

所以我们可以选择上面的尺寸画icon

如果要了解的更详细可以去看原文章我的重点不在这里

来说说我在工作中的应用

最近在项目中要做一组3px的线性图标，一般app底部tab的icon尺寸44px或者48px，一倍图下是22px或者24xp。

然后问题来了我是在二倍图用3px画呢，还是在一倍图用1.5px画呢，并且画多大尺寸呢。

在探索这个问题时候我首先利用sketch的便利下载了kitchen这个插件（大家可以去试一下这个插件，这个插件有一个可以帮你填充文本和头像 、图片的功能很方便），这个插件直接嵌入了iconfont。

我再@1的花瓣上把淘宝的各大产品icon拉下来发现都是16px大小

并且结合上面的文章计算一如下图

刚好 这样我就可以用1px在在16px的大小下绘制一套统一的icon，并且16px下绘制的icon可以扩展的尺寸比较多

可以用ai或者sketch绘制然后制作成组件

ai的话可以画好后利用sketch的sketch icons插件批量导入导入的时候还能设置尺寸参数完美