关于图标设计你需要知道的一切

图标虽小但功能强大，这就是为什么仔细考虑图标设计很重要。 世界各地的设计师都将见证创造一个好的图标所付出的创造力和努力。 这是因为它必须具有表现力，但同时又要简单。

图标的背景

图标设计实际上只是一个代表对象或程序的小图像。 它们是非常简单的图像，传达了强大的信息。 图标通常很容易记住，也恰好是几乎所有图形界面的主要特征。

有趣的事实：图标一词的起源来自希腊作品“eikona”，意思是图像。 当 Macintosh 和 Microsoft 等第一个 GUI 操作系统问世时，数字图标开始出现。

有哪些不同类型的图标？

您应该了解三种主要类型的图标。 以下是关于它们中的每一个的一些见解，以及它们给用户体验带来的影响。

通用图标

这些是普遍认可的图标。 例如，搜索、打印、主页或购物车的图标就是这样的图标。 但是只有一个小问题。 通用图标相当罕见。 当我们的意思是稀有时，我们的意思是除了这里给出的示例之外，大多数图标恰好是模棱两可的，并且根据界面的不同含义可能有所不同。

不同含义的图标

顾名思义，这些图标具有多种含义，可能使它们相互矛盾或矛盾。 例如，心形和星形的图标是相互冲突的。 这两个图标的功能会从一个应用程序更改为另一个应用程序，有时它们还可以相互竞争。 正因为如此，这些图标变得相当难以精确解释。 即使在应用程序中，这些符号也会变得令人困惑，当用户点击它们希望得到一个特定的结果时，反而会得到其他的东西。

独特的图标

您如何使用图标来描述独特的对象或动作？ 使用独特的图标设计。 但重要的是要注意有很多失败的例子。 例如，当苹果决定通过一堆彩色圆圈来代表他们的游戏中心时，意义就消失了。 这些圆圈甚至意味着什么，它们与游戏中心有什么关系？

您可以使用哪些图标格式？

当您要求进行图标设计时，您应该了解几种类型的图标格式。

• SVG – 这些是可缩放矢量图形并提供完美的基本格式。 因为它是可扩展的，它本质上意味着你可以改变图标的​​大小而不会失去质量。
• PNG – 如果您想要完全兼容，则可以选择便携式网络图形格式。 这是一种光栅格式，这意味着它基于像素，您无法在不影响质量的情况下进行升级。 PNG 可用于 Word、PowerPoint 和电子邮件。 它们可以添加到任何彩色背景之上，无需编辑。
• ICO – 如果您想将您的图标用于任何 Windows 应用程序，甚至用作您自己网站的图标，那么 Microsoft Windows 图标格式非常棒。
• ICNS – 这种格式用于非常特定的目的。 这是一种 Apple 特定格式，可用于 Mac OS X 文档和应用程序。

Kimp 提示：让您的图标设计尽可能简单。 尝试在您的设计中使用清楚地代表您预期含义的真实项目。 例如，您可以使用条形图来表示财务。 您可以使用工作包来表示业务。 为了帮助您的设计师设计出正确的图标，请尽可能多地为它们提供背景信息。 让他们确切地知道您的图标将如何使用。

是什么让图标有效或无效？

既然您现在对图标的格式和图标类型有了一个概念，那么让我们也看看是什么使图标有效或无效。 这样，当您与设计师合作时，您可以留意这些属性。

明晰

图标设计应在您看到它时立即传达信息。 如果你在图标中使用的隐喻是未知的或晦涩的，人们就会对它的含义感到困惑。 例如，用于 Home 的图标是每个人都知道的——那就是清晰。 现在想象一下，如果 Home 的图标被描绘成一个中间有一个点的圆圈会发生什么？ 那会让人感到困惑，对吧？ 令人困惑的图标是无效的。

可读性

对清晰度因素进行排序后，您现在必须确保图标易于阅读。 如果你看下面的例子，第一个图标很难理解，因为细节太精细，使它变得模糊。 正确完成小图标的一个很好的例子是谷歌地图上具有出色可读性的图标。 使用较细的笔触、没有留下足够的空间以及在小图标上添加过多的细节会使它们变得无效，因为它们失去了可读性。

图标的对齐方式

图标设计应该具有平衡感，这可以通过光学对齐所有元素来实现。 这意味着设计需要根据观众对元素的感知方式进行调整。

图标的简洁性

图标的简洁性将根据您添加的详细信息量来确定。 保持图标尽可能简单，避免添加不必要的线条和细节，使其难以阅读和模糊。

一致性

如果您正在为应用程序或特定界面完成图标设计，请确保所有图标保持相同的一致性。 如果某些图标看起来比其他图标更详细或更清晰，您就会失去一致性。 这将使界面在用户体验方面受到影响。

设计个性

同样，对于您正在设计的界面或应用程序，您必须确保每个图标都体现了品牌的个性。 您可以根据自己的品牌风格和声音从专业走向有趣和学院风。 这是简报中非常重要的一部分，你应该在设计图标时向你的设计师提供。

您的图标应该易于使用

即使在对“t”进行了绘制之后，图标也远未完成。 您的设计师所做的图标需要测试和准备才能让客户使用它。 这种测试和准备将确保图标易于使用。 易于使用的图标的标志是：

• 组织良好 - 在这里，您需要确保您的设计师以组织良好的方式放置设计的主文件，以便您以后可以在需要时参考它们。 您可以要求它们按字母顺序或其他顺序排列，以便在需要时可以轻松找到它们。
• 有据可查——请您的设计师传达图标系列的关键原则，并布置技术规则。 您还可以在完成此文档后将其公开，以便人们可以根据需要进行参考。
• 已测试——确保您与设计师一起完成了这项工作。 让他们将所有设计好的图标并排放置，这将帮助您了解它们的一致性和相关性。
• 由图标管理器等自定义工具提供支持。 如果您可以提供任何有助于使用图标的自定义工具，您应该使它们易于访问。

你的图标设计简介应该包括什么？

考虑所有用例

知道你的图标将在哪里使用，以及它们需要代表什么。 您还需要区分哪些图标需要隐喻，哪些图标将基于现实生活中的对象完成。 一旦你清楚了这些因素，你就可以通过简报将这一点传达给你的设计师。

头脑风暴概念和隐喻

首先，尽可能列出所有可用于描述图标的描述。 单词集和字典等资源有助于查找关键字、相似词和您希望通过图标传达的概念的定义等内容。 然后，您可以开始简化这些想法，以便图标（需要抽象和简单）能够清晰有效地传达信息。 尝试自己完成尽可能多的研究和头脑风暴，然后在其余部分寻求设计师的支持。

查找有用的参考资料

始终投资于研究以找到高质量的参考。 很有可能在某个地方，有人已经完成了您想要设计的图标的精彩版本。 如果你能找到这些，你也能找到你的灵感。 当您向您的设计师提供这些参考资料时，他/她会发现更容易理解您的观点。

选择图标的样式

一些流行的样式是字形、平面、轮廓、材料和手绘。 当您最终确定样式时，您需要考虑两个重要因素。 一种是显示这些内容的 UI 界面及其样式。 第二个是对该接口的要求，比如它是 Material 还是 iOS。

与您的设计师详细讨论

确保您的设计师在您设计的所有图标之间保持一致性。 为了让事情更清楚，让他们对所有要完成的图标做一个完整的草图。

在批准图标的概念草图后，您应该请求矢量化版本。 最后，获取一些图标的模型，以便查看它们是否适合您的各种用例。

现在，我们已经完成了您应该在简报中包含的内容，以使您的图标看起来清晰。 因此，接下来让我们来看看您设计的图标中需要体现的主要内容，以便您的最终结果恰到好处。 请务必与您的设计师讨论这些问题。

创建新图标的清单

您的设计师将采取以下步骤来创建您的图标设计。

避免模​​糊的图标

为了使图标看起来清晰、整洁和跨度，它们需要定位在像素上。 这将消除任何模糊的打嗝。

检查尺寸和重量

我们建议您使用斜视测试来确保您的所有图标具有相同的重量和尺寸。 基本上只是眯着眼睛，看看你的图标是如何相互关联的。 如果需要任何调整，请确保获得设计师的帮助。 这里的一个提示是使用完美的圆形和方形来确保您的一组图标的重量相同。

使用几何形状

让您的设计师使用简单而牢固的几何形状来绘制您的图标。 这将使图标清晰且美观。

避免过于详细

当您与设计师一起浏览它们时，删除任何使您的图标看起来忙碌而沉重的细节。 相反，只保留基本和简单的细节，这将使图标看起来干净清晰。 图标很小，它们可能会变成一个包含太多细节的斑点。

保留空间

图标中的所有细节都需要喘息的空间。 如果它们都粘得太紧，它们会使整个设计变得混乱。 当您查看图标时，请查看它们是否都有足够的空间以使细节清晰，以及它们的含义是否立即让您清楚。

图标对比

确保图标中有足够的颜色对比。 黑白平衡应该刚刚好。 如果没有足够的对比度，图标会显得不清晰。

看视觉统一

您应该研究的另一个因素称为图标的视觉统一性。 这基本上意味着线条的粗细、角的大小、使用的调色板、包含的细节水平和设计元素通过完整的图标集保持一致。 一定要和你的设计师谈谈这个，因为有很多事情要跟踪！

图标设计很有趣，但很难做对

我们为您提供了大量信息，以便您开始进行图标设计。 有很多东西需要吸收和熟悉，所以一定要与优秀的设计师合作，让你的图标恰到好处。 并向他们提供他们需要了解如何使用您的图标以及谁将查看它们所需的所有详细信息。 很快您就会拥有一组强大、清晰且易于使用的图标。