除了通过颜色和样式传达品牌个性,图标必须首先传达意义在图形用户界面中。根据定义,图标是物体、动作或思想的一种视觉表示。如果用户不能立即清楚地看到物体、动作或想法,图标就会被简化为仅仅是视觉装饰——令人困惑、沮丧、视觉装饰——以及妨碍人们完成任务的视觉噪音。

图标的好处在图形用户界面(GUI)包括:

  • 图标好好目标:他们通常规模大到足以很容易感动在一个手指操作的用户界面,但也可以很好地与鼠标光标(相比之下,文字,这可以遭受read-tap不对称触摸屏)。
  • 然而,他们节省空间:图标可紧凑的足够允许工具栏、调色板等在相对较小的空间中显示许多图标。
  • 图标快速识别一目了然(如果精心设计) - 为标准图标,人们所看到的和以前使用尤其如此。
  • 无需翻译图标为国际用户如果图标注意到文化差异(例如,在不同的国家,邮箱看起来很不一样,而信封看起来都一样,因此信封在电子邮件程序中比邮箱更国际化)。
  • 图标可以视觉上赏心悦目并增强设计的美感。
  • 他们支持a的概念产品系列或套房,当相同的图标和样式在几个地方使用。

尽管图标有这些潜在的优势,但如果在设计时没有考虑到图标的许多潜在的缺点,图标往往会导致可用性问题。

“通用”图标很少见

有几种图标得到了用户的普遍认可。home、print和搜索用放大镜这样的实例。除了这些例子外,大多数图标对用户来说仍然是模棱两可的,因为它们在不同的界面上有不同的含义。这缺乏标准会影响图标的采用随着时间的推移,因为用户不能指望它每次遇到时都具有相同的功能。

的第3行汉堡包icon是一个努力成为全球知名的图标的绝佳例子。虽然大多数界面使用这个图标来代表主导航菜单,但也有一些使用相同(或非常相似的图标)来代表列表。例如,列表管理应用我买馅饼使用3行图标作为访问经常添加项目列表的方式。更令人困惑的是,图标被放在文本字段的右边,这个位置通常与提交按钮相关联。(文本字段和列表图标有各自的功能:如果你认为在输入字段中输入文本,然后选择菜单图标将提供匹配项的缩小列表,那么你就错了。)

我买饼的Android移动应用程序的屏幕截图
“买我的a派”(Buy My a Pie)应用程序(如图,在安卓系统上)使用了彩色版本的3行汉堡包图标(圆圈),允许用户访问常见项目列表,这一功能与更常见的导航菜单意义不同。这个图标的颜色太微妙了,让用户无法意识到它有不同的含义。

其他经常被用户误解的图标包括。这些图标通常用于表示收藏夹、书签、特色项目和其他用户的评分。不仅与这些图标相关联的精确功能因站点而异,而且这两个图标还相互竞争。因此,很难记住和准确解释这些图标及其确切含义。例如,度假列表网站Combadi上的心形图标允许用户标记他们“喜欢”一次旅行,但不会将该旅行保存在一个简短的列表中,以便于将来参考。(在我们最近的可用性研究中,用户不喜欢任何人都可以“爱上”一次旅行,而不是只有真正购买过旅行的人。)相比之下,内部设计购物网站Fab则使用心形图标作为一种方式,让用户保存商品,以便以后更容易找到它。

在Combadi和Fab网站上使用心形图标的截图
Combadi上的心形图标(在主图像下方)与Fab上的心形图标(在产品名称的右边)相比,功能有限,因为它不会将显示的项目保存到收藏列表中,尽管它使用了相同的图标和相似的位置。

即使是在意义和功能,妨碍了用户理解,当它在未来的经验中遇到依赖于一个图标的能力稍有差别。

就在上周,我们报道了我们的使用时钟图标的网站可用性研究在其主导航栏中。虽然图形本身很容易辨认,就像一个时钟,但它是含义这个图标的含义完全模糊,因为它是对钟表概念的非标准使用:钟表图标用来象征导航历史,并打开一个抽屉,显示用户访问过的最新页面。没有一个测试参与者单击此图标。晦涩图标=浪费特征

图标需要一个文本标签

为了帮助克服几乎所有图标面临的模糊性,a文本标签必须出现在图标旁边来阐明它在特定上下文中的意义。(即使你使用的是标准图标,添加标签通常也会更安全,特别是当你根据自己的审美喜好或限制稍微改变图标时。)

图标标签应该在任何时候都可见,无需用户进行任何交互。对于导航图标,标签是特别重要的。不要依赖于悬停来显示文本标签:它不仅会增加互动成本但在触屏设备上也无法很好地转换。

网站usabil. gov使用导航图标方法模板和文档,的指导方针网站内的每一页上。如果我问每个人看完这篇文章给我的是代表一个图标方法,我相信我会收到各种各样的设计。正如我们所说的那样对于网页可用性设计指南几年前,“如果你发现你需要思考拿出导航图标,没准它不会是容易识别的或直观的用户。”虽然网站的移动版本可以识别的文本标签需要陪的图标赋予某种意义,桌面版本隐藏了这些标签,直到好奇的用户决定将鼠标悬停在他们。为了修复这些导航项目页面的左侧,以保持提供给用户,当他们滚动显示,该组织认为他们是重要和有益的。然而,剥离文本标签的这些图标使他们完全没有意义的,是适得其反,提供方便地访问内容的目标。

图标的使用对Usability.gov的移动和桌面网站截图
gov的手机网站会在页面顶部的图标旁边显示文本标签。桌面版将图标固定在页面左侧,只在悬停时显示标签。强迫用户寻找标签会降低图标导航的效率。

相对大小有助于显著性

总的来说,图标在手机上比在桌面网站和应用程序上更突出。我们很容易假设,因为一个图标(例如汉堡包)适用于移动设计,所以它也能很好地转换到桌面。唉,事实并非如此!在手机屏幕上,争夺用户注意力的元素更少(因为屏幕更小,可以容纳的信息更少)。相比之下,桌面屏幕更大,通常包含很多内容;用户可能很容易错过一些,这取决于屏幕的哪一部分吸引了他们的注意力。如果在查看手机上目前唯一的元素包括一个标志,一个标题,一个单一的形象,和一个菜单图标,菜单图标代表一个更大的被用户发现的机会比相同的图标在桌面网站上角的有吸引力的内容。

也考虑到的图标的相对大小与屏幕上呈现的其他视觉元素相比。在一个移动网站的典型标题中,汉堡包菜单图标占用了可用屏幕宽度的20-25%。当这种设计在更大的设备上放大时,图标的大小通常保持不变。因此,在台式机(和较大的平板电脑,特别是在横向)上,图标将会变得更小不突出的与屏幕上的其他元素相比。这个问题可以避免在较大的屏幕上(通常有足够的空间),只要使导航可见,而不是将其折叠在图标下。这样做,不仅菜单选项更容易被发现,而且你也可以避免许多可用性问题产生隐藏全局导航

屏幕截图3行菜单图标使用在Upworthy手机和桌面网站
Upworthy.com:在移动网站设计,分配给主菜单中的三线汉堡包图标的空间(左上)消耗约下面的网站标识导航栏的宽度的20%。当在桌面上观察时,主菜单图标呈现在相同的尺寸,而导航栏的宽度增大。其结果是,该图标仅仅消耗大约总桌面设计宽度的3.5%(该测量甚至不包括在网站内容的任一侧上的槽沟)。在相对大小和注意事项战斗元素的个数这种差异可以解释为什么菜单图标往往是在移动设备上更明显。

使用图标进行设计的提示

如果你决定在界面中包含图标,先做调查!熟悉你的竞争对手使用的图标与图标常用在你的目标平台上,因为这些将是最知名的,以你的用户。

如果你必须设计新的图标,遵循以下准则,努力使它们易于识别和记忆:

  • 保持设计简单的示意图。通过关注物体的基本特征来减少图形细节的数量,而不是创建一个高度逼真的图像,以加快识别速度。(在较小的尺寸下,很难区分复杂的细节。)
  • 使用5秒规则:如果你花5秒钟以上思考的东西适当的图标,这是不可能的图标可以有效地传达意义。
  • 测试图标的可识别性询问人们他们期望这些图标代表什么意思。
  • 测试记忆性图标:询问一组重复使用的用户,在被告知图标代表了几周前的内容后,他们是否还记得图标的含义。

始终包含一个可见的文本标签。就像Bruce Tognazzini曾经说过的,“一个字胜过一千幅画。”

创造了在我们的全日制培训课程的多个器件尺寸上的接口时,了解更多的设计考虑缩放用户界面,以及更多关于全天导航组件和菜单样式的内容导航设计课程。