哈喽，这里是Clip设计夹，今天分享的是「等待时刻的交互体验」。

打开APP一直在加载转圈、快递位置长时间不更新、预计时间到了外卖还没送达——这些时刻是不是让你越等越烦躁？这些场景一旦卡住，我们都会很着急：系统怎么没反应？继续等下去有用吗？

所以专门对“等待体验”进行针对性设计特别有必要。只要选对设计组件和设计策略，就算是等待也能让操作流程继续顺下去，不破坏使用沉浸感，减少用户焦虑。下面就来聊聊这些等待时刻如何针对性设计～

01 两种等待类型分析

这里将等待时刻分为可预测型和不可预测型两种类型。

① 可预测型

可预测表示等待完成的时间是明确的，例如清晰告知外卖送达时间、司机还有多久到达、加载还需多久等。用户知道了大概需要等待的时间，对等待有预期也会对产品也更信任。

但如果进度长时间卡住不动或者实际时间跟预计等待时间对不上，这些情况会对产品的信任度造成影响。就像前段时间我使用tb闪购点过两次外卖，每次送达时间都比预计时间要长很多，点过两次之后耐心耗尽就不想再用了。

可预测的核心是“准确、可视化地展示进度”，靠谱最重要。预计到达时间宁可往长了说，也别吹得太离谱，比如对外宣称12小时达，结果等了一天了还没送到，这种不靠谱的宣传会大大降低对产品的信任度。

设计组件

进度条：表示操作正在进行中以及操作的进度。

计时器：适合等待时间短、能算得准的场景，比如看广告时的 “5秒后可跳过”。

文字说明：主要用于显示打车、送外卖、寄快递等场景的预估时间展示。比如外卖、电商平台常将预计到达时间(ETA)作为订单状态展示，例如用户下单后实时显示配送预计送达时间“预计x天后到达”。ETA需根据交通、天气等动态数据每5-10分钟实时更新一次，避免信息滞后。

步骤条：提示用户进度以及当前的步骤，用于引导用户按照步骤完成任务，常跟进度条搭配使用，用来显示当前进度。

② 不可预测型等待

像服务器延迟、验证处理这些场景说不准需要等多久。如果在不确定的情况下一直让用户干等着很容易焦虑、犯嘀咕。要是没任何反馈，他们会觉得“肯定出问题了”，要么反复点击刷新按钮，要么干脆把APP关了。

既然无法提供准确的剩余时间，那么反馈的重点应该是让用户知道“系统正在运行没有卡住”。通常采用加载器、骨架屏等loading加载的方式，不显示明确的预计完成时间，而是传达一种正在进行中的状态。

设计组件

加载器：表示操作正在进行中但不知道具体进度。环形加载器通常用于短时间的加载过程，线性加载器通常用于下载大型文件等长时间的加载。

加载器也分为无限型和有限型两种类型：

无限型加载指加载loading没有起点和终点，说明加载完成的时间无法预估，适用于服务器响应时间不确定、系统临时卡顿的情况。但它能给的反馈少，不容易让用户有预期；

有限型加载指加载的时候进度条会慢慢填满，表明进度快加载完了，给用户一种“再等等马上就好”的心理暗示。适合用于加载时间有预估范围但没法给出精确数字的情况。但要避免进度条长时间一直卡着不动的情况，免得让用户着急。

除了常见的环形/线性加载器，还有一些APP会把品牌元素融入到加载器中，将加载loading设计成个性化、趣味化的效果。例如美团的页面加载，融入了自家IP形象奔跑的动画效果，就算等待加载的这几秒钟也能让用户感受到统一的品牌体验。

动效特点：加载器属于最基础的循环动效，大多是圆形转圈。点击按钮、打开弹窗、短时间加载内容时用得多，不需要占太多页面空间，交互后能马上给反馈。但传递的信息有限，只能告诉用户“功能正在运行”，没法传递太多内容。

骨架屏：在数据加载之前显示的灰色占位框，把页面的排版结构提前显示出来，给用户一个视觉上的反馈，让用户知道“接下来加载出来的内容会是这样的”。

动效特点：静态的骨架屏加上闪烁的重复动效可以呈现出页面不断加载的的动态效果，比单纯的转圈加载更能减少“等得久”的感觉，用于提高用户体验。

通常第一次打开APP加载整个页面时会用到，现在无限滚动的场景多了，列表、卡片、个人主页这些模块也常用局部的骨架屏加载。

02 五个设计技巧优化等待体验

上面提到的设计策略，核心都是在等待这种不确定的场景里稳住用户心态。

在等待的场景中，大家都会感觉时间很漫长，比如实际只等了1分钟，感觉像等了5分钟。如果等待期间不提供任何的反馈，还会琢磨功能正常吗？是不是坏了？解决这些问题的关键是营造可预测性，让用户觉得马上就能加载完成。就算实际处理很慢，也要通过加载动效这些可视化反馈，让用户觉得一直在顺利推进。

那么在等待期间有哪些需要注意的交互呢？下面总结了5个关键技巧，优化我们在等待期间的体验。

① 给出反馈

如果点击之后没有响应，用户可能会觉得系统卡住了，从而放弃重试或者退出应用。所以哪怕等待一两秒钟也要马上给出反馈。

② 搭配使用组件

根据产品功能、使用场景灵活选择进度条、加载器、骨架屏、步骤条等组件，不局限于一个场景中仅使用一个组件，通过组件的搭配使用明确告诉用户APP运行正常。

③ 符合心理预期

提供相对可靠的时间信息，避免超出用户的预期。预估时间最好保守一些往长了说，比如打车时一开始提示“预计5分钟后应答”，让用户先有一个心理预期，实际应答速度往往会比预计时间快，这样既节省了时间也会让用户觉得这个产品很靠谱。

④ 提供备选方案

如果预计需要长时间的等待，考虑为用户提供其他选择，例如提示“等待完成后将通知您”，让用户可以在等待的过程中再进行其他的操作，减缓等待焦虑感。

例如现在很多产品会在客服功能中接入“Al智能客服”，当用户在排队等待人工客服的过程中，推荐用户优选使用AI客服来查询问题，这样很有可能AI客服就解决了问题，省去了人工客服的成本。

⑤把等待加载变成学习时间

与其在加载期间让用户白白等待，不如提供一些有价值或者有意思的内容供用户学习观看。

比如进入懂车帝的3D看车过程中，由于需要加载3D车模型和空间等复杂的内容，进入前有一段进场加载loading。在加载的这段时间里没有让用户对着进度条发呆，而是在进度条上方提供了六个手势操作教学，这样的设计首先能抓住用户的注意力，其次是能引导用户在进入功能前提前了解操作，既方便后期好操作，也省去了进入新功能之后单独的操作引导，可以说是一举多得的作用。

最后

随着界面承载的功能越来越多，用户注册、内容提交等流程也越来越复杂，等待似乎是没法避免的。

如果单纯依靠技术手段来提升等待速度，总会有体验上的局限性。这时候设计师通过精准、贴心的设计方案来优化“等待体验”，很可能就能解决体验问题，提升产品的服务质量。

慢慢来比较快，如觉得有帮助，请点个赞，分享给更多的朋友，谢谢！

Powered by Froala Editor