图标是任何用户界面的一个小而重要的部分。如果你想提供一流的用户体验，你需要掌握图标设计的艺术——这意味着了解并遵循一套特定的原则。那么图标设计的黄金法则是什么？最重要的原则是：
在本指南中，您将找到对这些原则的详细解释，并结合实际示例向您展示良好的图标设计在实际中是什么样子的。
这是我们涵盖的所有内容（如果您想直接跳到原理，只需单击前面）：
- 什么是 UI 图标，它们的用途是什么？
- UI设计中使用的三种图标是什么？
- 图标设计的 7 个关键原则
- 如何开始图标设计
让我们跳进去吧！
什么是 UI 图标，它们的用途是什么？
在用户界面 (UI) 设计中，图标是小的视觉元素（如符号），用于表示用户界面中的某些功能、特性或内容类型。
让我们考虑一下宜家网站。他们始终使用各种图标来传达用户可以采取的不同操作。右上角的心形图标代表用户的心愿单；如果他们点击它，他们将被带到他们保存的所有项目的概览中。旁边的篮子图标代表用户的购物袋。如果他们点击它，他们可以看到他们添加到购物车的所有商品并继续结账。
在下一个屏幕截图中，每件商品旁边都有一个带有加号的购物袋。此图标代表“添加到购物袋”功能。还有一个简单的心形图标，用户可以单击该图标将项目保存到他们的愿望清单中。
然后，在页面的最底部，有一系列熟悉的图标，代表 Facebook、Twitter、Pinterest、Instagram 和 YouTube，以及各种可能的支付方式，包括 VISA、Mastercard 和 PayPal。
与宜家示例一样，图标用于与用户进行视觉交流。它们帮助用户浏览数字界面并完成不同的操作，而无需冗长的文本描述。这个想法是图标熟悉且易于识别，因此用户可以一眼就理解每个图标的含义。
UI设计中使用的三种图标是什么？
图标可以分为以下三类之一：
- 通用图标
- 冲突的图标
- 独特的图标
通用图标
通用图标是那些可以被大多数用户轻松且立即识别的图标。考虑通常代表搜索功能的放大镜图标，指示主页/主屏幕的房屋图标，或者我们已经认识到为播放按钮的三角形圆圈图标。无论您在哪里看到这些图标，您都可以凭直觉知道它们的含义。
冲突的图标
冲突图标是那些根据使用位置而具有不同含义的图标。例如，在宜家网站上，心形图标用于将商品保存到您的愿望清单。然而，在 Instagram 上，心形图标代表“喜欢”功能。在其他社交媒体网站上，“赞”功能通过竖起大拇指图标来传达。在其他地方，星形图标可能用于“收藏”某物或将其添加到您的愿望清单。看看这些图标怎么没有普遍意义？
独特的图标
独特的图标代表特定产品或界面所独有的特性和功能。这些可能很难识别，因为它们不是用户经常遇到的东西。因此，它们要求用户在特定应用程序或网站的上下文中“学习”它们。例如，GetYourGuide 应用程序使用票证图标来表示用户的预订。
Airbnb 还使用一系列独特的图标来表示不同类型的可用住宿。
在这两个示例中，图标都附有文字以帮助阐明其含义。否则，用户很难理解每个图标代表什么。
所有 UI 设计师都必须遵循的图标设计的 7 个关键原则
现在我们知道什么是图标以及它们的用途，让我们探索设计自己的图标的实用性。您想要设计与用户有效沟通的图标，激发熟悉度和识别度，并补充界面的整体设计。
要实现所有这些目标，您需要遵循某些原则。图标设计的七大核心原则是：
- 意义明确
- 视觉清晰度（或可读性）
- 简单
- 熟悉程度
- 对齐和平衡
- 全面的一致性
- 个性和品牌
这些规则适用于单个图标设计和整个图标系列的设计（即一组图标都属于同一品牌或产品）。那么它们分别是什么意思呢？让我们深入研究。
1. 含义明确
图标设计的第一条黄金法则是清晰。当用户遇到一个图标时，他们应该能够轻松地推断出该图标的含义。因此，在设计图标时考虑到目标用户非常重要。
如果您正在设计一个不通用的独特图标，清晰原则尤为重要。想一想您的用户可能会将哪些视觉线索或符号与您要传达的动作相关联。例如，如果您想为学习应用程序设计一个“图书馆”图标，您可能会使用熟悉的书籍图像。另一方面，猫头鹰可能太晦涩难懂了。
2.视觉清晰度（或可读性）
第二个图标设计原则是视觉清晰度或可读性。图标很小，所以你想让用户尽可能容易地看到正在发生的事情。如果你包含太多细节或间距不足，你就有可能让你的图标——以及它们的各个元素——变成一个模糊的斑点。
正如您在排版、颜色和 UI 设计的大多数其他方面所做的那样，创建您的图标以获得最佳的易读性。
3. 简单
与视觉清晰度密切相关的是简单性原则。当您在有限的空间内工作时，必须简单有效地传达每个图标的含义。您不希望用户考虑不必要的细节，或者必须仔细观察才能弄清楚图标实际描述的是什么。尽可能简洁地传达它。
考虑这两个灯泡图标的例子。左边的一个相当简单，而右边的一个包含更多细节。两者都表达了同样的意思，但更简单的版本可以说更容易理解。
4.熟悉度
我们图标设计的第四个原则是熟悉度。您不需要重新发明轮子；而是坚持你的用户所知道的。
在这篇文章的前面，我们讨论了不同类型的图标：通用的、冲突的和独特的。尽可能设计通用的图标。经典示例是用于表示“搜索”功能的放大镜、用于表示用户收件箱的信封图标、表示主屏幕的房屋图标以及表示打印功能的打印机图标。
设计此类图标时，无需提出新的东西。用户已经理解这些图标的含义，几乎是第二天性——这就是您想要创建的直观可用性。
5.对齐和平衡
现在我们开始了解细节。图标设计应该是一门精确细致的艺术，所以一定要力求对齐和平衡。
从本质上讲，这意味着定位图标的每个元素，以便肉眼“看起来正确”。有时这需要居中对齐甚至间距，但通常需要您根据自己的判断来实现正确的平衡。
考虑从Google 的图标库中获取的这两个图标。第一个是圆形图标，线条和箭头完美居中。想象一下，如果箭头不在它指向的线的中间，那将是多么令人讨厌！
然而，第二个图标有一个右对齐的加号——这与它所包含的形状（不完全是矩形）配合得更好。在设计您自己的图标时，请利用您设计师的眼光来确保每个图标的正确对齐和平衡。
6. 全面的一致性
我们图标设计的第六个原则，全面一致性，指的是整个图标系列的设计。虽然每个单独的图标都在传达自己的信息，但产品中使用的所有图标都应该和谐共存。这意味着他们都需要遵守同一套规则。
要创建一致性，请确保所有图标具有相同的视觉重量（即相同的高度和宽度）。而且，如果您使用颜色，请使用与整体视觉品牌一致的配色方案。
让我们再次回到宜家的例子。显示的每个图标都有不同的形状，但您可以看到它们属于同一个图标系列。这要归功于一致性原则。
7. 个性和品牌
最后但同样重要的是：设计你的图标时要考虑到个性和品牌。作为产品用户界面不可或缺的一部分，图标在捕获和与更广泛的视觉品牌保持一致方面发挥着重要作用。
这是您发挥创意的机会。您可以使用颜色和样式来设计视觉上独特的图标（而不会影响简单、清晰和熟悉这些最重要的品质）。
在这里您可以看到Holland & Barrett图标系列中的一些图标。如果您熟悉 Holland & Barrett（如果不熟悉，请访问他们的网站），您可以看到这些图标是如何根据整体品牌设计的。
如何开始图标设计
现在你知道图标设计的黄金法则了。那么接下来呢？
如果您准备好设计自己的图标，您首先需要合适的工具。我们建议从 Figma、Adobe XD 或 Sketch 开始，因为这些是一些最流行的行业平台，但您会在此处找到最佳 UI 设计工具的完整列表。
设置好所选工具后，您就可以尝试设计自己的图标或按照教程进行分步指导。只需在 Google 中输入“Sketch/Figma/Adobe XD 的图标设计教程”。
请记住：我们的 7 条图标设计原则随时为您提供指导。在整个过程中回顾它们，您很快就会拥有一套可用的、用户友好的、美观的属于您自己的图标。
