在数字产品的使用体验中,等待都难以避免:无论是打开 App、刷新页面还是完成支付;
从技术角度看,加载是系统与用户直接的对话,传递着“正在处理,请稍候”的信息。对设计师而言,它考验的是如何让加载变得可感知、可接受,甚至愉快。本文将聊聊加载设计背后的思考。
本期提纲:
• 为什么加载需要设计
• 加载背后的心理机制:两个关键框架
• 加载的类型与使用
• 典型的加载场景与策略
• 小结
• 写在最后
不明确的加载会让用户无法判断程序是否正常运行并中断操作。加载设计就是需要解决在系统处理时间不变前提下,优化用户等待环节的体验,从而提升可控感,减少焦虑,提升体验与留存。
其中,David H. Maister 在《The Psychology of Waiting Lines》中指出:被占用的时间会显得更短、焦虑会让等待变得更长,不确定的等待更难熬——这些因素都会直接影响用户对等待的情绪体验。
此外,Tarek Salah Amer 在《IT Progress Indicators》中的实验研究表明:相比不确定型进度条与确定型进度条,视频式加载提示在主观感受上时间最短,并提出等待体验受两大心理机制影响——用户是否能感受到任务正在推进 & 用户对时间流逝的主观感受。
当用户的注意力从“被动等待”转移到其他有吸引力或有意义的内容上时,他们心中的计时器就会暂停。这种注意力的转移能有效缩短用户对等待时间的感知,从而提升整体满意度。如餐厅通过向等待的用户分发菜单供其浏览来占用时间。
在了解用户对“等待”的两种关键心理框架之后,我们可以进一步讨论在不同类型的加载提示与加载时长中如何应用这两种心理框架。
确定型加载提示
当加载过程可以使用精确时间展现,或者呈现具体进展情况时,这类加载提示直接响应了「进度感框架」,通过“可视化的过程”提升用户的体验感,帮助用户有效管理预期;
不确定型加载提示
当加载过程时间未知时,可以通过「主观时间框架」,设计循环动画(如圆形加载提示、骨架图)等方式处理。
这样既能让用户感知到系统仍在运行,又能利用视觉动效吸引注意力,缩短用户对等待时间的感知。
瞬时等待(<200ms):无需任何提醒
对于瞬时完成的操作,不建议添加任何加载提示。多余的加载提示可能导致画面闪烁,让用户怀疑操作是否出问题。
轻度等待(200ms–5s):模糊时间感知
此时属于“可感知但可忍受”的等待,建议使用「不确定型加载提示」与「主观时间框架」。利用简洁、轻量的模糊反馈,保持系统“正在工作”的感知,尽量不打断用户的专注节奏 。
例如圆形加载提示、骨架图等。
中度等待(5–10s):强化进度感知
此时循环动画已经无法安抚用户,他们开始产生“程序是否卡住”的担忧。
使用「确定型加载提示」能帮助用户构建心理预期,通过“可视化的过程”来减少焦虑,并维持用户注意力。
例如进度条、百分比数字或阶段性状态描述。
重度等待(>10s):多维反馈体系
超过十秒的等待已属于“高风险时段”,单一的反馈已不足以支撑用户的耐心。设计上需构建多维反馈体系:
(1) 通过进度条与预估时间,持续告知“程序在进行”。
(2) 提供可选择的退出或后台处理机制,让用户拥有掌控感。
(3) 在处理完成后,给予明确的完成提示。
明确展示“任务正在进行中,并正在向前推进”
管理用户的预期
(1) 告知等待原因,让等待更合理
长时间加载,仅显示加载状态不足以缓解用户的不确定感,可以通过明确告知系统正在执行的操作或等待的原因,让用户能够形成心理预期,从而减少焦虑。
(2) 在长时间等待中给用户足够的掌控感
当预计需要长时间的等待,设计上需构建多维反馈体系:提供可选择的退出或后台处理机制,并在完成后给予明确的完成提示。让用户拥有足够的掌控感。
例如,在元宝回答问题的场景中,用户可以选择终止当前回答或将任务后台处理,并在完成后收到通知。
用元素转移注意力焦点,减弱时间感
保持用户的操作或思考
例如,在用户发布视频号内容时,可通过后台上传机制,让用户在等待过程中依然可以浏览其他页面、执行其他操作;在观看视频遇到网络波动时,自动切换为低分辨率播放,而不是直接暂停进行加载,让观看体验保持流畅。
加载设计的本质,始终是围绕「进度感框架」与「主观时间框架」 。我们需要根据客观时长,动态调整应对策略:
从瞬时等待(<200ms)的“无需提醒” ,过渡到轻度等待(200ms-5s)时的“模糊时间感知”(如骨架屏) ;进入中度等待(5-10s),必须切换为“确切的进度可视化”以消除焦虑 ;而当等待超过 10s,单一的反馈已失效,必须构建“多维反馈体系”(告知原因、给予退出权),将对等待的掌控权交还给用户。
加载设计不止于设计一个转圈动画,也不应是冰冷的等待提示,而在于如何有温度地承接系统与用户之间的“沟通”。通过明确的反馈传递系统状态,融入情感化表达安抚用户情绪,进行清晰的预期管理帮助用户建立掌控感,最终将不可见的系统处理过程,转化为一段可感知、可理解、可预期的等待体验。
[1] The Psychology of Waiting Lines By David H. Maister
https://www.columbia.edu/~ww2040/4615S13/Psychology_of_Waiting_Lines.pdf
[2] IT Progress Indicators: Sense of Progress, Subjective Sense of Time, User Preference and the Perception of Process Duration
https://www.researchgate.net/publication/288249970_IT_Progress_Indicators
[3] Apple Developer
https://developer.apple.com/cn/design/human-interface-guidelines/loading
[4] Material Design
https://m3.material.io/components/loading-indicator/guidelines
[5] Loading & progress indicators — UI Components series
https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a
[6] How to Turn Boring Loading Screens Into Engaging UX Moments
https://articles.ux-primer.com/how-to-turn-boring-loading-screens-into-engaging-ux-moments-df41529a751e
[7] Loading Feedback
https://www.pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback
如需转载,请注明来自 WeDesign

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。
公安局备案号:
