在UI设计中使用图标的7个基本规则-得设

图标是微小的象形图，您几乎可以在任何应用程序中找到它。它们帮助我们节省屏幕空间，高效沟通，并使与产品的交互更加有趣。

但是，尽管图标很大，但在 UI 设计中创建和使用图标并不容易。由于图标直接影响功能的可发现性和用户在与产品交互时所犯的错误数量，因此设计松散的图标可能会对产品的用户体验产生重大负面影响。这就是为什么 UI 设计人员必须考虑创建和使用图标的一些不可或缺的规则。

在本快速指南中，我想介绍使用系统图标的七个设计原则。

1. 确保您选择的图标的含义对用户来说非常清晰

清晰度是用户界面设计最重要的属性之一。清晰的界面使用起来更直观。在图标设计方面，清晰度可以通过图标传达其含义的程度来衡量。毕竟，图标只是特定动作、对象或事件的视觉表示。当用户不清楚这种表示形式时，图标会立即失去其实用价值，并成为装饰性元素而不是功能性元素。

用户应该很容易理解图标的含义。理想情况下，用户应该能够通过直观或通过以前的经验来判断图标的作用。但是当涉及到视觉设计时，说起来容易做起来难。问题是每个人都能理解的图标数量有限。代表主页的房子图标、代表打印的打印机图标、代表搜索的放大镜图标和代表邮件的纸信封几乎都是人们熟悉的视觉隐喻。除此之外，其他图标可能对大众观众来说不清楚。

你可能会认为，当用户看到一个不熟悉的图标时，他们会愿意与它互动，看看它的作用，但这是一个常见的误解。大多数时候，当用户看到一个不熟悉的图标没有附带的标签时，他们更有可能跳过它。因此，隐藏在此图标后面的功能仍然无法被发现。

有一些简单的技巧可以帮助您提高图标的清晰度：

不要重新定义通用图标的含义。当图标的功能与用户期望的不同时用户将感到困惑。
不要使用含义冲突的图标。可以表示同一事物的图标不应在一个 UI 中一起使用。例如，“心形”和“星形”图标都可以表示“添加到精选”。当您在 UI 中引入这两个图标时，您会立即造成混淆。
在适当的地方添加文本标签。 带有标签的图标比单独的图标更好。如果您想使用图标，但不确定它是否清晰，您可以随时在它旁边添加文本标签。用户将阅读标签并更容易理解其含义。
为图标添加替代文本。 替代文本标签（也称为辅助功能描述）对用户不可见，但它们允许使用辅助技术（如 VoiceOver 工具）。这种技术告诉视障用户屏幕上显示的内容。
进行竞争对手分析。 竞争对手分析将告诉您用户希望看到什么。用户解码图标含义的能力基于他们以前的体验。由于用户从他们使用的产品中学习，因此您可以进行竞争对手分析，以了解竞争对手在其产品中使用了哪些图标。这将增加您选择目标受众熟悉的图标的机会。
使用 5 秒测试。此技术将帮助您确保为界面元素选择适当的视觉表示形式。如果为一个对象/动作/事件想出一个合适的图标需要超过五秒钟，你就不太可能为它找到相关的视觉表示。

2. 保持图标简单和示意性，但不要太示意性！

创建具有许多视觉细节的图标以使可视化更加逼真可能很诱人。但是，这种方法可能会对设计过程产生负面影响。您添加的视觉细节越多，图标设计过程就越乏味。我们经常设计一组图标，而不仅仅是一个图标，这样图标设计过程就会变得很耗时。

坚持使用简单图标的规则也会给你带来一个显着的优势——它们在不同的屏幕尺寸和分辨率上看起来同样好。鉴于我们通常设计响应式应用程序，因此此属性变得非常重要。没有人愿意为小尺寸屏幕开发一组单独的图标。

您可能想知道如何在“太多”和“太少的细节”之间找到适当的平衡。答案很简单——去掉任何不必要的装饰细节，这些细节无助于传达意义。

3. 确保您的图标具有良好的缩放性

即使使用原理图图标，也不能保证图标可以很好地缩放。您需要对它们进行测试，以确保您的图标可以在小尺寸下被识别。将图标缩放到 16 x 16px，看看它们是否仍然易于区分。

4. 为您的图标选择合适的尺寸

图标的大小很重要。当您将图标设置得太小时，用户将无法区分它们，并可能在触摸界面上单击它们。但是，当您将图标设置得太大时，它们将需要用户过多的关注。图标的大小应根据您设计的介质选择，并与 UI 的其他元素成比例。

让我们先谈谈媒介。如果您为桌面设计，则常规图标可以选择 24 x 24 像素，小图标可以选择 16×16 像素，大图标可以选择 32 x 32 像素。在设计移动应用程序时，应根据建议的触摸目标大小来选择图标的大小。由于用户使用拇指与触摸屏交互，因此您的图标应该对拇指友好。Apple 和 Google 都建议使用与触摸目标相对相同的尺寸——Apple Human Interface Guidelines 建议使用 44 x 44pt。

同时，Google Material Design 推荐使用 48 x 48px 的触摸目标。在绝对值中，它应该在 10 毫米左右（这是平均成人手指的宽度）。但是，无论您为哪个平台进行设计，请确保您的用户可以在不缩放的情况下使用您的产品（他们不必放大来区分图标）。

图标比例

现在让我们谈谈比例。UI 中的所有视觉元素都应按比例调整大小。对于图标，图标的大小应与放置它们的容器成比例地选择。例如，如果要设计一个带有图标的按钮，则需要考虑按钮的宽度和高度，并选择图标的大小，以便它们可以有机地放入此容器中。

5.力求视觉一致性

一致性有助于提高对用户界面的理解。当视觉设计元素在您的产品中一致地使用时，用户可以学习如何更快地使用您的产品，因为他们可以将他们的知识从应用程序的一个部分转移到另一个部分。与用户界面的任何其他部分一样，图标应在设计中一致地使用。您不能在应用程序的某个部分使用一组图标，在另一个部分使用另一组图标，并期望获得无缝体验，因为这会使您的 UI 看起来支离破碎。

视觉一致性还意味着对整个图标集使用相同的图形样式 – 样式属性（如形状、描边粗细和透视）应保持一致。理想情况下，图标的粗细应与应用的主要字体粗细相对应。

最后但并非最不重要的一点是，确保图标在浅色和深色背景上看起来同样好。大多数应用都具有深色 UI，因此必须确保应用的所有视觉属性在浅色和深色主题上看起来都一样好。

6. 考虑平台细节

在所有平台上，系统为标准项目定义了许多图标。甚至在开始为应用设计图标之前，请检查图标系统提供的内容。大多数情况下，您将能够在系统库中找到所需的所有内容。

您还需要记住，不同的平台可能会对具有相同含义的图标使用不同的视觉表示。例如，Material Design （Android）中的“共享”图标和 iOS （Apple）中的共享图标看起来不同。

在为应用创建图标集之前，请查看平台指南，并确保要创建的图标与指南一致。

7. 与用户一起测试您的图标

无论您花费多少时间设计用户界面，都应该始终对其进行可用性测试。可用性测试将揭示你的 UI 存在的可用性问题，并帮助你了解用户是否可以理解你选择的图标。

以下技术非常适合测试图标：

可识别性测试。向测试参与者展示一个没有任何标签的图标，并询问它的作用。可以在 UI 上下文中运行可识别性测试（向测试参与者显示用户界面的模拟）或显示独立图标。如果你的大多数测试参与者都能分辨出图标的作用，那么你对图标设计的假设是有效的。
记忆力测试。在用户与您的产品互动后，向他们展示您的图标，并询问他们是否能记住每个图标的作用。大多数时候难以记住的图标效率非常低。

测试用户对您的图标的感受也是值得的。设计的审美吸引力对用户体验有直接影响。用户倾向于认为有吸引力的产品更有用。这就是为什么确保你的视觉风格与你的目标受众和他们的味觉产生共鸣是至关重要的。