交互系统设计规范 | 交互设计中Icon图标的正确使用方式和图标资源分享
交互设计中使用图标可以帮助我们规范视觉设计风格，更加方便地传达信息，增加信息表达的层次和设计的细节。本文我们将集中讲解一些图标的设计规范，以及分享一些常用的图标资源。
由于所有图标由于其几何特征而具有不同的大小，因此应将它们全部放置在相同大小的画布中。假设我们有三个图标：22x15px，18x20px和10x5px。它们中的每一个都必须位于24x24px的画布中。
不能没有框架就离开图标
始终将图标放在框架中
当你需要导出图标时，需要导出的是整个画布，而不是图标图层。按此顺序执行此操作很重要，开发人员经常在不注意差异的情况下根据实际中心调整图标。
图标根据其实际中心进行调整。缩进：左右10px。但是由于图标形状的特殊性，感觉到它向左移动
该图标已在视觉上进行了调整。缩进：左12像素，右8像素。故意将图标向右移动，以使其看起来像是居中显示
从带有图标的画布中创建组件，这将帮助你使用“Instance”功能将一个图标快速替换为另一个图标。
带有图标的框架中的组件
为了使实例替换正常工作，图标组件必须位于同一画布中。
借助“实例”功能替换图标
图标最好用英文标记。如果你下载的图标还具有英文名称，请不要重命名。这将帮助你快速记住图标的名称，并可以轻松地在获取图标的资源上找到它们。同时，如果你在英语方面遇到困难，也会学到新单词。😄
一个项目可以包含不同大小的图标。例如，对于较小尺寸的项目，标准的24x24px，16x16px或20x20px。我们将主要的24x24px图标存储在“图标24”画板上。其余图标（其大小大于或小于24px）存储在“其他图标”中。
有必要时，我们还可以建立一个“垃圾箱图标”画板，可以帮助存储暂时不用的图标。例如你选择绘制了三个聊天图标，选择了其中一个并将其放置在“图标24”画板上，然后将图标的其他两个版本移动到“垃圾箱图标”画板上。如果你后期决定更改选择，则无需再次寻找它们。
图标画板
为了防止在使用图标选择组件时在“填充”设置中显示不必要的颜色，要从组件中删除白色背景。还需要将颜色应用于图标，以便在以后的工作中更方便地更改图标颜色。
去除背景并应用颜色样式
我们可以用醒目的颜色给自己的图标改颜色，初始的黑色或灰色图标可能会让你忘记重新着色的功能。
鲜艳颜色的图标可以清楚地提醒人们注意内容。在替换图标后，需要按所需样式重新为其着色
使用Constraints调整图层的垂直和水平中心。在Constraints中必须针对带有图标的图层进行调整，而不是针对整个组件进行调整。
设定约束
如果我们有很多图标，以上所有的操作步骤都可以一起选中操作。选择在所有图标组件中带有图标的图层，然后按Enter执行操作。
除图标外，组件框架中不应有任何其他内容。不要忘记从图标框中删除所有隐藏的图层。例如，“材料设计”图标具有白色背景层。
图标具有白色背景层
优化后的图标组件应仅包含一层内容（带有图标的层）。但是可能会有例外，例如，两种颜色的图标。
如果是单色图标，需要确保所有元素都必须合并为一层。合并图层后，别忘了将“ Outline Storke”应用到合并的形状。
将图标合并为一层
这个方法可以有效减轻图标重量，使SVG代码更小和更易于理解，对于开发人员在为图标重新着色时会更加方便。下图是当图标组件具有多个图层并未组合为一层时，图标的SVG代码的样子吗，可以看到该代码非常长，并且针对不同的图标元素具有多达7个“填充”参数。
图标文件大小1318字节
下图是合并所有图层时SVG图标代码的样，该代码小得多，只有2个“填充”参数。一个用于容器的背景，另一个用于图标的颜色。
图标文件大小803字节
导出图标后，可以使用此网站进一步压缩它，压缩后图标代码变得更小，但是图标的外观没有改变。
图标文件大小508字节
下面UXD为同学们整理了一些有用的图标资源，可以用于作品集的制作，添加文末小助手可以直接获取相关资源哦。
Material Design Icons Community
官方的Material Design图标以及该社区在Material Design指南中创建的图标。我认为，这是目前最好的设置，它可以满足设计师90％的需求。
Material Design Icons
安卓系统官方的设计图标，需要注意的是该组图标文件包含一个带有白色背景的额外层。
Boxicons
资源中有一些很好的替代图标的方法。
Feathericon
一套不错的质量大纲图标，图标都是用笔触制成的，它使你可以缩放和更改图标本身的线宽。
IBM图标
由公司本身和社区创建的IBM图标。