Windows桌面应用程序设计指南（控件篇10-进度条）

使用进度条，用户可以了解一段冗长操作的具体进度。进度条可以显示完成的近似百分比(确定进度条) ，也可以显示操作正在进行(非确定进度条)。
可用性测试表明，用户对于时长超过一秒的反馈是有明确感知的。相应的，对于超过两秒的操作，应该考虑设置某种形式的进度反馈。

一个典型的进度条

何时使用该控件？

思考以下几个问题：

操作能否在5秒以内完成？如果是，使用加载指示器来代替进度条，因为对一个5秒内的短暂操作使用进度条是让人困惑的。如果某操作通常在5秒内能完成，但有时会耗时更久，在开始时使用忙指针，时间若超过5秒则显示进度条。
非确定进度条的目的是用来等待用户完成任务的吗？如果这样，不要使用进度条。进度条是用来指示电脑的进程，而不是用户的进程。
操作是否是一个非常冗长(超过两分钟)的后台任务，用户对完成的兴趣大于了解其进度？ 如果是的话，使用通知来代替。在这种情况下，用户同时会执行其他任务，并且不监视进度。使用通知能让用户在不中断该进程的情况下执行其他任务。这种冗长操作有打印、备份、系统扫描和批量数据传输或转换等。
当操作完成后，用户是否可以重播结果？如果这样，使用滑块代替。这种操作的例子包括视频和音频录制和播放。

在该例中，滑块能播放声音同时指示用户播放进度。滑块控件允许用户重放结果

设计思路

在一段漫长的操作进行过程中，用户需要了解操作的大致情况，还需要知道:

操作进程已经开始。
这项进程正在进行中，并且最终将会完成(也就是说进程没有被锁住)。
已完成进程的大致百分比(以及剩余的百分比)。
如果不值得继续等待，用户是否应该取消操作。
用户该不该继续等待，或者在进程结束时还有没有什么其他需要执行的操作。

即使完成进程需要的时间无法准确预测，对于需要一定时间的操作，请使用确定的进度条。不确定进度条表示进程正在进行，但不能显示其他信息。不要仅仅因为可能缺乏准确性就选择使用不确定进度条。

例如，假设一个操作需要五个步骤，并且每个步骤都需要一定时间，但是每个步骤需要的时间量可能相差很大。在这种情况下，使用一个确定的进度条，并按照每个步骤通常所需的时间的比例，显示每个步骤完成的时间。只有当确定的进度条会导致用户错误地认为操作已锁定时，才使用不确定进度条。

只需要明确一点：

确保为冗长的操作提供进度反馈，并清楚地传达上述用户所需要知道的信息。尽可能使用确定进度条。

应用范例

确定进度条

模态确定进度条：从左向右填充代表进度的色块，并在操作完成后填充完全。
由于此状态反馈是模态的，用户在进程完成之前是不能在窗口中执行其他任务（包括模态对话框中进度条的父任务）的。

该例中，进度条给出了计算进程的反馈

带有“取消”或“停止”按钮的模态确定进度条：允许用户因为等待时间过长或不值得等待等原因中止操作。

该例中，用户可以单击“停止”以停止操作并使进程停留在当前状态。

带有动画效果以及“取消”或“停止”按钮的模态确定进度条：允许用户停止操作，并包含一个动画，以帮助用户可视化操作的效果。

示例

模态双重确定进度条：用来指示多步操作的进程。第一个进度条指示当前操作进程，第二个进度条指示整体完成进度。
因为第一个进度条提供的附加信息很少，而且可能会让人分心，所以不推荐使用这种模式。相反，尽量让操作中的所有步骤共享一个进度条，这样单个进度条就可以一次完成。

注意⚠️该状态通常没必要，应尽量避免

非模态确定进度条：从左向右填充代表进度的色块，并在操作完成后填充完全。
与模态进度条不同，用户可以在该操作进行时执行其他任务。这些进度条可以在上下文中或状态栏中显示。

在这个例子中，Windows Internet explorer / Windows Internet Explorer 在状态栏上显示加载网页的进度。用户可以在加载页面时执行其他任务。

非确定进度条

模态非确定进度条：
通过显示一个从左到右不断循环的条状的动画来表示操作正在进行。
仅用于总体进度无法确定的操作，因此没有完成的概念。确定的进度条更好一些，因为它们能表示已完成操作的大致百分比，并帮助用户确定是否值得继续等待该操作。它们在视觉上也更不容易分散注意力。

在此示例中，Windows Update使用了一个标准非确定进度条来表明程序正在更新中

非模态的非确定进度条：
通过显示一个从左到右不断循环的条状的动画来表示操作正在进行。
与模态进度条不同，用户可以在非模态进度条循环的同时进行其他操作。这种进度条可以在上下文和状态栏中展示。

在此示例中，microsoft outlook 在填写联系人属性时使用了非模态不确定进度条。当进度条进行时，用户可以继续使用属性窗口进行其他操作。

计量器：
仅仅表示一个百分比，和进程无关。
这个模式不是进度条，但是它是使用进度条控件来展现的。计量器在外观上和真正的进度条有明显的区别。

在该例中，计量器表示已用的硬盘容量百分比

设计指南

通用原则

为冗长操作提供进度反馈。永远不要让用户自己去猜进程是否完成。
明确标明实际进程。如果进程在进行中，则进度条必须前进。如果预期完成时间会很长，可以考虑使用非线性尺度来表示较长时间的进度。不要让用户在进程进行的情况下，认为程序已经锁定。
明确表明进程的停滞。如果进程没有进行，进度条就应该停止前进。您不会希望用户无限地等待一个永远无法完成的进程。
提供有用的进程信息。在用户能进行一定对应操作的情况下，展示额外的进程信息。确保展示文字足够长以便用户能够理解和阅读。

在该例中，用户可以看到传输速率。过低的传输速率有提示用户使用更高带宽的网络连接方式的作用
不要提供无效信息。典型用户并不关心执行中操作的具体信息。例如，安装程序的用户不关心正在复制的具体文件或正在注册的系统组件，因为他们对这些细节没有兴趣。通常，一个好的进度条本身就提供了足够的信息，因此只有当用户能够对更多的附加信息加以利用时，才提供这些附加的进度信息。展示用户不关心的细节会使用户体验过于复杂和技术化。如果必须有更详细的信息以供调试使用，请不要在发布版本中显示给用户。

正确示例：带标签的进度条是满足需求的

正确示例：该例中，Windows Explore正在复制用户选择的一些文件，所以显示正在复制中的文件名是有意义的

错误示例：安装程序展示了用户不需要的细节信息
提供有效的动画效果。如果设计得当，动画能为用户视觉化操作进程，提升用户体验。好的动画能比纯文字表达更多的含义。例如，如果文件可以恢复，Outlook Delete 命令的进度栏将显示目标文件的回收站，但如果文件无法恢复，则不显示回收站。

在该例中，没有绘制回收站强化了文件被永久删除的事实。这些额外的信息仅通过文本将不能如此有效地传达。
不要使用不必要的动画效果。动画可能会产生误导，因为它们通常在与实际任务分开的线程中运行，因此即使操作已经锁定，动画也可能提示进程进行中。此外，如果操作比预期的慢，用户有时会认为动画是原因的一部分。因此，只有在有明确理由的情况下才使用动画，不要试图用它们来取悦用户。
将动画置于进度条上方居中对齐。如果有动画，将它放在进度条标签的上方。如果进度条右侧有“取消”或“停止”按钮，请在确定中心位置时，包含按钮的长度及位置。
在不频繁、很重要并且进度完成时间很长（超过两分钟）的进程结束时，播放完成音效。如果用户在很重要的进程进行过程中走开了，音效能够有效拉回用户的注意力。相反如果不是具有这些特征的进程，在结束时播放音效就会让用户分散注意力了。
不要为了显示进度更新或完成而强制获取输入焦点。 用户经常在等待时切换到其他程序，并且不希望被打断。后台任务必须保持在后台。
不要过多考虑技术支持的问题。由于进度条提供的反馈不一定准确，而且是暂时性的，因此进度条不是一个提供技术支持信息的好控件。相应的，如果操作可能失败(例如安装程序) ，不要提供仅对技术支持有用的额外进度信息。相反，提供一种替代机制，如日志文件，来记录技术支持信息。

错误示例：进度条展示了用于技术支持的细节信息

不要将完成百分比或其他文字信息放在进度条上。这样的文本是无法访问的，并且与使用的主题不兼容。

错误示例
不要将进度条和忙指针放在一起。这两个只能择一使用，不要同时使用。
不要使用竖向进度条。水平进度条有更自然的映射和更好的流程。

确定进度条

针对需要有限时间的进程，使用确定进度条，即便需要的时间不能精确预测。非确定进度条只能表明进程正在进行，并不能给出更多的信息。不要仅仅因为时间预计可能不准确就使用非确定进度条。
明确显示进程的进行阶段。进度条必须能够明确展示进程是刚开始、在进行中段或者快要结束。例如，一个快速加载到99%、但在最后位置又停滞很长时间的进度条并没有传递出有用的信息，并且让人烦躁。在这种情况下，进度条应该设置在大约33%的位置，以表明进程还处于开始阶段。
在能够准确预估的情况下，提供进程剩余时间。精确的剩余时间估计是有价值的，但是显示偏离标准的估计或者会显著反弹的估计没有任何价值。程序可能需要执行一些操作，然后才能给出准确的估计。如果是这样的话，不要在初始阶段显示可能不准确的剩余时间预估。
不要重启进度条进程。如果进度条重新启动(可能是因为操作中的一个步骤已经完成) ，它将失去其意义，因为用户无法知道操作将何时完成。相反，让操作中的所有步骤共享一部分进度，并让进度条一次性进入完成状态。

错误示例：在此示例中，操作从解压文件转移到了复制文件的步骤，并重置了该步骤的进度栏。这导致用户不知道已经取得了多少进展，也不知道还剩下多少时间。
不要备份进度条。与重新启动时一样，如果备份，进度条将失去其意义。进度条的进度只能一直增加。但是，剩余时间的估计是可以增加(或减少)的，因为进程的速度可能会变化。

非确定进度条

只对总体进度无法确定的操作使用非确定进度条。对于需要无限时间或访问未知数量的对象的操作，使用不确定的进度条。使用超时提示为基于时间的操作提供界限。
确定总体进度后，转换为确定进度条进行显示。 例如，如果确定对象数量所需的时间远远超过两秒，则可以在计算对象的时候使用非确定进度条，计算完毕后转换为确定进度条。
非确定进度条不要带有完成百分比说明和剩余时间预估。如果能够提供这些信息，就直接使用确定进度条。
非确定进度条不要附带图标动画效果。不确定的进度条实际上就是一种通用动画，因此它与动画效果择一使用即可，不能两个同时使用。

正确示例：仅使用动画效果标明操作正在进行

非模态进度条

如果允许用户在等待进程时进行其他有意义的操作，使用非模态进度条作为等待反馈。您可能需要禁用一些需要进程完成之后才能生效的功能。
如果当前窗口有地址栏，在地址栏中展示非模态进度条。

示例
另外，如果当前窗口有状态栏，则将非模态进度条展示在状态栏中。在状态栏中将对应的文字说明放在非模态进度条左边。

示例

模态进度条

在进度页或进度对话框上放置模态进度条。
如果任务需要几秒以上才能完成，甚至永远无法完成，请设置一个命令按钮以停止操作。如果按下按钮能使程序恢复到之前的状态(不产生其他的影响) ，则为按钮文字设置为“取消” ；否则的话，为按钮文字应该为“停止”，以表明它保留了部分已经完成的操作。如果在操作过程中，程序无法再恢复到以前的状态，可以在这个转变的节点时刻将按钮标签从 Cancel/取消更改为 Stop/停止。进度条和命令按钮垂直居中对齐，而不是顶对齐。

正确示例：暂停网络连接不会产生什么影响，所以使用“取消”按钮

正确示例：在该例中，停止复制进程也会留下已经复制好的文件，所以使用“停止”按钮来表明这一点

错误示例：停止搜索并不会产生什么影响效果，所以应该使用“取消”按钮

剩余时间

对于确定进度条：

使用以下时间格式。当最大时间单位数量不为零时，使用第一个时间格式；变为零时，使用下一个时间格式。
对进度条而言：
如果相关信息以带冒号句式显示：
剩余时间：xx小时，xx分钟
剩余时间：xx分钟，xx秒
剩余时间：xx秒

如果需要节约屏幕空间：
h hrs, m mins remaining
m mins, s secs remaining
s seconds remaining
剩余 xx时，xx分
剩余 xx分，xx秒
剩余 xx秒

其他情况：
h hours, m minutes remaining
m minutes, s seconds remaining
s seconds remaining
剩余 xx时，xx分
剩余 xx分，xx秒
剩余 xx秒

在标题栏中：
剩余 01:59
剩余 00:13
这种紧凑的格式首先展示了最重要的信息，在任务栏上不会被截断显示。

估计要尽量精确，但精确度也要合适。如果最大的单位是小时，精确到分即可(如果有必要) ，不需要精确到秒。

错误示例：xx小时，xx分，xx秒

显示实时的预估时间。剩余时间的预估至多5秒需要更新一次。
重点放在剩余时间的显示上，因为这是用户最关心的信息。只有在运行时间有意义的情况下(例如可能重复执行任务时)才给出总的已运行时间。如果剩余的时间估计与一个进度条相关联，则不要显示完整的百分比文本，因为该信息是由进度条本身传递的。
保证语法正确。数量为单数时，单位也要使用单数形式。
错误示例： 1 minutes，1 seconds
使用句式大小写规则。

进度条的颜色

红色或黄色的进度条只表示进度状态，而不是任务的最终结果。红色或黄色的进度条表示用户需要采取一些行动来完成进程。如果情况不可更改，将进度条保持绿色并显示错误消息。
当出现阻碍进程的问题，并且这个问题用户可以进行修复的时候，将进度条变为红色。显示解释问题和建议解决方案的文字信息。
当用户已暂停任务，或者存在阻碍进度但进度仍在进行的情况(例如，网络连接性差)时，将进度条变为黄色。 如果用户已经暂停，则将 Pause 暂停按钮标签更改为 Resume 恢复。如果进程受阻，显示解释问题和建议解决方案的文字信息。