Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

不确定进度指示

Indeterminate Progress Indicator

加入比较 +

当剩余时间或已完成比例无法得知时,用持续旋转的图标或循环滚动的进度条表示系统仍在处理,而不报告具体完成了多少。

示意图 · 编辑插画,尚无可操作示例
虚构的 FIELDNOTES 面板上,一个圆形旋转图标和一条循环滚动的不确定进度条并排出现,看不到任何百分比数字,下方内容区域整体变暗以示等待。
虚构的 FIELDNOTES 面板上,一个圆形旋转图标和一条循环滚动的不确定进度条并排出现,看不到任何百分比数字,下方内容区域整体变暗以示等待。

识别特征

  • 旋转图标或循环滚动的进度条持续播放动画,不显示数字或百分比
  • 只传达“正在处理”,动画本身不对应任何可计算的完成量
  • 处理结束后立即替换为结果、内容或错误提示,不继续停留

概念边界

不确定进度指示只回答“系统还在工作吗”,不量化完成比例或剩余时间;一旦拿到可靠的已完成量和总量,就应换成确定进度条,二者不能互相替代,也不能用旋转图标掩盖本可量化的进度。骨架屏用于内容结构已知、只是在等待该结构被填充的场合;不确定进度指示则用于完成比例本身不可知,或等待发生在整个界面而非某块已知结构上的场合。

什么时候考虑它

  • 系统无法获得可靠的已完成量或总量
  • 预计等待超过约1秒,需要说明系统仍在响应而非卡死
  • 预计等待可能超过约10秒,需配合文字说明或可取消操作帮助用户保持方向感

什么时候慎用

  • 已经拿到真实的已完成量和总量,却仍用更含糊的旋转图标而不换成确定进度条
  • 用匀速填满或随时间递增的动画冒充真实进度,让用户误以为看到了百分比
  • 内容结构已知,只是在等待该结构被填充(应使用骨架屏)

取舍

旋转或循环动画实现简单,也不会给出虚假的精确感,但等待超过约10秒后用户容易失去耐心和方向感,仍需辅以文字说明或取消入口,不能只靠动画本身撑住等待体验。

条件规则 · 编辑建议

当无法获得真实的已完成量或总量必须不要显示编造的百分比,也不要用匀速或递增的动画让不确定进度看起来像是在精确计量。
当启用减少动态效果必须循环旋转或滚动动画需降级为静态但仍可辨识的“处理中”样式,并保留独立于动画的文字状态说明。
当等待可能超过约10秒建议补充文字说明或提供可取消操作,帮助用户保持方向感,不能只依赖循环动画本身。

相关词条

确定进度条 ↗条件替代 · 选择如何呈现等待反馈

有可靠的已完成量与总量时应改用确定进度条;不确定进度指示不能替代它去暗示精确进度,二者按量化能力二选一。

骨架屏 ↗条件替代 · 决定等待期间展示什么

内容结构已知、只是等待被填充时用骨架屏占位;内容结构未知或等待覆盖整个界面时才用不确定进度指示。

状态消息 ↗可以配合 · 处理结束或失败

不确定进度指示只表示过程仍在进行,结束后的结果、错误或下一步需要交给状态消息报告。

来源与支持范围

Nielsen Norman Group · Progress Indicators Make a Slow System Less Insufferable ↗

该文建议将循环的不确定指示器留给约2至10秒的等待,10秒以上的等待改用能显示完成比例的确定进度指示器。

检索日期:2026-09-15 · 存档于 2026-09-16
Nielsen Norman Group · Response Times: The 3 Important Limits ↗

该文给出0.1秒、1秒、10秒三个响应时间阈值:约1秒内用户的思路不会被打断,超过约10秒用户便难以维持注意力,需要进度反馈和可中断的方式。

检索日期:2026-09-15 · 存档于 2026-09-16
MDN · <progress> ↗

MDN 说明省略 value 属性时 progress 元素即为不确定状态,表示活动正在进行但不清楚预计耗时。

检索日期:2026-09-15 · 存档于 2026-09-16
W3C WAI · Understanding SC 2.2.2 Pause, Stop, Hide ↗

该准则要求与其他内容并存、自动开始且持续超过5秒的动态内容提供暂停、停止或隐藏的方式;文中以下载时的“加载中”动画为例,说明若动画未与其他可交互内容并存,可视为本质性动效而不必提供控件。

检索日期:2026-09-15 · 存档于 2026-09-16

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意。产品中仍需验证:循环动画在启用减弱动态效果时是否降级为静态但仍可辨识的状态,是否存在独立于动画的文字或语义状态可被读屏播报,以及等待超过约10秒时是否补充了说明或取消入口来维持用户的方向感。

{
  "states": [
    "idle",
    "indeterminate",
    "success",
    "error"
  ],
  "a11y": [
    "容器标记为忙碌状态,并提供独立于动画的文字状态,避免只靠视觉动画传达信息",
    "避免让读屏因动画本身而被反复、无意义地打断播报"
  ],
  "motion": "默认循环旋转或循环滚动动画;启用减少动态效果时改为静态但仍可辨识的处理中样式"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。