1/4
Day 06 · Progress Bar：从 0% 到 100%，进度可见才有掌控感
Progress Bar 是等待三件套的最后一块：只要进度可量化，就该用它而非 Spinner。本期 4 张图讲清进度条的定义、与 Spinner/Skeleton Screen 的对比、4 种变体（确定型/不确定型/圆形/分步），以及最关键的一句判断口诀：能量化 → Progress Bar，不能量化 → Spinner，加载内容 → Skeleton Screen。
2026/6/15 · 9:12
图集
进度条解决的不是「等待」这件事，是「不知道要等多久」的焦虑。一旦用户能看到百分比，等待就从被动变成主动——他们在盯着一根有终点的线，而不是盯着一个不知何时停的转圈。
这是交互反馈类第 6 期，也是「等待三件套」（Spinner、Skeleton、Progress Bar）的最后一块。
什么是 Progress Bar
Progress Bar（进度条）是一种可量化进度的可视化指示器：它告诉用户当前任务完成了多少，还剩多少。核心前提是进度本身可以被测量，否则它就退化成 Spinner 的替代品，什么信息都传递不了。
参考来源：Material Design · Progress indicators · Apple HIG · Progress Indicators · Ant Design · Progress
Progress Bar vs Spinner vs Skeleton Screen
三个组件常被混用，判断标准只有一条：你能告诉用户剩多少吗？
- 能告诉用户剩余进度（0-100%） → Progress Bar
- 不能，但知道「在处理」 → Loading Spinner
- 不知道，但能预判内容结构 → Skeleton Screen
Day 05 讲过：等待超过 3 秒且进度不可量化，就从 Spinner 升级到 Skeleton Screen；本期补充：进度可量化时，直接跳到 Progress Bar，跳过前两者。
图 2：三种等待组件核心判断标准对比
4 种变体
① 确定型线性（Determinate Linear）
最经典的形态，一根横向轨道 + 已填充部分，右端显示百分比。适合文件上传、下载、安装进度。
② 不确定型线性（Indeterminate Linear）
外形是线性进度条，但无百分比，动画持续循环——用于「进度存在、但无法给出精确数值」的场景，如数据库查询、第三方 API 等待。
③ 圆形（Circular）
同样分确定/不确定两种，视觉更聚焦，常见于照片上传、单文件操作等需要紧凑布局的场景。中心可放数字或图标。
④ 分步进度条（Step Progress / Stepper）
不显示连续百分比，而是标注「第几步/共几步」——结账流程、表单向导、注册步骤。严格来说是 Progress Bar 的变体，很多设计系统（Ant Design、MUI）将其独立为 Steps 组件。
图 3：4 种常见变体对比
使用要点
该用的场景：
- 进度可量化：文件上传/下载、安装、数据迁移
- 等待超过 3 秒，且能提供具体进度数值
- 多步骤流程需要「我在第几步」的定位感（用 Step Progress）
别用的场景：
- 后台异步任务——用户不需要盯着它，通知完成即可
- 瞬间完成（< 1 秒）的操作——任何指示器都会让界面闪烁，比没有更糟
- 页面初始渲染——进度无意义，用 Skeleton Screen 更合适
一句判断口诀： 能量化 → Progress Bar；不能量化 → Spinner；加载内容 → Skeleton Screen。
图 4：使用要点总结
评论