出自UXGuide.net

进度条

Progress Bars

目录 1 它用在这里合适吗？ 2 设计理念 3 使用模式 3.1 确定性进度条 3.2 非确定性进度条 3.3 量表 4 设计规范 4.1 常规 4.2 确定性进度条 4.3 非确定性进度条 4.4 无模式进度条 4.5 模式进度条 4.6 剩余时间 4.7 量表 5 推荐尺寸与间距 6 标签 6.1 进度条标签 6.2 进度条细节信息 6.3 取消按钮 6.4 进度对话框标题

进度条（Progress Bar）用于查看长时间操作的进度。进度条不仅可以显示大致的完成百分比（确定性，determinate），也可以显示操作正在进行中（非确定性，indeterminate）。

可用性研究表明，当响应时间超过一秒钟时，用户便能够有所察觉。因此，你得考虑为那些需要 2 秒甚至更长时间的操作提供某种类型的进度反馈信息。

典型的进度条。

注：与布局相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

考虑下列问题以进行判断：

• 该操作能在 5 秒钟之内完成吗？如果能，请改用忙碌鼠标指针，为了如此短的时间段而显示进度条会分散用户的注意力。如果某项操作通常只花 5 秒或更短的时间，而有时会超过 5 秒，则可以先使用忙碌鼠标指针，5 秒钟后改换成进度条。
• 是否将非确定性进度条用于等待用户去完成任务？如果是，请不要使用进度条。进度条是用来显示计算机的进度的，而不是用户的进度。
• 是否将非确定性进度条和动画一起使用？如果是，应改为只使用动画。非确定性进度条本身即是一个有效的常规动画，对于已经存在的动画来说，没有更多意义。
• 该操作是否是非常耗时（2 分钟以上）的后台任务，以至于用户所关注的是它是否完成与并非其进度？如果是，请改用通知。在这种情况下，用户可以用这段时间去做其他事情而不必盯着进度。使用通知可以让用户在完成其他任务时不受打扰。像这样耗时的操作有：打印、备份、系统扫描、批量数据传输或转换等等
• 当操作完成后，用户能够回放结果吗？如果能，请换用滑块。此类操作包括视频/音频的录制和回放等。

在这个示例中，滑块用于指示声音播放的进度。这使得用户能够在稍后进行回放。

设计理念

在一个耗时操作的过程中，用户需要对该操作正在干什么有一个大致的概念。他们也需要知道：

• 一个耗时操作已经开始。
• 该操作正在持续进行，且它最终是可以结束的（操作没有锁死）。
• 该操作已完成的大致百分比（以及剩余部分的百分比）。
• 如果该操作不值得继续等待，他们是否能够取消该操作。
• 在等待操作完成的过程中，他们需要继续等待还是可以做其他的事情。

应当将确定性进度条用于那些有确定时间界限的操作，即使其中大部分时间都无法进行精确预测时也同样如此。非确定性进度条除了说明操作仍在进行中之外，无法提供任何其他信息。不要仅仅因为不够精确，就选用非确定性进度条。

例如，假设一个操作需要五个步骤，每个步骤所需要的时间是有确定界限的，但是每个步骤所需的时间相差很大。这种情况下，应使用确定性进度条，并根据每个步骤通常所耗时间的比例来显示进度。只有当使用确定性进度条可能会令用户以为操作被锁死时，才应使用非确定性进度条。

最重要的一件事：

确保为耗时操作提供了进度反馈，且清晰地展现了上述信息。只要有可能，就应当使用确定性进度条。

使用模式

进度条具有以下使用模式：

确定性进度条

模式（Modal）确定性进度条 通过从左至右进行填充来表示操作的进度。操作完成时也填充完成。	因为这个反馈是<a href="../../glossary.aspx">模式</a>的，在任务完成之前，用户无法执行窗口中的其他任务（如果进度条显示在模式对话框中，那指其父窗口）。 在这个示例中，进度条用于在配置过程中提供反馈。
带有取消或停止按钮的模式确定性进度条 允许用户中止该操作，可能是因为该操作需要耗费太多时间或者不值得等待。	在这个示例中，用户可以单击 Stop（停止）以中止该操作并保留当前环境状态。
带有取消或停止按钮及动画的模式确定性进度条 允许用户中止该操作，同时包含一个动画，以帮助用户将操作的效果形象化。	在这个示例中，用户可以单击 Stop（停止）以中止该操作并保留当前环境状态。
模式确定性双进度条 通过在第一个进度条中显示当前步骤的进度，及在第二个进度条中显示整体进度，来显示多步骤操作的进度。	由于第一个进度条并不能提供多少额外的信息，而且很容易让人分心，因此该模式并不推荐使用。另外的方法是，将每个操作步骤都作为整体进度的一个部分，并使用一个单独的进度条一次完成。 在这个示例中，第一个进度条显示当前步骤的进度，第二个进度条中显示整体进度。 注：该模式通常是不必要的，应当避免使用。
无模式（modeless）确定性进度条 通过从左至右进行填充来表示操作的进度。操作完成时也填充完成。	与模式进度条不同，用户能够在操作进行的过程中完成其他任务。这类进度条可以在上下文相关位置或状态栏中显示。 在这个示例中，Windows® Internet Explorer® 加载网页时在状态栏中显示进度条。用户可以在页面加载的过程中完成其他任务。

非确定性进度条

模式非确定性进度条 通过显示持续不断从左至右贯穿进度条的动画来指示操作正在进行中。	仅用于整体进度无法确定的操作，因此对什么时候完成完全没有概念。如果能用确定性进度条则更好，因为能够指示该操作大致完成的百分比，并能够帮助用户确定该操作是否值得继续等待。它们在视觉上的干扰都不大。 在这个示例中，Windows Update 在查找更新时，使用了一个模式非确定性进度条来指示进度。
无模式非确定性进度条 通过显示持续不断从左至右贯穿进度条的动画来指示操作正在进行中。	与模式进度条不同，用户可以在处理过程中同时进行其他的任务。这种进度条可以在上下文相关位置或状态栏中显示。 在这个示例中，Microsoft Outlook® 在填充联系人属性时使用了无模式的非确定性进度条。用户在其过程中可以继续使用该属性窗口。

量表

量表 指示与进度无关的百分比值。

该模式并不是进度条，但它是通过进度条控件来实现的。量表具有特别的外观以与真正的进度条进行区别。 在这个示例中，量表显示出已经使用的磁盘空间百分比。

设计规范

常规

• 应当在执行耗时操作时提供进度反馈。用户应当不需要猜测是否操作仍在进行。
• 明确指示真实进度。如果操作有进展，进度条则必须前进。如果预期的完成时间范围太广，可以考虑使用非线性比例来指示较久的时间进度。你不会希望用户误认为你的程序被锁死了。
• 明确指示没有进度的情况。如果操作没有进展的话，进度条则绝不能前进。你不会希望用户为了一个根本不会完成的操作而无限制地等待。
• 提供有用的进度细节。仅当用户能够依此做些什么的时候，才有必要提供额外的进度信息。确保文本的显示足够长以使用户能够阅读。

在这个示例中，用户可以看到传输速率。此处的低传输速率意味着需要使用高带宽的网络连接。

• 不要提供不必要的细节。普通用户并不关心正在执行的操作的细节。例如，安装程序的用户并不关心具体复制的是哪个文件或是正在注册的系统组件，因为他们对这些细节并没有预期。通常来说，具有良好标注的独立进度条提供的是重要信息，仅在用户可以有针对性操作时才提供额外的进度信息。提供用户不关心的细节只会使用户体验过于复杂和技术化。如果你需要在调试时获取较为细节的信息，则不要在发行版本中显示它。

正确：

在这个示例中，带标签的进度条恰到好处。

正确：

在这个示例中，Windows Explorer 正在复制用户选中的文件，因此显示正在复制的文件名是合理的。

错误：

在这个示例中，安装程序为用户提供了没有意义的信息。

• 提供有用的动画。如果做的好的话，动画能够帮助用户将操作形象化，从而提升用户体验。好的动画比单独的文本影响更大。例如，用于 Outlook 删除操作的进度条在文件可以被恢复时将回收站作为目标位置显示，当文件不能被恢复时则不显示回收站。

在这个示例中，没有回收站强调了文件会被彻底删除。仅用文本则无法如此有效地传达这类附加信息。

• 不要使用不必要的动画。动画可能会产生误导，因为它们通常在与实际任务分离的单独线程中运行，所以即使操作已经锁死仍然能够表示进度。而且，如果操作比预期的要慢，用户有时会认为一部分是动画的问题。因此，仅在有明确理由时才使用动画，不要仅仅为了试图去娱乐用户。
• 将动画在进度条上方居中显示。如果进度条有标签的话，应将动画放在标签上方。如果进度条右则有取消或停止按钮的话，在居中时应当将这些按钮考虑在内。
• 仅当操作所花的时间非常长（超过两分钟）、不频繁且非常重要时，才在完成时播放声音。如果在一个非常重要的操作进行过程中，用户很有可能会离开的话，那么声音效果可以提醒用户注意。其他情况下在完成时使用声音效果则会让用户感到厌烦。
• 不要强行获取输入焦点用于显示进度更新或完成信息。用户在等待时往往会切换至其他程序，不希望被打断。后台任务必须待在后台。
• 不要担心技术支持。因为进度条给出的反馈不够精确，而且转瞬即逝，所以进度条并不是提供技术支持信息的好机制。因此，如果操作可能失败（比如说安装程序），不要提供那些仅对技术支持有意义的额外进度信息。而是提供像日志文件之类的其他机制来记录技术支持信息。

错误：

在这个示例中，进度条显示的是用于技术支持的信息。

• 不要将完成的百分比或其他任何文本放在进度条上。这类文本不满足无障碍要求，而且与主题不兼容。

错误：

在这个示例中，进度条上的百分比文本不满足无障碍要求。

• 不要同时使用进度条和忙碌鼠标指针。只使用其中一个，不要同时一起使用。
• 不要使用垂直进度条。水平进度条更加自然且

Don't use vertical progress bars. Horizontal progress bars have a more natural mapping and better flow.

确定性进度条

• 应当将确定模式的进度条用于那些有确定时间界限的操作，即使其中大部分时间都无法进行精确预测时也同样如此。不确定模式的进度条虽然表示正在进行中，但无法提供任何其他信息。不要仅仅因为不够精确，就选用不确定模式的进度条。
• 明确指明进度阶段。进度条必须能够指明操作是位于开始、中间还是结束阶段。例如，进度条突然窜到 99% 完成，然后停住好一段时间，这是尤其没有意义且令人生厌的。这些情况下，进度条一开始应当设置为最多 33% 以表示操作仍然在开始阶段。
• 明确指明结束。如果操作没有完成，则不要让进度条前进到 100%。
• 如果能够准确计算的话，应当提供估计剩余时间。准确的估计剩余时间是有用的，而那些差得离谱或者剧烈变化的估计值是没用的。你可能需要在给出准确估计值之前先进行一些操作。这样的话，不要在初始阶段显示可能不准确的估计值。
• 不要重新启动进度。如果它重新启动（可能因为操作中的一个步骤完成），进度条就丧失了它的意义，因为用户无法了解整个操作什么时候会完成。相反，该操作中的各个步骤应当分别只占整个进程的一部分，整个进度条只完成一次。

错误：

在这个示例中，操作进入复制文件步骤，并为这个步骤重置了进度条。现在，用户完全不知道进度如何，还需要多少时间。

• 不要回退进度。与重新启动一样，如果进度条回退的话，就丧失了它的意义。始终单向增加进度。不过，你可以增加（也可以减少）估计剩余时间，因为进度的速率可能会变化。

非确定性进度条

• 仅为那些整体进度无法确定的操作使用非确定性进度条。将非确定性进度条用于那些没有确定时间边界或访问未知数量对象的操作。为基于时间的操作使用超时特性来提供边界。
• 一旦整体进度能够确定时，即转换为确定性进度条。例如，如果需要长达两秒以上的时间来确定对象数量的话，你可以在计算对象数量期间使用非确定性进度条，然后再转换为确定性进度条。
• 不要同时使用非确定性进度条及完成百分比或估计剩余时间。如果你能够提供这类信息的话，就应该改用确定性进度条。
• 不要同时使用非确定性进度条及动画。非确定性进度条本身就是有效的常规动画，你可以使用其中一种，但不要两种同时使用。

正确：

在这个示例中，只使用了动画以显示某操作正在进行中。

无模式进度条

• 如果在操作进行过程中，用户可以做一些实事的话，则应当提供无模式反馈。你可能需要禁用一些需要等待该操作完成的功能。
• 如果窗口具有地址栏，则将无模式进度显示在地址栏中。

在这个示例中，无模式进度显示在了地址栏中。

• 否则，如果窗口具有状态栏，则将无模式进度显示在状态栏。将一切相关文本也放在状态栏中，置于其左侧。

在这个示例中，无模式进度显示在了状态栏中。

模式进度条

• 将模式进度条放在进度页面或进度对话框中。
• 如果完成任务不止几秒钟，或者有可能永远无法完成的话，则应提供命令按钮用于中止操作。如果取消后能够回退到先前的状态（没有副作用）的话，则将按钮的标签写为“取消”，否则则写为“停止”以表示会已经完成的那部分操作的影响会持续存在。如果在某一时刻，不再可能将环境退回到先前的状态的话，你可以在操作进行的中途将按钮的标签从“取消”改为“停止”。将命令按钮与进度条垂直居中，不要顶端对齐。

正确：

在这个示例中，中止网络连接不会留下任何副作用，因此使用“取消”。

正确：

在这个示例中，中止复制不会删除那些已经复制好的文件，因此该命令按钮被标为“停止”。

错误：

在这个示例中，中止搜索不会留下任何副作用，因此该命令按钮应当标为“取消”。

剩余时间

对于确定性进度条：

• 使用下列时间格式。从下列格式中选择一个最大时间单位不是零的，然后当最大时间单位变成零时再更换为下一个格式。

对于进度条：

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

Time remaining: h hours, m minutes（剩余时间：h 小时 m 分）

Time remaining: m minutes, s seconds（剩余时间：m 分 s 秒）

Time remaining: s seconds（剩余时间：s 秒）

如果屏幕空间紧张：

h hrs, m mins remaining（剩余 h 小时 m 分）

m mins, s secs remaining（剩余 m 分 s 秒）

s seconds remaining（剩余 s 秒）

否则：

h hours, m minutes remaining（剩余 h 小时 m 分）

m minutes, s seconds remaining（剩余 m 分 s 秒）

s seconds remaining（剩余 s 秒）

对于标题栏：

hh:mm remaining（hh:mm 剩余）

mm:ss remaining（mm:ss 剩余）

0:ss remaining（0:ss 剩余）

该精简格式先显示最重要的信息，以使其不会在任务栏上被截断。

• 估算要准确，但不要给出错误的精度。如果最大单位是小时，那么应当给出分钟数（如果有意义的话）而不是秒数。

错误：

hh hours, mm minutes, ss seconds（hh 小时 mm 分 ss 秒）

• 保持估算值是最新的。至少每隔 5 秒更新一次估计剩余时间。
• 关注剩余时间，因为这是用户最关心的信息。仅当经过的总时间有意义的情况下（如该操作可能会重复进行）才给出经过的总时间。如果估计剩余时间和进度条一起使用的话，则不要提供完成百分比文本，因为该信息已经由进度条本身传达了。
• 使用正确的语法。当数值为 1 时使用单数形式。

错误：

1 minutes, 1 seconds

• 使用句子大写样式。

量表

• 仅将进度条用于表示进度。与进度无关时，应当使用量表来表示百分比。

推荐尺寸与间距

用于进度条的推荐尺寸与间距

• 始终使用推荐的进度条高度。
  • 例外：当父窗口不支持推荐高度时，你可以使用其他高度。
• 如果你希望进度条不那么显眼的时候，可以使用最小宽度。
• 不要使用宽度超过最大推荐宽度值的进度条。进度条无须填充所有可用的空间。
• 如果窗口比进度条的最大推荐宽度值大得多的话，则将进度条居中。

标签

进度条标签

• 通过静态文本控件，使用简明的标签，以说明正在进行的操作。该标签以动词起头（如“Copying（正在复制）”）并以省略号结尾。如果该操作具有多个步骤或需要处理多个对象的话，该标签可以动态改变。
• 不要分配唯一的访问键，因为该控件无法交互。
• 使用句子大写样式。
• 如果操作不是直接由用户引发的话，你可以额外使用一个标签来提供上下文信息并为打断用户的操作而致歉。

在这个示例中，用户被告知需要等待，因为用户并没有直接引发该操作。

• 将标签放置在进度条上方，并与进度条的左侧对齐。

进度条细节信息

• 在静态文本中提供细节信息，数据前使用以冒号结尾的标签。在细节信息文本后指明单位（秒、KB 等等）。

正确：

在这个示例中，正确地为细节信息使用了标签。

错误：

在这个示例中，没有为细节信息使用标签，这使得需要用户来确定其含义。

• 使用句子大写样式。
• 将细节信息放置于进度条下方，并将标签与进度条的左端对齐。
• 不要提供完成或剩余百分比信息，因为进度条自身已经传达了该信息。

取消按钮

• 如果取消后能够回退到先前的状态（没有副作用）的话，则将按钮的标签写为“取消”，否则则写为“停止”以表示会已经完成的那部分操作的影响会持续存在。
• 如果在某一时刻，不再可能将环境退回到先前的状态的话，你可以在操作进行的中途将按钮的标签从“取消”改为“停止”。

进度对话框标题

• 如果进度条是显示在模式对话框中的话，对话框标题应当是该程序或该操作的名称。不要将应当用于进度条标签的内容作为对话框标题。

正确：

在这个示例中，将任务名称用作对话框标题。

错误：

在这个示例中，对话框标题是对进度条标签的重复。应当改用程序名称。

• 如果进度条显示在模式对话框内，则应当对此标题为任务栏显示而优化，将具有辨别性的简要信息放在前面。例如：“66% 已完成。”