教材级干货！UI进度加载指示器设计指南

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

编者按：这篇文章来自资深设计师 Taras Bakusevych，长期从事金融和企业类数字产品的设计，在 UI/UX 设计领域造诣精深。他之前曾输出过很多篇高素质的专业文章，这篇文章是他最近 1 年来第一次更新，文中重新梳理了 UI 中的进度加载指示器的设计原理和最佳实践，实用性极强，属于是教材级别的干货。

资深UI设计师搞定输入框和表单的20个秘诀

编者按：这篇文章来自资深设计师 Taras Bakusevych，长期从事金融和企业类数字产品的设计，在表单设计领域造诣精深。

一个UI按钮的自我修养

编者按：一个合格的 UI 按钮到底需要具备什么样的素质？

加载进度指示器，是 UI/UX 设计当中的基础控件，可以帮助用户在等待期间了解进度，保持参与度。无论是网页加载、处理交易、下载，精心设计的进度指示器都可以极大的改善用户体验。

在著名的「尼尔森十大启发式」当中，「状态的可见性」是首要的原则。

「呈现当前状态能够让用户感受到可控性，用户感觉到可以采取适当的操作来实现目标，最终对产品和品牌产生信任感。」

当然，提升系统的响应速度是产品功能优化的核心，但是当这个速度和效率提升到极限的时候，正确的用户体验设计，能够在此基础上带来更进一步的提升。

在本文中，我们将会深入探讨加载和进度指示器的重要性、背后的心理学逻辑，并且探索有效且友好的设计策略，总结这一控件的最佳实践。

「不确定指示器」和「确定指示器」

针对不同的场景，是需要选择不同类型的指示器。

「不确定指示器」—— 针对不确定的时间量。

当所涉及的流程的时间或者进度是未知或者可变的时候，使用不确定的指示器，它可以让用户感知到系统正在运行，并且防止用户将延迟视作为错误或者故障。

「确定指示器」—— 当某个过程可以使用精确时间展现，或者呈现具体进展情况。

当可以测量或者估计时间或者进度的时候，使用确定的指标。它们可以直观地表示已完成的进度和剩余的内容，确保用户能够衡量进度，并且管理预期。

主要的类型和变体

旋转指示器：通常使用一个简单的旋转动画图标，不断旋转表明系统正在处理或者加载内容，它在大量的 APP 和网站当中都得到了广泛的使用。

骨架加载器：模仿待加载内容的预期布局，使用视觉化的占位符来呈现，它可以提供实际内容、页面或者界面的粗略视觉轮廓，提供给用户基础的视觉预期。

进度条：进度条使用一条逐渐填满的水平线条，来表明任务的加载过程和进度，用户可以看到完成的百分比和剩余的时间或进度。

进度环：和进度条类似，只是使用圆环来替代直线条，用逐渐加载封闭的环来表明进度。

动态图标/插画：使用引人入胜的动态图标和动态插画来取悦用户，增加视觉趣味，让等待过程更加有趣。

文本加载信息：以文本的形态来呈现加载信息，比如「加载中……」或者「请稍候」，以文本的形态清晰地给予用户反馈，表明系统正在积极处理他们的请求。

百分比指示器：此类指示器以百分比的形式来呈现进度，允许用户以数字的方式来呈现加载的过程。

混合指示器：结合不同的加载指示器，创造独特且引人入胜的体验，比如使用进度环和动画以及文本信息，共同告知用户信息。

基于时间来选择合适的指示器

不同的等待时长下，选择合适的进度指示器，来增加用户的参与感和信息的知情权。

小于1s的等待时长：建议不要使用任何显式的加载效果，因为它可能呈现出来是故障效果，让用户感到困惑。

较短等待时长（1-3s）：建议使用不确定指示器，比如使用骨架加载期或者进度环。

👉这个时候应该避免使用复杂的动画效果或者插画动画，因为可能没有足够的时间来呈现这个加载过程。

中等等待时长（3-10s）：用户可能会质疑系统的响应能力，因此建议用户使用进度条和百分比指示器来显示加载过程，确保用户的参与度。

较长等待时长（10s以上）：这个时候最好提供清晰的界面来展示进度，最好允许用户与之交互，来减少焦虑。可以利用闪光特效、背景任务、讲故事、小贴士等内容和功能组合，来确保漫长的等待过程中，用户能够保持参与度。

等待心理学

Fiona Fui-Hoon Nahassess 曾经进行过一项关于用户等待时长忍耐度的调研，这项研究反映了用户在等待网页加载多长时间后会放弃，总结了这类用户行为的规律。研究结果显示，界面反馈的存在，延长了用户的等待忍耐时长。

看得到进度条的参与组的平均等待时长为 22.6 秒，而看不到进度条的参与者的平均等待时长为 9 秒。

用户对时间的感知、焦虑程度、掌控感、视觉吸引力、透明度以及干扰元素对于等待时长都有着关键作用。此外，用户期望可能会根据行业、领域的差异，而有所不同。

最佳实践

1、加载时避免多个相同进度指示器

加载同一进程的时候（比如同一页面中多个卡片的时候），建议显示单个全局的进度指示器，而不是每个卡片都单独设置一个进度指示器，这样可以让用户轻松了解整体进展，而不会感到不知所措。

2、使用骨架加载器增强加载内容的感知

屏幕骨架有很多功能，包括向用户展示正在发生的事情，给用户提供接下来会发生什么的预期感知。通过在内容加载的时候给用户呈现无干扰的布局骨架，骨架加载器最大程度地降低用户的认知负担，帮助用户关注于当前的任务，而不用担心其他。

3、不要为了动画而人为拉长加载时长

不必要的动画加载效果可能会让用户感到繁复，甚至沮丧。设计师应该优先考虑使用有意义的加载指示器，比如使用进度条，或者骨架指示器，在贴合用户认知、实际情况下，确保用户满意度，最大限度地减少不必要的等待。Tripadvisor 这个应用当中，在加载的时候使用动态的猫头鹰图标来取悦用户，而 Airbnb 则使用了更加通用的骨架加载器。虽然前者的动画效果看起来增加了视觉效果，但是它很容易让人感觉是为了设计而设计，浪费了时间。

4、使用渐进式加载逐渐显示内容

对于较多的内容呈现，可以使用渐进式加载来解决。渐进式加载无需用户等待整个页面加载完成，而是采用增量加载的方式来显示内容，这样的设计减少了等待时间的感知，可见的内容逐步出现，也可以意味着用户可以更快和用户交互，让体验更加具有吸引力，也调和了网速的限制和硬件性能的限制，用户以另外一种方式「低延迟」地和网络内容进行了互动。

5、战略性放置进度指示器来引导用户期望

所谓的战略性地防止进进度环，就是将它放在即将刷新或者加载的位置，来提示用户「再拉就要刷新了」，下拉刷新的时候可以将它放在顶部，往下翻页浏览的时候，可以放在底部，预告再往下翻就会刷新加载。将进度指示器放在这些位置，可以让用户对后续操作有更加清晰的预期，也提供了顺畅的加载体验。

6、加载过程很长允许用户不间断使用系统

如果所涉及的加载过程很长，那么最好为用户提供灵活的选择，不要使用全屏覆盖的进度指示器，遮盖出其他的控件，而是尽量选择加载过程在后台进行，同时在界面的边角提供清晰的指示器，确保可见性，用户可以进行其他的操作，并且允许用户取消或者终止这个加载过程。赋予用户控制权，允许多任务处理，能够极大地改善长加载过程的体验。

7、提供时间预估以贴合用户预期

还剩下多长时间能完成，对于降低用户焦虑有明显的好处。虽然这个时间不一定是准确的，但是相对清晰的信息控制，能够让用户清楚知道要等多久，能够降低等待期间的挫败感。结合进度条、倒计时和其他的辅助信息，能够让用户满意度得到明显提升。

8、避免用户在长时间加载中怀疑系统无响应

长时间加载的情况还挺多的，需要避免让用户感到系统无响应，这种不确定的状态可能会让用户对系统失去信任。

为了规避这种情况，进度指示器、文本说明信息、动画这些手段最好都用上，让用感知到系统正在积极处理他们的请求。通过主动解决用户的潜在质疑，让用户了解正在进行的流程，这样可以保持用户信心和整体体验。

在系统反馈上，苹果的产品上正反案例都有。比如 iOS 的系统更新过程中，即使整体进度条变化不明显，齿轮动画也会让人感到安心，让人知道系统没有卡死。

9、将进度指示器和UI控件集成

可以将进度指示器和按钮等关联的 UI 控件结合起来，这可以带来一致的用户体验，并且阐明操作和加载指示器之间的关系。

此外，这种设计之下，不确定指示器过渡到确定指示器，再到成功状态的变换过程，也可以让用户保持参与感，提升用户的满意度。

10、揭示复杂过程告知用户后台任务内容

TurboTax 有意将数据导入的过程使用更加清晰的文本和动画清晰透明地呈现出来，这可以让用户放心，他们的帐号正在被检测、数据被正确地导入到系统当中。这种设计设定了用户的期望，通过展示来反向强调其中操作的重要性和复杂性，让用户了解过程，并且对于系统的可靠性有了更多了解，会更加信任产品。

11、添加有趣的元素减轻用户压力

在游戏当中，这种策略经常会用到，包括一些有趣的加载效果，提供该游戏相关的一些小贴士或者说明。比如在《炉石传说》当中，除了有和游戏本身匹配的文案之外，在漫长的等待加载过程中，会出现时间油管的元素以及小贴士。着会让用户在加载过程让用户不会觉得无聊。

结语

在 UI/UX 设计过程中，加载进度指示器的设计可以提供引人入胜的体验，结合心理学原理和实际情况，更好地和界面组件结合到一起，可以极大地增强产品的可用性，降低用户的挫败感。