如何制作出优秀的图标集

如果您想制作出色的图标集,您需要遵循的 12 个步骤

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

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

我的原则基于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)(示例)

常识

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

常识(示例)

结论

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

3

发表评论

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

如何制作出优秀的图标集
嘿!有什么能帮到您的吗?
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close