01 功能说明
为延迟操作选择反馈方式，并明确真实结果如何取代加载状态或乐观状态。
Loading States 根据界面掌握的信息来区分等待模式：即将载入内容的结构、进度是否可测量，以及操作能否安全地以乐观方式呈现。它涵盖骨架屏、确定型和不确定型指示器、渐进式呈现以及占位符。
其指南还涉及如何退出加载状态。真实内容不应导致布局意外偏移或重置用户的滚动位置。乐观变更需要进行状态协调，并能在失败时回滚；如果失败会导致界面不再可信，就不适合呈现看似快速的成功状态。
预期交付成果
明确预计时长、已知内容结构、进度是否可测量，以及操作能否取消。
对结构可预测的内容使用骨架屏；仅在进度已知时使用进度条。采用乐观反馈前，先定义回滚方式。
审查慢速连接、内容替换、布局稳定性和动态效果偏好。
02 适用场景
准确的操作耗时和进度能力必须由产品或实施团队提供。
03 关键决策
在进度不可测量时使用确定型进度条，会传达系统并不具备的精确度。
保持布局和滚动位置不变，可防止请求完成后产生新的导航问题。
04 示例任务
以下示例简报尚未经过测试。使用前请检查该技能的设置说明。
使用仓库文档中记录的安装方式，并保留其中引用的所有配套文件。此条目描述的是一种聚焦的设计方法，而非可执行应用程序。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/loading-states/SKILL.md准确的操作耗时和进度能力必须由产品或实施团队提供。
运行该技能前，请根据需要调整此简报的范围、来源材料和约束条件。
将 loading-states 用于一个包含初始数据获取、图片缩略图和行内标题编辑功能的项目仪表板。为每项操作选择一种模式，为最终布局预留空间，并明确乐观编辑失败、网络缓慢时的行为以及减少动态效果的替代方案。不要虚构进度百分比。依据以下可观察的标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页描述的是下方链接所指向的固定来源版本。上游行为和要求可能发生变化。
9a6930cf84a8为延迟操作选择反馈方式，并明确真实结果如何取代加载状态或乐观状态。
由 OpenDesign 根据链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度信号，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/loading-states/SKILL.md