在今天的用户界面中，图标是绝对不可或缺的元素。虽然大多数图标很小，甚至不被注意，但它们帮助设计者和用户解决了许多问题。图标是可用性和导航的关键。用户可以感知图标的功能，但只有设计师才能明白，要让图标简单、好用、有表现力，需要付出多少时间和精力。
乔布斯曾说，“细节至关重要，值得花时间仔细打磨。”图标是当今UI界面中可用性和导航系统的核心组成部分。所以，在今天的文章中，我们来仔细总结一下常见的图标类型及其在UI中的使用。
图标的定义
一般来说，图标是具有高度通用性的小尺寸图像，用于传达视觉信息。图标通常可以传达丰富的信息，它们通常与词汇和文本结合使用。它们相互支持，或隐或显地传达其中所包含的意义、特征、内容和信息。在数字设计领域，图标作为象形文字和表意文字存在于网页或UI界面中，是保证界面可用性的基础设施，是实现人机交互目标的有效途径。
图标的表意功能使得它可以有效地替换文本。研究表明，使用高辨识度和清晰的图标大大提高了界面导航的可用性。对于人类来说，视觉信息的处理速度要比文字快得多。但是，另一方面，图标需要传达一个相对清晰的概念，任何轻微的误读都会对整体体验造成很大的伤害。因此，图标的选择应该谨慎，仔细测试，这样才能达到良好的平衡，并为目标受众所接受。
图标使用历史
众所周知，图标和标志不是界面设计师创造的概念。它们的存在可以追溯到人类文明诞生之初。在漫长的历史中，早期用来传达信息的图标演变成了系统的文字，在地图、书籍、壁画、建筑等各个地方仍然有图标和标志用来表示和传达特定的概念。
随着科技的发展，计算机诞生了，显示器的出现为图形界面的诞生铺平了道路。20世纪70年代，施乐公司在其位于帕洛阿尔托的研究所生产了最早的具有图形界面的计算机，即著名的XeroxAlto。这款昂贵的概念机最终并没有进入大众的视野，但其后续机型施乐之星于1981年问世，成为计算机史上的重要里程碑。施乐奥拓对乔布斯和比尔盖茨的启发引发了计算机史上最著名的战争:苹果VS微软，Windows对抗Macintosh。当然，这是后话。
施乐奥拓推出了大量的图标设计，其中文件夹和垃圾箱的图标设计是此后图标设计中最为人熟知和普遍接受的设计理念。
苹果公司的Macintosh系统是图形界面发展史上不可避免的里程碑。1991年，苹果通过Macintosh发布了第一个彩色图标设计。图标所能容纳的信息量比上次的黑白界面更大，全新的风格显著提升了信息传递的功能性。
之后，越来越多的图标开始由灵活强大的数字技术诞生，并根据不同的需求演变成不同的分支和风格。很多 *** 作系统和工具开始预制一些系统化的图标，这些图标是基于各种需求而诞生的。越来越多的自制和重新设计的图标逐渐进入我们的视野。图标有很多种类型，我们可以用不同的方式来划分。
根据功能划分图标类型
解释性图标
这些图标是用来阐明信息的图标类型。它们是用于解释和阐明特定功能或内容类别的视觉标记。在某些情况下，它们不是直接交互的UI元素，在许多情况下，会有文案来帮助解释它们的含义。同时，它们往往作为行为号召文本的视觉辅助元素而存在，以提高信息的可识别性。很多时候，用户会使用这些解释性图标来获取信息，而不是匹配文本。但是，有时候图标表达的意思可能不够完整或清晰。图标最好和文案一起使用，减少误读的可能。
互动图标
这种图标不仅是UI中的显示功能，还参与用户交互，是导航系统不可或缺的一部分。它们可以被点击并做出相应的响应，帮助用户执行特定的 *** 作并触发相应的功能。
装饰和娱乐图标
这种图标通常用于提升整个界面的美感和视觉体验，但并不具备明显的功能性。然而，它们同样重要。这种图标迎合了目标受众的喜好和期望，具有特定风格的外观，增强了整个设计的可靠性和可信度。更准确的说，这些装饰图标不仅能吸引和留住用户，还能让整个用户体验更加积极。装饰图标通常显示季节性和周期性特征。
应用图标
图标是各种 *** 作系统平台上不同数码产品的入口和品牌展示所使用的标识，是这个数码产品的身份象征。在绝大多数情况下，它会将品牌标志和品牌颜色融入图标设计中。有些图标还会使用吉祥物和企业视觉识别色的组合。优秀的应用图标设计其实是市场调研和品牌设计的结合。它的目标是创造一个用户在屏幕上无法快速找到的醒目设计。
Favicon
Favicon有时也称为URL图标，是显示在网页标签中的一个小的识别图标。它也代表网页，是用户在网页和浏览器中快速定位的视觉识别标记。Favicon也是一个识别的图标，在网页的宣传推广和视觉识别方面有着重要的意义。
根据视觉特征划分的图标类型
字符图标
“字形”一词起源于排版领域，如今随着数码设计逐渐扎根于数码设计领域。源于希腊语，意为“雕刻”。首先，读者和作者的常规符号和字符符合集合中包含的各种图形是值得的。在排版领域，符号图标通常是包含特定含义、特定功能、可以表达或书写的类词系统。它们可以是字母或图形，有时甚至是两者的组合。以下是一个古老的凯尔特字符系统:
在现代数码设计中，文字图标在古老的文字系统中有了新的发展。现在的人物图标还包含字母、数字、图形，更加丰富。这样一来，说到人物图标，我们通常不会认为是文字，而是图标。以下是材质设计的人物图标集:
图标使用简化的通用图形。用户在使用的时候，有足够的辨识度和灵活的应用场景。
平面和半平面图标
平面图标设计比字符图标复杂很多，其中加入了颜色等元素，明显比几乎由轮廓和笔画组成的字符图标高出一个维度。不过，和前者一样，平面图标也注重清晰直观的视觉信息传递，为用户提供一目了然的视觉内容。平面图标设计最突出的作用就在这里。在二维平面上，不借助复杂的纹理和阴影，清晰直观地传达信息，与拟物化图标正好相反。
拟物化图标
如上所述，伪物化图标是平面图标的反义词。就像当初伪物化图标设计师常说的，是“复制现实”。尽量将现实世界中的形状、纹理、光影融入到整个图标的设计中，这是它的特点。伪物化图标的设计潮流几乎是伴随着Macintosh的诞生和演变，一步步走到了极致。然后从UI设计领域开始，被扁平化设计取代。但是，伪物化图标仍然被广泛应用于不同领域，尤其是游戏设计和游戏产品的图标设计。
SVG图标
SVG图标是基于XML的2D矢量图标技术，其中SVG是ScalableVectorGraphics的缩写。其技术标准已被W3C推广，并得到所有主流浏览器的支持。SVG现在越来越流行，大大减少了跨平台跨屏幕设计中图标显示的兼容性问题。
根据图像隐喻划分的图标类型
著名可用性研究专家JackobNielsen曾在NNGroup的一篇文章中披露了图标类型划分的标准。根据图标中反映的隐喻，它们可以分为三种主要类型。
相似性，象征现实世界中的物理实体，是放大镜图标、购物车图标、邮件图标等最典型的设计。
参考图标(Referenceicon)是通过类比物体来设计的，比如压缩和解压的工具图标，经常使用包和拉链等图像来传达概念。
任意图标，这些图标的设计与其功能/意义无关。它们本身并不传达功能意义，而是依靠用户长期的观看和使用，逐渐习惯熟悉意义。现在很多界面中的“保存”按钮都使用了软盘的图标，但是软盘实际上已经退出了历史舞台。很多用户甚至不知道软盘的存在，但是用户在长期的使用过程中会知道它的作用，并在大脑中形成这样一个概念回路。
有效的图标设计
在上一篇文章中，我们总结了高效图标设计应该具备的特征。在这里，让我们快速回顾一下:
清晰:图标的含义应该是可以理解的，能够被受众吸收。
有意义:发送有意义的信息。
可识别性:图标中包含的视觉符号应该被正确识别和呈现。
简洁:图标只包含必要的元素，容易被快速感知，不会让用户感到费力。
吸引人:图标设计比其他视觉元素更突出、直观、醒目。
灵活和可扩展:图标应该是可扩展的，无论大小都可以理解，完整和易读。
无意冒犯:应该没有隐含的意思，没有被误读的可能。
一致:图标应该和应用程序风格一致。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）