加载和进度条设计
2024年6月19日
加载和进度条是 UX/UI 设计的基本要素，可帮助用户在等待期间保持知情和参与。无论是加载网页、处理交易还是下载内容，精心设计的指标都可以显着改善用户体验。
了解不确定指标和确定指标之间的区别
对于为不同场景选择合适的类型至关重要。
不确定指标(Indeterminate indicators) — 表示未指定的时间量。
当进程的持续时间或进度未知或可变时，使用不确定指示符。它们让用户放心系统正在工作，并防止将延迟视为错误或故障。
确定性指标(Determiante indicators) — 显示流程将花费多长时间，以及它已经进展了多远。当可以测量或估计持续时间或进度时，使用确定的指标。它们直观地表示已完成或剩余的工作，允许用户衡量进度和管理期望。
主要类型和变化
旋转：微调器是一个简单的动画图标，它不断旋转以指示系统正在处理或加载内容。它在许多应用程序和网站中得到广泛认可和使用。
骨架加载器或模板：骨架屏幕是占位符结构，用于模拟正在加载的内容的预期布局。它们在加载实际内容时提供页面或界面的粗略视觉轮廓。
进度条：进度条通过逐渐填满的水平条直观地表示任务或加载过程的进度。用户可以查看完成百分比或剩余时间。
进度圈：与进度条类似，进度圆圈使用逐渐填充的圆形表示任务或加载过程的完成。
动画图标或插图：在加载过程中，可以使用引人入胜的动画或图标来娱乐用户。它们增加了视觉趣味，使等待体验更加愉快。
加载文本或消息：显示文本消息，例如“正在加载...”或“请稍候”可以向用户提供明确的反馈，表明系统正在积极处理他们的请求。
百分比指标：这种类型的指示器以百分比形式显示进度，允许用户以数字方式跟踪加载过程的完成情况。
混合指标：结合不同类型的加载指标可以创造独特且引人入胜的体验。例如，将微调器与进度条一起使用，或在进度圆圈内合并动画。
根据预期的等待时间选择合适的指标类型
不同的等待时间需要不同的方法来保持用户的参与度和知情性。
对于少于 <1 秒的等待时间，建议不要实现任何显式加载效果，因为它可能会产生类似毛刺的视觉体验，可能会使用户感到困惑。
对于较短的等待时间（1-3 秒），建议坚持使用不确定的指标，例如使用骨架屏幕或旋转器。设计人员应避免使用复杂的动画插图或详细的加载程序，因为可能没有足够的时间来完成动画或用户使用消息。
对于中等等待时间（3-10 秒），用户可能会质疑系统响应能力，建议使用确定的进度指示器（如进度条和百分比指示器）来展示加载进度并保持用户参与度。
对于较长的等待时间 （10+ 秒） ，请提供一个清晰的界面来展示进度、允许用户交互并减少焦虑。利用微光效果、后台任务和讲故事/提示等策略的组合，在整个漫长的等待过程中吸引用户。
避免在加载内容时显示多个相同加载或进度条
在指示一系列流程或项目加载的进度（如页面中的多个卡片）时，建议显示单个全局进度指示器，而不是显示每个卡片的进度的多个指示器。通过这样做，用户可以轻松了解整个过程的整体进度，而不会感到不知所措。
使用骨架增强加载速度感知
骨架屏幕有多种用途，包括向用户展示正在发生的事情，提供下一步的想法。通过在内容加载时提供无干扰的视图，骨架屏幕最大限度地减少了认知负荷，并帮助用户专注于他们的任务，而不必担心潜在的错误。
不要为了动画而人为地延长加载时间
使用不必要的动画而没有明确的加载反馈可能会导致用户感到沮丧。设计人员应优先提供有意义的加载指示器，例如进度条或骨架屏幕，以保持用户满意度并最大限度地减少不必要的等待时间。
以渐进式加载方式以增量方式显示内容
渐进式加载不是让用户等待整个页面加载，而是允许以增量方式显示内容，首先优先考虑基本元素。这种技术可以提高感知性能并减少感知等待时间，因为用户可以更快地开始与页面交互。渐进式加载不仅提供了更具吸引力的体验，而且还适应了各种网络条件，确保用户可以无延迟地访问网站或应用程序的核心功能并与之交互。
通过放置进度指标来引导用户的期望
战略性地放置循环进度指示器，以与用户交互保持一致。实施 “滑动刷新” 时，将指示器放在顶部以预测来自上方的新内容。同样，将其放在底部，同时向下滚动以指示即将到来的内容。使进度指示器与内容外观保持一致可以提高用户期望，并提供更流畅的加载体验。
允许在较长的进程中不间断地使用系统
在漫长的流程中为用户提供控制和灵活性。与其使用全屏进度指示来阻止它们，不如在后台运行流程，同时提供清晰的进度可见性。允许用户继续使用系统，并使他们能够在需要时取消或中止该过程。为用户提供控制权可以改善他们的体验并实现高效的多任务处理。
传达时间估计，在漫长的等待中管理用户期望
传达流程持续时间的时间估计对于设定期望和减少用户焦虑至关重要。通过提供清晰度和控制，时间估计可帮助用户规划他们的活动并减轻等待期间的挫败感。合并进度条、倒计时或信息性消息可以显著提高用户满意度。
通过提供清晰的视觉提示，避免让用户在长时间的过程中怀疑系统响应能力
在长时间的过程中，避免用户可能怀疑系统是否冻结或无响应的情况至关重要。让用户处于不确定状态可能会导致挫败感和失去信任。
为了缓解这种情况，必须提供清晰的视觉提示，例如进度指示器、信息性消息或动画，向用户保证系统正在积极处理他们的请求。通过主动解决潜在的疑问并让用户了解正在进行的过程，您可以保持他们的信心并增强整体用户体验。
在系统反馈方面，Apple 可以作为好做法和坏做法的一个例子。例如，在 iOS 软件更新的安装过程中，齿轮动画的不断旋转让用户确信该过程正在进行中，即使整体进度条上没有可见的进度。
总之，优化 UX/UI 设计中的加载和进度指标对于提供无缝且引人入胜的用户体验至关重要。通过实施适当的指标，考虑用户心理，并将它们与其他界面组件无缝集成，设计人员可以提高可用性，减少用户的挫败感，并建立对系统响应性的积极感知。
