使用進度條，用戶可以了解一段冗長操作的具體進度。進度條可以顯示完成的近似百分比(確定進度條) ，也可以顯示操作正在進行(非確定進度條)。
可用性測試表明，用戶對于時長超過一秒的反饋是有明確感知的。相應的，對于超過兩秒的操作，應該考慮設置某種形式的進度反饋。

一個典型的進度條

何時使用該控件？

思考以下幾個問題：

• 操作能否在5秒以內(nèi)完成？如果是，使用加載指示器來代替進度條，因為對一個5秒內(nèi)的短暫操作使用進度條是讓人困惑的。如果某操作通常在5秒內(nèi)能完成，但有時會耗時更久，在開始時使用忙指針，時間若超過5秒則顯示進度條。
• 非確定進度條的目的是用來等待用戶完成任務的嗎？如果這樣，不要使用進度條。進度條是用來指示電腦的進程，而不是用戶的進程。
• 操作是否是一個非常冗長(超過兩分鐘)的后臺任務，用戶對完成的興趣大于了解其進度？ 如果是的話，使用通知來代替。在這種情況下，用戶同時會執(zhí)行其他任務，并且不監(jiān)視進度。使用通知能讓用戶在不中斷該進程的情況下執(zhí)行其他任務。 這種冗長操作有打印、備份、系統(tǒng)掃描和批量數(shù)據(jù)傳輸或轉(zhuǎn)換等。
• 當操作完成后，用戶是否可以重播結(jié)果？如果這樣，使用滑塊代替。這種操作的例子包括視頻和音頻錄制和播放。
  
  在該例中，滑塊能播放聲音同時指示用戶播放進度?；瑝K控件允許用戶重放結(jié)果

設計思路

在一段漫長的操作進行過程中，用戶需要了解操作的大致情況，還需要知道:

• 操作進程已經(jīng)開始。
• 這項進程正在進行中，并且最終將會完成(也就是說進程沒有被鎖住)。
• 已完成進程的大致百分比(以及剩余的百分比)。
• 如果不值得繼續(xù)等待，用戶是否應該取消操作。
• 用戶該不該繼續(xù)等待，或者在進程結(jié)束時還有沒有什么其他需要執(zhí)行的操作。

即使完成進程需要的時間無法準確預測，對于需要一定時間的操作，請使用確定的進度條。不確定進度條表示進程正在進行，但不能顯示其他信息。不要僅僅因為可能缺乏準確性就選擇使用不確定進度條。

例如，假設一個操作需要五個步驟，并且每個步驟都需要一定時間，但是每個步驟需要的時間量可能相差很大。 在這種情況下，使用一個確定的進度條，并按照每個步驟通常所需的時間的比例，顯示每個步驟完成的時間。只有當確定的進度條會導致用戶錯誤地認為操作已鎖定時，才使用不確定進度條。

只需要明確一點：

確保為冗長的操作提供進度反饋，并清楚地傳達上述用戶所需要知道的信息。盡可能使用確定進度條。

應用范例

確定進度條

模態(tài)確定進度條：從左向右填充代表進度的色塊，并在操作完成后填充完全。
由于此狀態(tài)反饋是模態(tài)的，用戶在進程完成之前是不能在窗口中執(zhí)行其他任務（包括模態(tài)對話框中進度條的父任務）的。

該例中，進度條給出了計算進程的反饋

該例中，用戶可以單擊“停止”以停止操作并使進程停留在當前狀態(tài)。

示例

模態(tài)雙重確定進度條：用來指示多步操作的進程。第一個進度條指示當前操作進程，第二個進度條指示整體完成進度。
因為第一個進度條提供的附加信息很少，而且可能會讓人分心，所以不推薦使用這種模式。 相反，盡量讓操作中的所有步驟共享一個進度條，這樣單個進度條就可以一次完成。

注意??該狀態(tài)通常沒必要，應盡量避免

非模態(tài)確定進度條：從左向右填充代表進度的色塊，并在操作完成后填充完全。
與模態(tài)進度條不同，用戶可以在該操作進行時執(zhí)行其他任務。這些進度條可以在上下文中或狀態(tài)欄中顯示。

在這個例子中，Windows Internet explorer / Windows Internet Explorer 在狀態(tài)欄上顯示加載網(wǎng)頁的進度。用戶可以在加載頁面時執(zhí)行其他任務。

非確定進度條

模態(tài)非確定進度條：
通過顯示一個從左到右不斷循環(huán)的條狀的動畫來表示操作正在進行。
僅用于總體進度無法確定的操作，因此沒有完成的概念。確定的進度條更好一些，因為它們能表示已完成操作的大致百分比，并幫助用戶確定是否值得繼續(xù)等待該操作。它們在視覺上也更不容易分散注意力。

在此示例中，Windows Update使用了一個標準非確定進度條來表明程序正在更新中

非模態(tài)的非確定進度條：
通過顯示一個從左到右不斷循環(huán)的條狀的動畫來表示操作正在進行。
與模態(tài)進度條不同，用戶可以在非模態(tài)進度條循環(huán)的同時進行其他操作。這種進度條可以在上下文和狀態(tài)欄中展示。

在此示例中，microsoft outlook 在填寫聯(lián)系人屬性時使用了非模態(tài)不確定進度條。當進度條進行時，用戶可以繼續(xù)使用屬性窗口進行其他操作。

計量器：
僅僅表示一個百分比，和進程無關(guān)。
這個模式不是進度條，但是它是使用進度條控件來展現(xiàn)的。計量器在外觀上和真正的進度條有明顯的區(qū)別。

在該例中，計量器表示已用的硬盤容量百分比

設計指南

通用原則

• 為冗長操作提供進度反饋。永遠不要讓用戶自己去猜進程是否完成。

• 明確標明實際進程。如果進程在進行中，則進度條必須前進。如果預期完成時間會很長，可以考慮使用非線性尺度來表示較長時間的進度。不要讓用戶在進程進行的情況下，認為程序已經(jīng)鎖定。

• 明確表明進程的停滯。如果進程沒有進行，進度條就應該停止前進。您不會希望用戶無限地等待一個永遠無法完成的進程。

• 提供有用的進程信息。在用戶能進行一定對應操作的情況下，展示額外的進程信息。確保展示文字足夠長以便用戶能夠理解和閱讀。
  

  在該例中，用戶可以看到傳輸速率。過低的傳輸速率有提示用戶使用更高帶寬的網(wǎng)絡連接方式的作用

• 不要提供無效信息。典型用戶并不關(guān)心執(zhí)行中操作的具體信息。例如，安裝程序的用戶不關(guān)心正在復制的具體文件或正在注冊的系統(tǒng)組件，因為他們對這些細節(jié)沒有興趣。通常，一個好的進度條本身就提供了足夠的信息，因此只有當用戶能夠?qū)Ω嗟母郊有畔⒓右岳脮r，才提供這些附加的進度信息。展示用戶不關(guān)心的細節(jié)會使用戶體驗過于復雜和技術(shù)化。如果必須有更詳細的信息以供調(diào)試使用，請不要在發(fā)布版本中顯示給用戶。
  

  正確示例：帶標簽的進度條是滿足需求的
  
  
  正確示例：該例中，Windows Explore正在復制用戶選擇的一些文件，所以顯示正在復制中的文件名是有意義的
  
  
  錯誤示例：安裝程序展示了用戶不需要的細節(jié)信息

• 提供有效的動畫效果。如果設計得當，動畫能為用戶視覺化操作進程，提升用戶體驗。好的動畫能比純文字表達更多的含義。例如，如果文件可以恢復，Outlook Delete 命令的進度欄將顯示目標文件的回收站，但如果文件無法恢復，則不顯示回收站。
  

  在該例中，沒有繪制回收站強化了文件被永久刪除的事實。 這些額外的信息僅通過文本將不能如此有效地傳達。

• 不要使用不必要的動畫效果。動畫可能會產(chǎn)生誤導，因為它們通常在與實際任務分開的線程中運行，因此即使操作已經(jīng)鎖定，動畫也可能提示進程進行中。 此外，如果操作比預期的慢，用戶有時會認為動畫是原因的一部分。 因此，只有在有明確理由的情況下才使用動畫，不要試圖用它們來取悅用戶。

• 將動畫置于進度條上方居中對齊。如果有動畫，將它放在進度條標簽的上方。如果進度條右側(cè)有“取消”或“停止”按鈕，請在確定中心位置時，包含按鈕的長度及位置。

• 在不頻繁、很重要并且進度完成時間很長（超過兩分鐘）的進程結(jié)束時，播放完成音效。如果用戶在很重要的進程進行過程中走開了，音效能夠有效拉回用戶的注意力。相反如果不是具有這些特征的進程，在結(jié)束時播放音效就會讓用戶分散注意力了。

• 不要為了顯示進度更新或完成而強制獲取輸入焦點。 用戶經(jīng)常在等待時切換到其他程序，并且不希望被打斷。后臺任務必須保持在后臺。

• 不要過多考慮技術(shù)支持的問題。由于進度條提供的反饋不一定準確，而且是暫時性的，因此進度條不是一個提供技術(shù)支持信息的好控件。相應的，如果操作可能失敗(例如安裝程序) ，不要提供僅對技術(shù)支持有用的額外進度信息。 相反，提供一種替代機制，如日志文件，來記錄技術(shù)支持信息。

錯誤示例：進度條展示了用于技術(shù)支持的細節(jié)信息

• 不要將完成百分比或其他文字信息放在進度條上。這樣的文本是無法訪問的，并且與使用的主題不兼容。
  
  錯誤示例
• 不要將進度條和忙指針放在一起。這兩個只能擇一使用，不要同時使用。
• 不要使用豎向進度條。水平進度條有更自然的映射和更好的流程。

確定進度條

• 針對需要有限時間的進程，使用確定進度條，即便需要的時間不能精確預測。非確定進度條只能表明進程正在進行，并不能給出更多的信息。不要僅僅因為時間預計可能不準確就使用非確定進度條。
• 明確顯示進程的進行階段。進度條必須能夠明確展示進程是剛開始、在進行中段或者快要結(jié)束。例如，一個快速加載到99%、但在最后位置又停滯很長時間的進度條并沒有傳遞出有用的信息，并且讓人煩躁。在這種情況下，進度條應該設置在大約33%的位置，以表明進程還處于開始階段。
• 在能夠準確預估的情況下，提供進程剩余時間。精確的剩余時間估計是有價值的，但是顯示偏離標準的估計或者會顯著反彈的估計沒有任何價值。程序可能需要執(zhí)行一些操作，然后才能給出準確的估計。 如果是這樣的話，不要在初始階段顯示可能不準確的剩余時間預估。
• 不要重啟進度條進程。如果進度條重新啟動(可能是因為操作中的一個步驟已經(jīng)完成) ，它將失去其意義，因為用戶無法知道操作將何時完成。相反，讓操作中的所有步驟共享一部分進度，并讓進度條一次性進入完成狀態(tài)。
  
  錯誤示例：在此示例中，操作從解壓文件轉(zhuǎn)移到了復制文件的步驟，并重置了該步驟的進度欄。這導致用戶不知道已經(jīng)取得了多少進展，也不知道還剩下多少時間。
• 不要備份進度條。與重新啟動時一樣，如果備份，進度條將失去其意義。進度條的進度只能一直增加。 但是，剩余時間的估計是可以增加(或減少)的，因為進程的速度可能會變化。

非確定進度條

• 只對總體進度無法確定的操作使用非確定進度條。對于需要無限時間或訪問未知數(shù)量的對象的操作，使用不確定的進度條。使用超時提示為基于時間的操作提供界限。
• 確定總體進度后，轉(zhuǎn)換為確定進度條進行顯示。 例如，如果確定對象數(shù)量所需的時間遠遠超過兩秒，則可以在計算對象的時候使用非確定進度條，計算完畢后轉(zhuǎn)換為確定進度條。
• 非確定進度條不要帶有完成百分比說明和剩余時間預估。如果能夠提供這些信息，就直接使用確定進度條。
• 非確定進度條不要附帶圖標動畫效果。不確定的進度條實際上就是一種通用動畫，因此它與動畫效果擇一使用即可，不能兩個同時使用。
  
  正確示例：僅使用動畫效果標明操作正在進行

非模態(tài)進度條

• 如果允許用戶在等待進程時進行其他有意義的操作，使用非模態(tài)進度條作為等待反饋。您可能需要禁用一些需要進程完成之后才能生效的功能。
• 如果當前窗口有地址欄，在地址欄中展示非模態(tài)進度條。
  
  示例
• 另外，如果當前窗口有狀態(tài)欄，則將非模態(tài)進度條展示在狀態(tài)欄中。在狀態(tài)欄中將對應的文字說明放在非模態(tài)進度條左邊。
  
  示例

模態(tài)進度條

• 在進度頁或進度對話框上放置模態(tài)進度條。
• 如果任務需要幾秒以上才能完成，甚至永遠無法完成，請設置一個命令按鈕以停止操作。如果按下按鈕能使程序恢復到之前的狀態(tài)(不產(chǎn)生其他的影響) ，則為按鈕文字設置為“取消” ；否則的話，為按鈕文字應該為“停止”，以表明它保留了部分已經(jīng)完成的操作。如果在操作過程中，程序無法再恢復到以前的狀態(tài)，可以在這個轉(zhuǎn)變的節(jié)點時刻將按鈕標簽從 Cancel/取消 更改為 Stop/停止。進度條和命令按鈕垂直居中對齊，而不是頂對齊。
  
  正確示例：暫停網(wǎng)絡連接不會產(chǎn)生什么影響，所以使用“取消”按鈕
  
  
  正確示例：在該例中，停止復制進程也會留下已經(jīng)復制好的文件，所以使用“停止”按鈕來表明這一點
  
  
  錯誤示例：停止搜索并不會產(chǎn)生什么影響效果，所以應該使用“取消”按鈕

剩余時間

對于確定進度條：

• 使用以下時間格式。當最大時間單位數(shù)量不為零時，使用第一個時間格式；變?yōu)榱銜r，使用下一個時間格式。
  對進度條而言：
  如果相關(guān)信息以帶冒號句式顯示：
  剩余時間：xx小時，xx分鐘
  剩余時間：xx分鐘，xx秒
  剩余時間：xx秒

如果需要節(jié)約屏幕空間：
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秒需要更新一次。

• 重點放在剩余時間的顯示上，因為這是用戶最關(guān)心的信息。只有在運行時間有意義的情況下(例如可能重復執(zhí)行任務時)才給出總的已運行時間。如果剩余的時間估計與一個進度條相關(guān)聯(lián)，則不要顯示完整的百分比文本，因為該信息是由進度條本身傳遞的。

• 保證語法正確。數(shù)量為單數(shù)時，單位也要使用單數(shù)形式。
  錯誤示例： 1 minutes，1 seconds

• 使用句式大小寫規(guī)則。

進度條的顏色

• 紅色或黃色的進度條只表示進度狀態(tài)，而不是任務的最終結(jié)果。紅色或黃色的進度條表示用戶需要采取一些行動來完成進程。如果情況不可更改，將進度條保持綠色并顯示錯誤消息。

• 當出現(xiàn)阻礙進程的問題，并且這個問題用戶可以進行修復的時候，將進度條變?yōu)榧t色。顯示解釋問題和建議解決方案的文字信息。

• 當用戶已暫停任務，或者存在阻礙進度但進度仍在進行的情況(例如，網(wǎng)絡連接性差)時，將進度條變?yōu)辄S色。 如果用戶已經(jīng)暫停，則將 Pause 暫停按鈕標簽更改為 Resume 恢復。如果進程受阻，顯示解釋問題和建議解決方案的文字信息。

計量器

• 進度條只用于顯示進度。計量器用來表示和進程無關(guān)的百分比信息。

建議尺寸和間距

進度條的建議尺寸和間距

• 使用推薦的進度條高度。（例外：在父窗口不支持建議進度條高度的情況下，使用其他的可行高度。）
• 如果希望進度條不那么顯眼，使用最小進度條寬度。
• 進度條寬度不要超過建議的最長尺寸。進度條不需要占滿可用的空間。
• 如果窗口寬度遠遠超過建議的最大寬度，則將進度條水平居中。

標簽

進度條標簽

• 使用靜態(tài)文本的簡潔標簽文字來說明正在執(zhí)行的操作。以動詞(例如復制)開始標簽，以省略號結(jié)束。如果操作具有多個步驟或處理多個對象，則此標簽文字可能會動態(tài)更改。

• 不要為標簽設置存取鍵，因為該控件是不可交互的。

• 使用句式大小寫規(guī)則。

• 如果該進程不是由用戶直接發(fā)起的，可以使用附加的標簽文字說明背景情況并為打擾到用戶致歉。使用“請等待”文字開始這個附加標簽。這個標簽文字在進程中不要變化。

  
  
  在該例中，因為用戶沒有直接開啟該進程，所以要被告知“請等待...”

• 標簽文字放在進度條上方并與進度條左對齊。

進度條細節(jié)

• 以靜態(tài)文本提供詳細信息，數(shù)據(jù)前面有一個以冒號結(jié)尾的標簽。 在詳細信息文本后指定單位(秒、千字節(jié)等)。

  
  
  正確示例
  
  
  錯誤示例：細節(jié)信息沒有標簽文字進行說明，用戶需要猜測它們的含義

• 使用句式大小寫規(guī)則。

• 細節(jié)信息放在進度條下方并與進度條左對齊。

• 不要給出已完成或剩余進度的百分比，該信息是由進度條本身傳遞的。

取消按鈕

• 如果按下按鈕程序會恢復到之前的狀態(tài)，并且沒有其他影響，按鈕標簽應該為“取消”。否則標簽應該為“停止”，表示除了已完成的部分外，進程沒有對程序產(chǎn)生影響。
• 如果在操作過程中，程序無法再恢復到以前的狀態(tài)，您可以在這個轉(zhuǎn)變的節(jié)點時刻將按鈕標簽從 Cancel取消 變?yōu)?Stop停止。

進程對話框標題

• 如果進度條出現(xiàn)在模態(tài)對話框中，對話框的標題應該是該操作或者進程的名稱。不要使用進度條的標簽來命名對話框。

  
  
  正確示例：對話框標題是任務名稱

錯誤示例：對話框的標題是進度條標簽文字的重述。應該使用程序名來描述。

• 如果進度條出現(xiàn)在非模態(tài)對話框中，通過放置并簡化最明顯的信息來優(yōu)化顯示任務欄上的標題文字。例如：“已完成66%”