网页设计中图标的利与弊

找出为什么图标并不总是最好的设计解决方案,并获得一些克服它们的问题的技巧。

没有找到任何物品。

纵观整个网络,从你的电子邮件收件箱到Facebook,再到你漫游的任何奇怪的边缘,你都会看到图标——通常要么支持文本,要么完全取代文本。

纵观整个网络,从你的电子邮件收件箱到Facebook,再到你漫游的任何奇怪的边缘,你都会看到图标——通常要么支持文本,要么完全取代文本。

但早在网络和用户体验(UX)设计兴起之前,人类就已经将图标作为一种交流工具了。无论它们被使用到哪里,它们总是有一个单一的目标:通过一个有效地传递信息常见的视觉语言

要做到这一点,图标需要两个东西:

  1. 广泛的认可
  2. 单一的,广泛认可的意思

当偶像们实现了这两件事,他们的力量就毋庸置疑了。看看世界上的主要宗教就知道了。尽管见面的范围很广可能把十字架、六角星或带星的新月配上,你马上就能认出它们是一个世界性运动的象征。

这3个图标真的不需要解释。

(值得注意的是,新月和星星绝不是一个官方伊斯兰教的象征——一个著名的反传统宗教。)

但在数字世界里,偶像们面临着一些严峻的挑战。最大的问题之一是使用不一致。

因此,让我们来仔细看看这些问题——并找出如何与它们合作和围绕它们工作。

普遍认可和难以捉摸的全球定义

图标的广泛采用是困难的,甚至可能需要某种标准化,甚至可能需要一个管理机构来强制使用。

问题是,人们并不总是会按照你想要的方式来推断图标的含义。文化甚至个人的联系都可以改变一个符号的本意,有时甚至是灾难性的。

如果一个图标不是熟悉,人们会从他们过去的经验和上下文线索(即用户界面中的其他信号)推断出含义。

这可能对你有利,也可能对你不利。

例如,道路标志通常是特定于地理位置的,可以肯定的是,美国司机不会突然无意中发现自己行驶在欧洲道路上。在这种情况下,美国的标识应按照美国的标准进行设计

另一方面,如果你正在为一个国际高速公路纵横交错的内陆小国设计标识,你就需要考虑到各种司机的标准和语言。

文化的局限性

如果你的设计对象是国际用户,那么图标可能会遇到与书面语言和口语相同的翻译问题,这一点值得注意。图标的内涵在不同文化中有很大差异,这就产生了我们在UI和UX设计中应该始终努力避免的模糊性。

断章取义真的有点吓人,你不觉得吗?

以眼睛图标为例,它经常用于关注视图的ui中。在北美文化中几乎没有预先存在的意义,眼睛图标是一个优雅的解决方案。然而,对一些人来说,眼睛带有负面的含义,如邪恶之眼、嫉妒之眼或疾病之眼。

用户适应

像其他的交流方式一样,图标是动态的——在语义上不断变化的状态,这在一定程度上受到我们自己对它们的使用的影响。

随着图标含义的演变,以前的版本必须被清除,这样才能建立标准化的视觉语言。

如果使用你的网站或数字产品的用户已经熟悉了与特定图标互动的结果,那么就保持这种关系!欧宝体育在线首页突然改变界面中符号的含义会导致糟糕的用户体验。

想象一下从根本上改变这些图标。这么多在netflix和寒冷的夜晚被毁了。
免费电子书:网页设计101

掌握网页设计的基本概念,包括排版、色彩理论、视觉设计等等。

订阅成为Webflow Insider
谢谢你!您现在已订阅!
哦!订阅时出了问题。
读到现在

信息的模糊性以及为什么文字(仍然)重要

使用你的语言

人们处理图像的速度比处理文本快,特别是当他们已经知道图像的含义时。

但是你能依靠一个图标来传达相同的信息给每一个人?在许多情况下,文字会澄清图标的信息,并让人们对他们的互动结果有信心。信心的增强会对关键指标产生显著的积极影响。

因此,虽然图标可能更快,但文字更可靠。而且他们在一起工作得更好!

用户界面设计师越来越多地将图标和文字结合起来。这是一个小小的牺牲。汉堡的标志,实际上已经变成了因为不够清晰而出名,突然映入眼帘的是下方的“菜单”字样。

避免时尚

根据定义,时尚偶像不会长久存在。在短期项目中使用它们很有趣,但对于希望使用较长保质期的应用程序,您将希望坚持使用经典。

中空的图标奥布里·约翰逊(Aubrey Johnson)解释了当他被要求评估同行的手机设计时的反应。

这款应用整体看起来很棒,但有些设计是在效仿iOS7开创的先例。他们的设计是为了“适应”这个平台。

正如Johnson后来所说,尽管细线图标很流行,但与填充图标相比,它们实际上是较差的选择。当可用性被牺牲的时候,设计师应该警惕时尚。

如果你的图标看起来太特定,那么挑战自己,为你的设计找到更好的解决方案。

经典之所以成为经典,是因为它们的永恒和始终如一的使用。这种持续的使用创造了我们正在寻找的熟悉感。我们了解他们。我们和他们有过互动。我们知道会有什么结果。

时尚偶像缺乏辨识度,这是设定用户期望的关键因素。

Explanation-free

如果一个图标需要解释,十有八九它已经失败了。熟悉源于重复,偏离可能导致混乱或糟糕的用户体验。

通过使用其他设计元素来阐明其含义,避免让图标占据所有权重。

例如,为了强调放大镜图标代表搜索而不是缩放,可以将其放置在文本输入字段中。这样一来,人们就会通过图标来识别搜索工具,而搜索栏的出现(无论是扩大还是缩小)又会加强这种启动。

这里有一个例子扩展搜索栏设计它使用的放大镜由微妙的相互作用支撑。搜索栏的预览确定了放大镜的含义,在这种情况下,作为搜索图标。

我们如何改进?

要谨慎使用,要深思熟虑

图标不应该总是你的首选解决方案,尽管它们很高效。

相反,智能设计解决方案可以强化图标的信息,增加用户粘性。以当前顶级网站的趋势为例:它们从单一的汉堡菜单图标转向顶级导航而是实现一个图标层次结构。新的布局将最受欢迎的页面作为图标进行推广,增加了用户的熟悉度,减少了对一个模糊菜单图标的依赖。

Facebook 2013年的导航设计改进。

Facebook真正支持向“标签栏”导航的转变2013年重新设计了菜单布局以便更好地反映人们使用Facebook应用程序的情况。

遵守惯例

小心行事,并始终意识到使用不熟悉的图标的含义-任何与公认规范的偏差都应该如此有意的,即故意利用不正常的意思或用法。

遵循常规的图标将更容易被更大的用户群识别,从而帮助人们更自信地与图标进行交互。

设计一个有意义的上下文

像语言一样,图标通过它们的上下文获得意义。所以用好的设计来强化你的图标,为图标创造一个闪光的环境。

例如,电子书右边的箭头可能表示任何东西,但考虑到它的位置,人们可能会明白箭头会转到下一页。

注意,这个例子的风险相当低(如果用户还不想继续,他们可以很容易地回到前一页),这是一个很好的实验场所。更高风险的场景,比如在社交媒体上更新状态或发送电子邮件,不适合尝试新事物。

负责任的图标

有意地、深思熟虑地使用图标,在需要时用语言支持它们,并尽可能地包容它们。此外,设计图标的上下文来强化它们的含义。

不要忘记,成功的图标是建立在广泛的认可和具体、一致的信息之上的。记住这一点,你就不会出错。

发表

2016年6月2日

类别

网页设计

加入对话

Webflow是什么?

免费试用
关于设计师的更多信息

设计师

CSS、HTML和JavaScript在可视化画布中的强大功能。

的相互作用

可视化地构建网站交互和动画。

更多关于交互

CMS

定义您自己的内容结构,并使用真实数据进行设计。

更多关于CMS的信息

电子商务

再见模板和代码——可视化地设计你的商店。

更多关于电子商务

编辑器

在页面上编辑和更新网站内容。

关于编辑器的更多信息

举办

设置闪电般快速的托管在短短几次点击。

更多关于托管
Baidu
map