清醒的艺术!有哪些因素容易影响图标的易用性? - 优设网 - UISDC

清醒的艺术!有哪些因素容易影响图标的易用性?

2015/04/12 6772评论区

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

小结

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

成为交互设计师的必读好文!

阿里巴巴资深交互设计师经验!
《推荐!交互设计那些事儿(一)》

网易设计总监亲历分享!
《网易美女设计主管!交互设计菜鸟如何入门?》

交互设计师自学指南!
《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

原文地址:thomasbyttebier
译文地址:beforweb

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量93万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/factors-influencing-icon-usability

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 版式设计 扁平化设计 交互设计师 界面设计 排版布局 优设专访 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里