空心图标真的没有实心图标那么好辨认吗?(设计经验谈)

空心图标真的没有实心图标那么好辨认吗?

去年夏天,软件设计师奥布里·约翰逊(Aubrey Johnson)在Medium上发表了一篇关于苹果公司的移动操作系统iOS7中存在的明显缺点的文章。约翰逊说苹果的空心图标,看上去比实心图标更复杂,容易让用户产生认知疲劳,这将直接导致用户讨厌这种界面并停止使用这样的系统。小范围的转发引来了大批的讨论者,有些设计者认为这篇文章是中肯的建议,也有些人批评作者过分放大问题,而且表述太简单,缺乏证据。网页应用,来检测用户选择图标的速度和准确性。参与人员超过了1000名,通过测试,与对应的实心图标相比,空心图标并没有想象中的那么不好用。但结果确实是有一点复杂。   图标 首先要声明的是作为测试的图标都是比较特殊的图标:就如标签栏的图标一样,是平面的,单色的,简单的。就像你平时在手机应用的底部见到那一排4个或者5个的图标一样。因为标签栏的图标是作为进入应用程序其他区域的导航按钮,所以用高亮图标来表示当前激活的区域是很重要的。随着iOS7系统的发布,苹果采用了两种互补的图标样式:一种实心的版本表示激活/被选中的状态,一种空心的版本表示未激活/未被选中的状态。据我所知,当今也就只有苹果一家软件制造商为基础图标使用两种样式。   就这一刻来说,我承认实心和空心两者之间真没有什么界限。每个图标都有实心和空心两种特征。因此,我为测验精选了一些两者很容易区分的图标。每种图标都代表一种具体的事物,并且配上了文字标签,这就限制了认知测验者将图标和名字配对的范围。Nate Hunzaker不可或缺的帮助下,我开发了一个管理图标认知测试的网页应用程序。虽然做一下测试比我说来得方便得多,但我还是要简短地说明一下:测试开始之前,被测试者需要先熟悉下这20组带文字标签的图标。然后,参与者需要从24组测试数据中选出刚才所看到的20组图标的名称,并且尽可能快速准确地将名称与环形阵中正确的图标配对。每个测验以20组图标为测试数据,最初的四组数据作为热身测验,不计入数据分析中。应用程序随机决定图标在阵中出现的顺序和位置,是实心的或者是空心的。测试时间为5分钟。   来icon-test.net亲自测试一下更能体会它是如何工作的。就像我说的那样十分有趣。   结果 经过10天的时间,1260名参与者总共完成了超过25000次认知测试。统计数据偏向于年轻懂科技的苹果用户(18-40岁),参与者作出选择的平均时间是3秒,上下偏差1.5秒。   取20组图标测验的平均成绩,空心图标要比实心图标多耗费0.1秒的时间,这看上去符合约翰逊的“空心图标比实心图标需要更多的认知精力”的论点(如果只在一个小范围内的话)。但图片的测验却不是这样的。   我忘了说我的测验还包括另外一个图标样式的变化:图标颜色。每个测验包括一组四种样式的图标:白底黑色实心图标,白底黑色空心图标,黑底白色实心图标,黑底白色空心图标。(边注:白色和黑色这个问题的灵感来自Viget的设计师在聊天室的激烈争论。)研究发现用户会将图标代表的意思和它们在界面所在位置联系起来,也就不需要每次使用的时候去想这个图标代表了什么。用两种接近的样式比仅仅是更换颜色来表达图标所处的状态更具有可行性,因为它能给色盲额外的视觉反馈。当然,开篇使用的图片中,苹果公司结合样式,颜色和标签的图标也是可行的。   我最后的结论,也是大多数设计者在空心/实心的争论中遇到过的:设计图标是清晰的语义和视觉吸引结合的复杂过程,不是适应简单的二进制规则。事实上,在苹果的人机界面指南中有更详细的关于实心/空心图标的设计建议,也介绍了有些图标两种样式都是不合适的。   最后,我希望这次研究能够让大家重视用事实来支持UI设计的理论。所有类型的设计者都需要批判性地去思考最好的解决方式,用事实研究来支撑他们的理论   所有的测试问卷都在这里。再次感谢Nate Hunzaker的支持。感谢Alla Kholmatova在图标设计上发表的关于这方面的研究文章。

原文作者:

(0)

相关推荐

  • 空心图标vs实心图标,你中意哪款?

    小编:最近,空心图标和实心图标的讨论变得激烈起来,有言论指出空心图标在视觉上比实心图标看起来更复杂,更容易让用户差生疲劳感和倦怠感.对此,设计师们都各抒己见,一部分人表示赞同这种说法,而另一部分人则表 ...

  • windows8 Metro方块图标美化教程及图标下载

    Windows 8 新一轮美化风暴来袭!!Metro方块图标美化。Metro应用不像传统桌面图标那样能右键-属性-修改图标。只能通过修改替换图标文件来美化。 美化你的Metro应用图标方法: 打开:C ...

  • Win10系统桌面图标全部变成PDF图标怎么办?

    Win10系统桌面图标全部变成PDF图标怎么办? 1.在键盘上按Win键和R键,输入regedit按回车键打开注册表编辑器. 2.在左侧打开"HKEY_CURRENT_USER-SOFTWA ...

  • 电脑本地磁盘图标显示为未知图标怎么回事?如何解决?

    在计算机的操作过程,常出现本地磁盘图标改变的现象,有的变成了系统安装图标,有的变成了未知文件图标,还有的变成了U盘图.那么我的电脑本地磁盘图标显示为未知图标怎么回事?如何解决?下面小编就为大家详细介绍 ...

  • Win7系统怎么使桌面图标和任务栏图标看起来更小?

    刚装完的系统屏幕会使人的眼睛非常地不舒服,那我就来说说怎么才能使桌面图标和任务栏变得更小吧!下面以win7系统为例! 步骤 我们刚装完的系统是这样的,非常不爽人! 所以,我们要先在桌面空白处右键→屏幕 ...

  • Win10在桌面上怎么添加此电脑、网络图标、回收站等图标?

    安装Win10预览版系统后,发现桌面上没有Win7桌面上常见的图标,只有回收站图标.Win7桌面图标“计算机”原先的名字为“我的电脑”,Win10更改为“这台电脑”.现在小编就和大家分享Win10在桌 ...

  • 如何将Windows server2012系统中任务栏图标设置为小图标

    随着科技的发展,电脑已经成为人们日常生活中必不可少的工具,当我们在使用Windows server2012系统的电脑时,如何将任务栏图标设置为小图标呢?接下来就由小编来告诉大家.具体如下:1. 第一步 ...

  • 电脑Win10系统如何让默认图标显示为大图标

    当我们使用win10系统查看文件的时候,默认图标提示小图标.我们可以更改为大图标,这样方便我们去寻找.今天小编就告诉大家电脑Win10系统如何让默认图标显示为大图标.具体如下:1. 如图所示的图标是默 ...

  • 电脑任务栏上的图标怎么设置修改图标形状

    今天给大家介绍一下电脑任务栏上的图标怎么设置修改图标形状的具体操作步骤.1. 首先打开电脑,进入桌面,选择想要更改图标的应用,以360浏览器为例,右键2. 然后在打开的菜单中,选择"360浏 ...