QQ登录

只需一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

微信扫一扫 分享朋友圈

已有 2327 人浏览分享

开启左侧

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

[复制链接]
2327 0
      随着用户体验及审美度的变化,产品界面也在相应的改变,图标作为UI设计师的吸粉利器,被看做是世界上最通用的图形语言。如何才能快速准确地把握图标,掌握图标设计原则,是每一个初学UI设计的人普遍关心的问题。今天的文章,苏州学码思小编来归纳一下常见的图标类型和它们在UI中的使用。
 
  图标的定义
  
  一般而言,图标是具有高度概括性的、用于视觉信息传达的小尺寸图像。图标常常可以传达出丰富的信息,并且常常和词汇、文本搭配相互搭配使用,两者互相支撑,或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。
  
  图标可以有效地替代文本来使用。有研究表明,使用高度可识别的、清晰的图标,对于界面导航的可用性有极大的提升。不过图标的选取要谨慎并经过仔细的测试,才能达成良好的平衡,为目标受众所接受。
  
  图标使用的历史
  
  图标、标识都不是界面设计师所创造的概念,它的存在可以追溯到人类文明诞生之初,早期用来传达信息的图标演变为系统的文字,而在地图、图书、壁画和建筑等各种各样的地方,还存在着用来代表和传达特定概念的图标和标识。
  
  随着技术的发展,计算机诞生了,而显示器的出现,也为图形化界面的诞生,铺平了道路。
  
  来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年,苹果首次发布了彩色的图标设计。在此之后,越来越多的图标开始诞生,并且基于不同的需求而演化出不同的分支和风格。随着图标类型很多,我们可以用不同的方式来划分它们。
  
  基于图标来划分图标类型
  
  解释性图标这些图标是旨在阐明信息的图标类型。它们是用来解释和阐明特定功能或者内容类别的视觉标记。在某些情况下,它们并不是直接可交互的UI元素,在很多时候也会有辅助解释其含义的文案。同时,它们还常常会作为行为召唤的文本的视觉辅助元素而存在,以提高信息的可识别性。
  
  有的时候图标表达的含义可能还不够完整或者清晰,最好是将图标和文案搭配起来使用,降低误读的可能性。
  
  交互图标这种图标在UI中不止是展示的作用,它们还会参与到用户交互当中来,是导航系统不可或缺的组成部分。它们可以被点击,并且随之响应,帮助用户执行特定的操作,触发相应的功能。
  
  装饰和娱乐用图标这种图标通常是用来提升整个界面的美感和视觉体验,并不具备明显的功能性。但是,它们同样是重要的。这类图标迎合了目标受众的偏好与期望,具备有特定的风格的外观,并且提升了整个设计的可靠性和可信度。
  
  更准确地说,这些装饰性的图标不仅可以吸引并留住用户,并且可以让整个用户体验更加积极。装饰性图标通常呈现出季节性和周期性的特征。
  
  应用图标应用图标是不同数字产品在各个操作系统平台上的入口和品牌展示用的标识,它是这个数字产品的身份象征。在绝大多数的情况下,它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。
  
  真正优秀的应用图标设计,其实是结合市场调研和品牌设计的组合,它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。
  
  基于视觉特征来划分图标类型
  
  字符图标现在的字符图标同样包含了字母、数字和图形,它们中所涵盖的内容更加丰富。现在提及字符图标,我们通常不会将它们视为文字,而是图标。下面是Material Design 的字符图标集:
  
  字符图标使用简化和通用的图形,当用户在使用它们的时候,它们拥有足够的识别度和灵活的适用场景。
  
  扁平和半扁平图标扁平化的图标设计比起字符图标就要复杂得多,其中增加了色彩和其他元素的填充,比起近乎由轮廓和笔画构成的字符图标,明显要高一个维度。
  
  扁平的图标同样专注于清晰而直观的视觉信息传达,为用户提供一目了然的视觉内容。扁平化的图标设计最突出的功能也就在此,不借助复杂的纹理和阴影来明了地、视觉化地传达信息,和拟物化图标正好相对。
  
  拟物化图标就如同上文所说,拟物化图标是扁平化图标的对立面,正如同当初拟物化图标设计师常说的,它就是“抄现实”,尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计,拟真是它的特点。
  
  从UI设计领域开始,拟物化图标这一设计被扁平化设计所替代。不过,拟物化图标现在依然广泛地运用在不同领域,尤其是游戏设计和游戏类产品的图标设计当中。
  
  SVG 图标SVG图标,其中的SVG是Scalable Vector Graphics的缩写,它是基于 XML 的2D矢量图标技术,SVG 图标现在越来越受欢迎,它很大程度上降低了跨平台、跨屏幕设计的时候图标显示上的兼容性问题。
  
  基于图像隐喻来划分图标类型
  
  著名的可用性研究专家Jackob Nielsen曾经在 NNGroup的文章中披露了这种图标类型划分的标准。图标基于其中所反映出来的隐喻,可以划分为三个主要类型。
  
  相似图标,它是将现实世界中的物理实体给符号化,这种设计最典型的就是用于搜索的放大镜图标,购物车图标,邮件图标等。
  
  参考性图标,它是使用类比对象的方式来设计的图标,比如压缩和解压类的工具图标,常常会使用包、拉链这样的意象来传递出概念。
  
  随意式图标,这类图标的设计和其功能/含义并没有关联,它们本身并不传递出功能性的含义,依靠的是用户长时间的查看、使用,逐步习惯来熟悉其中的含义。
  
  现在许多界面当中的“保存”按钮采用的是软盘的图标,但是软盘实际上早已退出历史舞台,许多用户甚至都不知道软盘的存在,但是用户会在长时间的使用过程中了解它的功能,并且在大脑中形成这样的概念回路。
  
有效的图标设计首先应满足图标清晰有意义,图标的意义应该是可理解的,可供受众吸收的,传递出有意义的信息;其次图标简单可识别,图标中所包含的视觉符号应该能够被正确地识别和呈现;第三图标灵活吸引人,图标应该可缩放,图标设计要比其他的视觉元素更突出,直觉而引人瞩目,最后,要注意图标应该和应用保持一致的风格。

上一篇:手把手教你UI如何设计界面图标
下一篇:UI图标设计我们需要去遵循什么原则?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 公众号

    微信公众号

  • 微信

    站长微信

关于我们|手机版|玩慈利网 湘公网安备 43082102000138号 ( 湘ICP备12012604号-1 )

GMT+8, 2024-11-23 12:31 , Processed in 0.070359 second(s), 9 queries , Gzip On, Redis On.

Powered by Discuz! 在此致以诚挚谢意!

CopyRight © 2011-2024 wancili.com