个人总结：icon网格使用规范

　　本文非常全面并且很长，建议收藏以备日后所需，看完本文基本就能了解图标的一切，如果没有耐心，可以拉倒底部，查看技巧。
　　我们的追波team链接，文中部分作品来自team成员。https：dribbble。comnullest
　　一、图标的历史和它的目的
　　开始之前，你必须先清楚要了解什么是图标设计以及它的来历，下面我会简要介绍图标设计的历史，了解它在当今世界的重要性，以及未来的发展趋势。
　　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）
　　拟物图标（作者：Atomneo）
　　手绘图标（作者：mike）
　　扁平风（作者：EvgeniyDolgov）
　　三、图标的尺寸和比例
　　在设计图标时的一个主要规则就是：你的图标必须放个合适的方框里，不管它们现实生活中是否是不用的，比如：一个回形针和一个相机。
　　图标必须放到一个特定大小的画板中，确保它们的尺寸在视觉上是一致的，然而这意味着你的图标需要挨着画板的四个边。为了让整个图标集看起来一样，有些图标可以小一点，在接下来的章节中我们将继续讨论这个。
　　之前有新手就一直纠结视觉上怎么统一，这个还是需要自己去多练习，文章末尾我会分享网格，确保在90的图标都是统一的，个别视觉需要自己另行调整。
　　为特定的项目选择特定的尺寸，如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范。不过我们一般移动端是sketch里面用的是2424，在ai里面是用的是2424或4848。
　　如果是为网页项目创建图标，或是练习，可以使用以下这些默认尺1616，2424，3232，4848，6464，9696，128128，256256，512512；
　　备注：如果你是一个初级图标设计师，我建议避免使用较小的尺寸，因为小尺寸更有难度，64或96px的网格是不错的选择。
　　四、使用网格
　　其实，写这篇文章是因为我的一个学弟问了我很多如何绘制图标的问题，我给了他网格，但是他却思想陷入其中，不知道如何视觉统一。其实，在你真正理解网格的时候，你要画很多图标才能理解网格的意义。
　　4。1究竟什么是图标网格？
　　把图标网格当成一种约束，让你的图标集保持规范统一，网格是一个框架，让你的图标保持统一。
　　下面我分享2种常用的网格：
　　链接：https：pan。baidu。coms1fEz33qHOzPxkYAmejU8T5A密码：mutt
　　4。2什么时候使用网格？
　　首先，如果你要创建超过50个图标的图标集时我认为网格很有必要。你要使用同一种风格创建很多图标，网格有助于保持视觉网格统一。
　　另一个情况就是当你要给现有的平台设计图标，而这个平台有自己的图标网格。如给iOS或Android设计图标，你最好使用它们各自的网格，这些网格确保它们在各个平台上保持网格统一，你应该遵循这些规则，确保和平台的风格保持一致。
　　这是一个框架结构，你的图标集将会在这个基础一致。如果将来这些网格会被其他人维护，网格也能派上用场。比如：你要创建一个通用样式，其他人会在这基础上构建其他图标集。网格很像需要遵循的规则，让其他设计师在最开始就明白图标的尺寸。
　　就像上面所说，网格被高估了它的作用，但是在有些场合仍然至关重要。
　　4。3如何使网格？
　　大多数时候我使用最简单的网格，就是上面网盘里面ai文件的网格。
　　如下图：
　　这是我经常使用的网格
　　五、图标视觉统一
　　这个网格背后理念就是把你的图标放到框内，尽量保持图标的在在里面框里面，不要超过第二个框，当然如果为了视觉需要也可以出来。这个就是新手把握不准的地方了，因为如何判断是否需要根据视觉需要，这个他们很难理解。这个需要在你的后面练习中去自己体会，这里我会分析几种常见的视觉需要。
　　国外有一个文章解释过这个原理，原文链接https：link。jianshu。com？thttps：medium。muz。liopticaleffects9fca82b4cd9a
　　上文翻译版本请查看这里，这是解释视觉统一的一些原理，如果还是看不懂，就要多加练习，才能领悟。让你的图标保持统一，那它们就会说话哦。
　　使用统一风格；
　　保持设计语言一致：这个不难解释，就是如果都是圆角，请都保持圆角，如果粗细是2px，请都保持一样的粗细；
　　尺寸很重要，保持大小一致：这个就是上文提到的网格，最好在网格里面画，就能避免90的图标不一致；
　　在一个图标集中使用相同元素：这些说的不是绝对的，比如：这个图标里面有一个元是10px，另一个地方也需要用到类似大小的圆，请尽量用一样大小的圆。不要用9px，这样保持元素一致，才能整体统一；
　　使用同一套配色方案：这点如果你看很多图标就会发现，图标的统一性比识别性更重要，一眼看去，颜色一样，个别的粗细不一样，或许你要花一点时间才能找出来，如果是颜色不一样，一眼就看出来了。
　　六、软件的使用
　　我一般使用的是ai：
　　设置，注意要选像素
　　建立好以后的样子显示隐藏参考线
　　显示隐藏参考线
　　准备工作，建立网格
　　设置参数
　　设置好网格以后，你可能会发现，依然没有网格，显示隐藏网格command“
　　选中所有的辅助线，command2将辅助线锁定住，这样你在操作的时候，就不会选中辅助线了
　　随时预览图标是否视觉上统一，快捷键commandshiftH
　　知识点，画好基础图形的时候，一定要查看属性，保证宽和高，X、Y，没有小数点，要保证是整数。
　　常用的功能将路径变为形状
　　另一个方法将路径变为形状是扩展功能，在稍微复杂一点的里面会用到
　　这个小的知识点，这个可以选择图标对其画板，还是2形状的对其，形状编组快捷键是commandG
　　切换描边和线性的快捷键是shiftX，像上图描述一样，我们可以快速的将线性图标变为面性图标。
　　这里有一个知识点，形状生成器，是一个比布尔运算好用100倍的工具。快捷键是shiftM选中以后，按住option就是减掉形状，不按就是让2个形状合并，记住，用这个工具之前，要全选整个图标。
　　七、图标灵感网站推荐
　　http：www。iconfont。cn
　　http：www。iconlet。com
　　https：icons8。comwebappnewiconsios7
　　http：linea。io
　　部分网站需要自备梯子
　　7。1图标绘画技巧网站
　　http：m。zcool。com。cnarticleZNjgzOTky。html？isappinstalled0
　　八、图标收集整理软件推荐
　　NUCLEO，这个软件的好处是里面有自带的icon，拖到界面就能用
　　eagle，图片和icon收集软件，缺点是不会更新icon，不过收集灵感很好用
　　这么长的文章，我也是码字一天了，基本这些掌握了就可以了。稍加练习，就可以完成很好的图标集。
　　补充：
　　有评论说sketch半像素问题，再次列出解决方案：
　　基本上面2个步骤就能解决了，还有一个方法是通过插件的方法，那个插件我很久没有用了。名字叫：PixelCleanupForSketch