界面图鉴
进度条Progress Bar
进度条到底是什么？和转圈圈的 Spinner 到底差在哪？
一条会逐渐填满的横条，把「完成了几成」画出来，让长等待有盼头。
01 · 拆开看看
这一块由什么组成
一条从空到满的横条。它比 Spinner 多说了一件关键的事：还剩多少。名字直白，形状也直白——轨道、填充、数字，再配一句说明：
轨道Track
浅色的底，代表全部工作量。
填充Fill
深色的那段，代表已经完成的部分。
数值Value
62% 或 3 / 5，把比例说成数字。
说明Label
一句「正在上传 report.pdf」，告诉用户在等什么。
02 · 常见变体
同一个零件，几种摆法
进度真实可算，直接给数字。
算不出进度时，一小段来回跑。
五步任务走完三步，一格一格亮。
03 · 火眼金睛
这个页面里，哪一个是进度条？
三条横的东西，只有一条在告诉你「完成了几成」。
点一块试试，看看它叫什么
不是它。转圈只说「还在忙」，从不说还剩多少。
就是它！轨道加填充，62% 是真实进度，用户能估出还要等多久。
不是它。滑块长得像，但那个圆点是给你拖的——它是输入，不是反馈。
04 · 用与不用
什么时候该上它
- 上传、下载这种知道总量的任务
- 多步骤任务的整体进度
- 超过十秒的等待
- 一两秒的等待——Spinner 就够了
- 完全算不出进度——用不定长模式或 Spinner
- 拿它当装饰，进度是编出来的
05 · 想一想
一道题，检查眼力
导出一份 PDF 报告大约要 30 秒。等待期间怎么提示最合适？
30 秒对着转圈太长了，用户会怀疑卡死。超过十秒的等待，请告诉他还剩多少。
对。总量已知（8 页），就该把几成画出来，用户看得到在往前走。
Toast 几秒就消失，之后的 25 秒用户面对的是一片沉默。
06 · 说给 AI 听
让 AI 改它时，这样说
说清进度从哪来（真实数据还是估算）和走到 100% 之后怎么办——AI 经常做出走到 99% 就卡住的假进度。
上传文件时显示进度条和百分比，完成后变成绿色对勾
进度条用不定长模式，因为接口不返回进度
把三个步骤的完成情况画成分段进度条
进度条别倒退，失败时变红并停在原地
最容易踩的坑
进度条一定要诚实。用假数据匀速走到 90% 然后干等，比 Spinner 更让人恼火——用户会盯着它数秒。没有真实进度就用不定长模式，别编。