固体比大纲图标:哪些更快被识别?

用户头像
厦门/UI设计师/7年前/126浏览
固体比大纲图标:哪些更快被识别?

固体比大纲图标:哪些更快被识别?

来源:Medium网站

作者:UX运动

翻译:奥创

阅读时长:5min



在构建移动应用程序时,您需要决定是使用实体图标还是大纲图标。哪种风格更适合用户体验?


undefined

 

有些人认为它们之间的差异仅仅是一个偏好问题,但研究表明,它有更多的东西 - 一种风格的识别率比另一种风格更快。


了解何时使用实体或大纲图标可让您的用户轻松浏览您的移动应用。他们将能够更快地识别您的图标并选择正确的选项。

一项研究性研究“ 填充与大纲图标:图标样式对可用性的影响 ”发现,图标样式会影响任务性能。通过识别和选择图标的速度和准确性来测量任务性能。

实体图标通常比大纲图标更快识别,但有一些例外。并且一些图标显示任务时间没有差异。这与特征线索有关。


特色线索

特征提示是用户用来识别图标的内容。如果缺少或难以注意到特征线索,则图标变得无法识别。


undefined

 

例如,评论气泡图标的尾部是其特有的提示。没有它,它只是一个圆圈。锁图标上的钥匙孔是其特有的暗示。没有它,很容易将图标误认为是一个包。齿轮图标上的牙齿是其特有的提示。没有它,它看起来像一个甜甜圈。


研究中使用的锁定图标没有锁孔,是最错误识别的图标,超过四分之一的失败。钥匙孔是一个必要的特征提示,因为没有它,图标看起来像一个包,钱包,甚至是一个锅。

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


大纲图标更快时

除了包括特征提示之外,提示必须突出或易于注意。有时,某些图标上的特征线索在轮廓样式中比实体样式更突出。


undefined

 

该研究发现三个图标在大纲样式中更快识别 - 评论泡泡,垃圾桶和钥匙。这些图标具有出现在形状外边缘上的微妙特征线索。因此,大纲样式使这些提示更容易被注意到。


评论泡沫尾巴很容易被遗漏作为一个坚实的,但更明显的轮廓。垃圾桶盖子很难以实心的方式注意到,但在轮廓中更容易看到。关键的牙齿是微妙的,但锯齿状的边缘在轮廓样式上更加明显。


undefined

 

当图标的特征提示很微妙并出现在形状的边缘时,请使用轮廓样式。这使得提示更加突出,这导致更快的识别。

选择图标时,最好坚持一致的风格。不要混合实体样式和轮廓样式,而是尝试选择一组具有突出特征线索的图标,其中锐角指向外部。


undefined

 

例如,如果您将评论,垃圾桶和关键图标与具有更多显着提示的图标进行比较,您可以看到差异。更突出的线索突然出现,更容易被注意到。


当实体图标更快时

大多数图标代表现实世界中的物理对象。这些对象呈实体形状,并显示为轮廓。将图标视为轮廓并不是大多数人习惯看到的真实表现。这就是为什么可以更快识别实体图标的原因。


undefined

 

尽管如此,用户仍然能够识别大纲图标。但如果图标的形状轮廓太靠近,那么它们需要更长时间才能完成。

该研究发现,拇指,剪刀,手机和工具图标更加难以识别。这是因为这些图标的轮廓样式在其提示上都具有狭窄的内部间距,从而产生视觉噪音。


undefined

 

对于内部间距较窄的对象,最好使用实心图标。轮廓形状提供更简单的形状,使图标更容易识别。


风格没有区别

该研究发现了这两种风格中容易识别的图标。例如,星形,购物车和旗帜图标都具有相似的识别时间。


undefined

 

这意味着这些图标的大纲样式不会降低用户的速度。原因在于它们具有宽的内部间距,从而降低了视觉噪音。内部间距越窄,产生的噪声就越多,这会干扰识别。


按钮选择的图标样式

通常的做法是使用实 心图标突出显示标签栏中的活动按钮,而其他按钮保持大纲形式。但是这种设计实践是落后的,应该是另一种方式。


undefined

 

用户需要更多他们尚未发现的选项的识别速度,而不是他们已经选择的选项。不需要活动按钮的实心图标。对于非活动按钮来说,获取可靠图标更为重要。

使用大纲图标突出显示活动按钮,而不是实心图标。它提供了更清晰的风格和颜色变化,强化了所选按钮。


反传统指南

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


总之,这是使用图标样式时应该记住的内容:


图标由需要识别和突出的特征线索组成

除非他们的线索微妙且不够突出,否则可以更快地识别实体图标

当内部间距较宽时,轮廓图标更容易辨认

如果实体版本在边缘上具有微妙的特征提示,请使用大纲图标

如果轮廓版本创建窄内部间距,请使用实心图标



-------------------------------------------------------

喜欢请点赞加关注哦~~

也可以关注奥创公众号哦~看图文更方便~


3
阅读原文
|
举报
|
3
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】礼物/活动icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
我的钱包-UI界面设计-app
新能源APP应用UIKit
【新年UI图标】钱包icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】秒杀icon
【新年UI图标】30个图标
钱包ui模板
【新年UI图标】会员icon
手表表盘UI系列
新拟态风格 UI设计组件库
3D渐变流体抽象矢量UI背景图
3D卡通UI界面图标可爱插画免扣素
Security Camera UI kit
UI 登录界面设计模板包
高级感金属拟物 UI设计组件库
户外旅行飞机情侣假日出行
智能家居中心 简约 UI设计组件库
UI通用设计素材1
【新年UI图标】体育icon
高级表盘系列UI源文件
你可能喜欢
大家都在看
登录注册