Skip to main content
Language简体中文
基础知识5 分钟阅读2026 年 10 月

加载状态应该如何工作?

简短回答

良好的加载状态告诉人们正在发生一些事情,大致需要多长时间以及会出现什么。对于非常短的等待,不显示任何内容或细微的变化。在内容出现的地方附近使用骨架或旋转器几秒钟。对于长期任务,显示进度并让人们继续工作或取消。

核心要点

  • 将指示器与等待相匹配:无、微妙、旋转或骨架,然后进行
  • 当即将到来的内容的布局已知时,骨架效果最好
  • 显示内容将出现的加载状态,而不仅仅是出现在角落
  • 将启动操作的按钮保持在加载状态以防止重复提交
  • 尊重简化动作设置并保持加载动画平静

加载状态的存在是为了回答用户的一个问题:有什么事情发生吗?如果没有答案,人们会再次点击、重新加载页面或离开。正确答案取决于他们等待的时间。

对于非常短的等待(大约十分之一秒),大多数人不会注意到延迟,因此指示器只会增加闪烁。一种常见的技术是在显示旋转器之前短暂等待,因此快速响应根本不会显示旋转器。

等待一秒或几秒钟,在结果出现的地方显示反馈。骨架屏幕,即即将出现的布局的灰色轮廓,非常适合列表、卡片和配置文件,因为它显示即将出现的内容并减少布局变化。旋转器适用于小区域或当结果具有不可预测的形状时。

对于诸如上传、导出或人工智能生成之类的长期任务,如果可以衡量的话,请展示真正的进展,解释正在发生的事情,并让人们取消或继续其他工作。旋转一分钟而没有其他信息的旋转器感觉像是一个失败。

启动动作的控件也需要一个状态。提交按钮切换到加载状态,并且不能按两次,可以防止重复的订单和消息。当加载结束时,明确地转向成功或错误,而不是默默地返回到默认值。

动画在这里很有帮助,但要保持平静和简短的循环,并尊重简化的动作设置。我们制作的 ExodeUI 可让您设计一个加载程序或按钮,并在一个文件中包含加载、成功和错误状态,您的代码可以在该文件之间进行切换。

常见问题

旋转屏和骨架屏:哪个更好?

当您知道即将到来的内容(例如列表或卡片)的形状时,骨架会更好。旋转器更适合小区域或未知内容。

多久才会显示加载指示器?

许多团队会等待几百毫秒,这样快速响应就不会出现旋转。用您的真实响应时间进行测试。

加载动画应该永远循环吗?

仅当任务真正运行时。如果花费的时间比预期长得多,请显示消息、进度或取消方式。

如何在按钮中显示正在加载?

用小指示器替换或伴随标签,保持按钮大小相同,以便布局不会跳跃,并阻止重复按下,直到请求结束。

相关指南和示例

尝试使用具有真实加载状态的按钮

打开包含加载、成功和错误状态的交互式示例,构建为可编辑的真实 ExodeUI 文件。

打开示例
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →