From Michelle Kondrich

系统状态的可知性是用户界面设计中最重要的原则之一。 用户在使用产品的时候体验到足够的控制感，这意味着他们需要及时知道和理解产品的当前状态，尤其是当系统忙于处理任务的时候。 动态的等待符是当产品在运行任务或加载时为用户提供系统状态的最常见形式。

Nick Babich 在Smashing Magazine分享了这篇文章，介绍了等待符的几种设计形式，并为何时及如何使用这些指示符提供了建议。

好的交互设计提供及时的反馈

能够做到即时反应无疑是最好的，但总有的时候你的产品不能提供即时的反馈：网速慢、操作本身需要长时间完成。在这些情况下，为了减少用户的心理紧张感，你需要告知用户你的产品正在为了执行他们的请求而工作。

总是给予某种程度上的即时反馈

产品应该对用户的任何操作（如点击按钮或下拉刷新）做出即时的视觉反馈。用户的等待在他们发起动作的那一刻就开始了，而最糟糕的情况是没有任何指示来告知他们系统以及接受了请求。当产品不能告知用户它需要一定时间去执行任务时，用户通常认为该产品没有接受到用户请求，他们会再次尝试操作。缺乏反馈会引发大量额外的点击或点触。

下拉刷新（From Behance）

为长于1秒的操作提供进度指示

对于1秒以内的反应速度，尽管用户能够感觉到一定的延迟，但他们的注意力仍然会维持在当前任务上。当产品的反应速度长于1秒时，用户的注意开始摇摆，他们会开始注意到产品的反应速度不够快。因此，对长于1秒的处理过程就需要给用户提供一个进度指示器和一个等待的理由（对于1秒以内的过程，等待符的闪现可能更容易增加用户的烦恼：刚才有个什么过去了...）。

等待符的种类

等待符提示用户产品需要更多的时间来处理他们最近一次的请求。

不确定的等待符是最简单的进度指示符，它们告知用户需要等待任务处理的完成，但并不确定需要多长时间才能完成任务。作为一个普遍的原则，不确定的等待符用于能够快速完成的处理中（2~10秒）。让用户长久的盯着一个无限循环的旋转符/线条会增加网站的跳出率或导致用户关闭APP。

与之相反的是确定的等待符，能够大致告知用户完成任务需要的时间以及任务处理的进度。使用这种等待符能够提高用户的等待意愿。

不确定的等待符（左）和确定的等待符（右）（From Material Design）

两种最常用的等待符

循环动画和百分比进度指示是两种最常见的等待符。

循环动画  大多数的循环动画不提供确定的进度信息，并在多种延迟情况下发挥作用：包括长时间的延迟。例如，Apple IOS默认的加载图标在多种情况下被使用，从设备启动到网络问题以及数据加载。但是，用户并不喜欢只看到循环的旋转符，尤其是没有其它进度或时间标识的时候。

IOS的加载指示符（From appance）

百分比进度条  百分比进度条会明确告知用户任务处理从0%到100%的进度，基本不存在数值回退。百分比可以用线条或环形线的形式实现。对于10秒以上的任务处理过程，百分比指示是最好的选择。根据Jakob Nielsen关于反应时间的研究，10秒是用户的注意在某个任务上维持的极限，一旦超过这个界限，用户便会迅速失去耐心---尤其是在用户不知道他们需要等待多久的时候。

条状（左）和环状（右）进度条（From Adobe Stock）

等待符的设计建议

1. 告知用户等待/延迟的原因  用户如果知道了等待原因，他们可能会变得更加耐心。可以通过增加额外的文本信息来告知用户你的产品正在处理什么或者其它延迟反应的原因。

Skyscanner告知用户产品正在从现有的供应商中搜索最适合的航空结果（From SmashingMagazine）

2. 于长时间的任务，给用户一个预计的完成时间  不需要完全准确，简单的‘这个任务大概需要5分钟’就足以鼓励用户完成等待。

IOS在系统更新时告诉用户大概的完成时间（From SmashingMagazine）

3. 诉用户已经完成了哪些步骤  对于那些耗时，但又无法预估完成时间的任务，用百分比的进度指示明显是不合适的。但仍然可以通过告知用户‘已经完成了哪些工作/步骤’，通过这些反馈能够帮助用户自己估算整个任务需要的时间。

当不能准确监控运行进程时，考虑展示已完成的步骤（From SmashingMagazine）

4. 不要让进度条停下来  用户通过进度条的只是对产品的处理能力产生一定的预期。任何预料之外的停顿都可能被注意到，进而降低用户满意的有。最糟心的事情莫过于进度条走到99%就不动了。通过即时和稳定的反馈进度信息能够在一定程度上避免这种情况。

From Behance

5. 让进度看起来更快一些  用户感知到的处理速度和实际的处理速度一样重要。你可以让进度条在刚开始的时候慢一点儿，然后在结束前移动更快一些。这样用户将感觉产品的处理速度快于预期。

From Behance

6.  展示视觉干扰  有创意的等待符能够减弱用户对时间的认知。如果产品能够在用户等待是提供一些有趣的事物给他们观看，用户将减少对等待本身的关注。比如以下这些：

From Vimeo

From Behance

Skeleton Screen：等待符的替代物

以上的所有内容都在说：如果某个操作需要一段时间来进行处理，应该通过等待符给用户更好的等待体验。然而，尽管这样做是出于好意，但最终的结果可能也并不理想。Luke Wroblewski在其文章中指出：“从其定义上来看就知道等待符以为着用户必需等待。这就好像看着时钟嘀嗒嘀嗒地走一样---当你真去看的时候，时间好像是变慢了。”在产品中加入等待符就好像给了用户一个时钟去盯着。尽管比什么都不做更强，UI设计应该致力于让等待变得更加愉快。

页面框架（Skeleton Screen）因此成为等待符的良好替代物。页面框架事实上是内容逐渐加载过程中的空白状态。与进度/加载指示不同，页面框架关注于信息处理的具体过程并为用户提供完成状态的框架预览。这样做给用户提供足够的反馈：随着加载的进行，数据/信息一点点的展现出来。用户会知道在他们等待的过程中，你的产品具体在做些什么。

Medium就使用这样的技巧。在内容加载的过程中，展示线框图似的的占位符。同时，这个加载页面也让用户熟悉加载完成后的内容展示会是怎样的。

From merhl

PS. 如果我有什么术语翻译不对，请指正和包涵。毕竟不是学设计的啊...

拓展阅读：

有创意的等待符，让等待变的不再枯燥（交互设计）中作者提供了诸多创意的等待符。

Progress Bars vs. Spinners: When to Use Which 中Anthony分析了何时使用进度条或循环动画：与本文中10秒的界限不同，Anthony认为区分两种等待符的时间界限为4秒。