欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

UI界面中的图标设计

发布时间:2017:10:10 10:02:20 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1529个文字,预计阅读时间4分钟
导语
如今的用户界面中,图标绝对是不可或缺的元素。虽然绝大多数的图标都很小,甚至不被人注意到,但是它们帮助设计和用户解决了许多问题。图标是可用性和导航的关键,用户能够感

如今的用户界面中,图标绝对是不可或缺的元素。虽然绝大多数的图标都很小,甚至不被人注意到,但是它们帮助设计和用户解决了许多问题。图标是可用性和导航的关键,用户能够感知到图标的功用,但是只有设计师才会明白,想要让图标简约、可用还富有表现力,要耗费多少时间和精力。

乔布斯曾经说过:“细节至关重要,花费时间仔细打磨是值得的。”图标是现如今UI界面中可用性和导航体系的核心组件,所以,今天的文章,我们来仔细归纳一下常见的图标类型和它们在UI中的使用。


UI界面中的图标设计

图标的定义

一般而言,图标是具有高度概括性的、用于视觉信息传达的小尺寸图像。图标常常可以传达出丰富的信息,并且常常和词汇、文本搭配相互搭配使用,两者互相支撑,或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。在数字设计领域,图标作为网页或者UI界面中的象形图和表意文字而存在,是确保界面可用性的基础设施,也是达成人机交互这一目标的有效途径。


UI界面中的图标设计

图标的表意功能,使得它可以有效地替代文本来使用。有研究表明,使用高度可识别的、清晰的图标,对于界面导航的可用性有极大的提升,对于人类而言,视觉信息的处理速度比起文本要快太多。不过,从另一方面来看,图标需要传递出相对清晰的概念才行,任何轻微的误读都会对整体体验造成极大的伤害,所以,图标的选取要慎之又慎,经过仔细的测试,才能达成良好的平衡,并且为目标受众所接受。

图标使用的历史

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


UI界面中的图标设计

随着技术的发展,计算机诞生了,而显示器的出现,也为图形化界面的诞生,铺平了道路。20世纪70年代,施乐在位于帕罗奥托的研究所当中,诞生了最早的拥有图形化界面的电脑,著名的 Xerox Alto。这款昂贵的概念机最终并没有走进大众的视野,但是它的后续机型施乐之星在1981年问世,并且成为了计算机史上的重要里程碑,而Xerox Alto 对于乔布斯和比尔盖茨的启发,更是引发了计算机历史上最著名的一场战争:苹果VS微软,Windows 对抗 Macintosh。当然这都是后话。

Xerox Alto 中引入了大量的图标设计,其中文件夹和垃圾箱的图标设计,从当时一直延续到现在,成为图标设计中最广为人知和普遍接受的设计概念。


UI界面中的图标设计

来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年,苹果借由Macintosh,首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大,全新的样式使得它在信息传达的功能性上有了明显的提升。

在此之后,越来越多的图标开始借由灵活而强大的数字技术而诞生,并且基于不同的需求而演化出不同的分支和风格。许多操作系统和工具开始预制一些成体系的图标,诞生基于种种需求,越来越多的自制的、重设计的图标,逐步进入了我们的视野。图标类型很多,我们可以用不同的方式来划分它们。

基于功能来划分图标类型

解释性图标

这些图标是旨在阐明信息的图标类型。它们是用来解释和阐明特定功能或者内容类别的视觉标记。在某些情况下,它们并不是直接可交互的UI元素,在很多时候也会有辅助解释其含义的文案。同时,它们还常常会作为行为召唤的文本的视觉辅助元素而存在,以提高信息的可识别性。很多时候用户会借助这些解释性图标来获取信息,而不是相搭配的文本。不过,有的时候图标表达的含义可能还不够完整或者清晰,最好是将图标和文案搭配起来使用,降低误读的可能性。


UI界面中的图标设计UI界面中的图标设计

交互图标

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


UI界面中的图标设计UI界面中的图标设计

装饰和娱乐用图标

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:app移动端导航之汉堡图标设计

下一篇:超全面!关于用户故事地图的7种用法

  • 18900 文章总数
  • 2420208访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信