设计图标库需要一组规则。这些规则或图标设计原则将帮助您在所有图标上保持一致的样式，如果您是一个在创建图标系列方面进行协作的团队中的一员，那么这些规则将特别有用。
图标代表了几乎所有设计系统的重要组成部分。创建图标正在创建一种视觉语言。它要求您了解如何组合原始形状以重现概念，以及学习如何使用生成资产的软件。
设计任何人都可以使用的 20000 + 个图标有点 case。我们与 Nucleo 的目标是提供一个广泛的，精美的符号库，这些符号可以自定义并以多种方式和项目使用。
本指南包含为 Nucleo 系列创建图标所需的所有信息，以及可应用于任何项目的图标设计原则。
在第一篇文章中，我们将介绍设计图标的基础知识。接下来，我们将集中于实际示例和教程。
指导内容：
- 介绍
- 大纲图标（即将推出）
- 字形和彩色图标（即将推出）
不要错过下一篇文章！在 Twitter 上关注我们，或在 Medium上关注我们，以保持循环。
图标与设计系统中的任何其他组件一样，会影响用户对产品的感知方式。并且由于它们是设计系统的一部分，因此在创建矢量资产时，必须考虑工作范围。选择特定的图标样式就像选择字体或调色板一样。
Nucleo 库的样式很小。图标将删除所有不必要的细节。
在为 Nucleo 设计图标时，请记住，我们的某些用户会修改图标。他们以此为起点为项目创建唯一的集合。太独特的符号也很难自定义。简洁是关键。
Nucleo 图标的示例
在设计图标时，如果不确定某个细节 / 元素，请问问自己一个简单的问题：这个细节 / 元素是否必不可少？如果答案是否定的，请考虑将其删除。如果您有疑问，请询问某人是否理解您要提出的概念。但是，请记住，尽管如今一些图标的用途很简单（几乎每个用户都将 “+” 加号与 “添加 / 创建 / 新” 动作相关联），但还需要理解其他一些符号。在大多数情况下，图标需要标签。
是的，图标不能代替文本。
在某些情况下，空间不足会迫使设计师使用一系列没有标签的符号。导航栏就是一个例子。
对于用户经常使用的那些组件，此模式很有意义。这种模式背后的想法是：导航栏是用户进行交互的第一件事。他不能错过。他知道他需要使用它来导航应用程序；因此，他将在短时间内适应符号的含义。
在其他情况下，图标不与标签一起使用，而与文本组件一起使用。在这种情况下，使用符号来增强组件的含义。他们不会替换文字。
要点是，如果您设计一个图标并且不同的用户将其赋予不同的含义，那是可以的。使用图标的上下文将用于抢救。但是，如果您创建了一个⭐，并且人们告诉您它看起来像一个 a，则您可能需要查看设计。
可以将图标分为样式类别，样式类别指的是创建符号的特定方式以及外观的常见模式。样式的数量非常多，并且不固定。新趋势和新风格不断出现。
为同一图标集创建不同样式的开销很大，并且取决于项目的大小。在大多数情况下，这是没有必要的。高级图标系列包括不同的样式，用途广泛。
Nucleo 图标设计有 3 种不同的样式：
- 轮廓 / 描边 / 线
- 字形 / 实心 / 粗体
- 彩色 / 平面
如果查看不同的图标系列，您会注意到，有时如果您以两种不同的样式选择相同的符号，则这两个图标会占据相同的确切空间。其背后的想法是将样式视为 “状态”。例如，您可以在设计中使用图标的轮廓版本，然后在用户单击图标时将其切换为原型中的字形版本（默认状态与单击状态）。这不是您必须遵循的规则。考虑它是一种可选方法。
简单地改变颜色是创建图标 “活动” 状态的好方法。
在为 Nucleo 设计图标时，不必重叠不同的样式。我们的轮廓图标具有可自定义的笔触值。因此，当涉及可包含的细节时，它们具有一些限制。在字形版本中，您可以利用没有可自定义的笔触值并添加更多详细信息的优势。
相同的概念，2 种不同的样式
设计图标时使用的网格主要用于两个目的：
- 这样可以更轻松地使不同图标之间的样式保持一致
- 它会创建约束，迫使您匹配图标的光学体积
您将要使用的图标中有 99％是矢量。因此，您可能会想：为什么只需要按比例放大 / 缩小它们，为什么不对所有图标使用同一网格？因为如果选择相同的网格，使用相同的边距，填充，笔触值和半径会更容易。例如，如果您选择 24x24 像素的网格，并确定表情符号图标的主要形状是 20x20 像素的圆圈，那么您也可以对所有其他表情符号使用相同的大小。表情符号的眼睛大小，用于创建微笑的元素的笔触等也是如此。
重要信息→提到网格时，我使用像素单位。这无关紧要。网格是定义单元格的行数和列数。如果创建 48x48px 的画板并决定每 2px 使用一条网格线，则说明您正在使用 24x24 的 “单位” 网格。
约束是你的朋友。这听起来似乎是胡说八道，但这是一个可以应用于设计中任何事物的概念。使用约束并不意味着限制您的创造力，而是赋予其创造力。例如，如果您使用 24px 的网格，并设置 2px 的填充，则您知道还有 20x20px 的空间可创建。以后您将不需要处理光学体积，并且您将不得不保持图标设计必不可少。
如何创建图标网格？首先，选择一个尺寸并在您喜欢的图形应用程序中创建一个新文档。我的建议是选择较小的尺寸（例如 24x24px 或 32x32px）。随着单元数量的增加，很容易迷路。
现在，您需要创建一个光学体积模板。匹配光学体积意味着确保图标占用的空间与可用空间之间的比率在不同图标之间相似。为了展示一个例子，请看一下这四个符号。
它们建立在相同的网格上，但是光学体积比（占用空间 / 可用空间）却大不相同。这会影响用户的感知→具有更高光学体积的图标会受到更多关注。我的建议是匹配光学尺寸，然后在以后的设计 / 开发中决定是否要按特定比例放大 / 缩小特定图标。
要创建基本的光学体积模板，请从正方形开始。正方形是具有最高光学体积比的原始形状（如果考虑到这一点，正方形元素可以填充整个画板）。缩小正方形，以便有一些填充。
现在考虑由于图标的性质而垂直 / 水平伸展的图标（例如，瓶子和鞋子）应该有多高 / 宽。绘制两个矩形，分别代表最大垂直和水平尺寸。
现在绘制一个直径等于两个矩形的最大宽度 / 高度的圆。该圆圈将代表一个圆圈图标的最大尺寸。您的基本光学体积模板很不错！
（可选）您可以添加一个安全区域（如我们在示例中所做的一样），该区域应为空白。我说 “应该”，因为并非一直如此。安全区域的目的是要利用一些额外的像素，以防您要绘制的图标概念很窄，因此您需要对其进行更多拉伸。
这是我们以前见过的相同图标的示例，但已更新为具有类似的光学体积。
Nucleo 图标设计在 5 个不同的网格上：
- 16 像素
- 24 像素
- 32 像素
- 48 像素
- 64 像素
随时下载 Nucleo 网格模板并进行实验，或在您的项目中使用它。
图标不只是简单地按不同大小按比例放大 / 缩小。它们被修改（有时被完全重绘）以解决更高 / 更低的像素数量。通常，16、24 和 32 像素的图标是最小的。48 和 64 像素的图标具有更多详细信息。
我在处理 Nucleo 的光学体积时学到的一个有用技巧是将狭窄的图标旋转 45 度。这样，您会有一些额外的像素，即使光学体积比变化不大，视觉效果也会受到影响（图标看起来更加突出）。
图标具有不同级别的自定义选项。我想到的最基本的一种就是改变它们的颜色。如果计划包括更多高级自定义选项，则应对其进行测试。
Nucleo 图标支持以下自定义选项：
- 次要颜色
- 笔画编辑（仅限于轮廓图标）
可以在我们的应用程序*中编辑这些选项，以便我们的用户无需在图形编辑器中导入图标即可进行样式更改。
*选项目前仅限于 Nucleo 图标
为 Nucleo 创建图标时，测试不同的笔触值以确保它们不会破坏设计很重要。
我强烈建议进行的另一项测试是反转图标和背景的颜色。我们通常在浅色背景上绘制深色图标。如果反转这些颜色（例如，黑色背景上的白色图标），则会注意到图标的厚度看起来更高。这是由于我们的大脑对浅色与深色的反应方式。这也曾经使 Galileo Galilei感到困惑。
此快速测试将向您显示是否需要进行一些最后的调整，以确保您的图标可以在任何背景色上使用。
在创建图标系列之前，您可能要介绍的最后一个方面是透视图。您可以绘制 2D 或通过 3D 图标获得乐趣。当前的趋势之一是创建等轴测图。很有可能即使您追求二维，某些图标也需要深度的幻觉。确定如何处理此深度（创建规则）。
核图标是二维的。透视图（如在相机放置中）是正面的。这意味着在 99％的情况下没有深度。您可以弯曲此规则，并在设计概念中包括 “假三维”，如果它使图标更有意义（即更易于识别）。
这是一个通过增加深度来改善图标的示例：
您可以使用喜欢的任何矢量编辑器来设计图标。有很多很棒的选择，例如 Sketch，Figma，Inkscape，Framer，Affinity Designer 等。
我最喜欢的一个是 Adobe Illustrator。这是与图标设计相关的有用的 Illustrator 技巧列表。
注意：如果您使用的是 Windows，请在下面示例中列出的快捷方式中将⌘替换为 “ctrl”，将“ option” 替换为“ alt”。
对齐网格
大多数情况下，您想保持 “捕捉到网格” 选项处于打开状态。使用基本对象或钢笔工具创建图标时，此选项会自动将图标与像素网格对齐。
公平地说，如今，此选项已不如从前重要了。由于显示分辨率的提高，越来越难以看到与图标对齐相关的模糊效果。无论如何，启用此选项将使您在设计中使用原始对象时感到 “更加可控”。
捷径：
- 启用 / 禁用对齐网格→shift +⌘+’
如果您设计的笔触为 1 像素，则可能还需要启用 “捕捉到像素” 选项。这样可以确保笔触效果始终与网格对齐。
现在，这里的技巧是能够根据您的操作打开和关闭 “捕捉到网格” 选项（救援的捷径！）。例如，1）如果要利用智能参考线，或 2）调整曲线手柄并完全自由地移动锚点，则关闭 “捕捉到网格” 选项。
此示例说明了如何关闭 “对齐网格” 选项有时会很有用：
指南和网格
在 “首选项” 面板中设置参考线和网格规则。我通常每 10 像素设置一个网格线，并细分为 10 个细分，因此每个单元格为 1x1 像素。另外，我关闭了 “背面网格” 选项。
捷径：
- 显示 / 隐藏指南→⌘+;
- 显示 / 隐藏网格→⌘+’
隐藏和锁定
在 Illustrator 中我最喜欢的功能之一：隐藏 / 锁定对象，然后将它们带回或解锁就非常容易，而无需查看图层面板。它的工作方式如下：选择一个对象，然后使用快捷键⌘+ 2 锁定它，或使用⌘+ 3 隐藏它。然后按 Option +⌘+ 2 来解锁所有被锁定的对象，或者按 Option +⌘+ 3 来查看所有被隐藏的对象。
如果要隔离一个对象（隐藏其他对象），或者要编辑在另一个对象后面的对象（将对象锁定 / 隐藏在顶部），则此功能特别有用。
对齐关键对象
这是我在其他任何地方都找不到的 Illustrator 功能：关键对象对齐。它的作用是让您在使用对齐工具时将对象用作参考（键）。
这是标准对齐方式和关键对象对齐方式之间的快速比较：
要将对象与关键元素对齐，请选择所有对象，然后单击要用作关键的对象。然后使用工具栏中的对齐工具。
画板
为每个图标创建一个画板。这是处理多个图标的最佳设置，而无需创建图层*，以及通过 “导出为屏幕” 选项（“文件”>“导出”>“导出为屏幕…”）导出图标。
- Illustrator 中的图层概念类似于其他应用程序中的组概念。
您可以在 “新建文档” 窗口中设置特定数量的画板，或在 “画板” 面板（“窗口”>“画板”）中创建它们。您甚至可以使用画板工具来修改，拖动和重新排列画板。
轮廓图
如果您关心超高精度（我敢肯定您会做），请利用轮廓视图。
捷径：
- 启用 / 禁用对齐网格→shift + Y
准备好您的设备后，就该导出它了！图标的格式取决于您正在处理的项目。如果您正在处理 iOS 项目，则需要使用不同分辨率的 PNG 资产。如果您正在开发 Web 项目，则可能需要 SVG 文件。
幸运的是，这里有一些应用程序可以帮助您将图标存储为矢量格式，并在以后处理将其转换为其他格式。
进入 Nucleo 应用程序！Nucleo 将所有图标存储为 SVG 文件，并根据需要以不同格式导出它们。
它的工作方式如下：在 Illustrator 中，在画板上组织图标，然后通过 “导出为屏幕” 选项（“文件”>“导出”>“导出为屏幕…”）导出它们。
将您的图标导入 Nucleo，并根据需要进行组织。完成🔥
在该指南的下一篇文章中，我们将研究如何为 Nucleo 创建轮廓图标。因此，减少无聊的理论，增加实用性！感谢您长期以来与我的合作，我希望本文能教您一些有关图标设计的有用信息。
https://blog.nucleoapp.com/nucleo-icon-guidelines-introduction-70092f8b4697
若有收获，就点个赞吧
0 人点赞
