认识达内从这里开始

一般而言，图标是具有高度概括性的、用于视觉信息传达的小尺寸图像。有研究表明，使用高度可识别的、清晰的图标，对于界面导航的可用性有极大的提升。今天达内UI培训就为大家介绍UI设计面试题：UI图标可以分为哪几种类型。

基于功能来划分图标类型

1、解释性图标

这些图标是旨在阐明信息的图标类型。它们是用来解释和阐明特定功能或者内容类别的视觉标记。在某些情况下，它们并不是直接可交互的UI元素，在很多时候也会有辅助解释其含义的文案。同时，它们还常常会作为行为召唤的文本的视觉辅助元素而存在，以提高信息的可识别性。很多时候用户会借助这些解释性图标来获取信息，而不是相搭配的文本。不过，有的时候图标表达的含义可能还不够完整或者清晰，最好是将图标和文案搭配起来使用，降低误读的可能性。

2、交互图标

这种图标在UI中不止是展示的作用，它们还会参与到用户交互当中来，是导航系统不可或缺的组成部分。它们可以被点击，并且随之响应，帮助用户执行特定的操作，触发相应的功能。

这种图标通常是用来提升整个界面的美感和视觉体验，并不具备明显的功能性。但是，它们同样是重要的。这类图标迎合了目标受众的偏好与期望，具备有特定的风格的外观，并且提升了整个设计的可靠性和可信度。更准确地说，这些装饰性的图标不仅可以吸引并留住用户，并且可以让整个用户体验更加积极。装饰性图标通常呈现出季节性和周期性的特征。

3、应用图标

应用图标是不同数字产品在各个操作系统平台上的入口和品牌展示用的标识，它是这个数字产品的身份象征。在绝大多数的情况下，它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采用吉祥物和企业视觉识别色的组合。真正优秀的应用图标设计，其实是结合市场调研和品牌设计的组合，它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。

4、Favicon

Favicon 有时候也被成为 URL 图标，它是网页在网页的标签中显示的识别性小图标，它同样代表着网页，是用户在网页和浏览器当中快速定位的视觉识别标识。Favicon 同样是身份识别用的图标，并且在网页的宣传和推广以及视觉识别上都有重要的意义。

基于视觉特征来划分的图标类型

1、字符图标

“Glyph”一词是源自于排版领域，现在已经随着数字设计而逐步在数字设计领域扎根了，它源自于希腊语，含义为“雕刻”。最初，它值得是读者和作家约定俗成的符号、字符合集中所包含的各种图形。在排版领域当中，符号图标通常是包含特定的含义、特定功能、可表意也可书写的类文字系统，它可以是字母，也可以是图形，有的时候甚至是两者的组合。下面是一套古老的凯尔特字符系统：

在现代的数字设计当中，字符图标在古老的字符系统上有了新的发展。现在的字符图标同样包含了字母、数字和图形，它们中所涵盖的内容更加丰富。这样一来，现在提及字符图标，我们通常不会将它们视为文字，而是图标。下面是Material Design 的字符图标集：

字符图标使用简化和通用的图形，当用户在使用它们的时候，它们拥有足够的识别度和灵活的适用场景。

2、扁平和半扁平图标

扁平化的图标设计比起字符图标就要复杂得多，其中增加了色彩和其他元素的填充，比起近乎由轮廓和笔画构成的字符图标，明显要高一个维度。然而和前者一样，扁平的图标同样专注于清晰而直观的视觉信息传达，为用户提供一目了然的视觉内容。扁平化的图标设计最突出的功能也就在此，在二位的平面上，不借助复杂的纹理和阴影来明了地、视觉化地传达信息，和拟物化图标正好相对。

3、拟物化图标

就如同上文所说，拟物化图标是扁平化图标的对立面，正如同当初拟物化图标设计师常说的，它就是“抄现实”，尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计，拟真是它的特点。拟物化图标这一设计趋势几乎是跟随着Macintosh 的诞生和进化一步一步走过来，走到极致，然后从UI设计领域开始，被扁平化设计所替代。不过，拟物化图标现在依然广泛地运用在不同领域，尤其是游戏设计和游戏类产品的图标设计当中。

4、SVG 图标

SVG图标，其中的SVG 是 Scalable Vector Graphics 的缩写，它是基于 XML 的2D矢量图标技术，它的技术标准被 W3C 所推行，并且得到所有的主流浏览器的支持。SVG 图标现在越来越受欢迎，它很大程度上降低了跨平台、跨屏幕设计的时候图标显示上的兼容性问题。

基于图像隐喻来划分的图标类型

著名的可用性研究专家 Jackob Nielsen 曾经在 NNGroup 的文章中披露了这种图标类型划分的标准。图标基于其中所反映出来的隐喻，可以划分为三个主要类型。

1、相似图标，它是将现实世界中的物理实体给符号化，这种设计最典型的就是用于搜索的放大镜图标，购物车图标，邮件图标等。

2、参考性图标，它是使用类比对象的方式来设计的图标，比如压缩和解压类的工具图标，常常会使用包、拉链这样的意象来传递出概念。

3、随意式图标，这类图标的设计和其功能/含义并没有关联，它们本身并不传递出功能性的含义，依靠的是用户长时间的查看、使用，逐步习惯来熟悉其中的含义。现在许多界面当中的“保存”按钮采用的是软盘的图标，但是软盘实际上早已退出历史舞台，许多用户甚至都不知道软盘的存在，但是用户会在长时间的使用过程中了解它的功能，并且在大脑中形成这样的概念回路。