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

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）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。