小元素大影响：UI图标的分类与功能
图标在用户界面中的作用是无法估量的。图标虽小但具备实际意义，能够帮助解决很多问题。它们是实现可用性和直观导航的关键要素。
图标在用户界面中的作用是无法估量的。图标虽小但具备实际意义，能够帮助解决很多问题。它们是实现可用性和直观导航的关键要素。而且，只有设计师清楚要设计出简单、有用、具有表现力的图标需要花费多少时间和精力。
用户体验设计领袖史蒂夫•乔布斯曾说过：“细节至关重要，只要能把产品做得完美，便值得你去等待。” 显而易见，图标便是让界面可用和可导航的重要细节。接下来，我们将探讨图标的类型以及如何在界面中应用图标。
定义
一般来说，图标可被定义为具备高象征性意义的、用于沟通用途的图像。图标是信息丰富的标识，随文字和语句一起帮助信息传达者和接收者完成信息的交换。文案通过字符来传达信息，图标则通过展现与现实世界中物体相似的图形来实现沟通。在计算和数字设计领域，图标是用于网站或移动界面中的象形图或象形字，用以提高可用性和实现高效的人机交互流程。
在图标的众多好处中，最重要的一点是图标在某些场景中能够取代文字。在之前的一篇文章中，我们讨论了 文案与图标的关系 以及它们对界面可用性的影响。研究结果表明，鉴于大部分人感知图像的速度比感知文字更快，使用易识别、清晰的图标能够在很大程度上增强导航的有效性。然而，即使很微小的误解也会导致糟糕的用户体验，因此关于采用什么类型的图标应经过严格、仔细的测试，以确保面向特定的目标用户在图标和文本之间达到良好的平衡。
历史
很明显，图标并不是由界面设计师发明的。事实上，图标拥有悠长久远、丰富多彩的历史，自远古时代起便作为一种沟通要素存在着，广泛地应用于地图、标识、规划、手册和众多其它信息源之中。然而，随着新技术和图形用户界面(GUI)的出现，图标的发展史迎来了新的转机。从历史观点上说，施乐(Xerox)于20世纪70年代初创建出首批面向图形UI界面的图标，这些图标应用于名为Xerox Alto的机器上。Xerox Alto当时的价格非常高昂，并没有真正地走向大众。当然，这只是一个开端。1981年，Xerox Star问世，被称为首款采用图标作为界面元素的个人计算机，其中的文件夹和废纸篓图标更是一直沿用到现在。
另一个让人印象深刻的里程碑是苹果(Apple)于1991年首次发布彩色图标，并随后发布了针对Macintosh系统更新后的图标版本。这次进步将图标的功能性和信息传递能力与其和谐、吸引人的外观相结合，预示着新图标风格的诞生。
如今，图标被广泛应用于数字设计领域，发展成各种不同主题和风格的图标集。虽然目前已有很多现成的图标集，但图标库的规模仍在不断扩大，无时无刻不在寻求吸引用户的新解决方案。
关于图标类型，我们可以从不同的角度对图标进行分类。
基于功能的分类
说明性图标
说明性图标旨在解释说明，是能够解释具体特征或指示内容类型的可视化标识。有些时候它们并不是直接交互的布局元素，此外还经常会看到此类图标与相应的解释文本一起使用。这种方式能够在一次交互中激发多种感知元素，从而增强行为召唤元素的可识别性。用户如果能够立即明白图标所传达的含义，则不会特别去注意文本内容，特别是无法快速理解文本信息的用户更会如此。但是，同时使用文本和图标能够降低用户因错误理解图标信息而导致误解或错误交互行为的风险。
销售类应用中的商品类别图标
交互式图标
交互式图标直接融入到交互流程中，是导航的核心支持元素。它们是可点击或可触击的，会响应用户的请求，执行自身所代表的行为。此类图标的主要目标是告知用户按钮、控件及其它交互元素所代表的功能或特性。
装饰性和娱乐性图标
此类图标相对于功能性，更注重审美诉求。当然，美观性也同样重要，是图标设计的考虑因素之一，因为符合目标用户喜好和预期的图标风格和外观能够为高期望奠定坚实的基础。装饰性图标通常用于呈现季节特征和特价优惠。
应用图标
应用图标是代表应用的交互式品牌标志，适用于不同平台，用以帮助呈现数字产品的最初形态。大部分情况下，应用图标体现了应用程序的Logo，根据此类图标的规范要求设计而成。不过，应用图标也可以采用其他形式，例如吉祥物或者企业标志颜色的抽象组合。有效的设计方案通常基于详尽全面的市场调查和竞品研究，旨在确保设计出的图标具备鲜明的产品特征，不会淹没在整屏的其它应用图标中。
网站图标(Favicon)
网站图标又称为URL图标或收藏夹图标，是一种特殊的产品/品牌图标类型，显示在浏览器的地址栏和收藏夹标签中，使得用户能够在浏览网站的过程中迅速获得相关的视觉联系。这一界面元素能够有效地宣传网站品牌，确保其视觉识别系统具备高识别度。
基于视觉特性的分类
字体图标(Glyph)
“字形”(Glyph)这一设计术语源于印刷领域，源自希腊语单词“雕刻”。它最初的含义是一套获得大量用户（读者、作者等）认同的符号集中的一个元素符号或图形符号，一个可读可写的字符。
在印刷领域，字形指的是一个特定图形，代表特定书写体系或字体中的一个元素：可以是一个字素，也可以是字素的一部分，或者有时会是多个字素的组合。可参考下图，一套古凯尔特语字形集。
在当代数字设计领域，“glyph”有了新的含义，但并非革命性的改变。它用来定义呈现元素外观或外形的图形化符号：可以是字母或数字字体，也可以是描绘编码字符的符号。说到图标，字体图标首先被描述为代表其它物体的印刷符号，而不是字母或数字。在常见的示例中，其中一个便是用符号«@»来代表介词«at»。下图是谷歌的一组Material Design图标。
字体图标采用简化、通用的形状和图形，易识别且可灵活应用于响应式设计中。此类图标在数字产品的导航体验中发挥着很重要的作用。
扁平化和半扁平化图标
扁平化图标通常比字体图标稍微复杂一些：它们会采用配色和其它视觉元素以呈现出稍微复杂的图形。虽然如此，扁平化图标同样专注于实现简单且易识别的视觉隐喻以快速传递必要信息。扁平化图标最显著的特征（也是其名称的来源）是其只采用扁平的二维视觉细节，这与高度写实和细节化的拟物图标完全相反。扁平风格 使得设计师能够更加灵活地应用色彩和形状而不会影响到图标的可识别性。
拟物图标
拟物化设计的理念与扁平化设计有些“背道而驰”。拟物化致力于绘制三维仿真图形，以尽量逼真地呈现现实世界中真实物体的自然外观。拟物设计几年前广泛应用于不同类型和功能性的GUI，不过如今慢慢被扁平化设计所替代，因为扁平化UI更简单，也更灵活，更实用，更符合数字界面的需求。尽管如此，拟物图标目前仍广泛应用于游戏设计及游戏领域应用图标设计中。
SVG图标
SVG图标的全称为可缩放矢量图形，是基于XML格式二维矢量图形的响应式图标。SVG图标的设计和集成遵从万维网联盟(W3C)自1999年起便制定的、所有主流浏览器均支持的开放标准。鉴于当前的网站面向多种不同的平台和设备，需要支持响应式设计以确保能够在各种平台上实现良好的用户体验，SVG图标越来越受欢迎。
基于意象隐喻的类型
关于此种分类，著名可用性专家雅各布•尼尔森(Jackob Nielsen)曾进行过相关研究，并在他为尼尔森诺曼集团所写的文章中进行了说明。根据尼尔森的观点，图标可按照它们所体现的隐喻类型划分为三种核心类别。
相似图标：相似图标直接描绘图标所代表的真实物体，将其符号化。比较典型的示例有用于搜索的放大镜图标，购物车图标，邮件图标等。
参考图标：参考图标基于类比将对象符号化。例如采用带拉链的图标来代表文件压缩工具。
任意图标：任意图标与其所代表的事物没有直接关联，经过长时间的熟悉和使用，用户渐渐习惯它们所传达的含义。现在许多应用界面使用软盘图标来代表“保存”功能，属于参考图标一类，不过随着软盘慢慢退出历史舞台，许多用户根本不清楚软盘图标与保存功能之间的联系，但是多年的使用习惯使得他们很清楚这个图标代表的含义。
有效图标的关键特性
接下来我们将简要介绍一下有效图标需具备的几条重要特性。如果有兴趣深入了解图标在用户界面中的角色和确保图标有效的重要特性，可阅读我们之前发表的几篇文章。
· 清晰——确保目标用户能够轻松理解图标的含义
· 有意义——图标可传达有效信息
· 可识别——确保用户能够正确识别出图标中的视觉符号
· 简单——图标中不包含非必要的图形元素，确保用户能够轻松地快速感知和理解图标的含义
· 原始且突出——图标能够在界面的其它相似元素中脱颖而出，特别是应用图标
· 可扩展且灵活——图标在不同的尺寸和分辨率下均能保持统一性、完整性和易辨认性
· 引入注意——图标符合审美预期，具备和谐的视觉吸引力
· 非攻击性——图标没有任何可能会让任意目标用户感到冒犯或无礼的隐藏含义或误解
· 一致性——图标风格与网页布局的通用风格相符
推荐阅读
如有意愿深入了解相关内容，可阅读以下文章：
Icon Classification: Resemblance, Reference, and Arbitrary Icons
A Brief History of the Origin of the Computer Icon
Iconic Simplicity. The Vital Role of Icons.
Visual Perception: Icons VS Copy in UI.
How to Combine Icons from Different Sets in Your UI
原文链接：https://uxplanet.org/small-elements-big-impact-types-and-functions-of-ui-icons-87c6a74d366e
