干货 | UI设计初学者必须要懂的图标设计知识

如今的用户界面中,图标绝对是不可或缺的元素。虽然绝大多数的图标都很小,甚至不被人注意到,但是它们帮助设计和用户解决了许多问题。

图标是可用性和导航的关键,用户能够感知到图标的功用,但是只有设计师才会明白,想要让图标简约、可用还富有表现力,要耗费多少时间和精力。

乔布斯曾经说过:“细节至关重要,花费时间仔细打磨是值得的。”图标是现如今UI界面中可用性和导航体系的核心组件。

所以,今天的文章,我们来仔细归纳一下常见的图标类型和它们在UI中的使用。

图标的定义

一般而言,图标是具有高度概括性的、用于视觉信息传达的小尺寸图像。图标常常可以传达出丰富的信息,并且常常和词汇、文本搭配相互搭配使用,两者互相支撑,或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。

在数字设计领域,图标作为网页或者UI界面中的象形图和表意文字而存在,是确保界面可用性的基础设施,也是达成人机交互这一目标的有效途径。

图标的表意功能,使得它可以有效地替代文本来使用。有研究表明,使用高度可识别的、清晰的图标,对于界面导航的可用性有极大的提升,对于人类而言,视觉信息的处理速度比起文本要快太多。不过,从另一方面来看,图标需要传递出相对清晰的概念才行,任何轻微的误读都会对整体体验造成极大的伤害,所以,图标的选取要慎之又慎,经过仔细的测试,才能达成良好的平衡,并且为目标受众所接受。图标使用的历史正如同我们所知道的,图标、标识都不是界面设计师所创造的概念,它的存在可以追溯到人类文明诞生之初,在漫长的历史长河当中。早期用来传达信息的图标演变为系统的文字,而在地图、图书、壁画和建筑等各种各样的地方,还存在着用来代表和传达特定概念的图标和标识。


随着技术的发展,计算机诞生了,而显示器的出现,也为图形化界面的诞生,铺平了道路。20世纪70年代,施乐在位于帕罗奥托的研究所当中,诞生了最早的拥有图形化界面的电脑,著名的 Xerox Alto。这款昂贵的概念机最终并没有走进大众的视野,但是它的后续机型施乐之星在1981年问世,并且成为了计算机史上的重要里程碑。而Xerox Alto 对于乔布斯和比尔盖茨的启发,更是引发了计算机历史上最著名的一场战争:苹果VS微软,Windows 对抗 Macintosh。当然这都是后话。Xerox Alto 中引入了大量的图标设计,其中文件夹和垃圾箱的图标设计,从当时一直延续到现在,成为图标设计中最广为人知和普遍接受的设计概念。
来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年,苹果借由Macintosh,首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大,全新的样式使得它在信息传达的功能性上有了明显的提升。在此之后,越来越多的图标开始借由灵活而强大的数字技术而诞生,并且基于不同的需求而演化出不同的分支和风格。许多操作系统和工具开始预制一些成体系的图标,诞生基于种种需求,越来越多的自制的、重设计的图标,逐步进入了我们的视野。图标类型很多,我们可以用不同的方式来划分它们。基于功能来划分图标类型

解释性图标

这些图标是旨在阐明信息的图标类型。它们是用来解释和阐明特定功能或者内容类别的视觉标记。

在某些情况下,它们并不是直接可交互的UI元素,在很多时候也会有辅助解释其含义的文案。

同时,它们还常常会作为行为召唤的文本的视觉辅助元素而存在,以提高信息的可识别性。很多时候用户会借助这些解释性图标来获取信息,而不是相搭配的文本。

不过,有的时候图标表达的含义可能还不够完整或者清晰,最好是将图标和文案搭配起来使用,降低误读的可能性。


交互图标这种图标在UI中不止是展示的作用,它们还会参与到用户交互当中来,是导航系统不可或缺的组成部分。它们可以被点击,并且随之响应,帮助用户执行特定的操作,触发相应的功能。
装饰和娱乐用图标这种图标通常是用来提升整个界面的美感和视觉体验,并不具备明显的功能性。但是,它们同样是重要的。这类图标迎合了目标受众的偏好与期望,具备有特定的风格的外观,并且提升了整个设计的可靠性和可信度。更准确地说,这些装饰性的图标不仅可以吸引并留住用户,并且可以让整个用户体验更加积极。装饰性图标通常呈现出季节性和周期性的特征。


应用图标应用图标是不同数字产品在各个操作系统平台上的入口和品牌展示用的标识,它是这个数字产品的身份象征。在绝大多数的情况下,它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采用吉祥物和企业视觉识别色的组合。真正优秀的应用图标设计,其实是结合市场调研和品牌设计的组合,它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。
FaviconFavicon 有时候也被成为 URL 图标,它是网页在网页的标签中显示的识别性小图标,它同样代表着网页,是用户在网页和浏览器当中快速定位的视觉识别标识。Favicon 同样是身份识别用的图标,并且在网页的宣传和推广以及视觉识别上都有重要的意义。基于视觉特征来划分的图标类型字符图标“Glyph”一词是源自于排版领域,现在已经随着数字设计而逐步在数字设计领域扎根了,它源自于希腊语,含义为“雕刻”。最初,它值得是读者和作家约定俗成的符号、字符合集中所包含的各种图形。在排版领域当中,符号图标通常是包含特定的含义、特定功能、可表意也可书写的类文字系统,它可以是字母,也可以是图形,有的时候甚至是两者的组合。下面是一套古老的凯尔特字符系统:
在现代的数字设计当中,字符图标在古老的字符系统上有了新的发展。现在的字符图标同样包含了字母、数字和图形,它们中所涵盖的内容更加丰富。这样一来,现在提及字符图标,我们通常不会将它们视为文字,而是图标。下面是Material Design 的字符图标集:
字符图标使用简化和通用的图形,当用户在使用它们的时候,它们拥有足够的识别度和灵活的适用场景。
扁平和半扁平图标扁平化的图标设计比起字符图标就要复杂得多,其中增加了色彩和其他元素的填充,比起近乎由轮廓和笔画构成的字符图标,明显要高一个维度。然而和前者一样,扁平的图标同样专注于清晰而直观的视觉信息传达,为用户提供一目了然的视觉内容。扁平化的图标设计最突出的功能也就在此,在二位的平面上,不借助复杂的纹理和阴影来明了地、视觉化地传达信息,和拟物化图标正好相对。
拟物化图标就如同上文所说,拟物化图标是扁平化图标的对立面,正如同当初拟物化图标设计师常说的,它就是“抄现实”,尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计,拟真是它的特点。拟物化图标这一设计趋势几乎是跟随着Macintosh 的诞生和进化一步一步走过来,走到极致,然后从UI设计领域开始,被扁平化设计所替代。不过,拟物化图标现在依然广泛地运用在不同领域,尤其是游戏设计和游戏类产品的图标设计当中。SVG 图标SVG图标,其中的SVG 是 Scalable Vector Graphics 的缩写,它是基于 XML 的2D矢量图标技术,它的技术标准被 W3C 所推行,并且得到所有的主流浏览器的支持。SVG 图标现在越来越受欢迎,它很大程度上降低了跨平台、跨屏幕设计的时候图标显示上的兼容性问题。基于图像隐喻来划分的图标类型著名的可用性研究专家 Jackob Nielsen 曾经在 NNGroup 的文章中披露了这种图标类型划分的标准。图标基于其中所反映出来的隐喻,可以划分为三个主要类型。相似图标,它是将现实世界中的物理实体给符号化,这种设计最典型的就是用于搜索的放大镜图标,购物车图标,邮件图标等。参考性图标,它是使用类比对象的方式来设计的图标,比如压缩和解压类的工具图标,常常会使用包、拉链这样的意象来传递出概念。随意式图标,这类图标的设计和其功能/含义并没有关联,它们本身并不传递出功能性的含义,依靠的是用户长时间的查看、使用,逐步习惯来熟悉其中的含义。现在许多界面当中的“保存”按钮采用的是软盘的图标,但是软盘实际上早已退出历史舞台,许多用户甚至都不知道软盘的存在,但是用户会在长时间的使用过程中了解它的功能,并且在大脑中形成这样的概念回路。
有效的图标设计在之前的文章中,我们总结过高效的图标设计应该具备的特征,在此我们快速回顾一下:清晰:图标的意义应该是可理解的,可供受众吸收的有意义:传递出有意义的信息可识别:图标中所包含的视觉符号应该能够被正确地识别和呈现简单:图标中仅仅包含必要的元素,便于被快速的感知,不会让用户感到费劲吸引人:图标设计要比其他的视觉元素更突出,直觉而引人瞩目灵活可拓展:图标应该可缩放,并且不论大小都能被人所理解,完整而易读不冒犯人:它应该没有隐含意义,也不会有被误读的可能一致:图标应该和应用保持一致的风格希望以上内容对你学习UI设计有所帮助,觉得可以请转发支持,将一如既往的为大家分享更多UI设计干货文章。喜欢可关注VX公众号:UI设计小琪,私聊简信领取UI学习教程~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,123评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,031评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,723评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,357评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,412评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,760评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,904评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,672评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,118评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,456评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,599评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,264评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,857评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,731评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,956评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,286评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,465评论 2 348

推荐阅读更多精彩内容

  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,559评论 1 48
  • 跟着王克老师学习关系心法,主要致力于关系的问题,所有的烦恼问题一切源于关系的问题,工作后,边做边慢慢的融化...
    修桃阅读 286评论 0 0
  • 优秀是一种习惯,可能会有好多同学会如艾力小时候一样误解。但看完亚里士多德的完整片段以后你会明白,优秀是一种习惯,但...
    16师国伟阅读 218评论 0 1
  • 在江南那座小城里,有着在门口慢慢纺线的阿婆,咿咿呀呀的纺车不停地在阿婆的手下转动,没有太多的声音,没有太多的过去;...
    余珂阅读 733评论 19 7