本文非常全面并且很长，建议收藏以备日后所需，看完本文基本就能了解图标的一切，如果没有耐心，可以拉倒底部，查看技巧。

我们的追波team链接，文中部分作品来自team成员。https://dribbble.com/nullest

一、图标的历史和它的目的

开始之前，你必须先清楚要了解什么是图标设计以及它的来历，下面我会简要介绍图标设计的历史， 了解它在当今世界的重要性，以及未来的发展趋势。

1.1 什么是图标

如果我们在字典中查“icon”这个词，会发现很多同的含义，从“ 一个神圣的人物”到“计算机命令常用的象征性符号”。

“icon”最简洁准确的定义是，用相似的或者类比的方式来表现它所代表的对象。

1.2 图标设计历史

正如我之前提到的，图标设计的历史可以追溯到史前时代。然而在这个特定的部分我想关注近代图标的发展史，就对图标理解更深刻了，我这个网站写的图标历史非常的棒：https://historyoficons.com/

1.3 为什么图标很重要

随着人们越来越忙，图标成了我们生活的基本组成部分。它们帮助我们定位、迅速决策、发现要找的东西。

让我们仔细看看为什么图标在今天如此重要，以及在未来将会产生何种影响。图标统一整个世界，无论你说何种语言，一个图标胜过千言万语。当你要在机场导航，在繁华的商场找一个厕所或者只是要在软件中做一个特定的操作，图标都是至关重要的。

1.4 图标传递信息非常迅速

为什么图标如此重要？

因为人们的平均注意力比金鱼还短。，是的你没听错，根据美国国家生物中心的调查：

人们的平均注意 从2000年的12秒下降到 2013年的8秒，比金鱼的注意力还短1秒。

你能想象金鱼的注意力比人类还长吗？事实就是如此。

在这个充满信息噪音的世界 ，图标是一个救星。你只需要快速浏览一下图标所代表的复杂信息，用这种方法，你可以用剩下的7秒关注真正重要的信息。无论你是需要在产品的页面上找到某个特定的功能，或是在国外的城市找地铁。图标节省了你很多时间，加快了进度。

随着人们日益繁忙，信息噪声越来越多，越来越全球化，图标在未来会更加重要。

二、图标的基础知识

如果你不了解图标的基础知识想取得进步非常困难， 这章就是在你设计图标之前指导你每一个技术细节。学习图标的类型、不同风格、不同尺寸之间的差异， 如何使用网格以及让一套图标看起来视觉统 。

2.1 图标的类型

象形符号：最流行的图标类型，象形符号代表了意义相似的对象，或者引用了物理世界的对象。 如：飞机这个象形符号可以表示飞机场。

表意符号：这种图标更复杂点，不代表一个简单的对象，而且还代表抽象的想法，通常表意符号所代表的意思需要学习才能明白。举例来说：一个圆和一条穿过它的线代表“禁止”；另一个很好的例子就是：+- =这些表意符号。

备注：象形符号和表意符号经常结合在一起表达一个意思， 如：“ 文件”这个象形符号结合“+”这个表意符号就是“添加件”的意思。

2.2 图标的风格

图标被划分为很多不同的风格以及很多风格的变异。

下面这些是最常见的:

线性图标 （作者：AnyOldTime ）

面性图标 （作者：AnyOldTime ）

拟物图标（作者：Atom_neo ）

手绘图标（作者：mike ）

扁平风 （作者：Evgeniy Dolgov ）

三、图标的尺寸和比例

在设计图标时的一个主要规则就是：你的图标必须放个合适的方框里，不管它们现实生活中是否是不用的，比如：一个回形针和一个相机。

图标必须放到一个特定大小的画板中，确保它们的尺寸在视觉上是一致的，然而这意味着你的图标需要挨着画板的四个边。为了让整个图标集看起来一样，有些图标可以小一点，在接下来的章节中我们将继续讨论这个。

之前有新手就一直纠结视觉上怎么统一，这个还是需要自己去多练习，文章末尾我会分享网格，确保在90%的图标都是统一的，个别视觉需要自己另行调整。

为特定的项目选择特定的尺寸， 如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范。不过我们一般移动端是sketch 里面用的是24×24，在ai里面是用的是24×24或48×48。

如果是为网页项目创建图标，或是练习，可以使用以下这些默认尺 16×16, 24×24,32×32, 48×48, 64×64, 96×96, 128×128,256×256, 512×512;

备注：如果你是一个初级图标设计师，我建议避免使用较小的尺寸，因为小尺寸更有难度，64 或 96 px 的网格是不错的选择。

四、使用网格

其实，写这篇文章是因为我的一个学弟问了我很多如何绘制图标的问题，我给了他网格，但是他却思想陷入其中，不知道如何视觉统一。其实，在你真正理解网格的时候，你要画很多图标才能理解网格的意义。

4.1 究竟什么是图标网格?

把图标网格当成一种约束，让你的图标集保持规范统一，网格是一个框架，让你的图标保持统一。

下面我分享2种常用的网格：

链接: https://pan.baidu.com/s/1fEz33qHOzPxkYAmejU8T5A 密码: mutt

4.2 什么时候使用网格？

首先，如果你要创建超过50个图标的图标集时我认为网格很有必要。 你要使用同一种风格创建很多图标，网格有助于保持视觉网格统一 。

另一个情况就是当你要给现有的平台设计图标，而这个平台有自己的图标网格。 如给 iOS或Android 设计图标，你最好使用它们各自的网格，这些网格确保它们在各个平台上保持网格统一，你应该遵循这些规则，确保和平台的风格保持一致。

这是一个框架结构，你的图标集将会在这个基础一致。如果将来这些网格会被其他人维护，网格也能派上用场。比如：你要创建一个通用样式，其他人会在这基础上构建其他图标集。网格很像需要遵循的规则，让其他设计师在最开始就明白图标的尺寸。

就像上面所说，网格被高估了它的作用，但是在有些场合仍然至关重要。

4.3 如何使网格?

大多数时候我使用最简单的网格，就是上面网盘里面ai 文件的网格。

如下图：

这是我经常使用的网格

五、图标视觉统一

这个网格背后理念就是把你的图标放到框内，尽量保持图标的在在里面框里面，不要超过第二个框，当然如果为了视觉需要也可以出来。这个就是新手把握不准的地方了，因为如何判断是否需要根据视觉需要，这个他们很难理解。这个需要在你的后面练习中去自己体会，这里我会分析几种常见的视觉需要。

国外有一个文章解释过这个原理，原文链接https://link.jianshu.com/?t=https://medium.muz.li/optical-effects-9fca82b4cd9a

上文翻译版本请查看这里，这是解释视觉统一的一些原理，如果还是看不懂，就要多加练习，才能领悟。让你的图标保持统一，那它们就会说话哦。

1. 使用统一风格；
2. 保持设计语言一致：这个不难解释，就是如果都是圆角，请都保持圆角，如果粗细是2px，请都保持一样的粗细；
3. 尺寸很重要，保持大小一致：这个就是上文提到的网格，最好在网格里面画，就能避免90%的图标不一致；
4. 在一个图标集中使用相同元素：这些说的不是绝对的，比如：这个图标里面有一个元是10px，另一个地方也需要用到类似大小的圆，请尽量用一样大小的圆。不要用9px，这样保持元素一致，才能整体统一；
5. 使用同一套配色方案：这点如果你看很多图标就会发现，图标的统一性比识别性更重要，一眼看去，颜色一样，个别的粗细不一样，或许你要花一点时间才能找出来，如果是颜色不一样，一眼就看出来了。

六、软件的使用

我一般使用的是ai ：

设置，注意要选像素

建立好以后的样子显示/隐藏参考线command+；

显示/隐藏参考线command+；

准备工作，建立网格

设置参数

设置好网格以后，你可能会发现，依然没有网格，显示/隐藏网格 command + “

选中所有的辅助线，command+2 将辅助线锁定住，这样你在操作的时候，就不会选中辅助线了

随时预览图标是否视觉上统一，快捷键 command +shift + H

知识点，画好基础图形的时候，一定要查看属性，保证宽和高，X、Y，没有小数点，要保证是整数。

常用的功能将路径变为形状

另一个方法将路径变为形状是扩展功能，在稍微复杂一点的里面会用到

这个小的知识点，这个可以选择图标对其画板，还是2形状的对其，形状编组快捷键是command +G

切换描边和线性的快捷键是 shift + X，像上图描述一样，我们可以快速的将线性图标变为面性图标。

这里有一个知识点，形状生成器，是一个比布尔运算好用100倍的工具。快捷键是shift + M 选中以后，按住option 就是减掉形状，不按就是让2个形状合并，记住，用这个工具之前，要全选整个图标。

七、图标灵感网站推荐

http://www.iconfont.cn/

http://www.iconlet.com/

https://icons8.com/web-app/new-icons/ios7

http://linea.io/

部分网站需要自备梯子

7.1 图标绘画技巧网站

http://m.zcool.com.cn/article/ZNjgzOTky.html?from=groupmessage&isappinstalled=0

八、图标收集整理软件推荐

NUCLEO，这个软件的好处是里面有自带的icon，拖到界面就能用

eagle，图片和icon收集软件，缺点是不会更新icon，不过收集灵感很好用

这么长的文章，我也是码字一天了，基本这些掌握了就可以了。稍加练习，就可以完成很好的图标集。

补充：

有评论说sketch半像素问题，再次列出解决方案：

基本上面2个步骤就能解决了，还有一个方法是通过插件的方法，那个插件我很久没有用了。名字叫：Pixel Cleanup For Sketch

本文由 @二哈 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议