进度栏

备注

此设计指南是为 Windows 7 创建的,尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用,但演示和示例并不反映我们 当前的设计指南

使用进度栏,用户可以跟踪冗长操作的进度。 进度栏可能显示确定) (完成的大致百分比,或者指示操作正在进行 (不确定) 。

可用性研究表明,用户知道响应时间超过一秒。 因此,应该考虑需要两秒或更长时间才能完成的操作会很长,并且需要某种类型的进度反馈。

典型进度栏的屏幕截图

典型的进度栏。

备注

布局 相关的指南在单独的文章中介绍。

这是正确的控件吗?

在决定之前,请考虑以下问题:

  • 操作会在大约五秒或更短的时间内完成? 如果是这样,请改用 活动指示器 ,因为显示这么短的持续时间的进度条会让人分心。 如果操作通常需要 5 秒或更少时间,但有时花费更多时间,请从忙指针开始,并在 5 秒后转换为进度栏。

  • 是否是用于等待用户完成任务的不确定进度栏? 如果是这样,请不要使用进度栏。 进度栏用于计算机进度,而不是用户进度。

  • 不确定的进度栏是否与动画结合使用? 如果是,请改用动画。 不确定进度栏实际上是一个泛型动画,不会为动画增加任何值。

  • 在后台任务) 用户对完成比进度更感兴趣的后台任务 (,操作是否很长 (长? 如果是,请改用 通知 。 在这种情况下,用户同时执行其他任务,并且不监视进度。 使用通知可让用户在不中断的情况下执行其他任务。 此类冗长操作的示例包括打印、备份、系统扫描以及批量数据传输或转换。

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

    媒体播放器和滑块的屏幕截图

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

设计概念

在冗长的操作期间,用户需要大致了解该操作正在执行的操作。 他们还需要知道:

  • 一个漫长的操作已开始。
  • 正在取得进展,操作最终将 (完成,因此尚未锁定) 。
  • 已完成操作的近似百分比 (,因此剩余) 百分比。
  • 如果他们应该取消操作(如果不值得继续等待)。
  • 如果它们应在操作完成时继续等待或执行其他操作。

对需要有限时间的操作使用确定的进度条, 即使无法准确预测该时间量也是如此。 不确定的进度条显示正在取得进展,但不提供其他信息。 不要仅基于可能缺乏准确性而选择不确定的进度栏。

例如,假设一个操作需要五个步骤,其中每个步骤都需要有限制的时间量,但每个步骤的时间量可能会有很大差异。 在这种情况下,请使用确定的进度栏,并在每个步骤完成与每个步骤通常花费的时间成正比时显示进度。 仅当确定的进度栏会导致用户错误地得出结论操作已锁定时,才使用不确定的进度栏。

如果你只做一件事...

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

使用模式

进度条具有多种使用模式:

确定进度栏

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

不确定的进度栏

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

类型 描述

指示与进度无关的百分比。
此模式不是进度栏,而是使用进度栏控件实现的。 计量具有独特的外观,以将它们与真正的进度条区分开来。
显示可用磁盘空间的计量的屏幕截图
在此示例中,计量显示已用磁盘驱动器空间的百分比。

准则

常规

  • 执行长时间操作时提供进度反馈。 用户永远不必猜测是否正在进行进度。

  • 清楚地表明实际进展。 如果正在进行进度,则进度栏必须前进。 如果预期完成时间的范围很大,请考虑使用非线性刻度来指示较长时间的进度。 你不希望用户断定你的程序在未锁定时已锁定。

  • 明确表示缺乏进展。 如果没有进度,则进度栏不得前进。 你不希望用户无限期地等待永远不会完成的操作。

  • 提供有用的进度详细信息。 提供其他进度信息,但前提是用户可以使用它执行某些操作。 确保文本的显示时间足够长,以便用户能够阅读它。

    显示传输速率的进度栏的屏幕截图

    在此示例中,用户可以看到传输速率。 此处的低传输速率表明需要使用高带宽网络连接。

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

    正确:

    安装进度的屏幕截图

    在此示例中,标记的进度栏就是所需的全部内容。

    正确:

    显示传输速率的进度栏的屏幕截图

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

    不正确:

    注册进度的屏幕截图

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

  • 提供有用的动画。 如果做得好,动画会通过帮助用户可视化操作来改善用户体验。 优秀的动画比仅使用文本具有更大的影响力。 例如,如果可以恢复文件,Outlook Delete 命令的进度栏将显示目标的回收站,但如果文件无法恢复,则不显示回收站。

    删除进度的屏幕截图

    在此示例中,缺少回收站会强化文件被永久删除。 仅使用文本无法有效地传达这些附加信息。

  • 不要使用不必要的动画。 动画可能会产生误导性,因为它们通常在与实际任务不同的线程中运行,因此即使操作已锁定,也可能会建议进度。 此外,如果操作速度比预期慢,用户有时会认为动画是原因的一部分。 因此,仅在有明确理由时才使用动画;不要使用它们来尝试娱乐用户。

  • 将动画置于进度栏上居中的位置。 将动画放在进度栏标签上方(如果有)。 如果进度栏右侧有“取消”或“停止”按钮,请在确定中心时包含该按钮。

  • 只有在操作非常漫长 (超过两分钟) 、不频繁且重要时,才能在操作完成时播放声音效果。 如果用户在处理时可能会离开重要操作,则声音效果会恢复用户的注意力。 在其他情况下完成时使用声音效果会让人分心。

  • 不要窃取输入焦点以显示进度更新或完成。 用户经常在等待时切换到其他程序,不希望被中断。 后台任务必须保留在后台。

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

    不正确:

    显示服务器名称的进度栏的屏幕截图

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

  • 不要将完成百分比或任何其他文本放在进度栏上。 此类文本不可访问,并且与使用主题不兼容。

    不正确:

    进度栏上带有文本的屏幕截图

    在此示例中,进度栏上的百分比文本不可访问。

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

  • 不要使用垂直进度条。 水平进度条具有更自然的映射和更好的流程。

确定进度栏

  • 对需要有限时间的操作使用确定进度条, 即使无法准确预测该时间量也是如此。 不确定的进度条显示正在取得进展,但不提供其他信息。 不要仅基于可能缺乏准确性而选择不确定的进度栏。

  • 清楚地指示进度阶段。 进度栏必须能够指示操作是在操作的开始、中间还是结束时。 例如,进度条立即拍摄到 99% 完成,然后长时间停留是特别不知情和烦人的。 在这些情况下,进度栏最初应设置为最多 33%,以指示操作仍处于开始阶段。

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

  • 如果能准确估计剩余时间,请提供估计时间。 准确的剩余时间估计很有用,但远未超过标记或明显反弹的估计则无济于事。 可能需要先执行一些处理,然后才能给出准确的估计值。 如果是这样,请不要在此初始期间显示可能不准确的估计值。

  • 不要重启进度。 如果进度栏重新启动 (可能会丢失其值,可能是因为操作中的某个步骤完成) 因为用户无法知道操作何时完成。 相反,让操作中的所有步骤共享一部分进度,并让进度栏进入完成一次。

    不正确:

    重新启动的进度栏的屏幕截图

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

  • 不要备份进度。 与重启一样,进度栏在备份时会丢失其值。 始终单调增加进度。 但是,可以有一个剩余时间估计 (增加和减少) ,因为进度速度可能会有所不同。

不确定进度条

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

  • 确定总体进度后,转换为确定进度栏。 例如,如果确定对象数需要超过两秒的时间,则可以在对对象进行计数时使用不确定的进度条,然后将其转换为确定进度条。

  • 请勿将不确定进度条与完成百分比或剩余时间估算结合使用。 如果可以提供此信息,请改用确定的进度栏。

  • 请勿将不确定进度条与动画组合使用。 不确定进度栏实际上是一个通用动画,因此应使用其中一个或另一个,但绝不应同时使用两者。

    正确:

    检测服务器进度的屏幕截图

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

无模式进度条

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

  • 如果窗口有地址栏,请在地址栏中显示无模式进度。

    作为地址栏一部分的进度栏的屏幕截图

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

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

    进度栏作为状态栏一部分的屏幕截图

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

  • 将模式进度条置于进度页或进度对话框中

  • 如果操作需要几秒钟以上才能完成,或者可能永远不会完成,请提供命令按钮来停止操作。 如果取消将环境返回到其以前的状态 () 没有副作用,则标记“取消”按钮;否则,将按钮标记为“停止”以指示它使部分完成的操作保持不变。 如果在某些时候无法将环境返回到其以前的状态,则可以在操作中间将按钮标签从“取消”更改为“停止”。 使用进度栏垂直居中命令按钮,而不是对齐其顶部。

    正确:

    等待网络进度的屏幕截图

    在此示例中,停止网络连接没有副作用,因此使用 Cancel。

    正确:

    显示剩余复制时间的进度栏的屏幕截图

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

    不正确:

    搜索进度栏和停止按钮的屏幕截图

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

剩余时间

对于确定进度条:

  • 使用以下时间格式。 从以下格式中的第一种格式开始,其中最大时间单位不为零,然后在最大时间单位变为零时更改为下一种格式。

    对于进度栏:

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

    剩余时间:小时,m 分钟

    剩余时间:m 分钟,秒

    剩余时间:秒

    如果屏幕空间是高级空间:

    h hrs,m 分钟剩余

    m 分钟,秒剩余

    剩余秒数

    否则:

    h 小时,剩余 m 分钟

    m 分钟,剩余秒

    剩余秒数

    对于标题栏:

    hh:mm 剩余

    剩余的 mm:ss

    剩余 0:ss

    此压缩格式首先显示最重要的信息,以便不会在任务栏上截断它。

  • 使估算准确,但不要给出虚假的精度。 如果最大单位为小时,则提供分钟 ((如果有意义的) 而不是秒)。

    不正确:

    hh hours、mm minutes、ss seconds

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

  • 专注于剩余时间 ,因为这是用户最关心的信息。 仅当已用时间有用 (例如任务可能重复) 时,才提供总已用时间。 如果剩余时间估算值与进度栏相关联,则不要包含完成百分比文本,因为该信息由进度栏本身传达。

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

    不正确:

    1 分 1 秒

  • 使用句式大写。

进度栏颜色

  • 仅使用红色或黄色进度条来指示进度状态,而不是任务的最终结果。 红色或黄色进度栏指示用户需要执行一些操作才能完成任务。 如果条件不可恢复,请将进度栏保留为绿色并显示错误消息。
  • 当存在阻止进一步进度的用户可恢复条件时,将进度栏变为红色。 显示一条消息以说明问题并推荐解决方案。
  • 将进度栏设置为黄色,以指示用户已暂停任务,或者存在阻碍进度但 进度仍在 (的状态,例如,网络连接性差) 。 如果用户已暂停,请将“暂停”按钮标签更改为“继续”。 如果进度受阻,则显示一条消息来解释问题并推荐解决方案。

  • 仅对进度使用进度栏。 使用计量指示与进度无关的百分比。

显示进度条大小调整和间距的示意图

建议调整进度栏的大小和间距。

  • 始终使用建议的进度栏高度。
    • 例外: 如果父窗口不支持建议的高度,则可以使用不同的高度。
  • 如果要使进度栏不显眼,请使用最小宽度。
  • 不要使用超过建议的最大值的宽度。 进度栏不必填满可用空间。
  • 如果窗口比建议的最大宽度宽得多,将进度栏水平居中。

标签

进度栏标签

  • 将简洁的标签与静态文本控件结合使用,以指示操作正在执行的操作。 使用谓词 ((例如复制) )开始标签,以省略号结尾。 如果操作具有多个步骤或正在处理多个对象,则此标签可能会动态更改。

  • 不要分配唯一 的访问密钥 ,因为控件不是交互式的。

  • 使用 句子样式大写

  • 如果操作不是由用户直接启动的,则可以添加一个附加标签来提供上下文并为中断道歉。 以短语“请稍候”这一额外标签开头。 此标签在操作期间不应更改。

    带有标签的进度栏的屏幕截图

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

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

进度栏详细信息

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

    正确:

    显示传输速率的进度栏的屏幕截图

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

    不正确:

    没有正确标签的进度栏的屏幕截图

    在此示例中,不会标记详细信息,因此需要用户确定其含义。

  • 使用 句子样式大写

  • 将详细信息置于进度栏下方,并将标签与进度栏的左边缘对齐。

  • 不要给出已完成或剩余的百分比,因为该信息是由进度栏本身传达的。

“取消”按钮

  • 如果取消会将环境返回到以前的状态,则标记“取消”按钮 () 没有副作用;否则,请标记“停止”按钮,以指示它使部分完成的操作保持不变。
  • 如果在某些时候无法将环境返回到以前的状态,则可以将按钮标签从“取消”更改为“停止”。

进度对话框标题

  • 如果进度栏显示在模式对话框中,对话框标题应是程序的名称或操作的名称。 不要使用对话框标题的进度栏标签。

    正确:

    具有任务名称的进度栏标题的屏幕截图

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

    不正确:

    冗余对话框标题的屏幕截图

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

  • 如果进度栏显示在无模式对话框中,请首先简明地放置区分信息,优化标题以在任务栏上显示。 示例:“完成 66%。