嘿！我的名字是 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 视图，但是您必须对集合中的所有图标使用相同的视角。
常识
我建议坚持这些原则来创建一组一致的图标，但你也应该以常识和你个人的视觉品味为指导。任何规则都有例外，所以如果你必须打破它。
结论
感谢您阅读到最后。希望这篇文章对你有帮助。
Powered by Froala Editor
