1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技

时间:2020-06-18   分类:交互设计    作者:网络   来源:网络整理   点击:70

 

 

 

copyright 9fen.net

什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?我自己也曾经纠结过,但却没有深究,这篇文章给出了一些答案。挺意外的,国外设计师会针对线面图标做了深入研究,光 pdf 就有66页,这就是所谓的专业深度吧。 www.9fen.net

今天一起来学习下,也欢迎大家把自己的想法在留言区一起探讨,说说自己的看法和使用习惯。

本文来自九分网络

当我们准备做一个App设计时,常常会陷入到该用面型图标还是线型图标的纠结中,到底哪种对用户体验来说更合适呢?

内容采集来自9fen.net

 

www.9fen.net

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技

内容采集来自9fen.net

 

内容采集来自9fen.net

有些人觉得它们之间的区别只是在于个人喜好的问题,但有研究表明,更深一层的原因是:它们之间存在着不同的识别效率。

九分网络

对于设计师来说,应该要知道如何选择线型或面型图标,才能让用户更高效地浏览应用。如果设计良好,用户就能够更快地识别,并做出正确的选择。

九分网络

一项名为《面型图标vs线型图标,对于可用性方面的影响》的调查研究发现,图标样式会影响识别效率。识别效率是通过识别和选择图标的速度和准确性来衡量的。

内容采集来自9fen.net

面型图标一般来说会比线型图标更快被识别,但也有例外,一些图标在识别效率上没有明显差异,这与图标的特征线索有关。 copyright 9fen.net

图标的特征线索

特征线索是指用户如何辨认图标,如果没有明显的特征或很难被注意到,图标就没法准确识别。 内容采集来自9fen.net

  内容采集来自9fen.net

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技

本文来自九分网络

 

内容采集来自9fen.net

例如:评论气泡图标的尾巴就是它的特征线索,没有它,就只是一个圆;锁图标上的钥匙孔是它的特征线索,没有它,就很容易被误认为是包;齿轮图标上的齿形是它独有的线索,没有它,看起来就像是一个甜甜圈。

九分网络

调查研究中发现,锁图标中没有画锁孔是被误会最多的图标,有超过四分之一的用户看错了。如果没有这个必要的特征线索,图标看起来可能会像是一个包,钱包甚至是一口锅。 内容采集来自9fen.net

这些特征线索是用户识别图标的关键,使用图标时,请确保它包含了用户能识别的线索。如果图标看起来像是其他什么东西,请考虑为其增加额外的特征线索。 www.9fen.net

什么情况下用线型图标更好?

除了要包含特征线索外,线型和面型图标之间也有区别。有时候,某些图标上的特征线索在线型图标上比面型图标更为突出。 内容采集来自9fen.net

 

内容采集来自9fen.net

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技

copyright 9fen.net

 

www.9fen.net

调查中发现,能够被更快识别的线型图标有三个:评论、垃圾桶、钥匙。这些图标的特征线索都出现在其外轮廓上,正因为如此,当图标为线型的时候,这些特征线索更容易被注意到。

copyright 9fen.net

评论图标的尾巴在面型时容易被忽略掉,但是在线型时则更加明显。垃圾桶盖子在面型时也一样,线型时更容易看到。钥匙的齿形在线型时相较于面型时要更明显。

内容采集来自9fen.net

  九分网络

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技 本文来自九分网络

  内容采集来自9fen.net

当图标的特征线索比较微妙且出现在形状的边缘时,使用线型图标。这样能使得图标的线索更加突出,从而能够更快地被识别。 内容采集来自9fen.net

选择图标时,最好能保持一致的风格,不要把面型和线型混搭。试着选择一组图标,它们具有明显的特征线索,角度干脆不模糊。

www.9fen.net

  copyright 9fen.net

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技 九分网络

  copyright 9fen.net

例如:如果将评论,垃圾桶和钥匙图标放在特征线索更明显的图标一起进行比较,就能看出区别。更明显的线索凸显出来后,更容易被注意到。

九分网络

什么情况下用面型图标更好?

大多数图标是作为现实世界中对象的缩影,把图标用面型剪影的形式表现更符合人的一般认知。相对而言,线型图标并不能真实的反映大多数人的认知习惯。这就是为什么面型图标能更快识别的原因。

copyright 9fen.net

  九分网络

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技

本文来自九分网络

 

内容采集来自9fen.net

尽管如此,用户仍然能够识别线型图标,但如果图标的内部空间非常狭窄,那么就需要更长的时间才能识别。

www.9fen.net

研究发现:点赞、剪刀、电话和工具图标在面型的时候更容易被识别。这是因为这些图标的轮廓样式在其中一些地方内部间距太小,从而产生了视觉噪音。 copyright 9fen.net

  www.9fen.net

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技

内容采集来自9fen.net

 

九分网络

对于内部空间拥挤的图标,最好使用面型图标,剪影形式提供了一个信息量更小的形状,使图标更容易识别。

www.9fen.net

什么时候线面皆可?

研究发现,两种风格的图标有时候的识别效率是一样的。例如:星星、购物车和旗帜图标都有相似的识别时间。

九分网络

  copyright 9fen.net

面型图标vs线型图标,哪一种的用户体验会更好?--九分科技

内容采集来自9fen.net

  copyright 9fen.net

标签: 优设 优设网 优秀 图标设计 彩云译设计 线性图标 面型图标

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----