选择登录方式:
阿里妈妈MUX文章分享
字体图标制作详解
上期通过分享，简单地从设计趋势、技术、以及现有应用环境等角度讲述了矢量技术应用的可行性。这期我们将把阿里妈妈MUX这两年在矢量图标制作上积累的经验也分享给大家；大家可能在网上看过很多关于矢量图标制作的教程，而且大多是技术同学分享的技术贴。整个过程也相对比较简单。在这里我们将深入地向大家讲述字体图标制作的规范流程和注意事项，很多内容是现在网上没有的，纯粹是阿里妈妈MUX这两年摸索出来的。阿里妈妈MUX在国内首家推出了，省去了设计师不太擅长的字体制作过程，所以在本教程中我们就不再详细介绍如何使用字体制作工具制作字体图标的过程，更多的是介绍如何在AI工具中制作一个规范的字体图标。阅读全文相关推荐：那废话不多说我们开始介绍吧；一、制作前基础知识普及1、在制作图标前请下载由阿里妈妈MUX提供的矢量图标制作模板；2、尽量使用illustrator制作矢量图标；有些设计师在ps中使用路径绘制图标再导成SVG，这种方式也是可以的，但是有时会出现一些奇怪的现象，如图形的路径混乱了，图标倾斜了等不可预知的情况，所以还是建议大家在illustrator中绘制矢量图标；3、将illustrator中绘制的图形另存为SVG格式；最初iconfont平台是支持EPS文件上传的，但是考虑到EPS文件在平台生成过程的不稳定性，所以现在统一采用SVG格式；illustrator中SVG格式导出具体教程&&&4、在绘制图标的过程中不要使用AI图形模块的旋转、镜像等功能，整个绘制过程最好使用钢笔工具绘制；^^5、避免出现图形绘制过中断点的现象。6、不可以用色彩叠加的方式来达到模块造型；&二、图标栅格数字形态下，字符是用抽象化的图案绘制成的。当文本显示在屏幕上时，位置非常精确，理想的字体形状需要用一定数量的像素栅格显示。图标设计师常用栅格来控制图标组成元素的比例关系；但是我们在矢量图标制作过程中引入栅格概念主要目的是模拟字体图标在不同尺寸下的展现效果，以达到优化的作用；也就是说图标设计的时候我们用栅格来模拟像素，一个格子就是一个像素，一个图标需要一定数量的像素组成。举个例子：一个16X16图标，在16X16个像素中通过像素着色的方式把图形表达出来；&那有同学就要问了，通过这样的栅格能达到什么样的优化效果呢？首先我们来了解一下文字的渲染策略，看组图： （从左到右依次）理想的渲染状态、黑白渲染、灰度渲染、次像素渲染上图左侧第一张是我们认为一种比较理想的渲染效果，但是通过刚才我们介绍栅格我们可以了解到这种状态是不可能的，因为第一代黑白渲染和第二代灰度渲染是不可能做到显示半格像素或一个像素中显示弧度的。黑白渲染和灰度渲染在渲染图形遇到半格像素或则弧度的时候，他们会有各自不同的处理方式；举个例子：如上图红点处像素，我们理解他是有弧度的，且不占满一个像素；各个渲染方式的处理办法如下：黑白渲染黑白渲染相对来说比较粗暴，直接通过四舍五入的形式把这里要描绘的图形不显示了；（黑白渲染的形式主要应用于打印机渲染，但是打印机本身的精度非常高，所以打印出来的图形还是很细腻的）灰度渲染灰度渲染显得就智能一些了，他通过灰度降级的方式来表达，如果占不到一个像素那就根据他占的面积来降低这个像素的灰度；占的面积越小灰度就越低；次像素渲染次像素渲染是第三代渲染方式，相对来说比较高级，他从从左至右将一个像素分成三份；用不同的色彩值来显示图形，这样图形看起来就更加细腻；通过了解刚才三种渲染模式对不满一个像素的处理方式，我们就会发现，当我们绘制图标的时候，如果没有把控好图标边缘线在真实场景下渲染的情况，就会被系统进行降级渲染。所以我们更希望能饱满完整的显示一个像素。我们来看一组效果：&从上组图中我们可以看出左侧图形的边都刚好落在完成的像素中，未出现不足一个像素的现象（圆角除外），右侧则未考虑像素栅格的问题；图标在16X16像素大小的应用中很明显感觉到左侧的小图标比右侧的小图标要清晰很多；这是因为右侧的图标的边本来是需要2个像素显示的，但是却落在了3个像素上，渲染的时候出现了一个像素是未降级灰度显示，其他两个像素进行了不同级别的灰度降级。这样我们就会觉得右侧的小图标有点模糊且变粗了。所以在制作图标的时候我们需要引入栅格，去模拟像素点，然后避免图标的线或边不要出现落在半个像素上的情况；了解到了栅格对于图标优化的重要性，那怎么制作一个能模拟真实像素环境下的栅格呢？首先我们得了解一下基准框；基准框的作用是为字体矢量图标提供一个大小参考，如：在16px像素大小的一个逗号“，”和一个文字“图”的大小和所处的位子是不一样的，这就是因为他们都是在同一套基准框中绘制的图形，才得到相对大小的概念，不然大家同时矢量图标，怎么区别大小呢？每套字体都有自己不同的基准框，要根据实际设计需要设定，没有严格规定；阿里巴巴矢量图标库在制定基准框的时候考虑到图标展现的标准尺寸：16X16、32X32、64X64、128X128；特设置了一个可以整除他们的尺寸：（大家可以通过下载我们制作好的“”获得已经设置好基准框的模板）根据实际应用的像素大小选择栅格；如：你要制作一套16X16像素大小的字体图标应用于网站或app，那么我们建议您在16X16的栅格中绘制，那么16像素2的n倍都能应用，这样图标的边框就不会落在半个像素上，避免出现虚边、加粗等现象。（在retina屏下不用担心图标的虚边问题，由于显示精度非常高，图标表现得非常细腻。）那如果要制作一个非标尺寸的图标，如：18X18大小的图标怎么办呢？我们可以通过在AI中修改栅格来实现模拟，如下图：在AI设置中调出参考线和网格设置设置项，然后拿出你的计算机：1024/X=?把算出来的值尽可能精确的填入网格线间隔这项中，这样你可以模拟在实际应用大小场景中要显示的图形像素点了。三、实例操作step1、step2：在AI中删除模板的示例图，根据栅格绘制图形；step3：将AI中绘制好的图形另存为SVGstep4：打开网站并把保存好的SVG文件拖入上传框中step5：完成上传，这样就获得了一个矢量的字体图标&&&我是分割线————————————————————————————— 下期为大家分享《矢量图标扩展玩法》
powered by&阿里妈妈MUX
国内最大的矢量图标库&
如果要绘制18x18px的icon，此处没有明白~~~能再解释一下吗？
栅格那里讲的太矛盾了
麻烦重新发下 下载链接
文章中的下载链接失效了
淘宝装修教程：/
楼下的同学请把具体情况反馈至我们的微博：/iconfont
上传的字体在WIN7 safari 下无法正常显示。。。
哦~~好像有两个用户也和我反馈这个问题~~我们测试一下反馈给你~~^^
就是我存着咋不行嘞 奇了怪的
CS6也是可以的哦
是必须用AI CS3才可以吗 我是CS6
我按照格式来做的 怎么显示 response TEXT 不合法
求给出解决方案啊，已经在用ICONFONT做项目了，客户要求在Safari下显示正常的，而且我的FONTS都是存本地的，不用SVN的啊
这个问题已经有解决方。我们正在处理
发现一个问题，ICONFONT在Safari下有问题，XP用户Safari打开iconfont官网，会直接重启，问题不详，WIN7系统Safari打开正常，但是ICON在Safari显示不出来，阿里妈妈库显示不出来，淘宝库正常显示，自己上传的icon跟阿里妈妈库情况一样，求官方给出解决方法
如何获取字体编码啊亲
loading...您的位置：
前端开发：浅谈图片优化的方法
作者：微博UDC
　　在网站优化中，如果图片优化得好，不但可以提高页面的加载速度，提升网站的用户体验，而且还可以通过图片优化来节省网站的带宽。那么作为页面构建工程师应该采用什么方法来优化图片，既能保证UI的还原度，又使图片最精简呢?下面我就个人经验，来简单介绍一下图片优化的方法，首先我们了解一些图片方面的知识：
　　1. 矢量图与位图。
　　矢量图：缩放、旋转不失真的图像格式，不管你离多近去看都看不到图形的最小单位。存储的文件较小，但是很难表现色彩层次丰富的逼真图像效果。你可以理解成完美的圆型、抛物线等形状。
　　位图：又叫栅格图、像素图，最小单位由像素构成，缩放、旋转会失真。举个例子来说，位图就好比十字绣，远看时画面细腻多彩，近看时能看到每一针的色彩过渡。
　　十字绣 十字绣放大
　　下表为矢量图和位图的对比：
　　2.有损压缩、无损压缩。
　　有损压缩：特点是保持颜色的逐渐变化，根据人眼观察现实世界的 突然变化, 然后使用附近的颜色通过渐变或其他形式进行填充。因为素点的数据信息，所以存储量会降低，还不会影响图像的还原度质会有所下降。JPG是有损压缩格式，在存储图像时会把图像分解成8*8像素的网格单单独优化。举个例子：白色小块为8*8px，黑色底色块为32*32px，当小白块已经不是纯白色了，它周围的小白块却很尖锐，如下图所示：
　　右上角的白色格子刚好没有在8*8像素的网格单元中，所以保存时会跟周围的8*8的网格单元颜色融合，下图的效果：
　　这就是平时保存JPG图片时图像会模糊的原因，下面是几张彩色图的局部对比效果：
　　无损压缩：利用数据的统计冗余进行压缩，真实的记录图像上每个像素点的数据信息。他的原理是先判断哪些颜色相同，哪些不同，将相同颜色的数据信息进行压缩记录，把不同的数据另外保存。多次存储后图片的品质不会下降。
　　为什么无损压缩的图也会有失真的?因为他的压缩原理是通过索引图像上相同区域的颜色进行压缩和还原，也就是说只有在图像的颜色数量小于我们可以保存的颜色数量时，才能真实的记录和还原图像，否则就会丢失一些图像信息。例如，PNG-8和GIF格式：
　　而PNG24为真彩色所以颜色表为空，不会失真。
　　3. PNG 、GIF 、JPG图片对比。
　　在我们进行图像优化技术前，需要学习有关的图片格式的一些技术细节。每个图形格式都有自己的优势和弱点，知道他们会使你得到更好的视觉质量和压缩品质。
　　网页图片优化是网页加速中非常重要的一步，对图片进行压缩，不仅能够节约带宽，并且加快网页的速度。我们常用的图片编辑软件都可以在压缩图片。
　　PNG-8 的高压缩比
　　切图时，有时选择 PNG-8 可以获得更高的压缩比。注意，是 PNG-8，不是 PNG-24。不过有些情况下还是 GIF 或 JPG 会小一些，需要根据实际情况调试以选择最佳方案。
　　PNG-24 的优化技巧，使用色调分离：
　　拿微博左侧导航的小icon为例，压缩后的图像大小对比如下图：
　　PS色调分离的操作步骤如下：
　　对比大小：
　　使用工具优化后，还能够小一些：
　　请注意，上图中原本是GIF格式的图片　被改为了PNG格式。所以，在使用工具优化时后需要再查看一下文件格式是否被更改，避免漏过某些图片没有优化。
　　图片优化在微博首页上的应用：
　　1. 图型类、照片类
　　对于图像格式的选择，我们还需要考虑图片的使用场景或功能，概括为两类：图型类、照片类
　　图型类：图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性，颜色数量较少。
　　图型类一般可以使用PNG格式或者GIF格式。优化时可采用PNG格式为PNG8或者PNG24，品质为32，如果色彩有损失可采用品质64或者128。
　　例如：首页左导的图标、feed区图标、勋章图、表情动画都属于图形。
　　照片类：照片通常含有百万数量级的颜色，包括平滑的颜色过度和渐变，如果是图形较为复杂，图中有时会出现真实的照片。
　　照片类一般用PNG和JPG。可以根据图片色彩的丰富程度而定。
　　PNG的品质一般要到128。JPG的品质一般要在70-80之间，以噪点的程度确定。
　　例如：皮肤背景图、发布器、按钮背景、发布器下方的tips、右侧广告、用户头像、用户发布的图片。
　　2. 通用类、随机类
　　按照首页图片出现的频率分成：通用类、随机类
　　通用类：每个人首页都会看到，图标、按钮、小背景。
　　例如，顶部托盘图标、左导图标、feed区图标、发布器图标、身份图标、操作类图标、状态类图标、按钮。尽可能的采用PNG的格式保存，文件会相对来说较小一些。
　　下图为微博的按钮和左侧导航icon小图的，使用GIF和PNG格式的大小对比：
　　下图为微博的按钮背景图分别使用GIF和PNG格式保存的大小对比：
　　随机类：根据自己定义和发布的内容而定。
　　A. 表情GIF
　　可以使用FireWorks或者ImageReady，建议使用ImageReady。
　　最好是手动一张张的调整，因为这些表情图的色彩值都比较少，如果使用比较大的颜色时会存储量较大。
　　另外，批处理的话也是需要一个文件夹一个文件夹去处理，表情的文件夹太多了，基本上批处理还是很慢。批处理如果是使用FireWorks的话，有的动画会出现变快或者是缺边的情况。
　　手动处理时，根据索引色的多少来存，一般来说4-128索引色存储。
　　B. 换肤类图片：
　　采用JPG格式或者PNG格式。
　　皮肤的主要背景图中如含有真实的照片或者文字，可采用JPG格式，为了保证更接近设计图需采用85以上的品质压缩图片。如果色彩跨度不大的背景图片，可采用PNG格式。
　　C. 勋章类：
　　目前有GIF和PNG两种格式，GIF的是小图、PNG的是中图和大图。品质选128即可。
　　这个目录批处理比较快。因为都是在同一个文件夹里。但是手动的话会更小一点。
　　D. 各种广告：
　　发布器下方tips、右侧广告、底部广告。采用JPG格式或者PNG格式。
　　E. 用户相关图：
　　头像、用户发布的图这个需要在后台控制压缩品质。采用JPG格式或者PNG格式。
　　图片优化工具Smush.it 介绍
　　Smush.it 是 YUI 团队制作的一款基于 YUI 的在线图片优化工具。
　　它是基于以下四条图片优化建议制作的服务：
　　& 移除 JPG 中的 meta 数据。
　　& 优化 JPG 的压缩率。
　　& 转化特定 GIF 图片到可索引的 PNG 格式图片。
　　& 从可索引的图片中移除没用到颜色信息。
　　所以使用 Smush.it 压缩图片可以删除图片中多余的字节而不改变图片的视觉效果和质量。
　　在实际使用中发现：
　　& 它还能把某些JPG图片转化为PNG图片。
　　& 对于PNG24真彩色图片，能够去掉一些肉眼察觉不到的颜色信息，弥补photoshop和firework优化不了PNG24图片的不足。
　　& 可以优化GIF动画图片。
　　Smush.it 使用
　　方法一：使用Firefox的插件Yslow里的Tools工具中的All Smush.it&
　　拿微博首页为例：
　　Firebug，使用Yslow工具，运行后，选择Tools
　　点击All Smush.it&，会自动跳转到/ysmush.it/得到下图:
　　点击按钮Download Smushed Images后，会让下载一个zip的压缩文件。
　　方法二：直接登录 Smush.it 的网站，把需要压缩图片的url粘贴到输入框中(或者从本地电脑上选取图片)，点击 Smush 就可以进行图片压缩，然后 Smuch.it 就会提供一个优化报表，显示图片压缩比率和节省了多少字节，并且提供一个可下载包含压缩后的图片文件的压缩包。
　　下图为直接填写线上URL的方式(以逗号隔开)：
　　下图为从本地电脑上选取图片的方式：
　　下图为优化结果：
　　让我们再回顾一下重点：
　　1. 选择合适的格式：用JPG保存照片、用GIF保存动画，其他图片使用PNG保存，并尽可能用PNG8。
　　2. PNG24图片的压缩技巧。
　　3. Smush.it的使用。
(转载请保留)
热门话题大家都在看
互联网的一些事，已超50万小伙伴关注！手机号/邮箱:?
使用第三方登录：?
还可以输入 300 字符
请输入举报理由
选择收藏分类：
默认收藏夹
添加收藏分类：
设计资讯/资料：如何绘制高质量的图标(翻译理论)
系统分类：
文章版权：
翻译，如需商业用途或转载请与
联系，谢谢配合！
北京市 / GUI设计师85天前发布
文章通过6个步骤对一个图标进行优化和改进，从而为读者讲解图标的基本制作过程，和优秀图标的一些共同的特质
如何绘制高质量的图标
Easy Steps To Better Icon Design
原作者：Scott lewis & 转译：James zhao
本文将通过6个步骤来阐述一些常用的设计规则，其中包括高质量图标的一些设计规范，例如：连续性、可读性、和易读性。当然这6个步骤只是一些指导，切不可当作教条的规则来使用。要知道想要成为好的设计师，首先应该学会什么时候需要打破规则和什么时候需要遵守规则。
下文中的这只小狗的图标（左边）是由原作者设计并上传到Iconfinder上的，而右边这个小狗的图标是在我们提出修改意见以后作者修改后的图标。那下面就让我们一起来探讨一下这个图标的修改过程吧。
左边为原图标，右边为改良后重新设计的图标。 (Image: )
需要提醒的是，虽然本文中提到的图标设计方法是针对网页和手机app图标的，然而对平面设计师来说也有一定的参考价值的。只是对于平面印刷中的300dpi的高分辨率，要求设计完美像素图标（下文有讲到这是什么东东）是没有什么意义的。如果你是平面设计师，本文仍然可以作为制作优秀图标设计的参考，但是请忽略文中关于完美像素图标的部分。
高品质图标的三大属性
Three Attributes Of Effective Icon Design
高品质的图标设计包含了图标的三大属性：基本型、视觉一致性、和辨识度。设计图标其实就是从基本型到可读性依次往复的实现这三大属性的过程。即使你仅仅只设计了一个图标，依然逃离不了这三大属性。
毫无疑问，设计高质量图标需要的不仅仅只是这三大属性，但是这三个属性可以让你有一个很好的开始。为了做到相对简洁，本文我们只介绍这三个主要的属性。
基本型（形）Form
基本型是图标的基础。如果你忽略掉图标的细节，只画一个轮廓，不管这个轮廓是方的、圆的、三角行还是一些有机形状，这些都是基本型。还有一些主要的几何形状，例如圆形、方形和三角形是组成图标基本型的基础。在上图的例子中，小狗图标的脑袋就是有两个三角形（耳朵）两个椭圆（脸）组成的。就像一个画家作画的时候要先画一个大的轮廓大的梗概再去完善细节一样，在设计图标的时候也要先从简单的形状入手，进而添加必要的细节（必要的细节是指能表示图标所要表达的观点、事物和动作即可）。
狗狗图标的基本型. (Image: )
视觉一致性 Aesthetic Unity
视觉一致性指的是一个图标内部以及一组图标之间存在的一些共同的元素和特征，例如都是直角或者都是圆角、圆角的度数都是2、4等等；还有比如风格上都是扁平图标、剪影图标、线图标或者线填充图标等等。一组图标的视觉一致性的元素的应用主要是为了保证单个图标之间的整体性和统一性。例如下面的例子中，三个狗狗的图标来自于同一组图标，他们之间就存在一些视觉一致性的元素，比如：2px的描边、2px的圆角还有心形的鼻子。
这三个狗狗图标来自于同一组图标，他们之间存在一些共同的视觉元素。 (Image: )
辨识度 Recognizability
辨识度性是图标的核心要素，同时也是图标独特性所在。一个图标是否合格最终取决于用户能否很迅速地get到这个图标所要表达的意思。此外辨识度并不仅仅指的是对图标含义（想要表示的事物、表达的观点和表示的动作）的理解，还包括这些图标所有的那些独一无二的元素，比如这组狗狗图标心形的鼻子。在这一点上辨识度和视觉一致性有所重叠。下图中，我们可以通过颜色、头和耳朵的形状清楚的辨别出这两只狗狗分别是柯基犬和哈士奇，同时有因为两个图标都有相同大小的描边、相同形状的鼻子和眼睛，我们同样可以看出它们出自同一组图标。
因为不同品种狗狗的特点使图标很容易被认出是什么狗狗来,同时一些共同的设计手法
的运用和设计元素的使用又能让用户一眼看出他们出自一组图标. (Image: )
到现在为止，我们共同探讨了一下我们认为对设计高品质图标最重要的三大属性。接下来我们将通过6个步骤来详细讲解三大属性的应用。
The Six Steps
1、运用网格进行设计 Always Start With a Grid
有许多文章都有讲解到不同大小网格的应用对设计的好处。针对做图标来说，我们选用32x32大小的网格最为参考进行图标设计。当然我们的网格还包含一些规范来帮助我们绘制每个图标设计的基本型。
这就是32x32大小的网格,还包括2px的描边或者缓冲区域也就是No go zone.
外面的2px描边叫“无内容区域”。尽量避免将图标绘制到这个区域内，特殊情况除外。这个区域存在的目的就是为了在图标周围形成一圈空白区域让图标看起来更透气。
一个图标的基本型包括轮廓和方向。如果你沿着图标的边缘画线（你可以把它成为外轮廓线），这条线将会是一个方块、圆、三角形、矩形和四边形。
圆形图标常常以网格中心为中心，而且边缘将与网格内容区域的边缘相接。需要注意的是，往往只是为了保证一个图标的整体性，才会不得不把图标的一些细节画到“无内容区域”内，如下图所示。
圆形图标在网格中的布局 (Image: )
方形图标也会画在网格中间，但是边缘一般不会和网格边缘想接触。为了保证方形图标和圆形以及三角形的视觉中心一致，大多数方形和矩形图标会和网格中间的关键线对齐（下图左边图标橙色区域）。什么时候要和关键线对齐完全取决于图标本身的视觉重心，至于到底什么时候要和什么大小的关键线对齐完全靠感觉，这样的感觉只能靠大量练习来培养了。看下图中左边的方形图标，上面提到的同心方形有三个分别用淡蓝色、淡橙色、和淡绿色表示。
圆形和方形图标相对于网格的大小和对齐关系 (Image: )
在32x32的网格里面你能看到一个20x28纵向和横向的矩形。而且我们会尽量按照这个纬度来设计横向或者纵向的图标。
横纵图标与网格的大小对齐关系 (Image: )
倾斜摆放的图标的边缘往往和网格的圆形内容区域的边缘对齐，如下图所示。注意到这个锯子图标的最外的的点和网格里面标示内容区域的圆圈对齐。这些部分在设计的时候没必要太过精细，差不多就行了。
倾斜摆放的图标与网格的大小对齐关系 (Image: )
记住没必要死搬硬套这些规则。网格的使用只是来帮助我们统一和规范图标设计的，所以一旦需要你在做高品质图标和遵守这些规则之间做选择的话，当然要毫不犹豫选择打破规则。就像图标设计大神Dutch Icon（原名叫&Hemmo de Jonge）所说：实现一个图标的精髓要比保证一组图标的统一性要重要得多。
2、几何图形的使用 Start With Simple Geometric Shapes
首先我们需要使用一些简单的几何图形（圆、矩形和三角形）来勾画出图表的大致轮廓。尽管有的时候图表的最终形态要更随意更自然，在设计之初还是应该从几何图形下手。因为在绘制尤其是很小的图标的时候，由于用手画线而导致的图标边缘不均匀往往会使图标看起来没那么精致。如果从基本的几何图形入手开始设计的话能使图标的边缘更精准（尤其是弧线），而且几何图形还允许我们很方便的调整图标元素的大小同时还能保证图标的基本型和按网格设计的规范性。
这是前面提到的狗狗图标的基本型就是由两个三角形做耳朵，两个椭圆做脸.
3、一切以数值为准，不管是描边、线条、圆角、弧线还是角度
By the Numbers: Edges, Lines, Corners, Curves and Angles
在避免使图标显得过于生硬和机械化的前提下，我们应当尽量把描边、角度和弧度精确到像素。换言之，在设计细节的时候要精确到数字而不是靠感觉和靠眼睛去看。否则，如果在这些细节上缺失一致性的话会使整个图标缺乏水准的。
① 角度Angles
大多数情况下用45度和45度倍数的角度是没有问题的。因为在45度的时候抗锯齿的效果会呈阶梯状均匀分布（也就是说在这个角度像素块是呈斜对角头对脚排列的），会使线条变的非常锐利从而变得很清晰，人眼看起来就会很舒服。如果在整个图标结构内部都是用这个角度，会使的图标看起来很整齐很统一。但是如果在某些情况下45度角度实在行不通，那时候就可以考虑用22.5度或者11.25度或者15的倍数的角度。之所以要用45度角度的一半22.5度作为备选角度，是因为在22.5度的时候抗锯齿的效果仍然很完美。
近距离观察45度角度的抗锯齿效果
② 曲线&Curves
对于一个图标来说，曲线画的是否完美是否够平滑，就足以决定这个图标设计的是否专业和品质是否够高。虽然人眼能够看出精密度非常高的一些细微的变化，但是人眼和手配合却不能画出非常标准的曲线。所以我们要尽可能的用形状工具和数值来绘制曲线，而不用手去画（包括钢笔工具）。如果有些情况下确实需要用手来画曲线的话，在AI中或者其他矢量图形绘制工具要同时按着Shift键进行曲线的绘制，或者如果有条件的话可以使用例如VectorScribe和InkScribe等插件来绘制精度更高的贝塞尔曲线。
用手画出来的不均匀的曲线. (Image: )
就像上图一样，用手画出来的曲线会是图标的质量大打折扣。
这些非常精准的曲线就是用Ai的贝塞尔曲线工具画出来的而不是用手画的。
③ 角Corners
常见的圆角半径为2px，对于32x32像素的图标来说，2像素的图标已经足够大足够清晰，而且又不会因为圆角过大而让图标显得很Q。在设计图表的时候到底需要用多大的圆角度数取决于你具体想让你设计的图标呈现什么样的风格。当然是否要给图标加圆角则需要通过分析整组图标的视觉效果来做决定。
精准的圆角
我们一开始使用几何形状作为基本型来设计这个图标，然后通过上述步骤润色又加了2px的描边最后得到一个质量较原来提升好多档次的图标。这就是我们如何通过使用图形工具和对诸如圆角等这些细节的统一和精度化来优化一个图表的设计的。
对狗狗图标的重新设计到现在为止的状态
对这个图标的优化主要通过一下几点来实现的：一致的而且大小适中的圆角、耳朵轮廓完美的曲线和恰到好处的描边。
④ 完美像素&Pixel-Perfection
完美的像素对于小尺寸的图标来说是尤为重要的。当在小尺寸图标边缘使用抗锯齿效果的时候，图标就没那么精细了。因为如果图标线条之间的空间没有对齐到像素网格就会出现抗锯齿效果也就会变得模糊。完美的像素对齐不仅会让图标的直线条变得很锐利，而且会让精准绘制的斜线和曲线变的更锐利。
正如前文所说,45度角是一个完美的角度，因为直线呈45度角的时候，组成直线的像素会呈阶梯状斜对角排列。对于曲线和圆角来说也是同样的道理，角度计算的越精准，抗锯齿效果就越好。当然需要注意的是：像素对齐（完美像素）至少是对于抗锯齿效果来说，在分辨率很高比如说Retina屏上并不会有很明显的效果。
⑤ 线条粗细&Line Weights
讲到线条粗细,2种素是最理想的，但是有时候3种线条粗细也是可以的。目的是为体现层级关系同时又不让图标看起来那么死板，当然过多的线条粗细的应用也会是图标缺乏整体性。超过3种线条会使一组图标看起来没那么统一了。用2px和4px的意义在于他们都是2的倍数，方便于图标按比例缩放。在大多数情况下，尤其在绘制剪影图标和扁平化图标的时候，要避免使用很细的线条。除非你要设计的是线图标，也就是图标的形状不考线条而是通过光影关系来表示的。
这个iPhone图标. (Image: )
4、在一组图标之间使用相同的设计元素
Use Consistent Design Elements and Accents Across Icons
图标设计大神Dutch Icon（原名Hemmo de Jonge荷兰人画图标出名江湖人称Dutch Icon）在2015年的图标沙龙上就这一点展开了详细讨论。在他为荷兰政府做的一个项目中，他和他的合作伙伴为图标的一些特定位置设计了小缺口（如图）。并不是所有的图标都有这个缺口但是大部分是有的。像这样的设计元素，贯穿整组图标，的的确确可以是图标看起来更统一。
一组图标中的相同的设计元素 (Image: )
在我们的狗狗图标中，所有的图标都有一个心形的鼻子。心形的鼻子不仅是这组图标具有了统一性，也让这些图标看起来更新奇，同时还让这些小狗狗变的更加惹人喜爱。
狗狗图标中的共同的设计元素的运用 (Image: )
大多数情况下，在一组图标中即使图标的风格发生了改变，那些贯穿于各图标之间的共同的设计元素仍然可以使这组图标保持原有的一致性。比如我们把几个狗狗图标变成剪影图标而不是扁平化的图标，但是他们看起来仍然是一组图标。
不同的风格但保持共同的设计元素 (Image: )
5、慎用细节和修饰 Use Details and Decorations Sparingly
图标本身必须具备有快速和所表达的观点、事物和动作产生联系的属性。然而过多的细节会让图标变得很复杂，从而降低辨识度，尤其当图标比较小的时候影响会更大。图标中细节的多少往往不仅影响到图标的美观，还会影响到图标的易读性。所以凭经验来说，一个图标需要多少细节来表达清楚意思就加多少细节往往是一个比较合适的度。
用最少的细节表达清楚图标所要表达的事物. (Image: )
到目前为止，我们的狗狗图标已经接近于完善了。耳朵周围的黑描边也变成了狗狗的棕色的毛了。连上的黑描边没了，但是仍然可以在脸部白色区域的上下看到2像素描边的存在。需要注意的是，图标中有些地方还没有进行优化，比如三角形的鼻子，我们接下来会继续我们的优化过程。
6、让图标看起来更别致 Make It Unique
现在每天都有越来越多的优秀的设计师在设计和分享大量的优秀的图标。但是有一些设计师过多依赖于当下一些有影响力的设计师的设计风格，缺乏自己的创新。作为专业的设计师，我们必须跳出图标设计的这个圈子，去关注其他的一些创作领域比如建筑、字体、工业设计还有心理学、大自然和宇宙，以此来获许更多的灵感。因为现在的图标越来越没有特色，所以让自己的设计更别致就显得尤为重要了。
心形的鼻子让狗狗的图标更别致和新奇. (Image: )
这个最终的改版图标设计了一个心形的鼻子，目的就是让它看起来更与众不同。
这些简单的步骤仅仅只能作为设计图标的开端。设计的思路并不是唯一的，我们只是讲解了我们对图标设计基本原则的一些看法，当然其他设计师也会有更加全面的见解。想成为一名优秀的设计师，你必须看既可能多的作品，阅读尽可能多的文章，随身携带手绘本走到哪画到哪，不停的练习，练习还是练习。
左边是原来的图标，右边是重新设计的图标，这个过程就是我们所讲解的这些步骤. (Image: )
总结 Conclusion
这篇文章里，我们一起探讨了设计图标的一些基本法则。这些基本法则也就是设计手法可以通过练习来掌握。记住想要设计优秀的图标，要从基本型开始保证图标的辨识度，同时还要保证图标内部和一组图标之间的设计元素的一致性。只要你掌握了这些设计技巧，你就可以充分发挥自己的想象力，创造出独一无二的图标啦。
北京市 / GUI设计师85天前发布
同时推荐此文章
还可以输入2000 个字符
所有，如需商业用途或转载请与
联系，谢谢配合！