所有分类
广告设计
免抠素材
矢量素材
UI设计
电商
高清图库
插画
艺术字
登录
会员中心
我的收藏
我的下载
退出
空心图标真的比实心图标更难识别吗?
发布时间:
2022-09-01
展示次数:
0
所属栏目:
实例教程
编者按:自从IOS 7发布后,不知道同学们发现了木有,很多APP(QQ、微信、微博等)都跟着换上了空心图标,但空心图标会不会给用户带来认知疲劳,一直木有定论,现在有同学特意编写了一个APP,做了1260个图标识别测试,得出了精准的结论,结论是啥,来学习咯! 去年夏天,设计师Aubrey Johnson在Medium上发表了一篇批判ios7的文章。Jonhson指出苹果的新空心图标比实心图标在视觉上更加复杂,给用户带来认知疲劳,这样会让用户对这样的界面产生视觉疲劳而厌倦使用。这篇文章很快就被广泛的分享、讨论,一些设计师认为这是明智的建议,但也有一些评判它夸大了事实,太过于简单并且缺乏有效的证据 以下在ios7选项卡上面的实心和空心图标为例子。被选中的图标用了实心图标。没有被选中的图标用了空心图标。
作为一个在Viget中从事人机和用户体验的实习生,我看到了一个有趣的机会来用于证实和测试Johson的阐述。为了找到空心图标是否为用户带来更多认知负担这个问题的答案,我开发了一个用来度量用户对不同视觉风格图标选择的速度和准确性的Web app。从研究一千多个测试参与者的资料中,我发现空心图标不一定比实心图标的少用。然而结果还是有些复杂。
图标
首先,这个讨论是聚焦在一个特定类型的图标:众所周知的选项卡或简易导航的扁平化单色图标,你通常会在手机app屏幕底部看到一行四五个这种图标,因为底部栏的图标一般作为导航应用程序的部分,用加亮的方式指出哪个部分是当前活跃的在某种程度上来说是很重要的。随着ios7的推出,苹果开始用两种互补的图标风格来展示这些状态:一个实心的图标用来展示活跃或被选中的状态而空心图标来展示不活跃或没有被选中的状态。据我所知,苹果是目前唯一用着两种风格的基本图标的软件开发者。
被用来测试的20个图标是从ios,安卓和Windows Phone网上可用的图标集中借过来用的。 Speech Bubble图标是直接从Johnson的文章中借过来的。
测试
在Viget中Nate Hunzaker的技术指导下,我编写了一个app来进行测试。你自己进行测试会比我讲解更容易理解,我尽量简单的描述下。 我承认实心和空心风格之间的区别的定义是不明确和松散的。一个图标可以同时有实心和空心两种风格。为此,我挑选了一个系列图标来进行研究,研究显示实心和空心版本之间存在相当明确的区别。每一个图标也代表了一个具体的对象并且使用文字标签,这样可以避免参加测试的人有过于大量的认知负担,他们只需要用它的图标去匹配名字。
结果
超过10天对数据的收集,完成了1260个图标识别测试,超过25000个图标识别实验,年龄偏向18-40的苹果用户。这说明选择的时间几乎就只有三秒,标准偏差为1.5秒。 平均20个图标,空心图标的选择比实心图标慢0.1秒,这似乎支持了Johnson对空心图标比实心图标需要更多的认知负担。 我至今还没有提过,其实我的研究中图标风格还包含另外一种审美:图标颜色。每一个实验实际上是图标用四种不同类型的颜色风格组合体现:
实心黑在白底上
空心黑在白底上
实心白在黑底上
空心白在黑底上
在实验中用来四种颜色合并(黑色圆圈在本文中用于演示。由于实验,白在黑上的图标在一个连续的黑背景上显示) 把数据分成四个小组(我将它称之为双向方差分析统计技术)对图标选择速度进行更深入分析。用这个技术我发现更多微妙的结果:白在黑上的图标比其他三种颜色风格合并的慢了大概1.7秒。换句话说,对黑在白上的图标。是否图标用实心或空心对选择速度没有显著的影响。 同样的,对于实心图标,是否用黑在白上颜色没有影响。然而,当一个空心风格结合白在黑上颜色方案,选择的次数会多一些。
每一种颜色风格的选择次数的平均值的不同。只有空心白在黑底上的图标显示出差异(眼睛图标代表20种图标的平均值)。 这只有相当小的影响,但是从超过1000个用户的数据中显示着确实存在。一个合理的猜测就是:如果我们认为黑色图标是一种默认的审美,加上层次化风格在使用上就有一种被激活的感觉。这看起来相当直观。 但有还有一些对这个结论表示不服的。为了从数据中得到更多细节,我自己对每20个图标进行风格和颜色影响进行研究。我发现其中的矛盾是与上面结果展示的不一样的。几乎一半的图标(9个)显示图标的风格一点都没有影响,意味着实心和空心图标是和空心图标识别是一样快。在其他十一个图标中确实显示出风格的影响,实际上三个空心图标表现得更好。事实上,Speech Bubble图标从整体和平均上显示一个完全相反的影响:实心黑色版本比其他所有版本的选择慢。但你考虑大部分我们碰到speech bubble图标是要么用白色要么用轮廓风格(或者都是)展示时这很容易解释的。一个实心的black speech图标没有帮助快速识别的典型特征。 值得一提的是,图标的样式和颜色对参与者的正确选择提示图标的能力没有太大的影响,除了一个图标——锁,当锁用黑间白展示可能会稍微有点识别不出来。我不确定为什么会这样,但是锁的图标在多个数据指标上都有异常,它是最容易被认错的图标和选择最慢的图标。
约翰逊的警告在用户界面中不应该使用空心图标并没有真实用户支持的证据。首先,一个图标的风格并不孤立存在,它与颜色的搭配也有关系。在任何情况下,小的差异并不会影响识别速度又或者是造成视觉疲劳。多数设计师可能会根据空心/实心的理论设计图标,但是设计出来的图标在视觉上是一种复杂的运动,不适合简单的二元规则。
推荐
淘宝春季促销标签怎么设计? ai设计促销横幅的技巧
实例教程
0次展示
AI怎么快速绘制3d水滴形状? AI3D绕转效果的制作教程
实例教程
0次展示
Photoshop调色教程:给公路上的情侣图片调出清爽的兰调风格
实例教程
0次展示
Photoshop婚片调色教程:给树林里的情侣婚片调出漂亮的红紫色
实例教程
0次展示
ai导出jpg文件很多白边怎么办? ai导出jpg去掉多余白边的技巧
实例教程
0次展示
Photoshop调色教程:给野外美女照片调出个性的韩系色彩
实例教程
0次展示
photoshop给外景美女艺术写真照调出时尚紫色调
实例教程
0次展示
如何使用AI中的渐变网格工具创作中国十大名花牡丹
实例教程
0次展示
Photoshop调色教程:给逆光MM图片调出简洁的青紫色
实例教程
0次展示
AI怎么制作旋转扭曲文字? AI扭曲字体设计方法
实例教程
0次展示
Photoshop调色教程:给树阴下的美腿少女图片调出漂亮的橙黄色
实例教程
0次展示
教你使用AI绘制一个正在帅气灌篮的灌篮猫插画教程
实例教程
0次展示
Photoshop调色教程:利用平均颜色修复偏色的宝宝照片
实例教程
0次展示
教你如何在AI里绘制一个简单可爱的猪脸图标
实例教程
0次展示
Photoshop调色教程:为树林中的美女图片调出艳丽的橙褐色
实例教程
0次展示
教你如何使用AI绘制彩色圆点人物照片
实例教程
0次展示
Photoshop做唯美非主流照片:调出街景清纯美女唯美中性黄紫色
实例教程
0次展示
AI怎么排版六边形和圆形文字? AI区域文字的使用技巧
实例教程
0次展示
Photoshop调色教程:给可爱的户外小美女调出甜美的粉红色
实例教程
0次展示
怎么用AI制作抽象韵律感图案呢?抽象韵律感图案的教程
实例教程
0次展示
Photoshop日系调色教程:调出清新美女日系淡雅的冷色风格
实例教程
0次展示
关于我们
关于我们
精品专辑
网站地图
政策声明
版权声明
注册协议
隐私政策
关注我们
在线客服
工作日 09:00 - 18:00
QQ844416
网站标签
图片
素材背景
素材
海报
七夕节图片素材
设计
背景素材
卡通
背景
艺术
创意
公PPT图片免费下载
手绘
海报设计
SD
矢量素材
人物图片
建筑图片
Copyright © 2016-2022
PSD素材网
· WWW.PSD.CN ·
湘ICP备2021020595号-2
浙公网安备 42011102000245号
若您发现您的权利被侵害,请联系 OJBK168@126.com