为大家翻译一篇来自 uxmovement 的文章，关于填充图标和轮廓图标的差异化及适用场景，希望引起大家对图标使用的更多思考。

阅读本文需要8分钟

在构建移动端应用程序时，有时您必须决定是使用填充图标还是轮廓图标，哪种风格更适合用户体验？

有些人认为他们之间的区别只是偏好问题，但研究表明，这其中有更多的意义，其中一种风格的识别率比另一种更快。

知道何时使用填充或轮廓图标将使你的用户更容易浏览你的产品。同时选择正确的风格能够更快地让用户识别你的图标并做出更精准的决策。

一项研究“填充图标和轮廓图标—图标样式对可用性的影响”发现图标样式影响任务性能。通过识别和选择图标的速度和准确性来衡量任务性能。

实体图标通常比轮廓图标识别速度更快，但也有一些例外。一些图标在任务时间上没有显示任何差异。这与特征线索有关。

·图标的特征提示 

特征提示是用户用来识别图标的。如果没有特征提示或很难注意到特征，图标将无法识别。

比如说，注释气泡图标的尾部是其特征。没有它，它只是一个圆。锁图标上的钥匙孔是它的特征提示。如果没有它，很容易将图标误认为是一个包。齿轮图标上的齿是其特征提示。没有它，它看起来就像一个甜甜圈。

研究表明使用的锁图标没有钥匙孔，是识别错误最多的图标，有超过四分之一的使用者因此操作失误。钥匙孔是一个必要的特征提示，因为没有它的图标看起来像一个袋子，钱包，甚至一个壶。

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

·什么时候使用轮廓风格图标会更快被识别？

除了包含特征提示之外，提示还必须突出或易于注意。有时，某些图标上的特征提示在轮廓样式中比填充样式更为突出。

研究发现，有三个图标在轮廓样式中识别速度更快——评论气泡、垃圾桶和钥匙。这些图标都具有细微的特征提示，并且都显示在形状的外边缘。因此，轮廓样式使这些提示更容易被注意到。

作为填充样式时使用时，注释气泡尾的特征很容易被忽略，相比之下轮廓样式时，特征会更明显。垃圾桶的盖子作为填充样式时，是很难被注意到的，轮廓的样式时，特征也会更明显。钥匙的钥匙齿是很细微的，但在轮廓风格中也变得明显起来。

当图标的特征提示很细微并且出现在形状的边缘时，请使用轮廓样式。这使得特征线索会更加突出，从而会被更快的识别。

选择图标时，最好保持一致的风格。不要混合使用填充和轮廓样式，而是尝试选择一组具有突出特征的图标，这些图标具有向用户展示的更明显的特征点。

例如，如果将注释、垃圾桶和关键图标与具有更显著提示的图标进行比较，您可以看到不同之处。更明显的特征提示，更容易被注意到。

·什么时候使用填充风格图标会更快被识别？

要符合大众认知—大多数图标以现实世界中的物理对象为原型。这些物体是填充的，以轮廓的形式出现并不能贴切大多数人的日常认知，这就是实体图标识别速度更快的原因。

尽管如此，用户仍然能够识别轮廓图标。但如果图标的形状轮廓太复杂，则需要更长的时间去识别它。

研究发现，拇指、剪刀、电话和工具图标在填充样式下识别起来更为清晰。这是因为这些图标的轮廓样式在它们的视觉表现上会有狭窄的内部间距，会干扰用户的视觉识别。

对于结构造型较为复杂的对象，最好使用填充图标。轮廓形式适合用于更简单的形状，使图标更容易识别。

·当结构造型没有太大区别时 

研究发现，无论哪种风格的图标都很容易识别。例如，星星、购物车和旗帜图标的识别时间都很接近。

这说明这些轮廓样式的图标不会减慢用户的识别速度。原因是它们内部的间距足够大，从而降低了视觉上的干扰。内部间距越窄，产生的视觉干扰就越多。

·选中按钮的样式选择 

通常情况下，我们会使用填充图标突出标签栏中的已选中的选项，而其他未选择的选项保持轮廓样式。但这种设计实践是落后的，应该是相反的。

用户需要更快地在他们未选择的选项上进行识别，而不是在他们已经选择的选项上。使用填充图标作为选中项的样式很没有必要。对于没有选择的选项而言，使用填充样式反而会更为重要。

应该使用轮廓图标作为选中样式，而不是使用填充图标。因为轮廓图标在样式和颜色上已经有了作了区分，已经达到了增强所选项的效果。

·非常规指南 

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

·总结——选择图标风格时应当遵守 

① 图标由需要突出和容易识别的特征提示组成

② 填充风格识别更快，除非它们的特征提示不明显

③ 当轮廓图标足够的内部间距时，它们更容易识别

④ 图标造型边缘只有细微的特征，请使用轮廓风格

⑤ 图标造型内部的间距较窄，则使用填充风格