资讯中心
News
有哪一些因素容易影响图标的易用性?
发布时间:2022-09-27 00:00   您所在的位置: 网站首页 > 新闻资讯 > 经验杂谈

编者按:今天给同学们絮叨下图标的事儿,在好多时候,图标其实会对界面的清晰性易用性产生负面决定。作为设计师,务必留意咋们所习惯的图标使用方法,并尽可能的多测试,案例剖析在这儿 >>>

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

象形图出现在人类早期,咋们可以将其视为较初的文字形式。如今,在某些文明群体中,象形图依然是人们开展交流的主要媒介。

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

而在计算设备上,图标伴随着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栏模式:

新概念科技(上海网站制作)小结

希望本文能让大伙清楚到,作为较基本也是较广泛运用的设计元素,图标——在好多时候其实会对界面的清晰性易用性产生负面决定。作为设计师,务必留意咋们所习惯的图标使用方法,并尽可能的多测试。较后再絮叨一遍:不要使用那些很难清晰表意的图标;尝试使用更有效的文字标签,或将二者结合使用。

以上信息由新概念科技(上海网站制作,上海网站制作)为您提供,越来越多精彩信息:http://www.jianzhan0.com/

关注“新概念科技”微信公众号,迅速获取互联网较新资讯

本文章由新概念互动原创,如没特殊注明,转载请注明来自:http://www.jianzhan0.com/jingyand/73935.html