1. 图标的历史和它的目的
开始之前，你必须先清楚要了解什么是图标设计以及它的来历，下面我会简要介绍图标设计的历史， 了解它在当今世界的重要性，以及未来的发展趋势。
1.1 什么是图标
如果我们在字典中查“icon”这个词，会发现很多同的含义，从“ 一个神圣的人物”到“计算机命令常用的象征性符号”。
“icon”最简洁准确的定义是，用相似的或者类比的方式来表现它所代表的对象。
1.2 图标设计历史
正如我之前提到的，图标设计的历史可以追溯到史前时代。然而在这个特定的部分我想关注近代图标的发展史，就对图标理解更深刻了 我
这个网站写的图标历史非常的棒：https://historyoficons.com/
1.3 为什么图标很重要
随着人们越来越忙，图标成了我们生活的基本组成部分。它们帮助我们定位，迅速决策，发现要找的东西。
让我们仔细看看为什么图标在今天如此重要，以及在未来将会产生何种影响。图标统一整个世界，无论你说何种语言，一个图标胜过千言万语。当你要在机场导航，在繁华的商场找一个厕所或者只是要在软件中做一个特定的操作，图标都是至关重要的。
1.4 图标传递信息非常迅速
为什么图标如此重要?因为人们的平均注意力比金鱼还短。 是的你没听错，根据美国国家生物中心的调查，人们的平均注意 从2000年的12秒下降到 2013年的8秒，比金鱼的注意力还短1秒。
你能想象金鱼的注意力比人类还长吗？事实就是如此。
在这个充满信息噪音的世界 ，图标是一个救星。你只需要快速浏览一下图标所代表的复杂信息，用这种方法，你可以用剩下的7秒关注真正重要的信息。
无论你是需要在产品的页面上找到某个特定的功能，或是在国外的城市找地铁。图标节省了你很多时间，加快了进度。
随着人们日益繁忙，信息噪声越来越多，越来越全球化。图标在未来会更加重要。
2.图标的基础知识
如果你不了解图标的基础知识想取得进步非常困难。 这章就是在你设计图标之前指导你每一个技术细节。学习图标的类型, 不同风格，不同尺寸之间的差异。 如何使用网格以及让一套图标看起来视觉统 。
2.1 图标的类型
象形符号
最流行的图标类型。象形符号代表了意义相似的对象或者引用了物理世界的对象。 如: 飞机这个象形符号可以表示飞机场。
表意符号
这种图标更复杂点。不代表一个简单的对象，而且还代表抽象的想法。通常表意符号所代表的意思需要学习才能明白。举例来说，一个圆和一条穿过它的线代表“禁止”另 个很好的例子就是+- =这些表意符号。
备注:象形符号和表意符号经常结合在一起表达一个意思， 如“ 文件”这个象形符号结合“+”这个表意符号就是“添加 件”的意思。
2.2 图标的风格
图标被划分为很多不同的风格以及很多风格的变异。下面这些是最常见的:
线性图标 （作者：AnyOldTime ）
面性图标 （作者：AnyOldTime ）
拟物图标（作者：Atom_neo ）
手绘图标（作者：mike ）
扁平风 （作者：Evgeniy Dolgov ）
3. 图标的尺寸和比例
在设计图标时的一个主要规则就是你的图标必须放个合适的方框里。不管它们现实生活中是否是不用的，比如一个回形针和一个相机。 图标必须放到一个特定大小的画板中，确保它们的尺寸在视觉上是一致的。 然而这意味着你的图标需要挨着画板的四个边。 为了让整个图标集看起来一样 ，有些图标可以小一点，在接下来的章节中我们将继续讨论这个。之前有新手就一直纠结视觉上怎么统一，这个还是需要自己去多练习，文章末尾我会分享网格。确保在90%的图标都是统一的。个别视觉需要自己另行调整。
为特定的项目选择特定的尺寸， 如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范。不过我们一般移动端是sketch 里面用的是24x24，在ai里面是用的是24x24或48x48。
如果是为网页项目创建图标，或是练习，可以使用以下这些默认尺 16x16, 24x24,32x32, 48x48, 64x64, 96x96, 128x128,256x256, 512x512;
备注：如果你是一个初级图标设计师， 我建议避免使用较小的尺寸， 因为小尺寸更有难度。 64 或 96 px 的网格是不错的选择。
4.使用网格
其实，写这篇文章是因为我的一个学弟问了我很多如何绘制图标的问题，我给了他网格，但是他却思想陷入其中，不知道如何视觉统一。其实，在你真正理解网格的时候，你要画很多图标才能理解网格的意义。
4.1 究竟什么是图标网格?
把图标网格当成一种约束，让你的图标集保持规范统一。网格是一个框架，让你的图标保持统一。
下面我分享2种常用的网格。
链接: https://pan.baidu.com/s/1fEz33qHOzPxkYAmejU8T5A 密码: mutt
4.2 什么时候使用网格？
首先，如果你要创建超过50个图标的图标集时我认为网格很有必要。 你要使用同一种风格创建很多图标，网格有助于保持视觉网格统一 。另一个情况就是当你要给现有的平台设计图标，而这个平台有自己的图标网格。 如给 iOS或Android 设计图标, 你最好使用它们各自的网格。这些网格确保它们在各个平台上保持网格统一,你应该遵循这些规则，确保和平台的风格保持一致。
这是一个框架结构，你的图标集将会在这个基础一致。如果将来这些网格会被其他人维护，网格也能派上用场。比如你要创建一个通用样式，其他人会在这基础上构建其他图标集。网格很像需要遵循的规则，让其他设计师在最开始就明白图标的尺寸。
就像上面所说，网格被高估了它的作用，但是在有些场合仍然至关重要。
4.3 如何使网格?
大多数时候我使用最简单的网格，就是上面网盘里面ai 文件的网格。如下图：
这是我经常使用的网格
5. 图标视觉统一
这个网格背后理念就是把你的图标放到框内。尽量保持图标的在在里面框里面，不要超过第二个框，当然如果为了视觉需要也可以出来。这个就是新手把握不准的地方了。因为如何判断是否需要根据视觉需要，这个他们很难理解。这个需要在你的后面练习中去自己体会，这里我会分析几种常见的视觉需要。
国外有一个文章解释过这个原理，原文链接https://link.jianshu.com/?t=https://medium.muz.li/optical-effects-9fca82b4cd9a
上文翻译版本请查看这里，这是解释视觉统一的一些原理。如果还是看不懂，就要多加练习。才能领悟。让你的图标保持统一，那它们就会说话哦。
1 使用统一风格
2 保持设计语言一致
这个不难解释，就是如果都是圆角，请都保持圆角，如果粗细是2px，请都保持一样的粗细。
3. 尺寸很重要，保持大小一致
这个就是上文提到的网格，最好在网格里面画，就能避免90%的图标不一致。
4. 在一个图标集中使用相同元素
这些说的不是绝对的，比如这个图标里面有一个元是10px，另一个地方也需要用到类似大小的圆，请尽量用一样大小的圆。不要用9px，这样保持元素一致。才能整体统一。
5. 使用同一套配色方案
这点如果你看很多图标就会发现，图标的统一性比识别性更重要，一眼看去，颜色一样，个别的粗细不一样，或许你要花一点时间才能找出来，如果是颜色不一样，一眼就看出来了。
6. 软件的使用
我一般使用的是ai
设置，注意要选像素
建立好以后的样子显示/隐藏参考线command+；
显示/隐藏参考线command+；
准备工作，建立网格
设置参数
设置好网格以后，你可能会发现，依然没有网格，显示/隐藏网格 command + “
设置好网格以后，你可能会发现，依然没有网格，显示/隐藏网格 command + “
选中所有的辅助线，command+2 将辅助线锁定住，这样你在操作的时候，就不会选中辅助线了
选中所有的辅助线，command+2 将辅助线锁定住，这样你在操作的时候，就不会选中辅助线了
随时预览图标是否视觉上统一，快捷键 command +shift + H
随时预览图标是否视觉上统一，快捷键 command +shift + H
知识点，画好基础图形的时候，一定要查看，属性，保证宽和高，X,Y,没有小数点，要保证是整数
知识点，画好基础图形的时候，一定要查看，属性，保证宽和高，X,Y,没有小数点，要保证是整数
常用的功能将路径变为形状
另一个方法将路径变为形状是扩展功能，在稍微复杂一点的里面会用到
另一个方法将路径变为形状是扩展功能，在稍微复杂一点的里面会用到
这个小的知识点，这个可以选择图标对其画板，还是2形状的对其，形状编组快捷键是command +G
切换描边和线性的快捷键是 shift + X，像上图描述一样，我们可以快速的将线性图标变为面性图标
这里有一个知识点
这里有一个知识点，形状生成器，是一个比布尔运算好用100倍的工具。快捷键是shift + M 选中以后，按住option 就是减掉形状，不按就是让2个形状合并，记住，用这个工具之前，要全选整个图标。
7. 图标灵感网站推荐
https://icons8.com/web-app/new-icons/ios7
部分网站需要自备梯子
7.1 图标绘画技巧网站
http://m.zcool.com.cn/article/ZNjgzOTky.html?from=groupmessage&isappinstalled=0
8. 图标收集整理软件推荐
NUCLEO，这个软件的好处是里面有自带的icon，拖到界面就能用
eagle，图片和icon收集软件，缺点是不会更新icon，不过收集灵感很好用
这么长的文章，我也是码字一天了，基本这些掌握了就可以了。稍加练习，就可以完成很好的图标集。
备注：我会定期把不错的教程链接贴进来，如果你们觉得有很好的网站，也可以在评论里面添加，争取一文搞定icon。
希望你也受用，
祝开心！
有评论说sketch半像素问题，再次列出解决方案：
第一步
第二步
基本上面2个步骤就能解决了，还有一个方法是通过插件的方法，那个插件我很久没有用了。名字叫：Pixel Cleanup For Sketch
作者：cherri二哈
