有哪些因素容易影响图标的易用性?

小编:作为最基本也是最广泛运用的设计元素,图标——在很多时候其实会对界面的清晰性易用性产生负面影响。作为设计师,务必留意我们所习惯的图标使用方式,并尽可能的多测试。最后再絮叨一遍:不要使用那些难以清晰表意的图标;尝试使用更准确的文字标签,或将两者结合使用。

图标是界面的基本组成部分之一,然而在很多时候,图标本身也在破坏着界面的清晰性。

象形图出现在人类早期,我们可以将其视为最初的文字形式。如今,在某些文明群体中,象形图依然是人们进行沟通的主要媒介。

在很多公共城所,图形时常被用于导航,特别是在譬如机场这样的多文化环境,仅凭文字传达信息显然是不够的。

而在计算设备上,图标随着GUI时代的发展而迅速流行。看看最早的桌面计算机GUI(Xerox Star),设计师David Smith在其中使用了图标以及桌面隐喻的理念:

当然,我们都知道为什么图标可以迅速流行起来并发展成为UI的重要组成部分,直到如今更是如此 – 图标能给UI带来图形化的愉悦性,当我们设计的正确的时候,它们不仅能清晰的传达信息,而且能给界面带来个性与气质。

很多时候,一个简单的图标可以代替一段很长的描述性文字 – 对于手机甚至是手表这样的小屏设备来说,这样的特性无疑是非常有用的。不过这里也存在着设计上的陷阱 – 我们同样知道,如今很多图标在表意上其实是难以做到清晰准确的,它们需要人们思考,会提升体验过程中的认知负荷。如果无法快速而准确的传达信息,特别是对于移动设备而言 – 界面再漂亮,动效再炫酷,又有什么用呢?

其实原则很简单:只有当图标能够100%准确清晰的表达含义时,才去使用。别妥协。

说到表意模糊的图标,我想起最近在Twitter上看到的一张图片。看看作者对这些图标的神吐槽:

我们总会听到(或说出)这样的话:“人们每天都会用我们的软件,他们很快就能理解并记住这些图标的含义”。不能说没道理,但我有时还是怀疑这种看法的准确性。我自己每天都会多次用到Mac上的邮件应用,但每次我要写邮件的时候仍然会对那两个图标产生片刻的迟疑:

另外还有个坏消息:用户通常会下意识的回避掉那些他们无法即刻理解的界面元素 – 对未知事物的不信任,这是我们的天性。我猜Google在决定将其他app隐藏到一个表意模糊的图标后面之后,客服会收到不少类似的询问:“我的Google日历跑哪去了?”

经过重设计之后的Twitter,很多新用户无法快速了解他们在界面当中应当做些什么 – 应该是发推,但是从哪里开始?是那个蓝色的图标吗?它是什么意思,羽毛代表着一根笔吗?

再次改版后的Twitter增加了置顶的编辑框,使事情变得明了了很多:

另外,你知道你可以在Instagram里直接向好友发送图片信息吗?这个功能就藏在右上角的那个图标里:

作为Instagram的用户,你曾以这个图标为入口使用过这个功能没?这个图标能让你预期到这样的功能吗?对我来说,不能。

界面的上下文环境也是我们在设计图标时必须考虑到的重要因素,很多看上去含义清晰的图标在某些界面环境下很可能产生歧义。打开网页端的Gmail,你会看到这样的例子 – 看到那两个非常相似的图标没?它们出现在同一个界面中,却有着非常不同的含义:

这两个图标对于各自所代表的功能其实都算恰当,一个是返回,一个是回复,但这个界面环境却使它们产生了潜在的冲突;虽然特定的布局方式可以在一定程度上起到引导提示的作用,但问题仍然存在。

再举个正面的例子,Tweetbot当中的图标虽然对有些人来说表意不够清晰,但在“Twitter应用”这个大的环境下,多数目标用户 – Twitter的用户是可以理解的,因为这些图标的用法与Twitter是保持一致的,这还算OK:

iOS上的Tumblr也是类似,你不能说这些图标在所有情况下都是清晰明确的,但放在Tumblr这个app的环境当中,就可以比较准确的表达含义:

很多图标只有在音乐app这个特定的产品类型当中才能表达出准确的含义:

不过上图Mac版的Rdio当中,同一界面里两个地方使用了相同的扩音器图标,一个表示音量调节功能,一个表示当前播放的歌曲。

所以,说到这里我还是要重复一下:除非确定图标形式可以在当前界面环境中100%准确的表达含义,否则不要去用它。如果作为设计师,你都会产生片刻的迟疑,那么就干掉它好了 – 使用最简单的文字来替代,这是最清晰的表达方式。

当然,图形化的表达方式所具有的优点同样不可忽视,所以我们不妨在空间允许的情况下将图标与文字结合起来,同时利用两者的优点。

iOS默认的tab栏,以及苹果的很多其他产品当中都在使用着这样的模式,例如Mac上的App Store导航栏。这些图标单独拿出来的话未必能准确的表达含义,但搭配文字之后就清晰多了:

再比如网页版Twitter的导航:

另外一个尽人皆知的例子,就是Facebook在某轮改版中干掉了“经典”的汉堡包菜单,回归到最传统的iOS tab栏模式:

小结

希望本文能让大家了解到,作为最基本也是最广泛运用的设计元素,图标——在很多时候其实会对界面的清晰性易用性产生负面影响。作为设计师,务必留意我们所习惯的图标使用方式,并尽可能的多测试。最后再絮叨一遍:不要使用那些难以清晰表意的图标;尝试使用更准确的文字标签,或将两者结合使用。

thomasbyttebier
译文地址:beforweb

转载地址:优设

(0)

相关推荐

  • 哪些外界因素可能影响行车无线遥控器的效率?

    什么是行车无线遥控器?行车无线遥控器主要由发射器和接收器两大部分组成.行车无线遥控器在使用时很容易受到外界的干扰,那么哪些外界因素可能影响行车无线遥控器的效率? 操作方法 01 无线遥控器发射系统超出 ...

  • 有哪些因素会影响手机运行速度?该如何解决?

    虽然智能手机的配置和内存都越来越高,但在使用一段时间后运行速度明显变慢,是什么原因导致的呢?又该如何解决呢? 操作方法 01 手机下载安装的应用.软件过多是导致运行速度变慢的一个主要因素.其中有很多是 ...

  • 影响固态硬盘寿命真正因素是什么

    随着TLC闪存颗粒逐步占领市场高地,固态硬盘的寿命之争又再一次被搬上了舞台,让人争辩,正如同当年SLC不断弱势,MLC成为主流那般.真可谓"眼看他上高楼,眼看他宴宾客,眼看他楼塌了" ...

  • 影响银行/金融类产品用户体验的10个负面因素

    导语 为了顺应金融的数字化趋势,许多银行已经调整了产品和服务发展的战略:也有越来越多的金融公司通过构造为用户提供便捷有效的解决方案发展起来.但这并不意味着产品的带来体验就是完美的. 了解市场并迎合用户 ...

  • 技术解析:浅析影响服务器的九大因素

    操作方法 01 一般对于建站站长来说不管是选择虚拟主机还是服务器托管最看重的就是服务器的运行速度.如果被访问的服务器打开速度慢或打不开不仅会影响网站的seo优化,而且会影响用户体验,直接影响这网站的流 ...

  • 罗马2:全面战争 告诉你影响公共秩序的因素

    操作方法 01 <罗马2:全面战争>这款游戏会越来越复杂,玩这款游戏的人那么多,但是游戏剧情有许多因素会影响到游戏的公共秩序,这里我来告诉你们应注意的方面. 02 建筑物:其中根据建筑属性 ...

  • 影响网站用户体验的5大因素

    操作方法 01 网站用户体验对网站的发展至关重要,那么要如何做好网站的用户体验呢?有哪些因素直接影响了网站用户体验呢,下面笔者就来具体说说,希望对大家有所帮助. 方法/步骤 网站的内容体验 不管是个人 ...

  • 图标诞生记——先型

    图标的设计虽然有不少文章讲述统一性的问题,但对于新手来说还是无从下手的感觉.今天的文章milaky将给我们讲述最基础的图标设计该如何设计造型,以及该注意哪些基础问题. UI最重要组建之一就是图标,随着 ...

  • 常见的图标是否还需要标注上文字?

    新版Instagram 的UI去掉了图标下面的文字,但去掉文字的图标真的能带来更好的用户体验么?今天这篇好文通过一个简单的小实验(附测试网址),帮这个一直争议不休的话题盖棺定论,顺便聊聊图标的作用以及 ...