（在芝加哥2014的An Event Apart上，Jon Hicks讨论了现代图标设计过程，并分享了有用的设计和对于图标的发展一些建议。这是我对他的演讲做的笔记。
by Luke Wroblewski August 26, 2014）

{翻译水平有限，请多包涵，文末附原文}

• 图标可以在网站和app中被用在支持导航、动作、和传递信息。它们还可以通过提供除了颜色外的更多的信息来增强地位。
• 视觉语言出现在书面语言之前，比如符号，象形文字等。所以在1974年符号出现在计算机之前它就已经存在了很久了。
• 今天有很多可以免费在网站或者app上使用的图标，那么为什么还制作自己的图标？因为可能一套图标的大小或者风格可能不适合你使用。你可能需要比一套已经做好的图标多一些或少一些的需求。在这些或者其他类似情况下，你可能需要定制的图标了。
• 图标设计的过程：调查，绘图，展开（这部分经常变化）。
• 调查：客户的陈述和图标的审计可以揭示出图标不协调，缺口和在图标设计中一个网站的副本。编写出你将会用到的图标的列表以及他们代表的含义。
• 你怎样做才能把一个描绘好的图标实现？你有两个选择：图像性的或者符号性的（需要学习）。
• 可能的话，你的图标设计应符合惯例。The Noun Project是收集常见的视觉符号的一个很好的资源。但是注意当地人的习惯思维习惯。像小猪银行，猫头鹰和竖起的大拇指可能在其他文化中使用不合适。
• 真正的符号图标更容易理解。线形图表和实心图标之间的差别并不是影响理解的关键因素。
• 不要为了追求与众不同而把你的图标设计得太复杂华丽。让你的图标尽可能地简单到不能再简单 。
• 绘图：使用你习惯的任何工具。从一个以像素为单位的网格中绘制一个图表中的图形和空白。你的网格不一定是偶数的{原文是even，我理解为偶数的意思}
• 自动调整图标大小来创建更大的图像可能会导致比例(元素间的平衡）不对。你可能需要微调粗细或长短来让图标在不同尺寸下视觉效果同样好。
• 对于一套图标，你可能需要调整大小和准线来让它们看起来一样。不同的形状在一套图标中显示会看起来大一点或者小一点。
• 思考一下你的阴影落在图标的哪部分能制造出空间的平衡。
• 当人们开始热衷SVG时，Adobe开始从他们的app中去除SVG，因为之前没人用。
• 对于制作图标，Sketch开始变得足够成熟成为Illustrator的之外的另一个可行的选择。
• Svgo-gui是一个简单通过拖拽优化SVG图像的工具。你可以在你的服务器上通过GZIP-ing压缩SVG。
• 展开：图标字体和SVG用哪个？两者都行！
• 为什么用图标字体？一个小文件，可进入可测量，容易通过CSS布局，支持IE4+
• 为什么用SVG？麻烦少，可使用丰富色彩，也能用css布局。
• Grumpicon是一个能帮助你网站创建SVG的工具。

原文：

An Event Apart: Icon Design Process

by Luke Wroblewski August 26, 2014

At An Event Apart in Chicago IL 2014, Jon Hicks discussed the modern icon design process and shared useful design and development tips for icons. Here's my notes from his talk Icon Design Process:

Icons can be used to support navigation, action, and messaging in Web sites and applications. They can also reinforce status by providing more information than just color.
We had a visual language before we had written language: symbols, hieroglyphics, etc. So symbols were around for a long time before they made their way to computers in 1974.
Today there's lots of royalty free icon sets available for use in sites and apps -so why make your own? Icons sets might not be the right size or style for your usage. You may need more or less icons than exist in a ready-made set. In these cases and more, you may need custom icons.
The icon design process: research, drawing, and deployment (which changes frequently).
Research: a client brief and icon audit can reveal areas of inconsistency, gaps, or duplicates in the icon design of a site. Compile a list of the icons you'll need and what they represent.
How do you go from a word to a finished icon? You have two options: iconic (literal) or symbolic (needs to be learned).
When possible, follow conventions for your icon designs. The Noun Project is a great resource for common visual symbols. But be aware of local considerations. Symbols like piggy banks, owls, and thumbs up may have inappropriate meanings in other cultures.
Truly symbolic icons are more easily understood. The difference between outlined and solid icons is not the determining factor for comprehension.
Don't get too fancy with your icons just to make them different. Make your icon as simple as possible but no simpler.
Drawing: use whatever tools you are comfortable with. Start with a pixel grid to align gaps and weights within an icon. Your gird does not need to be even.
Automatic resizing of icons to create larger images might not provide the right ratio/balance between elements. You may need to tweak line weights or sizes to make things look right at different sizes.
With an icon set, you may need to adjust sizing and alignment to make things appear optically the same. Different shapes will appear bigger/smaller when displayed as part of a set.
Think about where shadows will fall within an icon to create the right balance of space.
Just when people started embracing SVG, Adobe started to remove SVG features from their apps since no one was using them before.
Sketch is starting to mature enough to be a viable alternative to Illustrator for drawing icons.
Svgo-gui is a simple drag and drop tool for optimizing SVG images. You can further compress SVG by GZIP-ing them on your server.
Deployment: Icon fonts or SVG -which one to use? Both can be right for your project.
Why use Icon fonts? One small file, accessible & scalable, easily styled with CSS, no sprites needed, supported in IE4+
Why use SVG? less hassle, support (3 versions back), avoids sprites, can use multiple colours, are still style-able with CSS animations
Grumpicon is a tool that can help you create SVG art for your sites.