来源：Medium网站

作者：UX运动

翻译：奥创

阅读时长：5min

在构建移动应用程序时，您需要决定是使用实体图标还是大纲图标。哪种风格更适合用户体验？

有些人认为它们之间的差异仅仅是一个偏好问题，但研究表明，它有更多的东西 - 一种风格的识别率比另一种风格更快。

了解何时使用实体或大纲图标可让您的用户轻松浏览您的移动应用。他们将能够更快地识别您的图标并选择正确的选项。

一项研究性研究“ 填充与大纲图标：图标样式对可用性的影响 ”发现，图标样式会影响任务性能。通过识别和选择图标的速度和准确性来测量任务性能。

实体图标通常比大纲图标更快识别，但有一些例外。并且一些图标显示任务时间没有差异。这与特征线索有关。

特色线索

特征提示是用户用来识别图标的内容。如果缺少或难以注意到特征线索，则图标变得无法识别。

例如，评论气泡图标的尾部是其特有的提示。没有它，它只是一个圆圈。锁图标上的钥匙孔是其特有的暗示。没有它，很容易将图标误认为是一个包。齿轮图标上的牙齿是其特有的提示。没有它，它看起来像一个甜甜圈。

研究中使用的锁定图标没有锁孔，是最错误识别的图标，超过四分之一的失败。钥匙孔是一个必要的特征提示，因为没有它，图标看起来像一个包，钱包，甚至是一个锅。

这些特征提示是用户依赖图标识别的。使用图标时，请确保它包含用户识别它们所需的所有特征提示。如果图标看起来像是不同的对象，请考虑为其添加额外的特征提示。

大纲图标更快时

除了包括特征提示之外，提示必须突出或易于注意。有时，某些图标上的特征线索在轮廓样式中比实体样式更突出。

该研究发现三个图标在大纲样式中更快识别 - 评论泡泡，垃圾桶和钥匙。这些图标具有出现在形状外边缘上的微妙特征线索。因此，大纲样式使这些提示更容易被注意到。

评论泡沫尾巴很容易被遗漏作为一个坚实的，但更明显的轮廓。垃圾桶盖子很难以实心的方式注意到，但在轮廓中更容易看到。关键的牙齿是微妙的，但锯齿状的边缘在轮廓样式上更加明显。

当图标的特征提示很微妙并出现在形状的边缘时，请使用轮廓样式。这使得提示更加突出，这导致更快的识别。

选择图标时，最好坚持一致的风格。不要混合实体样式和轮廓样式，而是尝试选择一组具有突出特征线索的图标，其中锐角指向外部。

例如，如果您将评论，垃圾桶和关键图标与具有更多显着提示的图标进行比较，您可以看到差异。更突出的线索突然出现，更容易被注意到。

当实体图标更快时

大多数图标代表现实世界中的物理对象。这些对象呈实体形状，并显示为轮廓。将图标视为轮廓并不是大多数人习惯看到的真实表现。这就是为什么可以更快识别实体图标的原因。

尽管如此，用户仍然能够识别大纲图标。但如果图标的形状轮廓太靠近，那么它们需要更长时间才能完成。

该研究发现，拇指，剪刀，手机和工具图标更加难以识别。这是因为这些图标的轮廓样式在其提示上都具有狭窄的内部间距，从而产生视觉噪音。

对于内部间距较窄的对象，最好使用实心图标。轮廓形状提供更简单的形状，使图标更容易识别。

风格没有区别

该研究发现了这两种风格中容易识别的图标。例如，星形，购物车和旗帜图标都具有相似的识别时间。

这意味着这些图标的大纲样式不会降低用户的速度。原因在于它们具有宽的内部间距，从而降低了视觉噪音。内部间距越窄，产生的噪声就越多，这会干扰识别。

按钮选择的图标样式

通常的做法是使用实 心图标突出显示标签栏中的活动按钮，而其他按钮保持大纲形式。但是这种设计实践是落后的，应该是另一种方式。

用户需要更多他们尚未发现的选项的识别速度，而不是他们已经选择的选项。不需要活动按钮的实心图标。对于非活动按钮来说，获取可靠图标更为重要。

使用大纲图标突出显示活动按钮，而不是实心图标。它提供了更清晰的风格和颜色变化，强化了所选按钮。

反传统指南

如果任务速度对用户很重要，则必须考虑图标识别率。如果你想要更快的识别率，坚实的风格图标会更好。但是这个规则有一个例外，你应该记住。了解规则的例外情况后，您可以在情况适合时使用轮廓样式。

总之，这是使用图标样式时应该记住的内容：

图标由需要识别和突出的特征线索组成

除非他们的线索微妙且不够突出，否则可以更快地识别实体图标

当内部间距较宽时，轮廓图标更容易辨认

如果实体版本在边缘上具有微妙的特征提示，请使用大纲图标

如果轮廓版本创建窄内部间距，请使用实心图标

-------------------------------------------------

喜欢请点赞加关注哦~~

也可以关注奥创公众号哦~看图文更方便~