网页设计中图形设计生成总结

2013/4/2 11:05:53来源：一淘UX

为什么需要矢量的图形解决方案？

　　故事的开始，主要是从移动平台的完全崛起说起。

　　大概是在iphone4热卖开始，移动平台就开始备受关注，iphone4的视网膜屏幕让人眼前一亮，也就此正式打开了多平台的故事。因为远远高于原先的显示设备，使得iphone4能显示更多的内容，也能显示更清晰的图形(智能手机屏幕分辨率普遍高于个人电脑)，然而最直接的影响就是使得位图收到了挑战。因为现在图形呈现在设备上很有可能将不是一个物理像素点对应一个px，他有可能是一个物理像素点对应几个px，也可能是几个物理像素点对应一个px。所以像素点的问题在这种情况下被一次次的放大。

　　如图放大后位图图形就失真了，但是字体相对还是清晰的

　　而矢量图形却不会出现放大缩小后失真的问题，这就是为什么矢量图形在现在多平台的情况下被越来越多利用的一个原因。

　　矢量的解决方案有哪些，为什么会选择图标字体作为解决方案？

　　就现在使用的比较广泛的矢量图形格式，除了用代码在页面上画圈圈这一解决方法外，用的比较多的就是页面上的字体和svg图形两种解决方案。

　　先来说说svg吧。

　　svg(Scalable Vector Graphics)是一种古老的技术(不过字体应该更古老)，字面理解为可缩放矢量图形，是一种基于xml的图形，所以也可以理解为是开发者通过代码绘制的图形，所以他不受分辨率影响(没有马赛克)。值得一提的是svg可以制作交互响应的动画，其功能与flash相似，并且现在的html5都内联svg文件，可惜的是在移动平台鼠标响应事件可能不能被浏览器本地化处理，当然这是后话。

　　svg的图像

　　矢量字体，当然不必多说，和svg同是矢量图形，网页上有文字的地方你就能看到。个人觉得矢量字体最强大的地方就是惊人的承载量。不管你页面上有多少字，都能轻松加载，当然这得益于字体独有的编码管理模式。并且所有的浏览器都支持(不支持的话就真的是看毛了)，区别是是否支持自定义字体。

　　iconfont的图形字体

　　同是矢量图形，让我们来看看两者的共同之处。

　　1、都可以由ai编辑。这对设计师来说是一个很好的消息，作为矢量图形的霸者，对矢量图形的处理支持还是比较全面的。

　　2、同不受分辨率限制。怎样放大缩小都没有影响。

　　再来比较下两者的优劣。

　　还是先说下svg。

　　优点

　　1、最大的优势应该就是对于图形的处理了。svg的图形缩放和呈现都不会出现“变形的问题”，不会出现边缘的不顺滑，或者说是比较明显的毛边。

　　2、可以承载复杂的图形。svg应该是支持到了大部分的效果，光一个图形中可以用几种颜色和渐变，各种效果都可以加上去，但是请小心他的体积。

　　3、容易入手。绘制图形相对比较简单，也比较容易修改和生成。

　　劣势

　　1、不易管理。这意味着不太容易集中管理，可不要小看这一个特点，在生成和管理中会损耗很多的资源。

　　2、文件为单独文件。因为svg文件为单一文件，在页面的调用和管理上存在很大缺陷。如果一个页面上有很多图形，那很有可能会多次请求，不利于页面加载。

　　3、交互部分一般设计师无法独立完成。这是因为svg基于xml的原因，他的交互部分是标记语言实现的。现行没有十分强大的界面编辑器，所以交互部分可能还是得依靠开发者。

　　4、IE6不支持。这个是在中国的硬伤了，不解释。

　　再说下字体的优劣

　　优点

　　1、管理方便。字体是基于Unicode编码，每一个字都有独特的编码，整个字体是一个文件，需要时只要调用编码，文件是同一个，也方便修改更新和查看。

　　2、页面承载能力强。和一个页面几百个几千个文字一个原理，对页面的承载能力非常强。

　　3、自定义效果。虽然文字的样式有限，但是通过添加各种样式依旧能达到一定效果，比如换色，换背景。

　　缺点

　　1、各个浏览器和平台上效果不一。这是一个非常恼人的地方，查看下pc和mac下字体的区别就知道了(ps：windows下14-12的宋体是特殊处理过的，不在考虑范围)。主要在于边缘的渲染处理上。详细内容在后期的设计中会有对比说明。

　　2、图形表现单一。只能创建一个对象，一个对象只有一种颜色(默认)。

　　由此可见，两者的优劣都很明显。最后我们选择了字体图形的解决方案，我们是出于这样的考虑：

　　1、全面支持IE6。我们的用户仍然有相当一部分沉迷于IE6，这使得很多领域难展拳脚，而字体能够兼容IE6。

　　2、管理维护成本低。因为字体的特殊性，使得管理起来非常简单，因为图形的维护是经常发生的事，通过开发搭建起来的整个体系，能让人几乎感觉不到维护的压力。统一的管理也能防止图标碎片化。

　　3、在移动平台上基本不存在像素点问题。一般设备分辨率都高于电脑，尤其视网膜屏幕更加，实际使用中其图标的物理大小往往都超过16个像素，甚至超过30个像素。

　　4、不需要花哨的图标。这是我们的图标风格所确定的，其中也是为了适应性，所以相对形状比较重要。

　　5、自定义样式。主要是能够定义图标颜色，这在使用中会经常被更改以适应当前场景，支持的内容根据样式来定。

　　设计

　　了解了技术背景，我们就开始组织设计图标。

　　现在各平台多样化的同时，各大公司也努力的在做平台的统一化，并逐渐成为主流。平台统一成为主流的原因在于多样化不利于统一的品牌形象，相对资源消耗也比较大，不利于后期发展。这次的图标设计，也将以这主流思想为核心。

　　设计准备

　　由于设计将在各个平台产品中使用，各个产品线的设计统一就成为基础。我们不能像原来一样自产自销，而是需要做一样的东西，给所有的人使用。由于生活化概念的不断引入，一淘各产品线都趋于走生活化的路线，所以生活化理所当然成为这次图标设计的一个核心理念，那是一种亲近，一种随和，一种人性。我们打算在这次的设计中通过形状的造型要素，把情感融入图标设计中。在大理念的前提下，更细化了其中的设计方向，比如我们的图标是饱满的，有亲和力的，自然柔和的，表达有力的，他不是尖锐的，复杂的，也不是生硬写实的，也不会是表达模糊的存在。

　　我们的风格上，力求给人平和，饱满的感触，生动而又清晰。我们也有很多的禁区，不能让她变成模糊而表意不清。

　　增加点击感和工整度。苹果的图标会成为一个个带小圆角的矩形的另一个原因是这样的形式会带来强烈的点击感，就如现实中的按钮，自带的高光还把整个形体加以突出，更像是一个微微凸起的小按钮了。当然不是说我们的标也是这样，只是我们在设计的时候会需要注意到图标在移动平台的运用，增加点击感，形体更简单(为了符合高清屏幕的细节统一，同时也便于扩展)，色块饱满。

　　经过讨论确定了我们的图标设计锥形，于是我们开始一个个落实了下去，兵分三路，定时对设计进行汇总。

　　黄金比例

　　在设计中，比例主要参考了黄金比例，即黄金分割。黄金分割一直是自然界一非常神奇的分割比例，他把万物以一定比例划分，形成传说中的最优比例。现实中有非常多的物体都遵循黄金比例，这一比例不仅用在长度，还用在面积，体积，颜色，透明等一系列固有属性中。

　　常用希腊字母

　　表示黄金比值，用代数式表达就是：

　　上图为黄金比例的示意图

　　当然这些是一些枯燥的理论，在现实使用中没有办法完全硬搬这一理论。虽然在矢量的基础上可以豪放的使用大小比例来突出最优效果，在其他很多的设计中仍然在比例上有上下的波动。一般的范围在0.6-0.63之间。但是在使用黄金分割之前还有一个严肃的问题，就是关于字体，矢量 – 位图的输出问题。

　　首先我来解释一下这个情况。众所周知，字体在页面渲染中是以矢量的形式渲染出来的，也就是说，当你的页面放大的时候，图片会出现马赛克，但是字体仍然清晰，当然前提是他真的是文字。

　　这个门字就是类似AI路径一般的矢量图形，但是我们不要高兴的太早，别忘了我们图标的使用通常大小是16px甚至更低(比如原先广告的图标最小标准为12px)，我们肉眼看到的图像仍然是由像素点平凑成的字体。如下图为直接放大的渲染字体，可以看到渲染后仍然是各种像素点，那图标也会面临一样的问题—在一定大小下的清晰度问题。

　　所以最后我们聚在一起，然后经过小的讨论，决定使用16px的大小作为新图标的大小规范标准，统一全平台的图标最小使用规范。所以最小的图标使用就以16px为基准设计。

　　好吧，其实我想说的是黄金比例，有点扯远了，让我们拉回来。

　　因为16个像素点的限制，掐指一算，分割的一般像素点就是5和8，这样的比例正好符合。看起来一个很直接的比值，在实际运用中就会显得有些呆板，因为死用这种比例不符合生活化的理念(除非你看到的东西都是一样的比例)，虽然这难免有些诱人。但是我们还是在设计中参考了这一传说中的比值。

　　黄金分割已俨然不是传说，运用上主要有分割比和体积比，以及长度比值。在使用中长度比值会更多一些，因为分割线往往也有自己的宽度，通常为一个像素。

　　除黄金比外，在设计上还争取饱满填充的原则，让图标变得饱满，增加生活感，让图标变得更加有点击感，而且这一原则让图标变得更加融合移动设备的操作上。前面说到苹果图标有固定的外形框架，更加增加了点击的赶脚，其实我们的图标也是类似的原理。尤其在一些接近块面的图标上显得更加突出，往往纤细的结构更适合展示或者指示用。当然，图标的使用上没有太过框架的规范，在使用中增加外框也是合理的，这看设计的场景。

　　矢量还原到位图

　　一阵忙碌之后就有一部分图标已经设计出来，当然大家都是抽空完成的，非常的辛苦。第一次的汇总也有很多的问题出现，比如设计的细节调整，设计风格迥异，关于这一点，我们实习三人行必有我师的原则，由一设计师审核主导和把控设计风格，以防止设计迷失。然后开始把修订过的图标开始生产字体文件，开始往线上推。

　　然后就有新的问题了，当然这是很不愿意看到的，不过现实就是这么的实际，除了开始说的矢量到位图所带来的清晰度问题外，还有位置的偏移问题，细节展现问题等一系列问题,好在还没有完全上线。

　　矢量图形虽然从原理上来说，放大缩小没有锯齿，但是呈现在web上，仍然会被渲染成像素点的位图，所以在低分辨率的情况下，图标的清晰问题依然出现，所以必须要针对16px大小的图标进行优化。因为字体在web浏览器中的渲染有些复杂，各个渲染器渲染效果不一，从IE到safari，从pc，到mac，到ios，再到视网膜屏幕，各个平台和浏览器表现效果差异较大，尤其在pc下面，部分浏览器还受到显卡的影响，所以对图标的优化，我们还是选择了pc平台，相对于mac平台，pc上浏览器的渲染普遍比较“骨干”，而mac上会相对比较饱满，这也是苹果的渲染差异所致。所以在设计中要把矢量还原到像素，其实就是把矢量当像素在做，在横线，竖线对齐像素的基础上，斜线，圆也要以像素为基准来制作。

　　所以在渲染我们还是研究了一把，做了几个简单的渲染实验，来瞄下渲染对比吧。

　　总的来说，是在以矢量输出并渲染为位图的情况下，如何保持像素对齐的问题。如图，同一个设计稿在不同平台的渲染效果是不一样的，因为字体渲染的区别主要在于横向上的渲染溢出，所以我做了一个简单的测试字体。

　　在最上方的四格中，宽度分别为0.25px，0.5px，0.75px，1px。可以看出在不同环境下渲染的结果是完全不同的。首先pc端的渲染左边有明显的黄色边，在达到0.75像素后，右边开始有浅蓝色的溢出，而黄色的边在mac下并不是很明显，但是蓝色的溢出却非常明显。总的看来，在渲染上，mac会显得比较“丰满”，这样在小的间隙上，尤其是对横向的间隙有较大的影响。两者的渲染在纵向上都没有什么影响，基本保持了原来的高度，没有什么溢出。

　　总结一下在两大平台的渲染效果，一般情况下，pc下基本没有差别太大，可以严格按照像素的位置进行渲染，周围略有溢出，但是问题不大。但是mac下在图标右边有比较明显的溢出。所以在设计的时候，图标位置可以略微左移，左移的像素基本控制在0.25px以内。

　　这是一个基本的调整方案，但是实用与否还得看效果。上图中左下角红框内为实际渲染的效果图，右侧为放大比较的图形。这次的图形都做了0.25像素的调整，可以看出两种渲染结果又不一样，这次在pc下产生了比较大的影响，甚至有时候会出现像素乱入的情况，而mac下得到了一定优化。

　　不过话说回来，大家应该知道mac下渲染的图形会比较圆润，所以最终的结果是：我们要优化有纵向间隙的图标，以争取在mac下不会出现“抱团”的效果，主要依然针对PC平台像素优化，这也是主要的用户群体所决定的。

　　移动平台由于像素密度比较高，图标没有明显的溢出(几乎是完全没有)，所以不存在这些问题。而且在移动上，尤其是手机，用到16px图标的情况比较少，因为16px占地面积太小，也起不到指示作用，同时也难以点击。

　　在新一轮的设计中不仅仅是注重了渲染效果，在原本设计稿中也更注重像素的精确问题，毕竟走好每一步才是关键。

　　在设计中解决像素问题。

　　在设计中经常要对齐网格，因为自由绘制的时候会出现虚边，降低了图标质量，对齐网格绘制可以解决图形模糊的问题，图标细节精度可以达到像素级，让设计师将精力更多的集中在创意表达层面，不必因为担心模糊而谨慎的去操作，从而提高工作效率。

　　图中可见定点占一个像素明显会比较尖锐清晰，夹杂在两个像素之间就会相对模糊。其次，斜线的位置也会影响清晰度，基本上斜线的位置和像素相切，图形会略微清晰，同时，大小也回略有所别，因为四周的线位置不同，形成的体积会略有区别。所以针对不同的情况，应选择尽量清晰的解决方案，在保证清晰的基础上，也要保持原有的形状。

　　其他的设计细节

　　在长期的设计中，渐渐形成了一些体系，最明显就是外圆角的半径大小。

　　圆角：鉴于图标使用的场景可大可小，外圆角的大小基本维持在两个像素，内圆角基本是半个像素或者半个像素以内。图形并不采用全部的圆角，内部原则上保留部分圆角，同时用到不少直角甚至角度更小的角。

　　线条：线条粗细中，主要线条基本维持在两个像素，部分细节的切割会采用单像素的宽度。

　　体积：当很多图标聚集在一起，或者排列在一起的时候，大小的重要性就被凸显出来了。图标本身不能用强制的大小数据来判定大小的区别，因为不是所有的图标都外形一致，都易于归纳形体。在几次的总结上，大小基本总结为像素容量，即以像素点为单位的图标容量来衡量。这可以理解为像素和空白比，不过基于像素点更为直接。

　　和一般制作不同，图标字体的生成需要准确的像素点位置，因为在计算位置的时候会把控制点以及控制杆计算在图标大小范围之内，防止出现位置不准确的现象。

　　如图，如果控制杆方向不对，会造成大小调整时大小不准确，这时调整大小就需要借助辅助线，因为生成图标字体需要一个相对比较长的流程，辅助线在软件中位置一般不够精准，在调整辅助线上浪费比较多的时间会延长字体的制作和生成时间，消耗多余的成本，所以在制作的时候，需要解决控制杆的问题

　　如图控制杆如果方向位置都对的话就会简单很多，在整个大小的控制就会精确不少，对于图形的定位就要方便很多。

　　继续努力

　　以上是一淘ux图标委员会的图标设计经验总结，这是一次工程浩大的全平台斗争，我们会继续努力，解决新的问题，与新技术一起与时俱进。

　　生成

　　在设计结束后，我们就运用工具来实现我们的设计。

　　Fontlab就是一个能够生成矢量图形，并且在页面中被当做字体载入的软件。

　　FontLab是一个专业级的字体编辑软件，广泛应用于字体设计人员和排版印刷业等专业场合。它能够对已有的字体进行修改，也可以完全按照要求重新设计需要的字体。

　　本文就基于一淘本次的图标字体化设计经验来分享下在使用fontlab下制作图标字体的个人经验总结，故适合使用fontlab来设计生成图标的同学查看参考，其中我们的设计在ai中完成，也可以用ps制作路径，但是必须从ai中把路径粘贴过去，字体在fontlab中生成。本文中的部分内容会影响到设计。

　　好了，了解了字体格式的大背景和出现的原因，就开始下一步吧。使用fontlab来实现设计。

　　在此之前，先申明使用环境：

　　所有图形都是从ai中粘贴过来，如果ps先行制作，可以从ps粘贴到ai先。

　　1 图形的大小

　　这里指的大小不是设计的大小，而是导入(粘贴)到fontlab里的图形大小。在生成中，这是第一步，同时也是很重要的一布。

　　在想象中，大小也许不是什么关键的问题，不是说矢量的么，矢量不就是可以大可以小，但是事实并不是这样。作为第一步，图形的大小非常重要。首先是两者单位不同，其次可能和fontlab录入格式文件的精细度有关，fontlab的细节承载度有限，细微的细节在外部导入这样的模式中，没有达到一定弯曲的形状将被忽略，结果就好像ai的临摹一样。

　　可以看出在10倍大小的时候，部分细节仍然有点缺失。原图是一个16px的图标，可以说是变形的有点惨不忍睹。

　　放大后的原图(16px大小直接粘贴进去的样子)

　　所以结论就很简单了，必须要先放大原图，放大的值在一定倍数以上，倍数的多少取决于图形细节的多少。一般来说放大的倍数至少要在20以上。不过保险起见，可以过百。代价就是放大的图形会使文件一定程度的增大(相差一般是会在1k内)，然后再粘贴到fontlab(fontlab统一缩放不够方便，建议在ai中统一操作)。所以我们要尽量保证在设计的最后阶段，把图形放大到一个绝对可以承载图标细节的大小。

　　话外音：Fontlab 采用 UPM (Units Per eM/元素单位)来测量字体，两者存在一定的差值。但是因为我们做的是图标，所以不用对于高度要求过于苛刻(如ascender，baseline等，都可以在文字信息(Font Info)中的Metrics and Dimensions ,key dimensions选项卡中设置，如果是设计字体，则需要严格参考这里的设置)。

　　在这里，将介绍一个非常重要的参数，Metrics and Dimensions。理解为尺寸设置即可，这个值很重要的原因是，当你不满足你的图形大小的时候，通过调整这个值，可以适当优化图形体积大小。选一个复杂的图形，然后就可以开始尝试了。说的简单一点，就是通过这个换算，来转换图形大小，具体尝试一下就清楚了。

　　如图两者的图形大小没有改变，而输出的图形大小则改变了，所以这个值就是一个大小的换算值，原来图的大小除以这个UPM size(只是一个大致的关系，不是精确的换算)，得出最后输出的图形大小。

　　通过这种换算，可以有效的减小图形的体积，当然也不能太小，你懂得。

　　如图还可以设置字高等细节参数。

　　2 腰围有多粗-图形的宽度

　　图标的高度是不受限制的，在fontlab中，只对宽度做设定(确切的说是有影响)，整个图形以中点为中心扩散。虽然理论上可以做无限大的图标，但是实际上过大的图形仍然会造成一些未知错误。恩，还是来说说这个宽度的原理。因为是字体生成工具，定义的内容自然就是字宽，字宽直接影响字间距。把字体换成图形，影响的也一样是相互之间的距离，如果图形超出距离的限定，则很有可能出现左右重合的现象，同理过高也可能出现上下重合，不过上下重合的概率不是很高。

　　究竟宽度的影响在哪里?宽度的影响就是：

　　1、决定你的作品是否等宽。显然这个问题在阅读文章的时候更被关注，但是想想你的图形将被放在哪里，通过怎样的技术，你就会知道该用怎样方式。

　　2、变形或者选中状态下可能会不完整。超出宽度的部分在页面的渲染上会有一定的问题，比如放大的时候，超出的部分可能会不能渲染，或者在其他动态的时候，也会莫名的消失。

　　如图右边的边界线截掉了图形的一部分，所以实现以后被截掉的部分容易丢失

　　3 没有多余的触须-界定框大小的控制

　　界定框，就是对图形进行调整的大框，在ps里按下Ctrl+T就能看到该尊容(fontlab中是Ctrl+9)。通过使用界定框来移动和缩放对象，以便于准确的摆放图形。本来界定框的大小并不难确定，但是在fontlab里却不一样，多余的触须(操作手柄)也会影响到界定框大小。我会把他单独拿出来说是因为这很值得注意，尤其是一些带圆形的图形，有时候为了省事把对象全部旋转(实际只需旋转圆以外的内容，但是看起来圆被旋转后也看不出变化)了，然后在fontlab里你就会发现，界定框很有可能会因为你旋转了多余的对象而改变了原本的大小，甚至偏离。最直接的影响就是使中心(圆心)变得不再准确，边界变得模糊(对齐的时候，没有那么方便了，谁试谁知道)。

　　如图，控制杆的大小会影响界定框的大小，从而动摇中心点。

　　4 没有线条的世界-封闭的图形

　　和ai不太一样的是，fontlab里没有线条，也没有复合图形，虽然他也可以复合。通过粘贴进来的图形必须是单个的图形，同时也必须是封闭的图形，你就不用指望把一条纤细的线条拖进来享用了。复合的图形你必须要经过合并，可以用fontlab来合并，当然如果你能把复合的图形粘贴进来的话，因为粘贴对复合图形无效。说到这里，复制粘贴的方法对于没有填充颜色的图形也无效，这是个很有意思的特点，所以粘贴之前要扩展或者合并为一个单一的图形，并且记得上色。

　　而未封闭的图形么，在fontlab中是无法显示的，不过在编辑页面，fontlab会很小心的标出你图形的未封闭节点的位置。

　　如图圆形的下方有一个叉，表示图形没有封闭，所以右侧的字体窗口无法显示该图形

　　两个图形默认的组合

　　fontlab也可以处理简单的合并，组合图形的形式可以在菜单上设置，ai中不做阐述

　　可以进行不同形式的合并

　　虽然支持几个图形的合并，不过依然建议是图形越少越好。

　　5 调整的最大帮手-辅助线的使用

　　辅助线依然是非常重要的，因为决定了对齐，而对齐则与很多重要的属性联系在一起，比如对齐，清晰度，

　　在fontlab里很麻烦的一点是，界限和辅助线的区别不是很明显，但是长时间的使用和批量的操作实在是离不开辅助线这个东西。创造辅助线的形式和ps以及AI一样，所以上手非常简单。一般来说刚刚创造的辅助线是蓝色的，这个时候是叫做本地辅助线(local)，主要是针对本地，也就是当前图形的辅助操作。这时的辅助线不会在其他图形中出现，但是有时候这并不是我们想要的。简单来说，比如我们用辅助线创造的是一个统一的高度，或者统一的宽度，那他就需要在所有的图形中显示出来。要把辅助线转换到全局也很简单，直接右击辅助线，选择Global就可以。这时候辅助线会变成红色，并且可以在其他图层看到。但是在经常使用之后就会发现还有一个问题，就是在使用中有时候误操作移动了该辅助线，然后所有图层的辅助线全部被移动了。这时候就需要一个锁定的功能，这也不难，在试图(View)中的锁定图层中锁定辅助线就可以了。然后所有的辅助线(除了标注宽度的，那线从一开始就是灰色)都锁定了。当然，需要修改辅助线的话需要解锁，不过锁定状态仍然能创建辅助线，只是不能修改。

　　辅助线的简易说明

　　6 检查作业-图形的复查

　　到底图形现在是什么样子的，fontlab可以直接查看已经制作的图形，不过fontlab在渲染的时候显然没有把图形当做字体，其效果就好像是在ai中查看的感觉。如果这个时候你自我感觉良好的话，那就对不起了，在页面上很有可能会是另一个她。因为web浏览器可不会把他当ai文件来渲染，对浏览器来说，他就是字体。甚至是mac平台上，也会不同程度的出现杂边的情况。

　　也有一种理论是，根据渲染的效果，来改变设计的样式。听上去不错，展现出来的效果是最好的就行了。但是这样的结果最直接引发的问题就是设计稿和实现的不统一，也就难以管理。