（翻译）9种清晰直观的图标应用原则

你是否曾费力想弄清楚图标的意义？用户总是想搞清楚他们不熟悉的图标的含义。这就是图标必须清晰直观的重要性所在。遵循以下图标应用原则，就不会让用户看着图标直挠头。

1.只要有空间，就应给图标添加标签

除非使用的图标是人们公认的图标（例如播放、打印、关闭、帮助等图标），否则就应给图标添加标签。唯一例外的情况是没有足够的空间给图标添加标签。
上述情况发生在有一大堆图标放在一起，或者控件区域位于有限空间内（如手机屏幕等）时。此时，可以使用提示信息，当鼠标悬停在图标上时，将图标的标签内容显示给用户。但在手机屏幕中没有鼠标悬停动作，因此无法使用提示信息，这就是手机应用中图标直观性特别重要的原因。

许多图标放在一起时，没有空间放图标标签，提示信息能够消除疑惑。

2.图标同时表达操作和对象

要使图标尽可能直观，请始终确保图标能同时表达操作和对象。首先，需要给图标挑选多数用户能轻易识别的具体对象。然后，需要精心设计对象以表达图标操作。
典型的例子是用纸飞机图标表达发送邮件，纸用来表示邮件，同时折叠成飞机形状代表发送操作。

纸飞机图标表达的操作明确、对象清楚

3.将功能相似的图标放在一起

功能相似的图标应放在一起，便于用户找到完成任务所需的所有功能。图标一经分组，由于空间有限，很难给每个图标单独添加标签。
但将功能相似的图标分组后，可以给每组添加标签，使组内图标功能更明确。这不仅让图标更易于浏览，还有助于用户理解每组图标的意义，不用逐个理解每个图标。

分组放置并命名功能相似的图标

4.保持图标的顺序和位置一致

用户理解图标功能靠的不止是图标外观，还有其顺序和位置。有研究发现，用户能轻易适应图标外观发生变化，但很难习惯图标位置的变化。
上述研究结果表明：“图标的位置比外观更重要。人们记住的是东西的位置，而不是其外观”。图标位置发生变化会让用户晕头转向。因此，将图标放到理想位置，即使重新设计界面，也要保持其位置不变。

设计变更也要保持图标顺便和位置一致

5.图标具有相同的视觉主题

具有相同视觉主题的图标看着更相似。用户根据图标的视觉主题分辨其类别，找到功能相似的图标。当使用视觉主题时，重要的是要保持其在每个层次上的一致性[1]。
视觉主题不一致的案例之一是文本编辑器中的删除线图标。大多数编辑器中的粗体图标用的是粗体“B”，斜体图标用的是斜体“I”，下划线图标用的是带下划线的“U’，但在删除线图标中犯的错误是，图标中用的不是带删除线的“S”，而是“ABC”。
删除线图标与其它文本编辑图标视觉上不一致，会混淆用户。事实上，有研究发现，参与测试的用户，对粗体、斜体和下划线图标的理解率达100%，而删除线图标仅有54.55%。视觉主题的些许不同会造成巨大的差异。

删除线图标没有使用“S”，而其它图标的视觉主题保持一致

6.不要用图标表示抽象操作

最好用图标表示具体操作，不要表示抽象操作。具体操作的对象很清楚，意义很明确，而为抽象操作设计图标，必须绞尽脑汁想出操作相关的对象，当最终想出来后，还得担心用户有不同的理解。
上一节提到的研究中还发现，有一多半参与测试的用户不理解“undo”和“redo”图标的意义。这两个抽象动作用指向左侧和右侧的箭头来表达，由于界面中很多操作的图标都包含箭头，很容易让用户产生歧义。
此时不应仅用箭头表达“undo”和“redo”操作，最好是使用“undo”和“redo”单词的缩写“Un”和“Re”，同时用一个小箭头指向后面和前面。箭头本身有多种含义，但添加了与操作相似的独特元素的话，就会使图标清晰直观。

仅用箭头会有多种含义，再配上“Un”和“Re”就会让用户想到特定操作

7.图标内容不要太隐晦

没有具体图片表达操作时往往会用隐晦的图片，而后者不能与操作很好地关联的话，效果就会适得其反。
使用剪刀图片表达剪切操作很容易让人理解，大多数人能把剪刀和切割东西联系起来，但他们很难将链条和超文本链接联系起来。第5节提到的研究中发现，64.71%的参与测试的用户不能从链条图标中想到超文本链接。
也许与粗体、斜体和下划线图标相同视觉主题的图标更适合超文本链接，能让参与测试的所有用户都明白图标的含义。图标中包含带超文本链接的字母“L”能同时表达动作和功能。，字母“L”代表链接，外观是蓝色的，并带有下划线。
下划线文本图标中也有下划线，但使用的字母是“U”，其与超文本链接图标的区别是后者的字母及颜色不同。也可以使超文本链接图标中的下划线更粗一些，使其与下划线文本图标的区别更明显。

用户不会从链条想到超文本链接，但能从字母颜色及下划线看出相应功能

8.图标不要有太多具体细节

大部分设计人员都想让图标看着美观，但一些设计人员走得太远，赋予了图标太多具体细节。有时图标的细节太具体，看着更像是照片，会妨碍用户理解图标的整体意义。
有篇文章按细节的不同层次对比了“家”图标中的房屋图像，当房屋细节太多时，看着就像街边特定房子的图片，而当只显示构成房子概念的关键特征时，即屋顶、烟囱、门等，图标看着才更像“家”的图标。
细节上的平衡对图标的清晰直观十分重要。当在图标中使用具体对象时，只选用相同类型对象共有的少数特征，忽略对象的其它细节。

仅用屋顶、烟囱、门就能让用户理解图标代表的是“家”

9.不要在小图标中使用3D视角

图标中使用3D视角和阴影能使图标形象逼真、引人注目，加强视觉效果，但在小图标中使用会使图标变得复杂、令人疑惑。
3D视角适合用于大中型图标，用户能理解图标含义。但在小图标中使用时，用户查看图标的角度不同，立体效果就会下降。小图标可以使用平面的，直接的视角，便于用户根据对象独特的形状识别图标。
小图标中使用阴影也会混淆用户。阴影太重会让图标失真。如果图标需要使用阴影，减少阴影尺寸，并使其紧密，这样阴影能将稍微增强图标，不会干扰图标的轮廓和形状。

3D视角和阴影会使小图标看着混乱，降低美观度

使用图标的好处

用户界面中使用图标有很多好处。图标能节省控件空间，并让不同文化的用户理解。但最重要的是，图标能让用户更容易找到界面操作。如果图标不清晰直观，用户就不会体验到这些好处。上述9种应用原则对于如何设计和展示图标很重要，可以指导设计人员工作，但不要让它们限制设计人员。

原文地址：https://uxmovement.com/buttons/9-guidelines-for-clear-and-intuitive-icons/

[1]原文：When you find a visual motif, it’s important that you keep it consistent at every level.