图标可用性

除了通过颜色和样式传达品牌个性外，图标还必须首先在图形用户界面中传达含义。根据定义，图标是对象，动作或想法的直观表示。如果该对象，动作或想法对用户而言尚不清晰，则该图标将被简化为仅仅是让人眼花—乱的东西（令人困惑，令人沮丧，令人眼花 candy 乱的东西）以及妨碍人们完成任务的视觉噪声。

图形用户界面（GUI）中图标的优点包括：

●图标是很好的目标：它们的大小通常足够大，可以在手指操作的 UI 中轻松触摸，但也可以与鼠标光标一起很好地工作（与单词相反，后者可能会在触摸屏上出现轻敲不对称的现象）。
●但是它们节省了空间：图标可以足够紧凑以允许工具栏，调色板等在相对较小的空间中显示许多图标。
●图标很快就可以一目了然（如果设计得当的话），尤其是对于人们以前见过并使用过的标准图标而言。
●有没有必要转换为图标的国际用户，提供的图标铭记文化差异（例如，邮箱看看在不同的国家非常不同的，而信封看起来是一样的，因此一个信封是电子邮件程序比一个更国际化的图标一个邮箱）。
●图标可以在视觉上令人愉悦，并可以增强设计的美学吸引力。
●当在多个地方使用相同的图标和样式时，它们支持产品系列或套件的概念。

尽管有这些潜在的优势，但在设计图标时却没有考虑到它们的许多潜在缺点，但它们经常会导致可用性问题。

“通用” 图标稀有

有一些图标在大多数情况下都受到用户的普遍认可。这样的实例包括用于房屋，印刷品和用于搜索的放大镜的图标。在这些示例之外，由于大多数图标在各种界面上与不同的含义相关联，因此大多数图标对于用户而言仍然是模棱两可的。这没有一个标准的伤害通过图标的一段时间，因为用户可以不依赖于具有每次遇到一次相同的功能吧。

3 线汉堡包图标是努力成为普遍已知的图标的一个很好的例子。尽管大多数界面都使用此图标表示主导航菜单，但某些界面使用相同（或非常相似的图标）来代表列表。例如，列表管理应用程序 Buy Me a Pie 使用 3 行图标作为访问频繁添加的项目列表的方式。为了进一步避免混淆，将图标放置在文本字段（通常与提交按钮关联的位置）的右侧。（文本字段和列表图标具有单独的功能：如果您认为在输入字段中输入文本然后选择菜单图标将提供匹配项的缩小列表，那么您会错的。）

Buy My a Pie 应用程序（在这里，在 Android 上可以看到）使用 3 行汉堡图标的彩色版本（带圆圈），允许用户访问常见项目列表，该功能与更常见的导航菜单不同。颜色太微妙，无法使用户意识到此图标具有不同的含义。

用户经常误解的其他图标包括心脏和星星。这些图标通常用于表示收藏夹，书签，特色项目和其他用户的评分。与这些图标相关的精确功能不仅因站点而异，而且这两个图标相互竞争。结果，这些图标及其确切含义难以精确地记忆和解释。例如，假期列表网站 Combadi 上的心形图标允许用户标记自己 “喜欢” 一次旅行，但不会将该旅行保存到短列表中以方便将来参考。（在我们最近的可用性研究中，用户不喜欢任何人都可以 “喜欢” 旅行，而不是只有真正购买过的人。）相反，室内设计购物网站 Fab 使用心形图标作为用户进行旅行的一种方式保存该项目以便以后轻松找到。

与 Fab 上的心脏图标（位于产品名称右侧）相比，Combadi 上的心脏图标（在主图像下方）功能有限，因为尽管使用了相同的图标和相似的位置。

即使含义和功能上的细微差别也会妨碍用户在将来的体验中遇到图标时理解和依赖图标的能力。

就在上周，我们报告了我们对该网站的可用性研究，该网站在其主导航栏中使用了时钟图标。虽然图形本身很容易识别为时钟，但图标的含义却完全模糊不清，因为它是时钟或手表概念的非标准用法：时钟图标用于象征导航历史并打开带有用户访问过的最新页面。没有一个测试参与者单击此图标。模糊的图标 = 浪费功能。

图标需要文本标签

为了帮助克服几乎所有图标所面临的歧义，必须在图标旁边显示一个文本标签，以阐明其在特定上下文中的含义。（即使您使用的是标准图标，通常也更安全地添加标签，尤其是如果您对图标进行了稍微改动以符合您的审美喜好或限制时，尤其如此。）

图标标签应始终可见，而无需用户进行任何交互。对于导航图标，标签尤为重要。不要依靠悬停来显示文本标签：这不仅增加了交互成本，而且在触摸设备上的翻译效果也很差。

网站 Usability.gov 在网站内的每个页面上使用导航图标表示 “方法”，“模板和文档” 以及 “准则”。如果我要求阅读本文的每个人都给我发送一个表示 Methods 的图标，我相信我会收到各种各样的设计。正如我们在网页可用性设计指南中所述几年前，“如果您需要考虑想出一个导航图标，那么它对用户来说将变得不容易识别或直观。” 虽然该网站的移动版本识别出文本标签需要伴随图标才能赋予某些含义，但桌面版本会隐藏这些标签，直到好奇的用户决定将它们悬停在它们上面。将这些导航项固定在页面的左侧，以便用户在滚动时仍可使用，这表明组织认为它们非常重要和有用。但是，删除文本标签的这些图标会使它们完全没有意义，并且不利于提供轻松访问内容的目标。

Usability.gov 的移动网站在页面顶部的图标旁边显示文本标签。桌面版本将图标固定在页面的左侧，仅在悬停时才会显示标签。强迫用户搜寻标签会降低图标导航的效率。

相对尺寸助剂的引人注目

通常，与台式机网站和应用程序相比，图标在手机上的重要性更高。很容易假设由于图标（例如，汉堡包）可以在移动设计上使用，因此可以很好地转换为桌面。las，事实并非如此！在移动屏幕上，可以吸引用户注意的元素较少（这是因为屏幕较小，可以容纳较少的信息）。相反，桌面屏幕更大，通常包含很多内容。用户可能会很容易错过其中的一些内容，具体取决于屏幕的哪个部分吸引了他们的注意力。如果电话上当前仅显示的元素由徽标，标题，单个图像和菜单图标组成，

还应考虑与屏幕上显示的其他视觉元素相比，图标的相对大小。在移动网站的典型标题中，汉堡菜单图标消耗了大约 20-25％的可用屏幕宽度。当在更大的设备上按比例放大该设计时，图标的大小通常保持不变。结果，与台式机上的其他元素相比，在台式机（和较大的平板电脑，尤其是横向）上，图标将更小且不显着。通过在较大的屏幕（通常有足够的空间）上避免出现此问题，只需简单地使导航可见而不是将其折叠在图标下即可。这样，不仅可以更容易发现菜单选项，而且还可以避免由于以下原因而引起的许多可用性问题隐藏全球导航。

Upworthy.com：在移动网站设计中，分配给主菜单（左上方）三行汉堡图标的空间占用了网站徽标下方导航栏宽度的 20％。在桌面上查看时，主菜单图标以相同的尺寸显示，而导航栏的宽度则被放大。结果，该图标仅占用桌面设计总宽度的 3.5％（并且此度量甚至不包括网站内容两侧的装订线）。相对大小和争夺注意力的元素数量之间的这种差异解释了为什么菜单图标在移动设备上趋于更加引人注目。

带图标设计的提示

如果您决定在界面中包含图标，请先进行研究！熟悉竞争对手使用的图标以及您所针对的平台上常用的图标，因为这些图标对于您的用户最容易识别。

如果必须设计新图标，请遵循以下准则，努力使它们易于识别和记忆：

●保持设计简单和示意图。通过专注于对象的基本特征而不是创建高度逼真的图像来减少识别，从而加快识别速度。（较小的尺寸很难区分复杂的细节。）
●使用 5 秒规则：如果您花费超过 5 秒钟的时间来思考某个东西的合适图标，则该图标不太可能有效地传达这种含义。
●测试图标的可识别性：询问人们他们期望图标代表什么。
●测试图标的可记忆性：在几周前被告知该图标代表什么之后，请问重复的用户是否能记住该图标的含义。

并始终包含可见的文本标签。正如布鲁斯 · 托格纳西尼（Bruce Tognazzini）曾经说过的那样，“一个单词值一千张照片。”

在有关缩放用户界面的全天培训课程中，了解为多种设备尺寸创建界面时的更多设计注意事项，以及在全天导航设计课程中有关导航组件和菜单样式的更多信息。
https://www.nngroup.com/articles/icon-usability/