嘿！我的名字是 Dima，我是 Universal Icon Set 的设计师和创造者。不久前，我发布了该套装的 2.0 版。在开发 1.0 版本时，我还没有明确定义构建统一图标系统的规则。结果，出现了一些不一致。

为了避免将来出现这种情况，我创建了构建图标系统时可以使用的原则。

我的原则列表 适用于该系列中的每种风格（线性、纯色、双色调）。因此，每种风格都可以单独使用或相互组合使用，在这两种情况下都会看起来很和谐。

我的原则基于Material Design和IBM Design Language指南。对于 2.0 版，我重新设计了所有图标并添加了新图标。现在有 1671 个图标（每种样式 557 个）。

我总共得到了 12 条规则。继续阅读，我将分享我的经验。

清晰传达

图标的主要用途是什么？快速理解其含义。人眼处理视觉图像的速度比文本快得多。它也是理解任何语言信息的通用方式。所以，你的图标的比喻越准确，它就越早被“阅读”。这是创建图标时首先要注意的。

清晰度（示例）

注意使用图标的上下文也很重要。例如，同一个房子图标在浏览器界面和地图上会有不同的含义。

简单在开始绘图之前，您需要考虑图标的外观。它的图像越简单，最终用户就越容易理解它。

通过使用尽可能少的部件来创建图标，可以实现简单性。如果在工作过程中发现图标很复杂，不要害怕删除不必要的细节，只留下最重要的部分。

简单性（示例）

风格统一

如果你去 Dribbble 并在搜索栏中输入“icons”，你会看到许多不同图标样式的选项。每种风格都适合其需求。集合中的所有图标都应采用相同的样式，不要忘记这一点。

我的套装中有三种不同的风格——线条、纯色、双色调。根据我的经验，它足以涵盖图标的大多数用例。

图标集风格（示例）

当您需要突出显示其中一种时，您可以使用两种样式的图标。例如，对于导航，可以使用线条样式图标，而可以使用纯色样式突出显示。

基础网格

让我们继续讨论更多的技术原理。它们将帮助我们创建一个具有明确规则的系统。首先，从选择基础网格开始。所有图标都将建立在它的基础上。图标的每个部分都应放置在像素网格内。

网格因任务而异。最常见的尺寸是 16x16、24x24、32x32、48x48、64x64、96x96；

网格的大小取决于使用图标、指南和操作系统功能的原因。例如，对于 Android，网格大小为 24 x 24 dp。

基础网格（示例）

修剪区域

修剪区域（或填充）表示应避免的网格区域。图标的主要部分应准确位于安全区域（或活动区域）中。在大多数情况下，这不是规则，而是建议。如果常识需要，您可以进入裁剪区域。在我的系列中，我使用这个区域作为特殊情况下的额外空间。

修剪区域（示例）

在特殊情况下，此规则变得严格。例如，当我们处理操作设备的应用程序图标时。

关键形状

如果您希望它们看起来和谐，则图标的视觉重量应该相同。基本形状将对此有所帮助。它们包括正方形、圆形、水平和垂直矩形。

它们有助于简化图标的创建，同时保持每个图标的单一视觉权重。可以使用公式计算图标的视觉权重。这些值将是近似值，但这已经足够了。现在让我们做一些几何！

我们将从圆的面积开始：

在我们的例子中，直径 'd' 是 20 px，半径 'r' 是 10 px，圆的面积大约等于 314 px ²

接下来，我们将找到正方形的边和面积：

“a”边大约为 17.7 像素。四舍五入到最接近的偶数。在我们的例子中，18 像素。正方形的面积为 324 px ²

接下来，让我们找到矩形的边：

在我们的例子中，“b”边是 20 px，“c”边是 16 px。

这为我们提供了主要形状的尺寸：

关键形状（示例）

间距

在我们为网格配置了基本参数后，我们可以开始创建图标了。我们需要为图标选择线宽。为了使您的图标在任何设备上看起来都是像素完美的，我建议坚持使用整数值。例如，1 像素或 2 像素。

同样重要的是不要忘记元素之间的最小距离。它也应该等于或大于线的宽度。

间距（示例）

圆角

创建一组和谐的图标时，定义对象中的角很重要。首先，选择角的形状：尖角或圆角。一切都清晰，边缘锋利。但是，对于圆角，您应该根据对象的大小设置圆角规则。

例如，根据对象的大小，我为主要对象设置了 2 到 4 像素的舍入设置。

圆角（示例）

角度

您可以指定基值或单个步长（例如，15 度）以统一斜线的角度。此限制还将帮助您创建图标。

角度（示例）

视觉平衡

通常，即使从几何角度来看，也不是从视觉角度来看。创建图标时，您需要根据对象的视觉权重对齐对象。这主要适用于非对称对象。例如，我们在绘制“播放图标”时经常会遇到这样的问题。

视觉平衡（示例）

透视（2D / 3D）

除了所有原则之外，图标的统一性坚持一个观点也很重要。在大多数情况下，图标的 2D 视图将起作用。这可以是俯视图或前视图。可以使用 3D 视图，但是您必须对集合中的所有图标使用相同的视角。

透视（2D / 3D）（示例）

常识

我建议坚持这些原则来创建一组一致的图标，但你也应该以常识和你个人的视觉品味为指导。任何规则都有例外，所以如果你必须打破它。

常识（示例）

结论

感谢您阅读到最后。希望这篇文章对你有帮助。

Powered by Froala Editor