网页设计 » 交互设计 » 如何正确设计进度条、加载器?

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

发表于: 交互设计. 评论
Sponsor

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

目录

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

2.4秒原则

3.何时显示微调框

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

5.如何显示进度栏

6.不要疯狂旋转

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

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

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

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

2.4秒原则

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

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

3.何时显示微调框

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

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

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

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

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

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

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

5.如何显示进度栏

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

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

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

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

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

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

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

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

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

来源 | ArtMark(微信号: wx_artmark)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }