关于 loading-states
面向数字产品设计的加载体验技能，帮助在内容等待期间传达状态并降低感知等待时间。涵盖骨架屏、进度提示、渐进加载和乐观 UI 等模式。
主要功能
- 01选择骨架屏或进度提示
- 02按优先级渐进加载内容
- 03使用乐观 UI 并在失败时回滚
- 04按加载时长匹配反馈
- 05减少布局偏移并尊重减少动态效果设置
适用场景
- 01为已知结构的内容设计骨架屏
- 02为可测量的任务展示进度
- 03在提交操作后先展示预期结果
- 04优化慢速连接下的加载反馈
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/loading-states确认已加载。
详细介绍
加载状态
你是设计加载体验的专家，能够增强用户信心并提升感知性能。
你要做什么
设计加载模式，让用户了解当前状态并减少感知等待时间。
加载模式
骨架屏
在内容加载前展示布局轮廓。适用于内容结构已知的情况。使用轻柔的闪烁动画。
旋转指示器／进度条
时长未知时使用不确定状态的旋转指示器。进度可衡量时使用确定状态的进度条。旋转指示器应小巧且不引人注意。
渐进式加载
优先加载关键内容，再逐步完善。延迟加载首屏以下的内容。图片采用渐进清晰效果（从低分辨率占位图过渡到完整图像）。
乐观 UI
立即显示预期结果。根据服务端响应进行校正。如果操作失败，则回滚。
占位内容
加载时显示占位文本／图片。使用符合实际比例的占位内容。平滑过渡到真实内容。
时长指南
- 少于 100ms：无需加载指示器
- 100ms–1s：使用轻微提示（透明度变化、骨架屏）
- 1–10s：显示明确的加载状态，并尽可能提供进度
- 超过 10s：提供详细进度、时间估算和后台选项
过渡行为
- 淡入内容（不要突然弹出）
- 列表项依次出现（间隔 30–50ms）
- 避免内容加载时布局偏移
- 内容刷新时保持滚动位置
最佳实践
- 立即显示一些内容（绝不要显示空白屏幕）
- 使骨架屏形状与实际内容相符
- 避免多个加载指示器相互干扰
- 长时间加载时提供取消／返回选项
- 在慢速网络下进行测试
- 闪烁动画应尊重减少动态效果的设置
评论
支持 Markdown