生图提示词手册
首页 交互设计 如何正确设计进度条、加载器?

如何正确设计进度条、加载器?

当你在购物长时间的排队等待时,往往感到枯燥,甚至会爆发出负面情绪。同理用户在等待加载的时候也会有同样的感受。 目录 1.微调器不适合长时间加载场景 2.4秒原则 3.何时显示微调框…

当你在购物长时间的排队等待时,往往感到枯燥,甚至会爆发出负面情绪。同理用户在等待加载的时候也会有同样的感受。

目录

1.微调器不适合长时间加载场景

2.4秒原则

3.何时显示微调框

4.进度条适合时间较长的加载场景

5.如何显示进度栏

6.不要疯狂旋转

1.微调器不适合长时间加载场景

微调器适合短时间的加载场景,它不会告诉用户具体的加载时间和进度,缺乏反馈。假设长时间使用它,用户会怀疑 App 是否出现了问题。

用户会误以为需要很长的加载时间,用户会因为长时间的等待而感到不耐烦,甚至会放弃当前操作或者退出应用程序。

如何正确设计进度条、加载器?

2.4秒原则

一项研究表明:用户可以忍受的等待时间为 4 秒。

如果你希望用户能够停留在自己的产品上,在使用微调器的情况下不要让用户等菜超过 4 秒,假设加载时间超过 4 秒,用户的行为意图则会开始改变。

3.何时显示微调框

用户期望产品能够及时相应,对于及时相应理解成时间概念则是:少于1秒。如果用户在 1 秒钟后没有得到任何视觉反馈,他们则会担心程序是否出现了问题。

假设加载超过 1 秒钟,应该立刻显示一个微调器。这样的话用户就会知道程序正在加载,避免用户因为缺乏反馈而感到担忧。

如何正确设计进度条、加载器?

4.进度条适合时间较长的加载场景

假设加载时间超过4秒,则应使用进度条。如果用户看到进度条,则更愿意忍受较长的等待时间。

如何正确设计进度条、加载器?

进度条可以进行明确的状态反馈,通过线性视觉提示告诉用户当前的加载进度,从而鼓励用户等待。而微调器则不会明确的反馈给用户当前进度,用户很难感知到他们的操作正在被处理,从而也就没有动力等待。

5.如何显示进度栏

进度条需要向用户显示系统正在取得多少进展。你的进度栏应该以一个从左到右且速度一致的动画表现。

如果动画暂停时间太长,用户会认为它被卡住了,不会等待。

如何正确设计进度条、加载器?

为了更好对当前状态进行反馈,你应该在进度栏旁边显示具体的数据,若果加载不超过 1 分钟,显示百分比或者已加载的项目数,告知用户当前正在进行的活动。

假设加载超过 1 分钟,则应该给用户一个预估的剩余时间。这样可以鼓励用户花费比预期时间更长的时间进行等待。

6.不要盲目的添加微调器

许多设计师习惯在每个加载过程中都添加微调器。但如果在长时间加载的场景下使用微调器时,会让用户感到沮丧,这时应该使用进度条显示加载过程避免上述情况的发生。

进度条适用于长时间的加载场景,用户看到进度条的状态反馈知道它正在为他们工作,则愿意花费更多的时间成本等待。

但是如果时间比自己预期更长,用户需要视觉信息的反馈,用户需要知道他们在等什么(进度&时间),如果用户不知道自己在等待什么,则会放弃当前的操作。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

交互设计:如何做到品质?

如何做到品质,即交互设计的高品质。 一、怎样算是品质? 首先,探讨这个问题,意义何在? 笔者认为,有两点意义:首先,作为...

从产品的角度看交互设计原则

对于一名产品经理,交互设计是原型设计里的重要环节,交互设计的好坏,直接影响产品是否能够吸引和留住用户,因此了解交互设计的...

从入门到精通,了解智能交互设计专业

随着科技的飞速发展,智能交互设计专业逐渐成为热门领域。这个专业涵盖了人机交互、人工智能、设计思维等多个方面,为从业者提供...

交互设计的基本原则探究

随着科技的不断发展,交互设计已经成为产品设计中不可或缺的一环。在设计用户界面时,遵循一些基本的交互设计原则是确保用户体验...

AR智能眼镜交互设计研究

AR眼镜交互形式分为外接设备和自然交互,我们将一一分析这些交互形式特点和应用场景。预测未来AR眼镜交互形式将会往哪个方向...

发表回复

返回顶部