如今的用户界面中 , 图标绝对是不可或缺的元素 。虽然绝大多数的图标都很小,甚至不被人注意到,但是它们帮助设计和用户解决了许多问题 。图标是可用性和导航的关键,用户能够感知到图标的功用,但是只有设计师才会明白,想要让图标简约、可用还富有表现力,要耗费多少时间和精力 。
乔布斯曾经说过:“细节至关重要 , 花费时间仔细打磨是值得的 。”图标是现如今UI界面中可用性和导航体系的核心组件,所以,今天的文章,我们来仔细归纳一下常见的图标类型和它们在UI中的使用 。
图标的定义
一般而言 , 图标是具有高度概括性的、用于视觉信息传达的小尺寸图像 。图标常常可以传达出丰富的信息 , 并且常常和词汇、文本搭配相互搭配使用,两者互相支撑 , 或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息 。在数字设计领域 , 图标作为网页或者UI界面中的象形图和表意文字而存在 , 是确保界面可用性的基础设施,也是达成人机交互这一目标的有效途径 。
图标的表意功能,使得它可以有效地替代文本来使用 。有研究表明,使用高度可识别的、清晰的图标,对于界面导航的可用性有极大的提升,对于人类而言,视觉信息的处理速度比起文本要快太多 。不过,从另一方面来看,图标需要传递出相对清晰的概念才行,任何轻微的误读都会对整体体验造成极大的伤害,所以 , 图标的选取要慎之又慎 , 经过仔细的测试,才能达成良好的平衡,并且为目标受众所接受 。
图标使用的历史
正如同我们所知道的,图标、标识都不是界面设计师所创造的概念,它的存在可以追溯到人类文明诞生之初,在漫长的历史长河当中,早期用来传达信息的图标演变为系统的文字,而在地图、图书、壁画和建筑等各种各样的地方,还存在着用来代表和传达特定概念的图标和标识 。
基于功能来划分图标类型
解释性图标
这些图标是旨在阐明信息的图标类型 。它们是用来解释和阐明特定功能或者内容类别的视觉标记 。在某些情况下,它们并不是直接可交互的UI元素,在很多时候也会有辅助解释其含义的文案 。同时,它们还常常会作为行为召唤的文本的视觉辅助元素而存在 , 以提高信息的可识别性 。很多时候用户会借助这些解释性图标来获取信息 , 而不是相搭配的文本 。不过,有的时候图标表达的含义可能还不够完整或者清晰 , 最好是将图标和文案搭配起来使用,降低误读的可能性 。
交互图标
这种图标在UI中不止是展示的作用,它们还会参与到用户交互当中来,是导航系统不可或缺的组成部分 。它们可以被点击,并且随之响应,帮助用户执行特定的操作,触发相应的功能 。
装饰和娱乐用图标
这种图标通常是用来提升整个界面的美感和视觉体验 , 并不具备明显的功能性 。但是,它们同样是重要的 。这类图标迎合了目标受众的偏好与期望,具备有特定的风格的外观,并且提升了整个设计的可靠性和可信度 。更准确地说,这些装饰性的图标不仅可以吸引并留住用户,并且可以让整个用户体验更加积极 。装饰性图标通常呈现出季节性和周期性的特征 。
扁平和半扁平图标
扁平化的图标设计比起字符图标就要复杂得多,其中增加了色彩和其他元素的填充,比起近乎由轮廓和笔画构成的字符图标,明显要高一个维度 。然而和前者一样 , 扁平的图标同样专注于清晰而直观的视觉信息传达 , 为用户提供一目了然的视觉内容 。扁平化的图标设计最突出的功能也就在此 , 在二位的平面上,不借助复杂的纹理和阴影来明了地、视觉化地传达信息 , 和拟物化图标正好相对 。
拟物化图标
【设计师应该知道的图标基础知识!】就如同上文所说,拟物化图标是扁平化图标的对立面,正如同当初拟物化图标设计师常说的,它就是“抄现实”,尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计,拟真是它的特点 。拟物化图标这一设计趋势几乎是跟随着Macintosh 的诞生和进化一步一步走过来 , 走到极致,然后从UI设计领域开始 , 被扁平化设计所替代 。不过,拟物化图标现在依然广泛地运用在不同领域,尤其是游戏设计和游戏类产品的图标设计当中 。
SVG 图标
SVG图标,其中的SVG 是 Scalable Vector Graphics 的缩写,它是基于 XML 的2D矢量图标技术,它的技术标准被 W3C 所推行,并且得到所有的主流浏览器的支持 。SVG 图标现在越来越受欢迎,它很大程度上降低了跨平台、跨屏幕设计的时候图标显示上的兼容性问题 。