進度列

注意

此設計指南已針對 Windows 7 建立,但尚未更新較新版本的 Windows。 大部分指引仍適用原則,但簡報和範例不會反映我們 目前的設計指導方針

透過進度列,使用者可以遵循冗長的作業進度。 進度列可能會顯示大約完成百分比(確定),或表示作業正在進行中(不確定)。

可用性研究表明,使用者知道回應時間超過一秒。 因此,您應該考慮需要兩秒或更長時間才能完成的作業,以冗長且需要某種類型的進度意見反應。

一般進度列的螢幕快照

一般進度列。

注意

版面配置 相關的指導方針會顯示在個別的文章中。

這是正確的控制項嗎?

若要決定,請考慮下列問題:

  • 作業會在大約五秒左右完成嗎? 如果是,請改用 活動指標 ,因為顯示這麼短持續時間的進度列會分散注意力。 如果作業通常需要五秒或更少時間,但有時需要更多時間,請從忙碌的指標開始,並在五秒後轉換成進度列。

  • 用來等候使用者完成工作的不確定進度列嗎? 如果是,請勿使用進度列。 進度列適用於計算機進度,而非用戶進度。

  • 不確定的進度列是否與動畫結合? 如果是,請改用動畫。 不確定的進度列實際上是泛型動畫,而且不會為動畫新增任何值。

  • 作業是否為長時間(超過兩分鐘)的背景工作,哪些使用者對完成比進度更感興趣? 如果是,請改用 通知 。 在此情況下,用戶會同時執行其他工作,且不會監視進度。 使用通知可讓使用者執行其他工作,而不會中斷。 這類冗長的作業範例包括列印、備份、系統掃描,以及大量數據傳輸或轉換。

  • 作業完成時,使用者能否重新執行結果? 如果是,請改用滑桿。 這類作業的範例包括視訊和音訊錄製和播放。

    媒體播放機和滑桿的螢幕快照

    在此範例中,滑桿用來指出播放音效時的進度。 這麼做可讓使用者稍後重新執行結果。

設計概念

在冗長的作業期間,使用者需要一般概念作業正在執行的作業。 他們也需要知道:

  • 已啟動冗長的作業。
  • 正在取得進展,作業最終將完成(因此尚未鎖定)。
  • 已完成作業的近似百分比(因此剩餘的百分比)。
  • 如果作業不值得繼續等候,則應該取消作業。
  • 如果它們應該在作業完成時繼續等候或執行其他動作。

針對需要限定時間量的作業使用確定進度列, 即使無法準確預測該時間量也一樣。 不確定的進度列顯示進度正在進行中,但沒有提供其他資訊。 不要只根據可能缺乏正確性來選擇不確定的進度列。

例如,假設作業需要五個步驟,而每個步驟都需要限定的時間量,但每個步驟的時間量可能會有很大的差異。 在此情況下,請使用確定的進度列,並在每個步驟完成時顯示進度,與每個步驟通常花費的時間量成正比。 只有在確定進度列會導致使用者認為作業已鎖定不正確時,才使用不確定的進度列。

如果你只做一件事...

請確定您為冗長的作業提供進度意見反應,並清楚傳達上述資訊。 盡可能使用確定進度列。

使用模式

進度列有數種使用模式:

確定進度列

標籤
強制回應判斷進度列
藉由從左到右填滿作業,並在作業完成時完全填滿,以指出作業的進度。
由於此意見反應為 強制回應,因此使用者無法在窗口執行其他工作(如果顯示在強制回應對話框中,則為其父系),直到作業完成為止。
強制回應視窗中進度列的螢幕快照
在此範例中,進度列會在設定期間提供意見反應。
使用 [取消] 或 [停止] 按鈕來決定進度列
允許使用者停止作業,可能是因為作業花費的時間太長或不值得等候。
進度列的螢幕快照與 [停止] 按鈕
在此範例中,使用者可以按兩下 [停止] 來停止作業,並讓環境保持其目前狀態。
使用 [取消] 或 [停止] 按鈕和動畫來決定進度列
允許使用者停止作業,並包含動畫,以協助用戶可視化作業的效果。
使用動畫顯示進度列的螢幕快照
在此範例中,使用者可以按兩下 [停止] 來停止作業,並讓環境保持其目前狀態。
強制回應決定雙進度列
藉由顯示第一個進度列中目前步驟的進度,以及第二列的整體進度,指出多步驟作業的進度。
因為第一個進度列提供很少的額外資訊,而且可能會相當分散注意力,因此不建議使用此模式。 相反地,讓作業中的所有步驟共用一部分的進度,並讓單一進度列移至完成一次。
目前和整體進度列的螢幕快照
在此範例中,第一個進度列會顯示目前步驟的進度,而第二個進度列會顯示整體進度。
注意: 此模式通常是不必要的,應該避免。
無模式判斷進度列
藉由從左到右填滿作業,並在作業完成時完全填滿,以指出作業的進度。
不同於強制回應進度列,用戶可以在作業進行時執行其他工作。 這些進度列可以在內容中或狀態列上顯示。
狀態列上進度列的螢幕快照
在此範例中,Windows Internet ExplorerWindows Internet Explorer 會顯示在狀態欄上載入網頁的進度。 用戶可以在載入頁面時執行其他工作。

不確定進度列

進度列類型 描述
強制回應不確定進度列
藉由顯示從左至右連續迴圈橫條的動畫,表示作業正在進行中。
僅用於無法判斷整體進度的作業,因此沒有完整性的概念。 確定進度列比較好,因為它們表示已完成作業的近似百分比,並協助用戶判斷作業是否值得繼續等候。 它們在視覺上也不那麼分散注意力。
強制回應、不確定進度列的螢幕快照
在此範例中,Windows Update 會使用強制回應不確定進度列來指出進度,同時尋找更新。
無模式不確定進度列
藉由顯示從左至右連續迴圈橫條的動畫,表示作業正在進行中。
不同於強制回應進度列,用戶可以在處理進行時執行其他工作。 這些進度列可以在內容中或狀態列上顯示。
Outlook 視窗中精簡進度列的螢幕快照
在此範例中,Microsoft Outlook 會在填入聯繫人屬性時,使用無模式不確定進度列。 當這項工作正在進行時,用戶可以繼續使用屬性視窗。

計量

類型 描述
計量
指出與進度無關的百分比。
此模式不是進度列,而是使用進度列控件來實作。 計量有明顯的外觀,以區別它們與真正的進度列。
顯示可用磁碟空間的計量螢幕快照
在此範例中,計量會顯示使用的磁碟空間百分比。

指導方針

一般

  • 執行冗長的作業時提供進度意見反應。 使用者不應該猜測是否正在進行進度。

  • 清楚指出實際進度。 如果進行進度,進度列必須前進。 如果預期的完成時間範圍很大,請考慮使用非線性小數字數來指出較長時間的進度。 您不希望使用者得出結論,您的程式在未鎖定時已鎖定。

  • 清楚地指出缺乏進展。 如果未進行任何進度,則進度列不得前進。 您不希望使用者無限期地等候永遠不會完成的作業。

  • 提供實用的進度詳細數據。 提供其他進度資訊,但前提是使用者可以執行某些動作。 請確定文字的顯示時間夠長,讓用戶能夠讀取文字。

    顯示傳輸速率的進度列螢幕快照

    在此範例中,使用者可以看到傳輸速率。 這裡的低傳輸速率建議使用高頻寬網路連線的需求。

  • 請勿提供不必要的詳細數據。 一般而言,使用者並不關心所執行作業的詳細數據。 例如,安裝程式的使用者並不在意要複製的特定檔案或系統元件正在註冊,因為他們對這些詳細數據沒有期望。 一般而言,單獨加上標籤進度列會提供足夠的資訊,因此只有在使用者可以執行某些動作時,才能提供額外的進度資訊。 提供使用者不關心的詳細數據,可讓用戶體驗過於複雜和技術。 如果您需要更詳細的偵錯資訊,請勿在發行組建中顯示。

    正確

    安裝進度的螢幕快照

    在此範例中,加上標籤進度列就是所有必要專案。

    正確

    顯示傳輸速率的進度列螢幕快照

    在此範例中,Windows 檔案總管正在複製用戶選取的檔案,因此顯示所複製的檔名是有意義的。

    不正確:

    註冊進度的螢幕快照

    在此範例中,安裝程式會提供對使用者毫無意義的詳細數據。

  • 提供實用的動畫。 如果順利完成,動畫可藉由協助用戶可視化作業來改善用戶體驗。 良好的動畫比單靠文字更有影響。 例如,如果可以復原檔案,Outlook Delete 命令的進度列會顯示目的地的回收站,但如果無法復原檔案,則不會復原回收站。

    刪除進度的螢幕快照

    在此範例中,缺少回收站會強化檔案的永久刪除。 這項額外的資訊不會單獨使用文字來有效地傳達。

  • 請勿使用不必要的動畫。 動畫可能會產生誤導,因為它們通常會在與實際工作不同的線程中執行,因此即使作業已鎖定,也可以建議進度。 此外,如果作業速度比預期慢,用戶有時會假設動畫是原因的一部分。 因此,只有在有明確的理由時,才使用動畫;不要用他們來嘗試娛樂使用者。

  • 將動畫置中置中於進度列上。 如果您有任何專案,請將動畫放在進度列標籤上方。 如果進度列右邊有 [取消] 或 [停止] 按鈕,請在判斷中心時包含按鈕。

  • 只有在作業非常冗長(超過兩分鐘)、不頻繁且重要時,才能在作業完成時發揮音效。 如果用戶在處理時可能會離開重要作業,則音效會還原使用者的注意力。 在其他情況下,在完成時使用音效將是令人分心的煩惱。

  • 請勿竊取輸入焦點以顯示進度更新或完成。 使用者通常會在等候時切換到其他程式,且不想中斷。 背景工作必須留在背景中。

  • 別擔心技術支援。 由於進度列所提供的意見反應不一定正確且短暫,因此進度列不是提供技術支持資訊的良好機制。 因此,如果作業可能會失敗(如同安裝程序一樣),請勿提供僅對技術支援有用的其他進度資訊。 相反地,請提供替代機制,例如記錄檔來記錄技術支持資訊。

    不正確:

    顯示伺服器名稱的進度列螢幕快照

    在此範例中,進度列會顯示適用於技術支援的詳細數據。

  • 請勿將百分比完成或任何其他文字放在進度列上。 這類文字無法存取,且與使用主題不相容。

    不正確:

    進度列的螢幕快照,其中含有列上的文字

    在此範例中,無法存取進度列上的百分比文字。

  • 請勿將進度列與忙碌指標結合。 使用一個或另一個,但不能同時使用兩者。

  • 請勿使用垂直進度列。 水平進度列具有更自然的對應和更好的流程。

確定進度列

  • 針對需要限定時間量的作業使用確定進度列, 即使無法準確預測該時間量也一樣。 不確定的進度列顯示進度正在進行中,但沒有提供其他資訊。 不要只根據可能缺乏正確性來選擇不確定的進度列。

  • 清楚指出進度階段。 進度列必須能夠指出作業是否在作業的開頭、中間或結尾。 例如,立即拍攝到 99% 完成的進度列,然後留在那裡很長一段時間特別不知情和惱人。 在這些情況下,應該將進度列一開始設定為最多 33%,表示作業仍在開始階段。

  • 清楚指出完成。 除非作業已完成,否則請勿讓進度列移至 100%。

  • 如果可以正確執行,請提供剩餘時間的估計值。 正確時間剩餘的估計相當實用,但估計偏離標記或反彈的方式明顯沒有説明。 您可能需要執行一些處理,才能提供精確的估計值。 若是如此,請勿在此初始期間顯示可能不正確的估計值。

  • 請勿重新啟動進度。 進度列會在重新啟動時遺失其值(可能是因為作業中的步驟完成),因為使用者無法知道作業何時完成。 相反地,讓作業中的所有步驟共用一部分的進度,並讓進度列移至完成一次。

    不正確:

    重新啟動進度列的螢幕快照

    在此範例中,作業已移至複製檔案的步驟,並重設該步驟的進度列。 現在使用者不知道已經取得多少進度,或還剩下多少時間。

  • 請勿備份進度。 如同重新啟動,進度列會在備份時失去其值。 一律以單調方式增加進度。 不過,您可以有一段時間的剩餘估計值會增加(以及減少),因為進度速度可能會有所不同。

不確定進度列

  • 只針對無法判斷整體進度的作業使用不確定進度列。 針對需要未係結時間或存取未知物件數目的作業,使用不確定的進度列。 使用逾時來為以時間為基礎的作業提供界限。

  • 一旦可以判斷整體進度,請轉換成確定進度列。 例如,如果判斷物件數目需要相當長兩秒的時間,您可以在計算物件時使用不確定的進度列,然後轉換成確定的進度列。

  • 請勿將不確定的進度列與完成百分比或剩餘時間估計結合。 如果您可以提供這項資訊,請改用確定的進度列。

  • 請勿將不確定進度列與動畫結合。 不確定的進度列實際上是泛型動畫,因此您應該使用一個或另一個,但絕對不要同時使用這兩個動畫。

    正確

    偵測伺服器進度的螢幕快照

    在此範例中,只會使用動畫來顯示作業正在進行中。

無模式進度列

  • 如果使用者可以在作業進行時執行具生產力的工作,請提供無模式的意見反應。 您可能需要停用需要作業完成的功能子集。

  • 如果視窗有網址列,請在網址列中顯示無模式進度。

    進度列作為網址列一部分的螢幕快照

    在此範例中,無模式進度會顯示在網址列中。

  • 否則, 如果視窗具有狀態列,請在狀態列中顯示無模式進度。 將任何對應的文字放在狀態列中的左邊。

    進度列作為狀態列一部分的螢幕快照

    在此範例中,狀態列會顯示無模式進度。

  • 在進度頁面或進度對話框中放置強制響應進度列。

  • 提供命令按鈕,如果作業需要幾秒鐘的時間才能完成,或有可能永遠不會完成,請提供命令按鈕來停止作業。 將 [取消] 按鈕標記為 [取消],如果取消會將環境傳回其先前的狀態(不留下任何副作用),否則將按鈕標示為 [停止],表示它讓部分完成的作業保持不變。 如果某個時間點無法將環境傳回其先前的狀態,您可以將按鈕標籤從 [取消] 變更為作業中間的 [停止]。 以進度列垂直置中命令按鈕,而不是對齊其頂端。

    正確

    等候網路進度的螢幕快照

    在此範例中,停止網路連線沒有任何副作用,因此會使用 Cancel。

    正確

    進度列的螢幕快照,其中顯示左側的複製時間

    在此範例中,停止複製會留下任何複製的檔案,因此命令按鈕會標示為 [停止]。

    不正確:

    搜尋進度列和停止按鈕的螢幕快照

    在此範例中,停止搜尋不會造成副作用,因此命令按鈕應該標示為 [取消]。

剩餘時間

針對確定進度列:

  • 使用下列時間格式。 從下列第一個格式開始,其中最大的時間單位不是零,然後在最大時間單位變成零時變更為下一個格式。

    針對進度列:

    如果相關資訊以冒號格式顯示:

    剩餘時間:h 小時、m 分鐘

    剩餘時間:m 分鐘、秒

    剩餘時間:秒

    如果螢幕空間處於進階階段:

    hrs, m 分鐘剩餘

    m 分鐘,秒剩餘

    剩餘秒數

    否則:

    h 小時,剩餘 m 分鐘

    m 分鐘,秒剩餘

    剩餘秒數

    針對標題列:

    hh:mm remaining

    mm:ss 剩餘

    剩餘 0:ss

    此精簡格式會先顯示最重要的資訊,使其不會在任務欄上截斷。

  • 讓估計正確,但不要提供誤判精確度。 如果最大單位是小時,請提供分鐘(如果有意義),但不是秒數。

    不正確:

    hh 小時,mm 分鐘,秒

  • 將估計值保持在最新狀態。 剩餘的更新時間估計至少每 5 秒一次。

  • 專注於剩餘 的時間,因為這是使用者最關心的資訊。 只有在有一些耗用時間很有説明的案例時,才提供耗用時間總計的時間(例如工作可能重複的時間)。 如果剩餘的估計時間與進度列相關聯,則不會有完整文字百分比,因為進度列本身會傳達該資訊。

  • 文法正確。 當數位為一時,請使用單一單位。

    不正確:

    1 分 1 秒

  • 使用句子樣子大寫。

進度列色彩

  • 僅使用紅色或黃色進度列來指出進度狀態,而不是工作的最終結果。 紅色或黃色進度列表示用戶必須採取一些動作來完成工作。 如果無法復原條件,請將進度列保留為綠色,並顯示錯誤訊息。
  • 當用戶可復原的條件導致無法進行進一步的進度時,將進度列變成紅色。 顯示訊息來說明問題並建議解決方案。
  • 將進度列變成黃色,表示使用者已暫停工作,或有阻礙進度但進度 仍在進行的條件(例如,網路連線能力不佳)。 如果使用者已暫停,請將 [暫停] 按鈕標籤變更為 [繼續]。 如果進度受到阻礙,請顯示訊息來說明問題並建議解決方案。

計量

  • 只針對進度使用進度列。 使用計量來指出與進度無關的百分比。

顯示進度列大小和間距的圖表

建議針對進度列重設大小和間距。

  • 一律使用建議的進度列高度。
    • 例外狀況: 如果父視窗不支持建議的高度,您可以使用不同的高度。
  • 如果您想要讓進度列不顯眼,請使用最小寬度。
  • 不要使用寬度超過建議的最大值。 進度列不需要填滿可用空間。
  • 如果視窗比建議的寬度上限要寬得多,請水準置中進度列。

標籤

進度列標籤

  • 使用簡潔的標籤搭配靜態文字控制件,以指出作業正在執行的動作。 使用動詞啟動標籤(例如複製),並以省略號結尾。 如果作業有多個步驟或正在處理多個物件,此標籤可能會動態變更。

  • 請勿指派唯 一的存取密鑰 ,因為控件不是互動式的。

  • 使用 句子樣子大寫

  • 如果作業不是由使用者直接起始,您可以包含額外的標籤來提供內容,並為中斷道歉。 使用片語啟動此額外的標籤,請稍候。 此標籤不應該在作業期間變更。

    具有標籤進度列螢幕快照

    在此範例中,系統會要求使用者等候,因為使用者未直接起始作業。

  • 將標籤放置在進度列上方,並將標籤與進度列的左邊緣對齊。

進度列詳細數據

  • 以靜態文字提供詳細數據,在數據前面加上以冒號結尾的標籤。 在詳細數據文字後面指定單位(秒、KB 等等)。

    正確

    顯示傳輸速率的進度列螢幕快照

    在此範例中,詳細數據會正確標示。

    不正確:

    沒有適當標籤的進度列螢幕快照

    在此範例中,詳細數據不會加上標籤,因此要求使用者判斷其意義。

  • 使用 句子樣子大寫

  • 將詳細數據放置在進度列下方,並將標籤與進度列的左邊緣對齊。

  • 請勿提供已完成或剩餘的百分比,因為進度列本身會傳達該資訊。

[取消] 按鈕

  • 如果取消將環境傳回其先前的狀態,請標示 [取消] 按鈕 [取消] (不留下任何副作用):否則,將按鈕標示為 [停止],表示它讓部分完成的作業保持不變。
  • 如果某個時間點無法將環境傳回其先前的狀態,您可以將按鈕標籤從 [取消] 變更為作業中間的 [停止]。

進度對話框標題

  • 如果進度列顯示在強制回應對話框中,對話框標題應該是程式的名稱或作業的名稱。 請勿使用對話框標題的進度列標籤。

    正確

    具有工作名稱的進度列標題螢幕快照

    在此範例中,工作名稱會用於對話框標題。

    不正確:

    備援對話框標題的螢幕快照

    在此範例中,對話框標題文字是進度列卷標的重述。 應該改用程式名稱。

  • 如果進度列顯示在無模式對話框中,請先精簡放置辨別資訊,將標題優化以顯示在任務欄上。 範例:“66% 完成”。