致设计师：图标图形制作-路径为王 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=4158

一、条条大路通罗马，走路骑马特斯拉

我想去一个地方，必然有很多路可以抵达；有些路，你只能走路，有些路你可以开特斯拉。选择不同的道路，虽然最后都能到达目的地，但是，经历的苦难以及看到的风景以及日后的影响都是不一样的。

如果韩信当年选择另外一条路走，估计就不会被萧何追上了！

萧何追韩信处

我们Coding同样如此，所以才有各种算法之说，正是因为路多了，才有了规范，才不会各走各路，各回各家，各找各妈。

据我尚浅显的经验，似乎设计师在做设计效果的时候，似乎并未特别注重实现的规范。注意这里是实现规范，而非效果规范（间距、颜色之类）。

对于我们前端er而言，尤其侧重重构的前端，设计师如何实现的，其实并不关心，更多的是实现的效果。尤其在图标、图形以图片背景同时兼顾IE6浏览器的年代，重构需要的可能就是终极的无损设计图，PSD什么的，都可以不需要。

但是，技术发展日新月异，必然会促生新的热点、职业以及新的规范诉求。

在前端领域，CSS3 font-face以及SVG的关注和普及，使得我们对设计的要求不仅仅是一张效果图，而是更内在的一些东西，可代码化的图形元素。

举个简单例子
我想在Photoshop中画一个20像素*20像素的正圆，背景色是黑色。如何破？

以前，我个人很喜欢的方法，使用椭圆选区工具，绘制个正圆选区，然后填色，取消选区。

最后是一个很干净的图层，喜欢简单简洁的我以前都是这么搞的。这个路数适合平面设计，对于网页设计，尤其如今的网页，是非常不合适的。
使用椭圆工具，Shape选项，无边框，直接拉一个正圆。

有点PS基础的人都知道，上面两条路都可以抵达罗马。但是，亲爱的UI设计师同事们，当下，图标图形的效果实现已经不能再是看心情、哪个方法方便使用哪个了！

疑惑-鑫表情

你可能会疑惑，一个半斤、一个八两，有啥子区别呢？

区别在于：前者为图形，永远的图形；后者为参数，参数化的图形。

如果我们把上面的这两种实现转换成SVG. 则，第1种方法则是一个base64格式的图片（点此预览）：
base64后的图片

而第2种方法则是路径绘制的SVG（点此预览）：
路径与SVG

SVG中的<image>本质上还是位图，缩放时候，糊糊的；而后面的路径绘制，则具有正统的可缩放特性。

要知道，自定义的font-face小图标基本上都是使用SVG作为转换媒介的，而SVG本身在web领域，Mobile端可以大放异彩。不仅如此，Photoshop支持JavaScript编程，路径参数可访问，但图形不可以；以前介绍过一款CSS3Ps的插件，可以将图层的图形效果转变成CSS3代码。也是需要采用保留参数的制作方式。

因此，如今的图标图形制作的方法也有必要规范化了，原则很简单，路径为王！

二、路径为王

举两个例子：
正反两例子

临门一脚泻千里
我的设计师同事都是非常优秀的设计师。小0酱是近期比较有深入合作的设计师，基本上而言，其所有的小图标都习惯性使用路径，这是很赞的！但是，毕竟路径绘图并非强制的规范，加上（前端）本来就没这方面的要求，因此，意识的疏忽会在细节上产生一些不完美。这是正常的，没有天敌的羊群，自然会有安全意识的疏忽。

例如下图所示的图标：
外框和中垂线都是路径（形状）绘制：
路径示意

但是，或许是小尖角不好处理，这里，直接是个纯粹的像素图（像素抠图？）层，如下图层显隐示意：
图层显示时候图层隐藏时候

完美只差一点。这个小图标就不能全方位SVG化，其中的尖角只能采用base64 url以位图形式嵌在SVG中，失去了可缩放矢量的特性了。可谓临门一脚泻千里，包子精致狗不理。

线性图标规范
有幸看到了深圳同事的一个PSD, 名为线性图标规范.psd的文件，啧啧啧，着实大开了眼界——所有图标全是路径绘制，设计师惊人的绘制功力那是设计师们要惊叹。我想说的是这里的“规范”二字，所有图标，不论是曲线异常精细复杂的，还是及简图形，全部都是路径绘制，而且，名曰“图标规范”。显然，“路径为王”的准则很多优秀的设计师都是遵循的，如果你没有意识到这点，下次做设计的时候就要注意了哦~