ux-loaders-and-progress

加载器与进度技能

此技能的行为方式（请先阅读）

这是一项生成式技能。默认的失败模式包括：所有情况都用一个旋转加载器（无论等待 1 秒还是 60 秒，都显示整页旋转加载器）、明明有明确终点却不显示（对可衡量的任务使用不确定循环），以及进度表演（在 2 步表单上使用进度跟踪器、显示不实的百分比）。反馈类型由等待时长和任务结构决定，而加载器真正的作用是塑造用户对时间的感知，而非装饰。此技能会把关以下内容：

1. 确定等待类型 — 要等多久、能否衡量、由什么触发、是否属于多步骤流程？
2. 应用始终适用的核心原则 — 时长阶梯、位置、状态可见性。
3. 呈现取决于具体情境的决策（骨架屏、自定义动画、进度跟踪器标签、保存／自动保存）及其权衡。

随后将**移交给 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit**进行验证。

---

步骤 0 — 确定等待类型

四个问题决定使用哪种指示器：

• 要等多久？ <1s → 通常无需指示器；1–5s → 不确定指示器（旋转加载器／文本）；~10s+ → 使用带有可见终点的确定性指示器；加载较慢或时长不定的内容 → 使用骨架屏。
• 进度能否衡量？ 如果系统能知道完成百分比（上传、导出），就应向用户显示确定性指示器——对可衡量的任务使用无限旋转加载器，会让人觉得“可能出问题了”。
• 由什么触发？ 用户点击（按钮）→ 在操作处提供行内反馈；加载内容 → 在内容所在位置显示骨架屏；后台进程 → 使用不显眼的指示器。
• 这是否属于多步骤的用户流程（表单、结账、引导），而非系统等待？→ 使用进度跟踪器，而非加载器——这是不同的组件，有不同的规则（见下文）。

---

始终适用的核心原则（几乎适用于所有情况）

时长阶梯（加载器）

• 1–5s：不确定指示器 — 旋转加载器，或带有细微动画（脉动圆点）的文本加载提示（“正在保存…”）。循环动画绝不能持续超过 ~5s——没有终点的循环会令人开始感到沮丧。
• 10s+：确定性指示器 — 使用带有明确终点的进度条或填充圆环；长时间任务可添加百分比标签，以提供精确信息。
• 加载内容：骨架屏 — 使用模拟即将显示的布局（文本块、图片区域）的占位内容，并从上到下依次填充。它们比旋转加载器更能提升用户感知到的速度，因为能让用户预先了解内容结构。
• 不要使用整页旋转加载器。 它们完全无法让用户感知进度，还会让人觉得出现了故障。旋转加载器应小巧且显示在行内：点击后显示在按钮中、表格行中，或正在加载的内容旁边。

位置 = 含义

• 靠近触发操作的位置（与提交按钮并排显示）、显示在正在加载的内容上（覆盖层／骨架屏），或仅在确实正在加载整个页面时才居中显示。
• 按钮内的进度指示： 按钮显示旋转加载器并变为不可点击——一次操作即可提供反馈并防止重复提交。

进度跟踪器（多步骤流程）

• 始终显示三种状态： 已完成（勾号／绿色）、当前步骤（视觉上有明显区分——标记“你在这里”）、剩余步骤（弱化显示，到达时激活）。
• 为步骤添加标签 — 标题能帮助分心的用户恢复上下文，也便于快速浏览整个流程。
• 最多 5–7 步。 进度跟踪器不会缩短表单；如果步骤过多，就需要重新设计流程，而非使用更长的跟踪器。
• 进度跟踪器是反馈，不是装饰： 它用于展示系统状态——用户应始终知道自己做了什么、当前在哪里，以及还剩下什么。

---

依赖上下文的决策（呈现出来，不要自动应用）

决策	适用情况	避免／调整的情况	默认建议
内容用骨架屏还是旋转指示器	布局已知的内容（信息流、卡片、表格）——骨架屏能缩短感知等待时间	加载时间极短、几乎即时的内容（骨架屏闪现会显得像故障）	内容区域使用骨架屏；操作使用内联旋转指示器
是否使用进度跟踪器	≥3 个逻辑阶段（结账、问卷、注册）	简短表单——2 个步骤就用跟踪器会显得形式过多	从 3 个阶段起使用带编号／标签的步骤
跟踪器标签：标题、数字还是百分比	标题便于快速浏览；数字／百分比适用于较长的流程，可提供动力	变化不规律的百分比（会损害信任）	使用标题 + 步骤数；仅当百分比能如实反映所需精力时才使用
进度条还是编号步骤	短流程用进度条（体现整体进度）；≥3 个明确里程碑用步骤	进度条假装自己很精确，实际却并非如此	表单使用步骤；处理过程使用进度条
轮播跟踪器（圆点）	只有少数可跳过屏幕的入门引导／演示	有方向性且不可跳过的流程	圆点仅用于演示
垂直跟踪器	状态时间线（配送跟踪、申请阶段）	标准表单导航	事件／状态历史使用垂直布局
保存／自动保存进度	任何超过几分钟的流程	仅依靠跟踪器来留住用户	长流程使用自动保存 + 返回上一步
自定义品牌加载器	等待不可避免的品牌展示时刻；先决定使用确定性还是不确定性进度	遮挡进度的新奇设计	先保证功能，再体现个性

---

验证结果（编排）

交接时，请使用每个审核视角对应的、可安装技能的 name。仅当相应技能已安装时才调用；如果未安装，此技能本身已包含这些规则——无需等待，直接继续。

生成或修改后，将结果交给审核视角检查，而不是直接宣布完成。这些都是候选审核视角——具体方式由 docs/orchestration-policy.md 规定，或者将整个流程交给 ux-design-review。在此，heuristics 和 microcopy 属于 Tier A（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 Tier B（可选）——使用现有设计系统时，aesthetics 会被抑制，accessibility 的范围会缩小到使用方式；mobile-responsiveness 仅适用于移动设备。如果用户调用此技能是为了处理某一项具体内容，请尊重这一范围。

• ux-heuristics-audit （Tier A）——系统状态可见性是此组件存在的全部意义；还包括错误预防（处理过程中禁用按钮）。
• ux-accessibility-audit （Tier B——可选；使用设计系统时缩小范围）——向屏幕阅读器播报加载状态、动画遵循减少动态效果偏好、弱化的跟踪器步骤保持足够对比度。
• ux-aesthetics-audit （Tier B——可选；使用设计系统时抑制）——骨架屏与实际布局的贴合度、动画克制程度、跟踪器的视觉层级。
• ux-microcopy-audit （Tier A）——文本加载器措辞、步骤标签、百分比／状态表述。
• ux-mobile-responsiveness-audit （Tier B——可选；仅适用于移动设备）——在移动设备场景下：跟踪器压缩、骨架屏重排。

如果审核发现冲突（例如品牌动画与感知速度之间的冲突），请优先满足主要任务：用户正在等待——每项设计选择要么在感知上缩短等待时间，要么延长等待时间。

---

常见的错误与正确做法

❌ 错误做法	✅ 正确做法
所有场景都使用整页加载动画	内容内使用加载动画，内容使用骨架屏；仅在确实需要整页加载时居中显示
上传需要 60 秒，却一直显示循环加载动画	使用显示预计时间和百分比的确定性进度条
布局已知时仍使用加载动画	使用骨架屏，并依次填充内容
操作进行中，按钮仍可点击	在按钮内显示加载动画，并禁用按钮
加载提示远离触发操作的位置	在操作处或内容上提供反馈
两步表单使用进度跟踪器	从 3 个阶段起使用跟踪器；简短表单保持简洁
未标注的跟踪器圆点	显示步骤标题，并清晰标明已完成、当前和剩余步骤
用 11 步跟踪器补救臃肿的表单	最多 5–7 步；重新设计流程
百分比从 10 跳到 80，再到 82，依此类推	如实映射进度，或改用步骤
长表单没有保存功能	自动保存，并可返回上一步
未经检查就交付	交由启发式评估、无障碍检查、审美检查和微文案检查

---

来源课程（Uxcel）

• 如何设计加载动画，让用户保持投入
• 如何以及何时在 UI 中使用进度跟踪器
• 显示进度