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 恢复。如果进程受阻，显示解释问题和建议解决方案的文字信息。

计量器

• 进度条只用于显示进度。计量器用来表示和进程无关的百分比信息。

建议尺寸和间距

进度条的建议尺寸和间距

• 使用推荐的进度条高度。（例外：在父窗口不支持建议进度条高度的情况下，使用其他的可行高度。）
• 如果希望进度条不那么显眼，使用最小进度条宽度。
• 进度条宽度不要超过建议的最长尺寸。进度条不需要占满可用的空间。
• 如果窗口宽度远远超过建议的最大宽度，则将进度条水平居中。

标签

进度条标签

• 使用静态文本的简洁标签文字来说明正在执行的操作。以动词(例如复制)开始标签，以省略号结束。如果操作具有多个步骤或处理多个对象，则此标签文字可能会动态更改。

• 不要为标签设置存取键，因为该控件是不可交互的。

• 使用句式大小写规则。

• 如果该进程不是由用户直接发起的，可以使用附加的标签文字说明背景情况并为打扰到用户致歉。使用“请等待”文字开始这个附加标签。这个标签文字在进程中不要变化。

  
  在该例中，因为用户没有直接开启该进程，所以要被告知“请等待...”

• 标签文字放在进度条上方并与进度条左对齐。

进度条细节

• 以静态文本提供详细信息，数据前面有一个以冒号结尾的标签。 在详细信息文本后指定单位(秒、千字节等)。

  
  正确示例
  错误示例：细节信息没有标签文字进行说明，用户需要猜测它们的含义

• 使用句式大小写规则。

• 细节信息放在进度条下方并与进度条左对齐。

• 不要给出已完成或剩余进度的百分比，该信息是由进度条本身传递的。

取消按钮

• 如果按下按钮程序会恢复到之前的状态，并且没有其他影响，按钮标签应该为“取消”。否则标签应该为“停止”，表示除了已完成的部分外，进程没有对程序产生影响。
• 如果在操作过程中，程序无法再恢复到以前的状态，您可以在这个转变的节点时刻将按钮标签从 Cancel取消 变为 Stop停止。

进程对话框标题

• 如果进度条出现在模态对话框中，对话框的标题应该是该操作或者进程的名称。不要使用进度条的标签来命名对话框。

  
  正确示例：对话框标题是任务名称

错误示例：对话框的标题是进度条标签文字的重述。应该使用程序名来描述。

• 如果进度条出现在非模态对话框中，通过放置并简化最明显的信息来优化显示任务栏上的标题文字。例如：“已完成66%”