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

UI设计中空心图标和实心图标的运用

发布时间:2017:09:04 08:03:40 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1393个文字,预计阅读时间4分钟
导语
在 UI 设计中,空心图标和实心图标应该在什么场景下使用?有人说,空心图标在视觉上比实心图标看起来更复杂,实心图标比空心图标识别度更高。对此,设计师们各抒己见,一部分人表

在 UI 设计中,空心图标和实心图标应该在什么场景下使用?有人说,空心图标在视觉上比实心图标看起来更复杂,实心图标比空心图标识别度更高。


UI设计中空心图标和实心图标的运用

对此,设计师们各抒己见,一部分人表示赞同,认为空心图标使用线形描绘,相对实心图标更难识别,但能给人轻松、精致的感觉。而另一种观点认为,图标识别度的高低并不取决于实心空心,而是取决于图形、颜色等其他因素。

一. 图标的功能

首先,这次讨论聚焦在一种特定类型的图标:功能性图标。我们先来回顾一下这类图标的基本功能。

功能性图标在生活中很常见,通常出现在机场、车站、酒店、商场等大型公共场所,给人们提供向导,如下图:


UI设计中空心图标和实心图标的运用

UI设计中,图标是最常见的设计元素之一,图标的使用起源于Macintosh 1.0,甚至在更早的Xerox图形界面开始就有了。它们往往被赋予可操作,提示说明等作用。


UI设计中空心图标和实心图标的运用

从智能手机系统发布至今,图形界面的风格完成了拟物到扁平的演变。随着ios7推出,几乎所有APP中的图标都变得越来越扁平和纤细,其背后的原因,主要是避免因图标过分醒目降低内容的可读性。

总的来说,图标最基本的功能是迅速传达信息。

在现今的设计工作中,图标与文字的搭配已经到了走火入魔的地步。一些比较抽象的概念,用文字足以表达清楚,仍然要在文字旁设计一个图标,如果单看图标的话丝毫无法让人与其赋予的功能产生联系。

即便如此,图标依然很重要。因为图标不仅仅是在没有文字表达的时候“让用户一眼看出含义”,除此之外,图标还能快速定位,区分内容层次,增加界面的韵律。


UI设计中空心图标和实心图标的运用

拿一款音乐产品举例,只看图标不看文字的情况下,很难直接看出含义,但它们的作用远不在此。列表中的图标使用了空心图标,看起来轻松且精致,图标与文字放在一起形成了一个整体,起到了对齐的作用;如果去掉了图标,列表中的信息就会区分不开,视觉上有些混乱,用户更难聚焦到某一行的选项上了。

另外图标还能强化品牌形象,与本答案的讨论无关,不做赘述。

二. 实心图标比空心图标识别度高

假设你在逛街的时候突然内急,冲进大商场找洗手间,实心和空心两种图标,那种能更快识别出洗手间的标志?


UI设计中空心图标和实心图标的运用

如果单纯从视觉吸引来讲,实心图标确实比空心图标更快被用户识别。下图展示的是对人眼构成吸引的要素作用大小(从左到右排序):


UI设计中空心图标和实心图标的运用

空心图标通过形状吸引眼球,实心图标通过色块吸引眼球,所以空心图标的辨识程度比实心图标低了一等。

对于实心图标是否比空心图标识别度更高的问题,早在iOS7系统推出之时,就已经有过一些讨论。一名从Viget毕业的体验设计师Curt Arledge特意写了一个APP,针对实心和空心图标做了1260个识别测试[1],来看测试结果:


UI设计中空心图标和实心图标的运用

结果发现,用户识别这两类图标的速度仅仅相差0.1秒。


UI设计中空心图标和实心图标的运用

其中第一组,实心图标取胜。这些图标源于生活,图标延续了其原本的含义,识别速度取决于色彩和形状对视觉的吸引程度,实心图标更容易辨认。


UI设计中空心图标和实心图标的运用

值得注意的是第二组的三个图标,空心图标识别度更高。

这三个图标的形态是对生活中事物的抽象化表现,其中speech bubble在现实生活中并不存在,人们在图形界面中创造了这个图形并赋予了含义;而垃圾桶和钥匙在现实生活中的形态过多,代表这两个事物的图标属于对生活中物体形态的抽象总结。在这种情况下,图形的形状更能够让用户快速识别出图标的含义,色块反而成为了干扰识别的因素。

所以,如果是延续了物体原本含义的图标,使用实心更容易识别;被人们赋予了含义的图标,空心更容易识别。

三. 什么情况下适合用实心图标,什么情况用空心的呢

1. 运用实心图标和空心图标区分不同的状态

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

看了这篇文章的人还看了

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

上一篇:如何设计出完美的网页折叠面板

下一篇:老年用户做网页体验设计应该注意什么

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

      统一报价,无隐形消费

    • 金牌服务

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

    • 售后无忧

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

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

    截屏,微信识别二维码

    微信号:13825575516

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

    优化二维码打开微信