从事设计好多年，是否还有好多与图标相关的问题困惑着你。诸如：我们如何去衡量一个图标的优劣？画一个图标很简单，而且勾画一组图标时不晓得该怎么平衡，或是公司让我搭建图标体系，不晓得该打算哪些？…
下边是我搜集到与图标相关的问题，假如你也有相同的苦恼，这么接出来我会通过将拆解国外外的大厂的图标体系为你解答，内含超多案例拆解！！
1.图标概述
在解答问题之前，我们先来瞧瞧。图标的起源和发展是如何的，以及为何须要在界面上降低图标，它真的重要吗？
2.图标定义
图标是哪些呢？
从广义上来看具有指代意义的图形符号都称作图标，图标具有高度浓缩、快捷传达信息且易于记忆的特点。应用的范围也很广，软硬件/网页/社交场所/公共场合无所不在。诸如：男女公厕的标示/各类交通标志（严禁停车/调头）都是我们常见的标示。
从狭义上来看特指计算机中的标志符号，例如数据标识/命令选择/状态指示等，都是通过对现实世界中事物的概括和意象，来引导人们在计算机中进行操作。这样说其实比较具象，举个：桌面上的垃圾桶，虽然模拟的就是现实中垃圾桶的使用方法，我们可以通过把应用扔到垃圾桶的形式对应用进行删掉。
对现实意象的良好抒发，有利于我们快速辨识，这一点彰显在设计的好多方面。从某种角度看，就是遵照用户原有的认知习惯。
3.图标起源
“Glyph”一词是源自于排版领域，它源自于西班牙语，含意为“雕刻”。是一些约定俗成的符号或则字符，所以最早的字符体系是包含数字，字母或则二者与图形的结合。在现代的数字设计中，人们逐渐将文字，数字和图形（图标）区分开了。所以在设计中我们不光有图标规范，就会有一套文字的规范。
4.图标的重要性
古时的字符主要是为了表意，这么现今每位国家都有了语言和文字，为何我们还须要图标呢？由于图标也是很重要，且不可取代的，从三个角度来理解：
（1）全球通用
图标可以作为国际通用语言，比如超市导视中收银台图标、出口图标、卫生间图标等，又或则是日常手机里使用的这些App图标，如陌陌、电话、短信等。这种都早已在国际上达成了共识，所以虽然在美国的超市走失，我们也可以通过图标找到公厕的定位。
（2）节省空间
图标比文字更节约空间，倘若能用一个图标清楚抒发涵义的时侯，就不须要用文字，例如用一个“叉”代表“关闭，“向左的箭头”代表“返回”。
（3）快速定位
因为图形化的内容比乏味的文字更能吸引人的视线，图标可以用它奇特的形状和颜色让人快速定位。因而当我们须要对个别信息进行突出时，可以使用图标进行辅助。
5.图标的组成
从整个图标体系来看，图标可以分为八个部份，分别是：
下边我将对每位部份元素进行拆解，帮助你们更好的理解。并剖析每位部份须要注意的细节和可能会碰到的问题。
一、图标栅格1.栅格的组成
栅格的作用有点像书法时用到的参考线。他可以帮助我们判定不同形状图标的大小，保持图标的一致性。
假如将栅格继续拆解，会分为以下5个组成部份：
网格安全区域：可以勾画图标的区域流血位：边沿留白，避免切图时裁剪到图标余弦线：旋转图标的参考线关键形状：囊括了常用的基本几何形，勾画时可以以这种几何形作为基础形。在勾画关键形状的时侯须要考虑不同形状的视觉重量，这儿我们可以直接参考（抄）大厂的规范。
2.案例拆解
MD是以24象素栅格，作为栅格勾画的模版。
流血位为2象素，避免图标被裁剪。
有四个辅助形状（规格如图），包括正交线。MD的栅格规范，是我对比多个规范后包含内容较全，且通用的，朋友们可以根据这个规格勾画，栅格的勾画建议使用0.1/0.2象素，不会影响使用时对图标的辨识。
相同直径的圆会比正圆形看上去小，所以在勾画栅格的时侯就要对稍微对方形进行放大，使她们对视觉面积保持一致。
3.多案例对比
在督查时，我们参考了MD/IBM/Ant/Shopee，接出来我们瞧瞧她们之间的优缺。
比较相像的点就是，她们还会最大的规格作为勾画栅格的基本规格，其他规格图标可以在此基础上缩放。
流血位通常为2px，关键形状通常都包括一个纵向的圆形，一个横向的圆形，一个矩形，一个正圆形，4个。在此基础上Ant降低了三角形。MD/shopee/Ant降低了一些较小的矩形，这种较小形状貌似是可以辅助我们勾画极简图标（例如箭头）。
不晓得是否有朋友存在疑问，同一套图标体系下，莫非箭头如此简单的图标也要做24px如此大吗？虽然不是的，栅格中就解决了这个问题。我们可以借助较小形状，只需保证外边框都是24px就好。具体怎么使用会在接出来的问题中解答。
4.栅格小结
5.使用栅格时遇见的问题
提问1：“如果完全依照栅格来画，我觉得视觉重量不一致”。
回答:
出现这个问题，可能是因为我们须要一个正圆形的图标和长圆形的图标置于一起，会倍感不和谐。当图标以组的方式存在，为了追求图标与图标之间视觉平衡。可以将图标的外形状适当进行统一（但也要保证图标的表意）。假如希望图标的适配度更高，可以在画的时侯秘方一些。如上图Twitter和IG的做法。
回答:
除此之外，在勾画图标库时建议让图标符合栅格。假如图标本身的含意是偏瘦削的,就让它符合网格.假如图标本身该突出的就打破网格。
回答:
假如图标本身就非常修长，该如何适配栅格呢？不能强行拉宽，会使图标变型。可以将图标旋转45度，这样既能符合图标本身的含意，也能使图标愈加细腻。
提问2：“绘制多个图标时，怎样保证复杂度的统一？”
回答:
当复杂度可控,由简至繁排列出不同复杂度的图标来对比，之后从中选购出复杂度相像的图标作为一组。
回答:
当复杂程度不可控-极复杂图标，不一定参考单个关键形状来画，可以综合参考多个形状，但最好不要超出安全区。
回答:
当复杂程度不可控-极简图标：参考较小关键形状画/根据设计系统的最小基数的倍数来画。
设计基数是设计体系中的最小单位，通常为2/4px。
回答:
画异型图标的时侯，可以利用不同的关键形状线作为参考，做到尽量把空间撑满。如右图中，风车底部和左右两侧都贴近着关键形状。
回答：
Shopify建议使用光学对齐而不是数学对齐，当我们画这个拍照机时，应当先基于关键形状画。再在底部降低闪光灯的元素，而不是把整个单反图标居中。
同理，Shopify在勾画这个设置图标时，也考虑到了视觉居中的诱因。左上面的面积偏大，右下面的面积偏小。所以在对齐时也并没有使用数学对齐，而是将图标稍稍往左下联通（具体联通多少象素，还是靠设计师自己来判定啦~）
因为Shopify使用的是面性图标，所以一旦有视觉上的偏斜，图标之间的差别会很大，平衡容易被打破。所以在对齐方法上尤为注意，假如你对视觉重量还不够了解，可以借此作为学习的资料。
回答:
尽量使用几何形进行切割，若果是带圆弧的图标，可以先用直线路径描绘形状再加圆角的方式。
二、图标规格
当你开始一套系统图标的设计前，不仅打算勾画图标的栅格模板，还需提早规划好一套图标可能包含的规格，以应用于界面设计中。
须要注意同样涵义的图标在不同大小下，也可能会有不同的诠释方式。例如48象素的复杂图标，缩小到12象素肯定会无法辨识。同理12象素的图标放大到48象素又会变得瘦弱，不够细腻。
1.案例拆解
（1）IBM·CarbonDesign
IBM的图标体系中包含以上四个规格（16/20/24/32），其中最大规格32px为勾画规格，其他规格由32px等差缩放的来。这么这种规格在前期是怎样拟定的呢？她们之间又有哪些关系呢？
我对不同规格右图标的属性进行列举，可以发觉不仅图标规格，图标的腰线粗细，圆角大小，甚至宽度都是成比列的。可以得出一个推论：IBM的图标应当是先勾画最大规格，之后定义好其他图标规格就可以进行缩放了。
在使用这些方法时，我们须要注意图标的圆角和遮罩尽量不要出现两位小数点以后的数字，最好是整数或则点五整数。
（2）字节·IconPark
字节这一套图标包括12/24/36/48四个规格，勾画规格为48也是最大规格。
罗列举字节各个规格的图标属性，会发觉全都是整数。所以当我们在搭建图体系的时侯也可以参考，并且急剧而至形成的影响就是Iconpark与其他图标库相比，相同大小的图标遮罩会更粗，圆角也更大。
（3）阿里·AntDesign
阿里的图标规范中图标的勾画规格为1024象素，单个条纹为64px。可等差缩放至12/16/20/24/32四个规格。
2.图标规格小结
设定一套图标体系时，图标规格通常为4的倍数（常见的有12/16/20/24/32，具体使用多大的图标也须要依照产品风格来定义）。先勾画最大规格图标之后对其进行缩放即可。
为何使12/16/18/24px的规格呢？由于我们的图标好多时侯须要和文字搭配使用，无论在联通端还是PC端。文字通常也是使用这样的字号，最小的文字通常为12px，所以图标也遵守了同样的规律。
其次一个比较显著的特点是：联通端的图标规格会比PC端更多，这儿也因为联通端须要用到图标的场景更多更复杂。
三、图标遮罩
在理解遮罩的时侯，我们也可以将它拆解为更小的元素。影响遮罩款式的诱因有：
路径的类型（开放路径/封闭路径），粗细，对齐的形式（向内/居中/向外），端点，联接点。
路径类型和粗细都挺好理解，接出来我会详尽讲讲端点，联接点和对齐方法会怎样影响图标知性。
1.遮罩的组成
端点只有在开放式路径中才能出现，端点分为三种None/Round/Square。也就是没有端点，圆角端点，方角端点。
圆角端点会使图标风格愈发饱满甜美，而当希望图标风格粗犷建议使用无端点（也就是方角），这样可以愈发精确的控制端点位置。
2.拐角点
这个属性你们平常可能都没有注意到，这么显然他定义的是路径拐角的式样，在Figma中称之为“Join”。
联接点也分为三种分别斜接/斜切/圆角。
拐角点中的圆角虽然可以作为一种圆角类型，区别在于图标圆角是基于路径的圆角，而round是基于路径联接点的圆角。通过设置round我们可能获得一种精巧的小圆角。
3.对齐方法
首先我们晓得图标可以界定为填充图标和线性图标，所以在遮罩这个属性下姑且不讨论填充图标。
线性图标遮罩的对齐方法可以分为向内遮罩，居中蒙版和向外遮罩。从右图我们就可以发觉同样的路径用不同的遮罩形式，风格的差别是很大的。
所有的遮罩类型都仅适用于闭合路径，由于在大多数的软件里（AI/Sketch/Figma)开发式路径只支持居中遮罩。
这么不同的遮罩类型有哪些差别和好坏呢，接出来我会带你们继续剖析。
（1）内遮罩
优势：当须要转变为填充图标时，可以保持图标的一致性。路径贴合网格，所以图标本身可以保持整数。
劣势：封闭路径和开发路径难以保持一致，可能须要我们自动调整。
（2）居中遮罩
优势：可以在诸多软件中保持封闭与开发路径的一致性，同时支持联接点（Jion）的设置。
劣势：不能保证象素完美，由于遮罩长度是往路径两侧扩充。转曲后图标本身可能出现多位小数点。
尽管象素完美仍然是设计师们在追求的，在帧率越来越高的明天，也未必需要再去追求绝对地象素对齐了。这点也越来越多的出现在美国大厂的文章中，如右图IBM的小胡蜂就使用了1.75的行距。
（3）外遮罩
优势：因为外遮罩是在路径向外扩充的缘故，这些遮罩方法会放大路径的圆角，使其愈发饱满。
例如像右图这些臂章图标就不适宜使用内遮罩，线段之间挤压重叠会使图标出现难看的尖角。
劣势：使用外遮罩会扩大图标本身的规格和圆角大小，须要设计师在勾画路径的时侯提早预判。所以，总的来说会难度更高。
（4）遮罩类型小结
专业的设计团队会使用内遮罩，并转曲。用处是可以保证图标本身为整数，而且因为开放路径不能使用内遮罩，所以可能须要设计师自动调整因为遮罩类型不一致形成的差别。
然而若果没有专门维护图标组件的设计部门来说，使用居中遮罩可能是成本更低的方法。
4.案例拆解
（1）IBM·CarbonDesign
IBM的图标基于32px的等差缩放至24/20/16px不同规格，缩放时遮罩粗细也急剧等差缩放。
（2）海参·ShopeeDesign
几个相邻大小的图标共用一个遮罩粗度，用处是可以保持遮罩整数。劣势也显而易见，粗细的不等差，可能使图标风格难以保持一致。
（3）遮罩粗细小结
5.在选择遮罩时遇见的问题
提问1:“复杂图标假如用规范里的遮罩粗细，变得很拥挤”。
回答：当图标过分复杂，我们可以通过两个方法
内层使用规范粗细，外层使用较细地遮罩。诸如Ant的图标，会定义不同的粗细度。当她们在勾画1024px的图标时，就可以选择不同粗细。IBM的解法，为了保证图标的可读性，使用其他规格的遮罩粗细，也可以尽量保持一致性。
提问2:“如果图标内外两个形状，上面的图标太小，用同样的遮罩，图标很难辨识”。
回答：特殊情况，内部的形状过小可以采用前面同样的方式。或则直接将较小的图标转为填充（图例来源IBM）。
四、图标宽度1.宽度的类型
宽度出现在好多地方，有时侯我们可能容易会忽视它。下边列出了几种常见的宽度：
两个形状之间的宽度，两条边之间的宽度，以及两个点之间的宽度。
2.案例拆解
（1）Google·MaterialDesign
MD的规范里定义了最小的宽度是1.5px。
（2）字节·IconPark
字节的图标库建议宽度不得大于遮罩粗细，极端情况可以使用遮罩1/2的间距。同时建议使用宽度都是用奇数。
所有的宽度都应当遵守：显著分开或确切相连，不要似连非连。
3.宽度小结
（1）当腰线过分密集的时侯就要考虑负形空间了，扩大的方法有3种：
简化图标形状，降低腰线使图标的线段之间相连（可以节约一定的空间），或则分离如必要，也可以让图标的内部形状使用更细一级的遮罩
“负形空间”是哪些意思，就是一个网格勾画了图标本身以后，剩余的留白称作负形空间。留白多呢变得图标不够细腻，留白少呢又变得图标拥挤无法辨识。
五、图标圆角1.圆角的组成
为了便捷你们理解，圆角我也拆分成多种常见的类型：无圆角/正形圆角/负形圆角。
2.案例拆解
（1）IBM·CarbonDesign
规范中描述可以使用2px/4px/6px的圆角大小，且规定必要时可以使用2的倍数的，使图标能勾画出对象的真实式样。
（2）Google·MaterialDesign
MD中定义0px/2px/3px/4px作为常用的圆角大小。
同是MD也提及为了假如圆角会影响对真实世界中物体外形的辨识时，我们就不应当倒角。这是各大厂设计体系中一致在指出的准则。例如下边纸张折叠时，折角处就不可能会出现圆角，这时我们就应当除去圆角。
（3）字节·IconPark
Iconpark公开的勾画规范中提及，圆角使用的是1px/2px/3px。而经过实际对图标库中的图标进行检测，发觉1px的圆角使用的虽然是我们上面说到的”round”转角联接形式。
（4）海参·ShopeeDesign
与大部份规范类似，shopee也使用了2的倍数作为图标圆角。并且范围给的更川一些，缘由是海参的图标规格相较与其他平台也会更多一些。
3.圆角小结图标勾画的关键是我们选择的不论是图标的形状也好，圆角大小也好，都是基于物体本身的含意或是空间逻辑。在圆角大小的选择上，大部份公司都是采用了2的倍数如2/4/6px。除此之外，假如想作出差别性，也有选择1/2/3px圆角的规范体系，或则是使用“round”的拐角联接形式。4.在使用圆角时遇见的问题
提问1:“规范中有多个圆角，我该如何选择呢？”
回答：首先还是回到我们勾画图标的第一原则“图标元素的选择应当贴合物体本身的含意”。这么下边可以看见IBM体系中的小车辆/公汽车/地铁火车。同样是车，而且圆角按照汽车的实际用途来定义的（例如我们经常搭乘的铁路，因为提高速率，他的车身外型整体偏圆）。
提问2:“复杂的图标造型中包含内外多个形状，圆角该怎么选择呢？”
回答：通常来说内部形状的圆角不会小于外形状的圆角，这儿虽然也是现实中的透视关系保持一致的。如右图袋子的边沿就遵守了这一规律。
六、图标角度1.角度的类型
角度不光可以应用到图标上，同时可以应用在路径上或是路径之间的倾角上。
2.案例拆解
（1）IBM·CarbonDesign
首先将45度切分为3等份，之后以15度为最小基数来切分360度。
下边几个事例，可以帮助我们更好地理解角度在IBM图标体系中的应用。
（2）阿里·AntDesign
Ant的角度非常非常，在官方网站中提到她们的图标是参考了英式战斗机的角度，所以图标给人以锐利而稳重的体味。同时可选择的角度有20/38/76度。
在实际案例中的运用。
3.角度小结常见的角度是基于15度的倍数，15/30/45度。同时使用45度可以较好的降低图标腰线出现锯齿的可能，假如想塑造与众不同的图标风格，角度或许是可以尝试的点。角度出现的形式好多，例如线段之间的拐角，图形上的缺口。我们须要发觉它，并使其符合规律。七、图标透视1.透视的组成
透视可以分为：平视/侧视/俯瞰/俯视等等，在图标体系中我们通常使用平视为主,由于它的结构愈发简单，虽然在小规格也能有较好地辨识度。
透视选择的关键，还是须要保证一套图标中的透视角度一致性。
2.透视小结常见的图标视图有：平视/俯瞰/近视等等最重要的就是保持整套图标的视图一致性八、图标颜色
图标颜色也分为两种：一种是在蓝色（蓝色）背景下，一种是在白色背景下。
1.案例拆解
（1）Google·MaterialDesign
黑色背景：87%的红色用于须要专注的图标，54%用于不须要非常关注的图标，38%用于不可点的图标。
黑色背景：100%的红色用于须要专注的图标，70%用于不须要非常关注的图标，50%用于不可点的图标。
2.多案例对比
以及不同规范中对于颜色的定义也不太一样，通常会使用最深的颜色作为图标库中的勾画颜色。也是便捷我们在使用的时侯通过调整不透明度，来满足不同的场景。
3.颜色小结勾画图标库的时侯用同一个主色，而不是实际使用时的颜色在使用时注意深浅背景上的图标颜色也是有差别的，白色背景下的不透明度更高。九、结语
最后为你们整理了这次参考图标规范的网站，便捷想要深入研究的男子伴进行查看。以及我把这种组件库的Figma图标源文件也整理到一起了，你们可以通过临摹参考的形式不断提升自己把控图标的能力。
IBM·CarbonDesign：
字节·Iconpark:
Google·MaterialDesign:#design-principles
Shopify:
图标库合辑：%E5%9B%BE%E6%A0%87%E8%B5%84%E6%96%99%E6%94%B6%E9%9B%86?node-id=0%3A1
本文由郝小七指导
