嗨，我叫 Andrey Nasonov，我是Elonsoft的 UX / UI 设计师，该公司创建软件产品并帮助来自不同行业的企业扩展其数字化转型。在本系列文章中，我将分享我在构建设计系统方面的经验，并提出一些使各种设计过程自动化的想法。在第一篇文章中，我们将讨论一个非常简单但重要的主题 - 图标。我们走吧！
由于所有图标由于其几何特征而具有不同的大小，因此应将它们全部放置在相同大小的框架中。
假设我们有三个图标：22x15px，18x20px 和 10x5px。它们中的每一个都必须位于 24x24px 的帧中。
您不能没有框架就离开图标
始终将图标放在框架中
您还需要在框架中导出图标。
重要的！需要导出的是框架中的图标，而不是图标层。之后，将图标放置在 24x24px 的容器中。
此外，按此顺序执行此操作很重要，因为设计人员经常根据视觉中心而不是根据实际中心从框架内部调整图标。开发人员经常在不注意差异的情况下根据实际中心调整图标。
图标根据其实际中心进行调整。缩进：左右 10px。但是由于图标形状的特殊性，感觉到它向左移动
该图标已在视觉上进行了调整。缩进：左 12 像素，右 8 像素。故意将图标向右移动，以使其看起来像是居中显示
从带有图标的框架中创建组件。
带有图标的框架中的组件
这将帮助您使用 “实例” 功能将一个图标快速替换为另一个图标。
为了使实例替换正常工作，图标组件必须位于同一框架中（稍后再介绍）。
借助 “实例” 功能替换图标
图标最好用英文标记。如果您下载了一个图标，并且它也有一个英文名称，请不要重命名它。
这样，您将快速记住图标的名称，并可以轻松地在获取图标的资源上找到它们。
同时，像我一样，如果您在英语方面遇到困难，也会学到新单词。😄
一个项目可以包含不同大小的图标。例如，对于较小尺寸的项目，标准的 24x24px，16x16px 或 20x20px。
我们将主要的 24x24px 图标存储在 “图标 24” 画板上。其余图标（其大小大于或小于 24px）存储在 “其他图标” 中。通常没有那么多。
“垃圾箱图标”画板对于在其中存储不同版本的图标是必需的。例如，您选择或绘制了三个聊天图标，选择了其中一个并将其放置在 “图标 24” 画板上，然后将图标的其他两个版本移动到 “垃圾箱图标” 画板上。如果您决定更改选择，则无需再次寻找它们。
图标画板
为了防止在使用图标选择组件时在 “填充” 设置中显示不必要的颜色，即使已禁用该组件，也要从组件中删除白色背景。
我还建议立即将颜色样式应用于图标，以便在以后的工作中更方便地更改图标颜色。
去除背景并应用颜色样式
需要使用颜色样式，以便在通过实例进行替换时，不要忘记将图标重新绘制为所需的颜色。
我建议您选择一种在项目中很少使用的醒目的颜色。将图标保留为黑色或灰色可能会使您忘记为其重新着色。我选择了棕色。
图标的鲜艳颜色清楚地表明，在替换图标后，您需要按所需样式重新为其着色
使用约束图标调整图层的垂直和水平中心。如果要减少或增加图标组件，这是必需的，但是这样图标本身不会更改其大小。
重要的！约束必须通过带有图标的图层进行专门调整，而不是针对整个组件进行调整。
设定约束
所有上述动作都可以一次用几个图标完成。
为了一次选择在所有图标组件中带有图标的图层，请选择所有图标组件，然后按 Enter。
除图标外，组件框架中不应有任何其他内容。不要忘记从图标框中删除所有隐藏的图层。
例如，“材料设计” 图标具有白色背景层。
图标具有白色背景层
因此，图标组件应仅包含一层（带有图标的层）。但是可能会有例外，例如，两种颜色的图标。
如果是单色图标，则所有元素都必须合并为一层。
合并图层后，不要忘记将 “轮廓线 Storke” 应用于合并的形状。
将图标合并为一层
所有这些对于减轻图标重量，使 SVG 代码更小和更易于理解以及对开发人员在给图标重新着色时不存在问题都是必需的。
这是当图标组件具有多个图层并且未组合成一层时图标的 SVG 代码的样子。该代码非常长，并且针对不同的图标元素具有多达 7 个 “填充” 参数。不可能那样做。
图标文件大小 1318 字节
这就是合并所有图层时 SVG 图标代码的样子。该代码小得多，只有 2 个 “填充” 参数。一个用于容器的背景，另一个用于图标的颜色。你可以那样做。
图标文件大小 803 字节
导出图标后，您可以使用此网站进一步压缩它。
压缩后，图标代码变得更小，但是图标的外观没有改变。
图标文件大小 508 字节
如果您学到新东西或文章对您有用，请按拍手👏（可能多次）。
如果您想了解更多技巧，请订阅，以免错过新文章。
https://uxplanet.org/design-system-icons-5955b68eb3dd
若有收获，就点个赞吧
0 人点赞
