超级简单的图像学指南

设计一个自定义图标平均需要多长时间？

几分钟？ 10分钟？ 更长？ 如果我们向您展示如何在 10 分钟内制作 10 个出色的图标会怎样？

图标是一种增加品牌视觉语言的交流形式，因此自定义图标集比简单、通用的图标集更有意义和引人入胜。 大多数设计师从不费心学习如何创建自定义图标，主要是因为这是我们学习队列中的另一门课程。

因此，我着手创建一个超级简单的指南，帮助您在不到 10 分钟的时间内学习肖像学的基础知识（我是认真的）。

能够创建自定义图标将为您打开一个全新的世界，开始为您的项目创建复杂的形状，这将使您与其他人群区分开来，为您作为设计师提供竞争优势。

最初，我受到 Morgan Allan Knutson 的这个 GIF 的启发来创建本指南，该 GIF 展示了如何在几秒钟内创建一个位置服务图标。 我发现它令人耳目一新，聪明，快速。 它揭开了创建自定义图标的过程的神秘面纱，并展示了它是多么简单。 图标实际上是一种几何形状，它可以由基本形状（例如正方形、三角形或圆形）的组合或变形产生。 标志或图标设计的经验法则是保持简单。

本文的目标是在 10 秒内创建 10 个图标，每个图标只使用简单的形状。

重要提示：我们将在这篇文章中使用 Adob​​e Illustrator，但您可以使用 Sketch 甚至 Figma 获得相同的结果。 每当我们需要在形状上添加或删除点时，我们将使用“钢笔工具 (P)”。 选择和移动点将使用“直接选择工具 (A)”完成。

眼睛图标

如图所示，将四个圆圈居中对齐，从大到小改变颜色。 在最大的圆圈上，朝后，将左右点从中心拉开。 最后，将最小的内圆移动到下一个的边缘，以在虹膜上创建照明效果。

提示：不要使用白色圆圈，只需从它们下方的圆圈中减去（使用路径查找器面板）两个圆圈。 它在背景上创建更清晰的结果。

箭头图标

这都是关于在初始正方形边缘添加这些额外点的位置。 提示：作为替代方案，您可以简单地绘制一条形如箭头的细线。

电池图标

使用一个带有笔划的正方形和两个带有填充的正方形。 简单地调整比例，同时将一个填充正方形包含在笔划形状中，并将第二个正方形保留在外面以形成电池尖端。

提示：使用笔画粗细和填充来保持良好的视觉平衡。

项目符号列表图标

从一个简单的正方形开始； 将其复制一次到其右侧； 并将其重塑为一个长矩形。 选择整个事物，然后复制两次，同时在两者之间保留一个正方形大小的空间。

提示：用圆形替换正方形以创建更柔和的外观。

云图标

画三个不同大小的圆圈。 将两个最小的圆圈底部对齐以获得一个底部，并将最大的圆圈放在中间，在更高的位置。 通过变形其中一个小圆圈来创建云的底部。

提示：使用不同的圆圈大小以获得更有机的云。

正向播放图标

画一个长方形。 向左边缘中心添加一个点，并删除顶部和底部点。 现在您有了一个三角形，只需将该形状复制到右侧一次即可完成图标。

提示：要更快地做到这一点，只需从三角形而不是正方形开始。

漏斗图标

从一个长矩形开始。 在左右边缘的中心添加一个点。 现在，水平拉伸顶部边缘，就完成了。

提示：将两个正方形边对边放置，然后简单地水平拉伸最上面的边。

播放/暂停图标

从三个平行的长矩形开始。 将最宽的矩形重塑为三角形。

提示：或者，简单地画一个三角形，然后画两个平行的矩形。

位置箭头图标

这是摩根的位置服务图标的混音。 只需画一个正方形，然后沿对角线方向拉左下角，向上移动直到通过相反的点。

提示：在 Illustrator 中，在拖动点的同时按住 Shift 键有助于在保持对角正确的同时保持对称。

位置图钉图标

在更大的圆圈内敲出一个圆圈（使用路径查找器面板）。 直线向下拖动最低点，并锐化形成的角度 - 切换到“钢笔工具（P）”，然后按住“Shift”键，单击该点。

提示：在该临界点上使用圆角来柔化外观 - 在选择该点时调整“变换”选项面板中的“角半径”值。

声音图标

就像漏斗图标一样，但旋转了 90 度。

提示：只需复制并粘贴漏斗图标，然后顺时针旋转即可。

波浪图标

画一条直线，并在其长度上等距离添加点。 向下拖动变化点，并将每个角落都弄圆到最大，直到一切顺利。

提示：修整线条提示以获得更平滑的外观。

顶部图标

这是奖金图标。

用足够粗的笔划画一个正方形。 使用剪刀工具，剪下右上角和左下角。 这会将形状一分为二。 将下半部分向上移动，然后将整个物体逆时针旋转 45 度。

提示：注意线条的粗细，以及标志内部形成的空白区域。

一个图标值 1,000 个字。

我们经常听到，一张图片值一千个字。 嗯，这非常适用于图标，它取代了长句和单词，以优化视觉空间、可用性和美感。 知道如何制作一组简单有效的图标可以大有帮助。 我们刚刚看到了通过观察和利用一组基本形状来实现它是多么快速和容易。

总之，图像学的 10 条主要规则是：

• 使其具有象征意义和意义。
• 你听说过：保持简单。 风格不应影响易读性。
• 要有意识和深思熟虑。 在你创造之前思考。
• 确保它适用于不同的尺寸。
• 牢记统一性。
• 仅限矢量图，拜托！
• 仅在必要时使用颜色，并谨慎使用。
• 它有助于了解基本几何。
• 考虑“可供性”以确保设计的图标将有助于整体设计。
• 图像学是一种应该通用的语言。
• 奖励：字母表只是一组 26 个图标。

一起玩，看看你能在 10 秒内想出什么。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验