图像学超级简单指南（图标设计）

本文概述

• 眼睛图标
• 箭头图标
• 电池图标
• 项目符号列表图标
• 云图标
• 前进播放图标
• 漏斗图标
• 播放/暂停图标
• 位置箭头图标
• 位置图钉图标
• 声音图标
• 波浪图标
• 顶部图标
• 一个图标值1, 000个字。

平均而言, 你需要花费多长时间来设计自定义图标？

几分钟10分钟？更长一点如果我们向你展示了如何在不到10分钟的时间内制作10个出色的图标, 该怎么办？

图像是一种交流的形式, 可以增加品牌的视觉语言, 因此自定义图标集比简单的通用图标集更具意义和吸引力。大多数设计师都不用花时间去学习如何创建自定义图标, 这主要是因为这是我们要增加的另一门课程。

因此, 我着手创建一个超级简单的指南, 以帮助你在不到10分钟的时间内(我是说)学习图像学的基础知识。

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

最初, 我是受Morgan Allan Knutson的GIF启发创建此指南的, 该指南显示了如何在几秒钟内创建位置服务图标。我发现它令人耳目一新, 智能且快速。它使创建自定义图标的过程神秘化, 并展示了它的简单程度。图标实际上是一种几何形状, 可以由基本形状(例如正方形, 三角形或圆形)的组合或变形产生。徽标或图标设计的经验法则是保持简单。

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

重要说明：我们将在本文中使用Adobe Illustrator, 但使用Sketch甚至Figma可以获得相同的结果。每当我们需要在形状上添加或删除点时, 我们都会使用”笔工具(P)”。选择和移动点将通过”直接选择工具(A)”完成。

眼睛图标

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

提示：无需使用白色圆圈, 只需从每个圆圈下面的圆圈减去(使用”路径查找器”面板)两个圆圈。它在背景上创建更清晰的结果。

箭头图标

这就是在初始正方形的边缘上添加这些额外点的地方。提示：作为替代, 你可以简单地绘制形状像箭头的细线。

电池图标

使用一个带有笔触的正方形和两个带有填充的正方形。只需按比例播放即可, 同时在笔划形状中包含一个填充的正方形, 将第二个保留在外部以形成电池头。

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

项目符号列表图标

从一个简单的正方形开始；向右复制一次；并将其重塑为一个长矩形。选择整个对象, 并重复两次, 同时在它们之间保持一个正方形的大小。

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

云图标

画三个不同大小的圆圈。将两个最小的圆底部对齐, 以有一个底, 然后将最大的圆放在两个较高的圆之间。通过使一个小圆圈变形来创建云的底部。

提示：使用不同的圆圈尺寸可获得更自然的云彩。

前进播放图标

画一个长矩形。在左边缘中心添加一个点, 然后删除顶部和底部点。现在你有了一个三角形, 只需在右侧复制一次该形状即可完成图标。

提示：要更快地执行此操作, 只需从三角形而不是正方形开始。

漏斗图标

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

提示：边到边放置两个正方形, 然后简单地水平拉伸最上边。

播放/暂停图标

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

提示：或者, 只需绘制一个三角形, 然后绘制两个平行的矩形。

位置箭头图标

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

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

位置图钉图标

在较大的圆圈内敲出一个圆圈(使用”探路者”面板)。垂直向下拖动最低点, 并锐化所形成的角度-切换到”笔工具(P)”, 然后在按住” Shift”键的同时单击该点。

提示：在该引爆点上使用圆角可以使外观柔和-选择该点时, 在”变换”选项面板中调整”拐角半径”值。

声音图标

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

提示：只需复制并粘贴渠道图标, 然后将其顺时针旋转即可。

波浪图标

画一条直线, 并在其长度上以相等的距离添加点。向下拖动变更点, 然后将每个角四舍五入到最大, 直到一切顺利为止。

提示：修整线条提示可以使外观更加平滑。

顶部图标

这是奖金图标。

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

提示：请注意线条的粗细以及徽标内形成的白色空间。

一个图标值1, 000个字。

我们经常听到一张图像值一千个字。好吧, 这非常适用于图标, 它取代了长句子和单词以优化视觉空间, 可用性和美观性。知道如何制作一组简单有效的图标可能会走很长一段路。而且我们刚刚看到了通过观察和利用一组基本形状可以多么快速和容易。

概括而言, 图像学的10条主要规则是：

• 使它具有象征意义和意义。
• 你已经听说过：保持简单。风格不应影响可读性。
• 有意和周到。创建之前要三思。
• 确保它以不同的大小工作。
• 注意统一性。
• 请只使用向量！
• 仅在必要时使用颜色, 并小心使用。
• 它有助于了解基本几何形状。
• 考虑”负担”, 以确保设计的图标对整体设计有所帮助。
• 图像学是一种应该通用的语言。
• 奖励：字母只是一组26个图标。

一起玩, 看看你可以在10秒内想到什么。

• • •

在srcmini设计博客上进一步阅读：

• 电子商务UX –最佳做法概述(带有信息图)
• 以人为本的设计在产品设计中的重要性
• 最佳UX设计器产品组合–启发性的案例研究和示例
• 移动接口的启发式原理
• 预期设计：如何创建神奇的用户体验