设计体验细节——填充和轮廓图标可用性

为大家翻译一篇来自 uxmovement 的文章,关于填充图标和轮廓图标的差异化及适用场景,希望引起大家对图标使用的更多思考。

阅读本文需要8分钟

在构建移动端应用程序时,有时您必须决定是使用填充图标还是轮廓图标,哪种风格更适合用户体验?

有些人认为他们之间的区别只是偏好问题,但研究表明,这其中有更多的意义,其中一种风格的识别率比另一种更快。

知道何时使用填充或轮廓图标将使你的用户更容易浏览你的产品。同时选择正确的风格能够更快地让用户识别你的图标并做出更精准的决策。

一项研究“填充图标和轮廓图标—图标样式对可用性的影响”发现图标样式影响任务性能。通过识别和选择图标的速度和准确性来衡量任务性能。

实体图标通常比轮廓图标识别速度更快,但也有一些例外。一些图标在任务时间上没有显示任何差异。这与特征线索有关。

·图标的特征提示

特征提示是用户用来识别图标的。如果没有特征提示或很难注意到特征,图标将无法识别。

比如说,注释气泡图标的尾部是其特征。没有它,它只是一个圆。锁图标上的钥匙孔是它的特征提示。如果没有它,很容易将图标误认为是一个包。齿轮图标上的齿是其特征提示。没有它,它看起来就像一个甜甜圈。

研究表明使用的锁图标没有钥匙孔,是识别错误最多的图标,有超过四分之一的使用者因此操作失误。钥匙孔是一个必要的特征提示,因为没有它的图标看起来像一个袋子,钱包,甚至一个壶。

这些特征提示是用户对图标识别的依赖。使用图标时,请确保它包含用户识别图标所需的重要特征提示。如果一个图标看起来像一个不同的对象,可以考虑为它添加额外的特征提示。

·什么时候使用轮廓风格图标会更快被识别?

除了包含特征提示之外,提示还必须突出或易于注意。有时,某些图标上的特征提示在轮廓样式中比填充样式更为突出。

研究发现,有三个图标在轮廓样式中识别速度更快——评论气泡、垃圾桶和钥匙。这些图标都具有细微的特征提示,并且都显示在形状的外边缘。因此,轮廓样式使这些提示更容易被注意到。

作为填充样式时使用时,注释气泡尾的特征很容易被忽略,相比之下轮廓样式时,特征会更明显。垃圾桶的盖子作为填充样式时,是很难被注意到的,轮廓的样式时,特征也会更明显。钥匙的钥匙齿是很细微的,但在轮廓风格中也变得明显起来。

当图标的特征提示很细微并且出现在形状的边缘时,请使用轮廓样式。这使得特征线索会更加突出,从而会被更快的识别。

选择图标时,最好保持一致的风格。不要混合使用填充和轮廓样式,而是尝试选择一组具有突出特征的图标,这些图标具有向用户展示的更明显的特征点。

例如,如果将注释、垃圾桶和关键图标与具有更显著提示的图标进行比较,您可以看到不同之处。更明显的特征提示,更容易被注意到。

·什么时候使用填充风格图标会更快被识别?

要符合大众认知—大多数图标以现实世界中的物理对象为原型。这些物体是填充的,以轮廓的形式出现并不能贴切大多数人的日常认知,这就是实体图标识别速度更快的原因。

尽管如此,用户仍然能够识别轮廓图标。但如果图标的形状轮廓太复杂,则需要更长的时间去识别它。

研究发现,拇指、剪刀、电话和工具图标在填充样式下识别起来更为清晰。这是因为这些图标的轮廓样式在它们的视觉表现上会有狭窄的内部间距,会干扰用户的视觉识别。

对于结构造型较为复杂的对象,最好使用填充图标。轮廓形式适合用于更简单的形状,使图标更容易识别。

·当结构造型没有太大区别时

研究发现,无论哪种风格的图标都很容易识别。例如,星星、购物车和旗帜图标的识别时间都很接近。

这说明这些轮廓样式的图标不会减慢用户的识别速度。原因是它们内部的间距足够大,从而降低了视觉上的干扰。内部间距越窄,产生的视觉干扰就越多。

·选中按钮的样式选择 

通常情况下,我们会使用填充图标突出标签栏中的已选中的选项,而其他未选择的选项保持轮廓样式。但这种设计实践是落后的,应该是相反的。

用户需要更快地在他们未选择的选项上进行识别,而不是在他们已经选择的选项上。使用填充图标作为选中项的样式很没有必要。对于没有选择的选项而言,使用填充样式反而会更为重要。

应该使用轮廓图标作为选中样式,而不是使用填充图标。因为轮廓图标在样式和颜色上已经有了作了区分,已经达到了增强所选项的效果。

·非常规指南

如果读取速度对用户很重要,则必须考虑图标识别率。如果你想要更快的识别率,填充样式的图标会更好。但是这个规则有一个例外,你应该记住。了解规则的例外情况可以让您在合适的情况下使用轮廓样式。

·总结——选择图标风格时应当遵守 

① 图标由需要突出和容易识别的特征提示组成

② 填充风格识别更快,除非它们的特征提示不明显

③ 当轮廓图标足够的内部间距时,它们更容易识别

④ 图标造型边缘只有细微的特征,请使用轮廓风格

⑤ 图标造型内部的间距较窄,则使用填充风格



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容

  • 5 图标和图像设计 5.1 图标和图像尺寸 任何app都需要app图标和启动文件或者图片。除此之外,一些app需要...
    Willry阅读 1,492评论 4 10
  • 女儿一个月的时候,父母要给他开味,就是让她尝一尝,桌上琳琅满目的菜肴。看着他小嘴吧唧吧唧的,我当时就有些矛盾,人生...
    944583d4fa37阅读 721评论 1 1
  • 老同学笑笑最近心情烦透了。 上次见到她还是刚过完年的时候,自从她去了武汉以后,就很少联系了。除了有时候在微信朋友圈...
    踮起脚尖的期待阅读 371评论 0 1
  • 11 “你怎么又在沙发上睡了一夜,对身体不好。” “没事,妈,您不用担心了。” 老母亲看了女儿良久,很想说出口,可...
    烟墨倾半世阅读 165评论 0 1
  • 周六本来休息,想着前两天收集客户的保单放在办公司还没整理,于是就去了公司。 总有比你勤奋的人,已经有两三个同事先我...
    樊俊宏阅读 348评论 0 2