在当今企业级 SaaS 平台、数据大屏看板、云原生控制台以及任务管理工具中，进度指示器（Progress Indicator & Gauge System） 是不可或缺的核心反馈组件。无论是大文件分片上传、异步批处理任务，还是服务配额消耗、系统健康度打分，进度系统都扮演着缓解用户等待焦虑、建立确定性操作预期的关键角色。

然而，在许多团队的 Figma 设计系统搭建中，进度指示组件往往处于“只能看、不能用”的边缘化尴尬状态：

1. 容器拉伸导致进度变形：当父级卡片宽度发生响应式变化时，内部的进度条要么被生硬拉伸导致圆角失真，要么脱节于导轨；
2. 环形进度依赖不可维护的布尔图形：大量设计师使用布尔运算拼接圆环扇形，一旦需要修改百分比或线宽，必须重新手工重绘，且极易在缩放时产生亚像素模糊；
3. 缺少不确定态（Indeterminate）规范：无法清晰表达“任务正在后台运算，但总时间未知”的流光缓冲或循环加载态；
4. 原型动态数值断层：以往原型只能静态展示固定的 30% 或 80%，无法根据用户输入或操作步骤实现动态递增和数字联动；
5. 研发交付无损计算缺失：前端工程师在 Dev Mode 开发模式 中看到的只是一组绝对定位的图形，无法直接提取与 CSS transition、calc() 或 SVG stroke-dashoffset 对应的工程化参数。

本文将系统剖析线性进度条与环形仪表盘的物理构建逻辑，实战基于 Auto Layout 与 Arc 弧度工具的高保真建模，运用 Variables 搭建可运行进度状态机，并给出工业级前端交付方案。

---

进度指示器的形态解耦与选型矩阵

在设计系统设计中，首先需要根据空间布局、认知负荷与数据属性对进度形态进行解耦：

控件形态	视觉特征	空间占用	适用业务场景	ARIA 关键无障碍属性
线性进度条 (Linear Bar)	水平横向延伸，单向从左至右填充	宽度弹性适应，高度紧凑 (4px~12px)	文件上传、多步骤表单、下载更新、列表内嵌指标	role="progressbar", aria-valuenow, aria-valuemin="0", aria-valuemax="100"
环形进度圈 (Circular Gauge)	360° 或 240° 径向环形旋转填充	正方形定宽高矩阵，中心通常内嵌数值	磁盘空间占比、电池电量、健康评分、仪表盘 KPI 卡片	role="progressbar", aria-valuenow, aria-valuetext
步骤分段型 (Segmented Bar)	离散物理分段，段间保留 2px~4px Gap	横向固定等分段落	密码强度检测、分期付款节点、分阶段审批流	aria-valuemin="1", aria-valuemax="N"
不确定流光态 (Indeterminate)	无固定数值，连续左右扫光或旋转	与常规导轨同尺寸	启动自检、等待远端服务器握手、未知耗时请求	aria-busy="true", 移除 aria-valuenow

┌────────────────────────────────────────────────────────────────────────┐
│                        Progress System Topologies                      │
├───────────────────────────────────┬────────────────────────────────────┤
│       1. Linear Progress Bar      │        2. Circular Gauge           │
├───────────────────────────────────┼────────────────────────────────────┤
│  Track: Fill container (h: 8px)   │  Center Metric: 78%                │
│  Bar: Percentage Fill (h: 100%)   │  Sweep Angle: 280°                 │
│                                   │                                    │
│  ┌─────────────────────────────┐  │               ╭─────────╮          │
│  │██████████████░░░░░░░░░░░░░░░│  │             ╭─╯         ╰─╮        │
│  └─────────────────────────────┘  │            │     78%       │       │
│  0%            60%         100%   │             ╰─╮         ╭─╯        │
│                                   │               ╰─────────╯          │
└───────────────────────────────────┴────────────────────────────────────┘

---

线性进度条（Linear Progress Bar）的 Auto Layout 弹性架构

构建具备工业级响应能力的线性进度条，核心在于**导轨容器（Track）与内部填充条（Fill Bar）**的嵌套几何关系。

1. 结构骨架设计

按照以下层级搭建：

1. 外层导轨（Progress Track）：
   • 命名为 .progress-track；
   • 宽度设置为 Fill container（在卡片或表格中自适应充满），高度设为 8px；
   • 设置圆角（Border Radius: 999px 全圆角）；
   • 填充灰色背景变量（如 bg-track-neutral: #E5E7EB）；
   • 核心关键设置：开启 Clip content: ON（裁剪溢出内容）。开启裁剪后，内部填充条无论是否超出导轨，均会被平滑截断，且严格继承导轨的圆角弧度。
2. 内层填充条（Progress Indicator Bar）：
   • 命名为 .progress-bar；
   • 高度设为 Fill container（100% 充满外层导轨高度）；
   • 填充主品牌色或状态色变量（如 bg-brand-primary: #4F46E5）；
   • 圆角同样设为 999px（配合外层 Clip content 防止抗锯齿露白）。

2. 百分比比例分配与变体配置

为满足设计走查与排版需求，在 组件与变体深度指南 中建议配置以下维度：

• Percent: 0% / 25% / 50% / 75% / 100% / Indeterminate；
• Status: Primary（主色蓝） / Success（成功绿） / Warning（警告橙） / Error（危险红）；
• Size: Small (4px) / Medium (8px) / Large (12px)；
• ShowLabel: true / false（是否在右侧或上方显示数值）。

Auto Layout 百分比模拟技巧： 若希望在 Figma 中保持响应式拉伸时百分比恒定，可将外层容器配置为 Auto Layout 水平布局，利用两个子 Frame 分别代表“已完成部分”与“剩余空白部分”，并将两者的水平宽度约束设置为按比例分配（结合 Hug / Fill 或极值约束），详见 Auto Layout 容器布局指南。

---

环形进度圈（Circular Gauge）的矢量弧度无损构建

传统使用布尔运算（Boolean Subtract）制作圆环的方法极易产生冗余节点与边缘抗锯齿锯齿。在 Figma 中，制作工业级环形进度的标准方法是使用原生 Arc Tool（弧度工具）。

1. 原生 Arc 参数解析

绘制一个 120×120px 的正圆（Ellipse），鼠标移动至圆形右侧的白色圆点（Handle），即可激活 Arc 调节面板：

• Sweep（扫掠角度）：控制圆弧覆盖的夹角范围。例如 100% 进度为 360°，75% 进度为 270°，半圆仪表为 180°；
• Ratio（内径环形比例）：控制中空圆环的厚度。设置为 80% 表示内圈镂空 80%，外壁厚度为 10%（即单侧线宽约 12px）；
• Start（起始角度）：控制弧线起点。默认从右侧 0° 开始，制作标准环形图时，通常将其设置为 -90°（正上方 12 点钟方向垂直向下顺时针延展）。

┌────────────────────────────────────────────────────────┐
│             Figma Native Arc Tool Parameters           │
├─────────────────────────┬──────────────────────────────┤
│  Start Angle: -90°      │  Top 12 o'clock anchor       │
│  Sweep Angle: 270°      │  75% Progress Representation │
│  Hole Ratio: 82%        │  Clean annular stroke width  │
│  Stroke Cap: Round      │  Smooth capsule endpoints    │
└─────────────────────────┴──────────────────────────────┘

2. 环形导轨与进度图元分层组合：

1. 背景底环（Track Ring）：
   • 复制相同尺寸的 Ellipse，设置 Ratio: 82%，Sweep: 360°；
   • 填充极浅中性灰色（如 #F3F4F6）；
2. 前景进度环（Active Ring）：
   • 置于底环正上方，设置相同 Ratio: 82%，根据需要调整 Sweep（如 180° 对应 50%）；
   • 填充高亮主题色彩；
3. 中心数据插槽（Center Metric Slot）：
   • 在圆环中心嵌套 Auto Layout 居中容器，放置主标题（如 85% Bold 24px）与副说明（已使用配额 Regular 12px）；
   • 使用 Absolute Position（绝对定位） 将其水平垂直完全锚定在圆环正中。

---

Figma Variables 数值变量驱动的动态进度回填状态机

借助 Figma Variables 的高级计算表达式（Expressions），我们可以制作出完全交互式的实时进度条。

1. 变量清单构建

在 Local Variables 中新建 ProgressBar 集合：

• currentProgress: Number 类型，默认值设为 0；
• progressString: String 类型，默认值设为 "0%"；
• isUploading: Boolean 类型，默认值设为 false。

2. 实操步骤：

1. 数值绑定至文本图层：
   • 选中中心或右侧的百分比文本，在右侧文本检查器中将内容绑定至 progressString 变量；
2. 模拟步进递增交互配置：
   • 在画板中放置一个“开始上传”按钮；
   • 为按钮添加交互：OnClick -> Set variable：
     • currentProgress = currentProgress + 25；
     • progressString = currentProgress + "%"；
   • 添加分支条件判断（Conditional）：
     • If (currentProgress >= 100)：将状态色变量切换为 SuccessColor，并更新文本为 "完成"；
3. 结合 Smart Animate 实现流光缓冲态（Indeterminate Shimmer）：
   • 制作两个状态帧：帧 A 中一条 45° 倾斜的半透明白色流光遮罩位于导轨最左侧外部；
   • 帧 B 中该遮罩移动至导轨最右侧外部；
   • 两个帧之间配置 After delay: 1ms -> Navigate to Frame B (Smart Animate: Linear 1200ms)，并在帧 B 中以相同方式循环回帧 A，即可形成极其逼真的无休止扫光加载效果。

若需统一管理项目中的色彩与动画令牌，可参考 Design Tokens 标准命名与结构对照手册。

---

Dev Mode 前端工程代码交付与无障碍标准

在 Dev Mode 开发模式 中，工程师可以直接对照设计稿提取基于现代 Web 标准的 CSS 与 SVG 交付代码。

1. 线性进度条纯 CSS 变量驱动方案

<!-- 线性进度条标准 HTML5 / Tailwind 语义化结构 -->
<div 
  role="progressbar" 
  aria-valuenow="65" 
  aria-valuemin="0" 
  aria-valuemax="100" 
  aria-label="数据同步进度"
  class="w-full flex flex-col gap-1.5"
>
  <div class="flex justify-between text-xs font-medium text-gray-700">
    <span>同步中...</span>
    <span>65%</span>
  </div>
  
  {/* 外层导轨 Track */}
  <div class="h-2 w-full overflow-hidden rounded-full bg-gray-200">
    {/* 内层填充条 Bar：通过 CSS 变量精确控制宽度与过渡动画 */}
    <div 
      class="h-full rounded-full bg-indigo-600 transition-all duration-300 ease-out"
      style="width: 65%;"
    ></div>
  </div>
</div>

2. 环形进度圈标准 SVG 矢量交付规范

环形进度在前端中不使用切图，而是通过 SVG 的 stroke-dasharray 与 stroke-dashoffset 进行 1:1 动态计算：

import React from 'react';

interface CircularProgressProps {
  percentage: number; // 0 - 100
  size?: number;       // 直径像素值，如 120
  strokeWidth?: number;// 环形厚度，如 10
}

export const CircularGauge: React.FC<CircularProgressProps> = ({
  percentage,
  size = 120,
  strokeWidth = 10,
}) => {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius; // 周长
  // 核心计算公式：根据百分比偏移描边
  const strokeDashoffset = circumference - (percentage / 100) * circumference;

  return (
    <div 
      className="relative inline-flex items-center justify-center select-none"
      role="progressbar"
      aria-valuenow={percentage}
      aria-valuemin={0}
      aria-valuemax={100}
      style={{ width: size, height: size }}
    >
      <svg className="transform -rotate-90" width={size} height={size}>
        {/* 背景底环 Track */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke="currentColor"
          strokeWidth={strokeWidth}
          className="text-gray-100"
          fill="transparent"
        />
        {/* 动态前景环 Bar */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke="currentColor"
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={strokeDashoffset}
          strokeLinecap="round"
          className="text-indigo-600 transition-all duration-500 ease-out"
          fill="transparent"
        />
      </svg>
      {/* 居中数值文本 */}
      <div className="absolute flex flex-col items-center justify-center">
        <span className="text-xl font-bold text-gray-900">{percentage}%</span>
        <span className="text-xs text-gray-400">已完成</span>
      </div>
    </div>
  );
};

---

团队库设计自检与性能防坑指南

在将进度组件合并至主分支或发布团队库前，务必排查以下细节：

1. [ ] 圆角溢出防漏白：外层导轨必须勾选 Clip content，避免两端在小尺寸时因亚像素渲染产生微小的白色缝隙；
2. [ ] 环形图元严禁使用非等比缩放：环形进度圈必须在 Constraint 中设定为 Scale 或通过 Auto Layout 保持 1:1 正方形比率，防止缩放为拉长的椭圆；
3. [ ] 高频动效内存占用：不确定扫光态原型如果在大文件中并排放置数十个，会急剧消耗浏览器 WebGL 内存；若遇到渲染掉帧或卡顿，请参考 Figma 常见报错与疑难排查手册 进行图层精简；
4. [ ] 色彩对比度达标：导轨背景与填充前景之间的色差对比度需满足 WCAG 2.2 非文本对比度最低 3:1 标准。