用途:loading-states 是面向加载体验设计的 Claude 技能,目标是让用户在等待内容时保持信心,并降低感知等待时间。
主要能力:涵盖多种加载模式。骨架屏在内容加载前展示布局形状,适用于已知内容结构,可用细微微光动画;加载指示器方面,时长未知时用不确定型 spinner,进度可测时用确定型进度条,spinner 应小巧不干扰;渐进式加载先加载关键内容再逐步增强,折叠下方内容懒加载,图片采用模糊占位到清晰的 blur-up;乐观 UI 立即展示预期结果,再与服务端响应对账,失败时回滚;占位内容在加载时展示文字或图片占位,使用真实比例并平滑过渡到真实内容。
时长指引:100ms 以内无需加载指示;100ms 至 1s 用细微指示(透明度变化、骨架屏);1 至 10s 用清晰加载状态并尽量提供进度;超过 10s 提供详细进度、时间预估与后台选项。
过渡行为:内容淡入而非突然弹出;列表项以 30-50ms 间隔错开出现;避免内容加载时布局偏移;内容刷新时保持滚动位置。
最佳实践:立即展示内容,避免空白屏;骨架形状与实际内容匹配;避免多个相互竞争的加载指示器;长时间加载提供取消或返回选项;在慢速连接下测试;微光动画需尊重减少动态效果设置。
限制:资料未提供具体安装命令、平台支持、收费方式或代码示例,这些信息暂未提供。