进度栏

使用进度条，用户可以跟踪冗长操作的进度。 进度条可以显示完成的大致百分比（确定），也可以指示操作正在进行（不确定）。

可用性研究表明，用户对超过一秒的响应时间非常敏感。 因此，您应将需要两秒或更长时间才能完成的操作视为冗长的操作，且需要某种类型的进度反馈。

典型的进度条。

这是正确的控件吗？

在决定之前，请考虑以下问题：

• 操作是否会在大约五秒或更短的时间内完成？ 如果是这样，请改用活动指示器，因为在如此短的持续时间内显示进度条会分散注意力。 如果操作通常需要 5 秒或更少，但有时需要更长时间，则从繁忙的指针开始，5 秒后转换为进度条。

• 不确定进度条是否用于等待用户完成任务？ 如果是这样，请不要使用进度条。 进度条代表计算机进度，而不是用户进度。

• 不确定进度条是否与动画相结合？ 如果是，请改用动画。 不确定进度条实际上是一种通用动画，不会为动画添加任何价值。

• 操作是否是一项非常冗长（超过两分钟）的后台任务，用户对完成度比进度更感兴趣？ 如果是，请改用通知。 在这种情况下，用户同时执行其他任务，并且不会监视进度。 使用通知可以让用户不受干扰地执行其他任务。 此类冗长操作的示例包括打印、备份、系统扫描和批量数据传输或转换。

• 操作完成后，用户能否重放结果？ 如果可以，请改用滑块。 此类操作的示例包括视频和音频录制与播放。

  

  在此示例中，滑块用于指示播放声音时的进度。 这样做可以让用户稍后重放结果。

设计概念

在长时间的操作期间，用户需要大致了解操作正在执行的内容。 他们还需要知道：

• 该长时间的操作已开始。
• 正在取得进展，操作最终将完成（因此尚未锁定）。
• 已完成操作的大致百分比（即剩余的百分比）。
• 如果不值得继续等待，他们就应该取消操作。
• 在操作完成时，他们是否应该继续等待或执行其他操作。

对需要一定时间的操作使用确定进度条，即使无法准确预测该时间量。 不确定进度条显示正在取得进展，但没有提供其他信息。 不要仅仅因为可能缺乏准确性而选择不确定的进度条。

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

如果你只做一件事……

确保为冗长的操作提供进度反馈，并明确传达上述信息。 尽可能使用确定进度条。

使用模式

进度条有多个使用模式：

确定的进度条

Label	值
模式确定进度条 通过从左到右填充并在操作完成时完全填充来指示操作的进度。	由于此反馈是模态的，因此用户在操作完成之前无法在窗口（或其父任务（如果显示在模式对话框中）中执行其他任务。 在此示例中，进度条在配置期间提供反馈。
带有“取消”或“停止”按钮的模态确定进度条 允许用户停止操作，可能是因为操作时间太长或不值得等待。	在此示例中，用户可以单击“停止”来停止操作，并使环境处于其当前状态。
带有“取消”或“停止”按钮和动画的模态确定进度条 允许用户停止操作，并提供动画帮助用户直观了解操作的效果。	在此示例中，用户可以单击“停止”来停止操作，并使环境处于其当前状态。
模态确定双进度条 通过在第一个进度条中显示当前步骤的进度，在第二个进度条中显示总体进度，指示多步骤操作的进度。	由于第一个进度条提供的附加信息很少，而且可能会分散注意力，因此不建议使用此模式。 相反，让操作中的所有步骤共享一部分进度，并让单个进度条一次完成。 在此示例中，第一个进度条显示当前步骤的进度，第二个进度条显示总体进度。 注意：此模式通常是不必要的，应避免。
无模式确定进度条 通过从左到右填充并在操作完成时完全填充来指示操作的进度。	与模态进度条不同，用户可以在操作过程中执行其他任务。 这些进度条可以在上下文中或状态栏上显示。 在此示例中，Windows Internet ExplorerWindows Internet Explorer 在状态栏上显示加载网页的进度。 用户可以在页面加载时执行其他任务。

不确定的进度条

进度条类型	说明
模态不确定进度条 通过显示从左到右连续循环的动画，指示操作正在进行中。	仅用于无法确定总体进度的操作，因此没有完整性的概念。 确定进度条是更可取的，因为它们能指示已完成操作的大致百分比，并帮助用户确定该操作是否值得继续等待。 它们也不容易分散视觉注意力 在此示例中，Windows 更新在查找更新时使用模态不确定进度条来显示进度。
无模式不确定进度条 通过显示从左到右连续循环的动画，指示操作正在进行中。	与模态进度条不同，用户可以在处理过程中执行其他任务。 这些进度条可以在上下文中或状态栏上显示。 在此示例中，Microsoft Outlook 在填写联系人属性时使用无模式不确定进度条。 在这项工作进行期间，用户可以继续使用属性窗口。

指示器

类型	描述
指示器 指示与进度无关的百分比。	此模式不是进度条，但它是使用进度条控件实现的。 仪表具有独特的外观，以区别于真正的进度条。 在此示例中，仪表显示所用磁盘空间的百分比。

准则

常规

• 在执行长时间的操作时提供进度反馈。 用户不应该猜测是否正在取得进展。

• 清楚地表明实际进度。 如果正在取得进展，进度条必须前进。 如果预计完成时间范围很大，请考虑使用非线性尺度来指示较长时间的进度。 您肯定不希望用户得出您的程序已锁定但实际上并未锁定的结论。

• 清楚地表明缺乏进展。 如果未取得进展，进度条不得前进。 您不希望用户无限期地等待一个永远不会完成的操作。

• 提供有用的进度详细信息。 提供其他进度信息，但前提是用户可以利用它做些什么。 确保文本的显示时间足够长，以便用户能够阅读。

  

  在此示例中，用户可以看到传输速率。 这里的传输速率较低，说明需要使用高带宽网络连接。

• 不要提供不必要的详细信息。 通常，用户不关心所执行操作的细节。 例如，安装程序的用户并不关心正在复制的具体文件或正在注册的系统组件，因为他们对这些细节没有期望。 通常，仅标记良好的进度条即可提供足够的信息，因此仅当用户可以使用它执行某些操作时，才提供其他进度信息。 提供用户不关心的详细信息会使用户体验过于复杂和技术化。 如果需要更详细的调试信息，请不要在发布版本中显示。

  更正：

  

  在此示例中，标记的进度栏是所需的全部操作。

  更正：

  

  在此示例中，Windows 资源管理器正在复制用户选择的文件，因此显示要复制的文件名很有意义。

  错误：

  

  在此示例中，安装程序提供对用户毫无意义的详细信息。

• 提供有用的动画。 如果做得好，动画可以帮助用户直观地了解操作，从而改善用户体验。 好的动画比单纯的文字更具影响力。 例如，如果可以恢复文件，Outlook 删除命令的进度条就会显示目标的回收站；如果不能恢复文件，进度条就不会显示回收站。

  

  在此示例中，，没有回收站更说明文件是被永久删除的。 仅使用文本无法有效地传达这些附加信息。

• 不要使用不必要的动画。 动画可能会产生误导性，因为它们通常在与实际任务不同的线程中运行，因此即使操作已锁定，动画也会显示进度。 此外，如果操作速度低于预期，用户有时会认为动画是原因之一。 因此，只有在有明确的理由时才使用动画；不要为了娱乐用户而使用动画。

• 将动画置于进度条的中心位置。 将动画置于进度条标签上方（如果有）。 如果进度条右侧有“取消”或“停止”按钮，请在确定中心时将该按钮包括在内。

• 只有在操作时间很长（超过两分钟）、不频繁且重要的情况下，才在操作完成时播放音效。 如果用户在处理重要操作时可能会走开，声音效果可以重新吸引用户的注意力。 在其他情况下，在完成时使用声音效果会让人心烦意乱。

• 不要为了显示进度更新或完成情况而窃取输入焦点。 用户通常会在等待时切换到其他程序，并且不希望中断。 后台任务必须保留在后台。

• 不用担心技术支持。 由于进度条提供的反馈不一定准确，而且很短暂，因此进度条不是为技术支持提供信息的良好机制。 因此，如果操作可能失败（与安装程序一样），请不要提供仅对技术支持有用的其他进度信息。 而是提供一种替代机制（例如日志文件）来记录技术支持信息。

  错误：

  

  在此示例中，进度条显示用于技术支持的详细信息。

• 不要在进度条上显示完成百分比或任何其他文字。 此类文本无法访问，并且与使用主题不兼容。

  错误：

  

  在此示例中，进度条上的百分比文本无法访问。

• 不要将进度条与忙碌的指针组合在一起。 使用其中一种，但不能同时使用两者。

• 不要使用垂直进度条。 水平进度条的映射更自然，流程更流畅。

确定的进度条

• 对需要一定时间的操作使用确定进度条，即使无法准确预测该时间量。 不确定进度条显示正在取得进展，但没有提供其他信息。 不要仅仅因为可能缺乏准确性而选择不确定的进度条。

• 清楚地指示进度阶段。 进度条必须能够指示操作是否位于操作的开头、中间或末尾。 例如，进度条立即跳到 99% 的完成度，然后长时间停留在那里，这样的进度条信息量特别小，也特别令人讨厌。 在这些情况下，进度条最初最多应设置为 33%，以表示操作仍处于开始阶段。

• 明确地指示完成。 除非操作已完成，否则不要让进度条达到 100%。

• 如果可以准确估算，请提供剩余时间。 准确的剩余时间估算非常有用，但偏差很大或波动很大的估算则没有帮助。 可能需要执行一些处理，然后才能提供准确的估计值。 如果是这样，请不要在此初始期间显示可能不准确的估计值。

• 不要重启进度。 如果进度条重新启动（可能是因为操作中的某个步骤完成），进度条将丢失了价值，因为用户无法知道操作何时完成。 相反，让操作中的所有步骤共享一部分进度，并让进度条一次完成。

  错误：

  

  在此示例中，操作已移动到复制文件的步骤，并重置了该步骤的进度条。 现在，用户不知道已经取得了多少进展或还剩下多少时间。

• 不要备份进度。 与重启时一样，如果备份进度条，则其价值将丢失。 始终单调地增加进度。 不过，由于进度可能会有变化，因此剩余时间的估计值可能会增加（也可能会减少）。

不确定的进度条

• 仅对无法确定总体进度的操作使用不确定进度条。 对需要无限时间或访问未知数量对象的操作，使用不确定进度条。 使用超时为基于时间的操作提供边界。

• 在确定总体进度后，转换为确定进度条。 例如，如果确定对象数量所需的时间大大超过两秒，可以在计算对象数量时使用不确定进度条，然后再转换为确定进度条。

• 不要将不确定进度条与完成百分比或剩余时间估计合并。 如果可以提供此信息，则改用确定进度条。

• 不要将不确定进度条与动画组合在一起。 不确定进度栏实际上是一种通用动画，因此应选择其中一种，但绝不能同时使用这两个动画。

  更正：

  

  在此示例中，仅使用动画来显示正在进行的操作。

无模式进度条

• 如果用户在操作进行时能够高效执行某些操作，请提供无模式反馈。 可能需要禁用需要完成操作的功能子集。

• 如果该窗口有地址栏，则显示地址栏中的无模式进度。

  

  在此示例中，无模式进度显示在地址栏中。

• 否则，如果窗口具有状态栏，则显示状态栏中的无模式进度。将任何相应的文本放在状态栏左侧。

  

  在此示例中，无模式进度显示在状态栏中。

模态进度条

• 在进度页或进度对话框中放置模式进度条。

• 提供一个命令按钮，以停止需要几秒钟才能完成或可能永远不会完成的操作。 如果取消将环境返回到其以前的状态，请标记按钮为“取消”（不产生副作用）；否则，请标记按钮为“停止”，以指示它使部分完成的操作保持不变。 如果在某个时候无法将环境返回到其以前的状态，则可以在操作中间将按钮标签从“取消”更改为“停止”。 将命令按钮与进度条垂直居中，而不是将它们的顶部对齐。

  更正：

  

  在此示例中，停止网络连接没有副作用，因此使用“取消”。

  更正：

  

  在此示例中，停止复制时会保留所有复制的文件，因此命令按钮标记为“停止”。

  错误：

  

  在此示例中，停止搜索不会造成副作用，因此应将命令按钮标记为“取消”。

剩余时间

确定的进度条：

• 使用下列时间格式。 从以下第一种最大时间单位不为零的格式开始，一旦最大时间单位变为零，就换成下一种格式。

  进度栏：

  如果相关信息以冒号格式显示：

  剩余时间：h 小时、m 分钟

  剩余时间：m 分钟、s 秒

  剩余时间：s 秒

  如果屏幕空间处于高级阶段：

  剩余 h 小时，m 分钟

  剩余 m 分钟，s 秒

  剩余 s 秒

  否则：

  剩余 h 小时，m 分钟

  剩余 m 分钟，s 秒

  剩余 s 秒

  对于标题栏：

  剩余 hh:mm

  剩余 mm:ss

  剩余 0:ss

  此紧凑格式首先显示最重要的信息，以免在任务栏上截断它。

• 使估计准确，但不给出假精确。 如果最大单位为小时，则提供分钟数（如果有意义），但不指定秒。

  错误：

  hh 小时，mm 分钟，ss 秒

• 使估算保持最新状态。 剩余的时间估计至少每 5 秒更新一次。

• 关注剩余时间，因为这是用户最关心的信息。 仅当运行时间有帮助（例如任务可能重复时）的情况下，才提供总运行时间。 如果剩余的估计时间与进度栏相关联，则不具有完成百分比文本，因为进度栏本身传达了该信息。

• 语法正确。 当数字为 1 时，请使用单数单位。

  错误：

  1 分，1 秒

• 使用句子样式的大写。

进度条颜色

• 仅使用红色或黄色进度条来指示进度状态，而不是任务的最终结果。 红色或黄色进度条表示用户需要采取一些操作来完成任务。 如果条件无法恢复，则将进度栏保留为绿色并显示错误消息。
• 当出现用户可恢复的情况，导致无法取得进一步进展时，将进度条变为红色。 显示一条消息来说明问题并推荐解决方案。
• 将进度栏变成黄色，以表示用户已暂停任务，或者存在阻碍进度的情况，但进度仍在进行（例如，网络连接不佳）。 如果用户已暂停，请将“暂停”按钮标签更改为“继续”。 如果进度受到阻碍，则显示一条消息来说明问题并推荐解决方案。

指示器

• 仅对进度使用进度条。 使用仪表表示示与进度无关的百分比。

建议的大小和间距

建议的进度条大小和间距。

• 始终使用建议的进度条高度。
  • 例外：如果父窗口不支持建议的高度，则可以使用不同的高度。
• 如果希望进度条不引人注目，请使用最小宽度。
• 不要使用超过建议最大宽度的宽度。 进度条不必填满可用空间。
• 如果窗口宽度远大于建议的最大宽度，则将进度条水平居中。

标签

进度条标签

• 使用带有静态文本控件的简洁标签来指示操作正在执行的内容。 标签以动词开头（例如复制），以省略号结尾。 如果操作具有多个步骤或正在处理多个对象，则此标签可能会动态更改。

• 不要分配唯一的访问键，因为控件不是交互式的。

• 使用句子样式的大写。

• 如果该操作不是由用户直接发起的，则可以添加一个额外的标签来说明背景情况，并对操作中断表示歉意。 使用“请稍候”这句话作为附加标签的开头。 操作期间不应更改此标签。

  

  在此示例中，系统会要求用户等待，因为用户未直接启动操作。

• 将标签置于进度条上方，并将标签与进度条的左边缘对齐。

进度条详细信息

• 用静态文本提供详细信息，在数据前加上以冒号结尾的标签。 指定详细信息文本后面的单位（秒、千字节等）。

  更正：

  

  在此示例中，详细信息已正确标记。

  错误：

  

  在此示例中，详细信息没有标记，因此要求用户确定其含义。

• 使用句子样式的大写。

• 将详情置于进度条下方，并将标签与进度条的左边缘对齐。

• 不要提供已完成或剩余百分比，因为进度栏本身传达了该信息。

“取消”按钮

• 如果取消将环境返回到其以前的状态，请标记按钮为“取消”（不产生副作用）；否则，请标记按钮为“停止”，以指示它使部分完成的操作保持不变。
• 如果在某个时候无法将环境返回到其以前的状态，则可以在操作中间将按钮标签从“取消”更改为“停止”。

“进度”对话框标题

• 如果进度条显示在模式对话框中，则对话框标题应为程序名称或操作名称。 不要使用进度条标签作为对话框标题。

  更正：

  

  在此示例中，任务名称用于对话框标题。

  错误：

  

  在此示例中，对话框标题文本是进度条标签的重述。 应改用程序名称。

• 如果进度条显示在无模式对话框中，则通过简洁地将区分信息放在首位来优化标题以在任务栏上显示。 示例：“完成 66%。”