当前位置:380元网站建设 虎网站 > 建站百科 > 正文

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

发布日期:2015-04-14
factors-influencing-icon-usability-1

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

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

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

01-icon-design-text-ui-ux-design.jpg

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

02-icon-design-text-ui-ux-design.jpg

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

03-icon-design-text-ui-ux-design.jpg

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

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

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

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

04-icon-design-text-ui-ux-design.png

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

05-icon-design-text-ui-ux-design.jpg

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

06-icon-design-text-ui-ux-design.jpg

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

07-icon-design-text-ui-ux-design.jpg

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

08-icon-design-text-ui-ux-design.png

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

09-icon-design-text-ui-ux-design.jpg

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

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

10-icon-design-text-ui-ux-design.png

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

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

11-icon-design-text-ui-ux-design.png

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

12-icon-design-text-ui-ux-design.jpg

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

13-icon-design-text-ui-ux-design.jpg

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

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

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

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

14-icon-design-text-ui-ux-design.jpg

再比如网页版Twitter的导航:

15-icon-design-text-ui-ux-design.png

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

16-icon-design-text-ui-ux-design.png

虎网科技(西安网站设计)小结

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

以上内容由虎网科技(西安网站设计,西安网站制作)为您提供,更多精彩内容:https://www.huwz.com/

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

大数据给网站建设带来新机遇!

    在讯息传播极其疾速的今天,各种数据渗透着我们的生活,数据爆炸将我们带入大数据时代。大数据开始蔓延到社会的各行各业从而影响着我们的研习、工作、生活以及社会的发展。马云背后的天猫、淘宝(Taobao)有高出上亿的客户群,十几年来已经积攒了大量的数据,而后,对这些数据进行整理,从实践上升到理论,于是DT时代就到来了。它是以服务大众、激发生产力为主的技术。DT是数据处理技术(Data Technology...

       常德武陵天力汽车租车和虎网科技签订网站建设协议 天力是经常德市武陵区工商局审核的有资质公司,统一社会信用代码:914307023383928227。天力选用虎网站定制型网站案例,此类网站主要是按客户要求和提供的风格案例或效果图纸来做,这种属于仿制和定制型网站,是根据功能开发的难易度来评估报价的,价格相对较高,适合于大中型企业和有个性风格、个性功能需求的客户选用。天力处于常德市武陵区柳叶湖车站斜对面广汽丰田天晟店。   经营范围:汽车、汽车零配件...

       网站怎样正确选择虚拟主机服务器 一。经营时间长短经营时间的长短是评价一个虚拟主机提供商的重要标准。 二。是否拥有机房是否拥有一个可靠稳定,安全高速的机房是衡量一个成功的虚拟主机提供商的又一重要标准。在互联网行业,往往出现这样的情况:一些公司本身没有机房,甚至根本没有机房,但是他们却往往以低于市场价格很多的价格向用户承诺各种服务。可想而知,缺乏足够的硬件支持,技术实力,这些承诺往往最终只能成为不切实际的空中楼阁。所以可以肯定的是:...

       对于网站中的图像来说在设计时该怎样看待 一个设计的网站是否成功,很大程度上取决于设计人员的水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能够建成一座房子。设计网站包括的内容很多,如网站的框架、栏目结构、网站风格、色彩的搭配、版面布局、文字图像的运用等,你只有在设计页面之前把这些方面都想到了,才能够在设计时驾轻就熟,胸有成竹。也只有如此设计出来的网页才能够有个性、有特点,具备吸引力。针对网站中的图像问题来说在设计时该怎样看待呢? ...

       到底要不要做企业官网?带来的帮助有哪些? 企业官网在现在的互联网发展之下,是必备的产品,还在考虑做不做企业官网的企业,赶紧看看小编给您介绍的好处吧。   一、有益于宣传策划企业品牌形象   在企业的信息服务系统软件上,企业应向外宣传策划企业的文化艺术、企业的概述、商品、服务项目质量及其新闻报道等层面的內容。发布在互联网上的信息可以制作得较为详细,包括产品的各种性能参数,使用说明等;利用图文声像并茂的网页形象宣传企业,以利于企业更科学地进行...

       发帖推广注意的重要细节 我们的网站会碰到很多网站推广的问题,写点关于推广的技巧,第一,从做站的经历来说这是很必要的;第二,也可以填补了现有推广教程里这方面的空白。现在将这段时间里所摸索到的技巧拿出来和新人站长分享,让大家少走了很多弯路。 一.明确网站定位 本来这个问题不属于发帖的范畴,但由于定位是否准确直接影响到用户群的寻找,所以还请大家对重视这个问题。一般新人看待这个问题好像模糊知道是什么,但具体是什么又说不出来。如果...

最新模板
少儿英语培训机构网站建设 培训公司网站建设
成人自考网站建设 成人培训网站制作设计版面
智能家居摆设设计网站建设 智能家居装修企业网站建设
铜螺母,铜螺丝,螺栓,螺钉工厂网站建设
废气处理设备,如活性炭吸附箱、RTO蓄热式氧化处理设备、光氧等离子复合设备 低温等离子设备 光氧催化设备等网企业网站建设
图文阅读