Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

确定进度条

Determinate Progress Bar

加入比较 +

在已知总量和完成量时,用进度条表示实际完成比例。

可操作示例 · 虚构产品 FIELDNOTES

导入手记 · 模拟任务

0 / 5 份 · 0%

百分比由模拟的已完成份数计算,不使用计时器伪造。

识别特征

  • 明确的任务名称
  • 可计算的完成量和总量
  • 完成或失败的终态

概念边界

百分比必须对应已完成工作;本演示使用手动推进的模拟任务,不代表真实网络速度。

什么时候考虑它

  • 系统提供真实的完成量与总量
  • 用户需要判断任务走到哪一步

什么时候慎用

  • 未知进度却用定时器伪造百分比
  • 把上传结束误当作服务器处理结束

取舍

进度更具体,但多阶段任务的总量与统计口径需要可靠。

条件规则 · 编辑建议

当无法获得真实完成量必须不要显示伪造的确定百分比。
当任务完成必须显示完成状态并说明下一步。

查询前提:measurable_progress = true
确定进度必须有可靠的已完成量和总量。

相关词条

骨架屏 ↗条件替代 · 呈现等待状态

没有可靠完成量时不能选择确定百分比。

平静技术 ↗可以配合 · 进度无需立即回应

使用非打断式状态呈现。

来源与支持范围

Carbon · Progress bar ↗

区分确定与不确定进度,确定模式用于可量化的进展。

检索日期:2026-09-15

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

类型扩展与实现说明

能力标签只描述本演示;应用到产品时仍须重新验证。

{
  "states": [
    "idle",
    "progress",
    "success",
    "error"
  ],
  "a11y": [
    "进度有名称",
    "使用原生 progress,避免每个百分点都读屏播报"
  ],
  "motion": "手动推进,无自动动画"
}
完整 Agent 条目 JSON
{
  "id": "determinate-progress",
  "type": "micro",
  "name": {
    "zh": "确定进度条",
    "en": "Determinate Progress Bar"
  },
  "aliases": [
    "Progress Bar",
    "百分比进度",
    "可测进度"
  ],
  "granularity": "state",
  "intents": [
    "wait-for-content",
    "track-progress"
  ],
  "tags": [
    "加载",
    "上传",
    "真实进度",
    "百分比",
    "progress"
  ],
  "definition": "在已知总量和完成量时,用进度条表示实际完成比例。",
  "boundary": "百分比必须对应已完成工作;本演示使用手动推进的模拟任务,不代表真实网络速度。",
  "signature": [
    "明确的任务名称",
    "可计算的完成量和总量",
    "完成或失败的终态"
  ],
  "when": [
    "系统提供真实的完成量与总量",
    "用户需要判断任务走到哪一步"
  ],
  "when_not": [
    "未知进度却用定时器伪造百分比",
    "把上传结束误当作服务器处理结束"
  ],
  "tradeoff": "进度更具体,但多阶段任务的总量与统计口径需要可靠。",
  "comparison": {
    "focus": "告诉用户完成了多少",
    "mechanism": "真实完成量 / 总量",
    "cost": "依赖可靠进度数据"
  },
  "sources": [
    {
      "id": "carbon-progress",
      "title": "Carbon · Progress bar",
      "url": "https://carbondesignsystem.com/components/progress-bar/usage/",
      "claim": "区分确定与不确定进度,确定模式用于可量化的进展。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://carbondesignsystem.com/components/progress-bar/usage/",
        "status": "available",
        "checkedAt": "2026-09-15T16:51:23.998Z",
        "jobId": "spn2-6e1e1bb11e36ab96223035765b5f0c213507b98b",
        "url": "https://web.archive.org/web/20260915165300/https://carbondesignsystem.com/components/progress-bar/usage/",
        "timestamp": "20260915165300"
      }
    }
  ],
  "relations": [
    {
      "target": "skeleton",
      "kind": "alternative",
      "condition": "呈现等待状态",
      "reason": "没有可靠完成量时不能选择确定百分比。",
      "basis": "editorial"
    },
    {
      "target": "calm-technology",
      "kind": "composes_with",
      "condition": "进度无需立即回应",
      "reason": "使用非打断式状态呈现。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "无法获得真实完成量",
      "instruction": "不要显示伪造的确定百分比。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "任务完成",
      "instruction": "显示完成状态并说明下一步。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "requirements": [
    {
      "fact": "measurable_progress",
      "value": true,
      "reason": "确定进度必须有可靠的已完成量和总量。"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "progress",
      "success",
      "error"
    ],
    "a11y": [
      "进度有名称",
      "使用原生 progress,避免每个百分点都读屏播报"
    ],
    "motion": "手动推进,无自动动画"
  },
  "demo": "determinate-progress",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "能力标签只描述本演示;应用到产品时仍须重新验证。",
  "searchTerms": [
    "loading",
    "upload",
    "measured progress",
    "percentage",
    "progress"
  ]
}