首页 > 知道问答 > UI设计中的图标分为哪些类型?

UI设计中的图标分为哪些类型?

UI设计中的图标分为哪些类型?

匿名 2018-08-29
满意回答

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

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

图标的定义

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

图标可以有效地替代文本来使用。有研究表明,使用高度可识别的、清晰的图标,对于界面导航的可用性有极大的提升。不过图标的选取要谨慎并经过仔细的测试,才能达成良好的平衡,为目标受众所接受。

图标使用的历史

图标、标识都不是界面设计师所创造的概念,它的存在可以追溯到人类文明诞生之初,早期用来传达信息的图标演变为系统的文字,而在地图、图书、壁画和建筑等各种各样的地方,还存在着用来代表和传达特定概念的图标和标识。

随着技术的发展,计算机诞生了,而显示器的出现,也为图形化界面的诞生,铺平了道路。

来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年,苹果首次发布了彩色的图标设计。在此之后,越来越多的图标开始诞生,并且基于不同的需求而演化出不同的分支和风格。随着图标类型很多,我们可以用不同的方式来划分它们。

基于图标来划分图标类型

解释性图标

这些图标是旨在阐明信息的图标类型。它们是用来解释和阐明特定功能或者内容类别的视觉标记。在某些情况下,它们并不是直接可交互的UI元素,在很多时候也会有辅助解释其含义的文案。同时,它们还常常会作为行为召唤的文本的视觉辅助元素而存在,以提高信息的可识别性。

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

交互图标

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

装饰和娱乐用图标

这种图标通常是用来提升整个界面的美感和视觉体验,并不具备明显的功能性。但是,它们同样是重要的。这类图标迎合了目标受众的偏好与期望,具备有特定的风格的外观,并且提升了整个设计的可靠性和可信度。

更准确地说,这些装饰性的图标不仅可以吸引并留住用户,并且可以让整个用户体验更加积极。装饰性图标通常呈现出季节性和周期性的特征。

应用图标

应用图标是不同数字产品在各个操作系统平台上的入口和品牌展示用的标识,它是这个数字产品的身份象征。在绝大多数的情况下,它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。

真正优秀的应用图标设计,其实是结合市场调研和品牌设计的组合,它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。

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

字符图标

现在的字符图标同样包含了字母、数字和图形,它们中所涵盖的内容更加丰富。现在提及字符图标,我们通常不会将它们视为文字,而是图标。下面是Material Design 的字符图标集:

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

扁平和半扁平图标

扁平化的图标设计比起字符图标就要复杂得多,其中增加了色彩和其他元素的填充,比起近乎由轮廓和笔画构成的字符图标,明显要高一个维度。

扁平的图标同样专注于清晰而直观的视觉信息传达,为用户提供一目了然的视觉内容。扁平化的图标设计最突出的功能也就在此,不借助复杂的纹理和阴影来明了地、视觉化地传达信息,和拟物化图标正好相对。

拟物化图标

就如同上文所说,拟物化图标是扁平化图标的对立面,正如同当初拟物化图标设计师常说的,它就是“抄现实”,尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计,拟真是它的特点。

从UI设计领域开始,拟物化图标这一设计被扁平化设计所替代。不过,拟物化图标现在依然广泛地运用在不同领域,尤其是游戏设计和游戏类产品的图标设计当中。

SVG 图标

SVG图标,其中的SVG是Scalable Vector Graphics的缩写,它是基于 XML 的2D矢量图标技术,SVG 图标现在越来越受欢迎,它很大程度上降低了跨平台、跨屏幕设计的时候图标显示上的兼容性问题。

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

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

相似图标

参考性图标

随意式图标,

匿名 2018-08-29
相关课程
  • 优惠价格: 电话咨询
  • 开班时间: 滚动开班
  • 培训周期: 一个周以内
  • 课程简介: 多年的教学积累与课程研发,专注只做UI设计培训,制定出更符合企业需求与学员发展的设计课程体系,0基础小白也能成为企业急需的高端设计人才。
  • 上课地址: 南京市玄武区珠江路67号华利国际大厦3908室
详细介绍

开班时间:5月,6月,7月,8月,9月,10月


小班教学 ,10人为一小班,体系完善,适合各个层次的需求者

公司人性化学习,可以先试听后报名先学习后付费

连锁机构 ,持续介绍就业机会, 不是介绍一次


课程简介:多年的教学积累与课程研发,专注只做UI设计培训,制定出更符合企业需求与学员发展的设计课程体系,0基础小白也能成为企业急需的高端设计人才。

相关问题
首页 | 课程 | 新闻 | 知道
© 2019 hxsheji.cn 版权所有.
江苏厚学网信息技术股份有限公司.
苏ICP备14012599号-10