漸進式洩漏控制項

注意

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

透過漸進式洩漏控制，使用者可以顯示或隱藏其他資訊，包括資料、選項或命令。 漸進式揭露可藉由專注于基本資訊來提升簡單性，但視需要顯示其他詳細資料。

漸進式洩漏控制項的範例。

注意

與 版面配置、 功能表和 工具列 相關的指導方針會顯示在不同的文章中。

這是正確的控制項嗎？

若要決定使用時機，請考量下列問題：

• 使用者是否需要在一些案例而非所有案例中看到資訊，或部分但並非所有時間？ 若是如此，使用漸進式揭露顯示資訊可簡化基準體驗，但可讓使用者輕鬆存取訊號。

  

  在此範例中，Windows 安全性應用程式會隨時顯示重要的安全性狀態，但會使用漸進式洩漏來依需求顯示詳細資料。

• 如果資訊預設顯示，使用者是否可能選擇隱藏資訊？ 是否有使用者需要更多空間的案例？ 使用者是否有足夠的動機來自訂使用者介面 (UI) ？ 如果沒有，則顯示資訊，而不需使用漸進式洩漏。

  不正確：

  

  在此範例中，使用者不會動機隱藏資訊。

• 其他資訊是否為進階、大量、複雜，或與獨立子工作相關？ 如果是，請考慮使用 命令按鈕 或 連結 ，而不是使用漸進式洩漏控制項，在個別視窗中顯示資訊。 (如果其他資訊適用于進階使用者，則為進階資訊。如果其他資訊難以讀取或配置，則很複雜。)

  

  在此範例中，軟體名稱和發行者的相關資訊主要對進階使用者有意義，因此會使用個別視窗的連結。

• 其他資訊是描述專案用途的句子或句子片段，還是如何使用？ 如果是，請考慮使用 工具提示 或資訊提示。

• 與目前工作相關的其他資訊，但與目前顯示的資訊無關？ 如果是，請考慮改用 索引標籤 。 不過，可折迭清單通常較適用于索引標籤，因為它們更具彈性且可調整。

• 顯示或隱藏其他資訊基本上是資料篩選嗎？ 如果是，請考慮改用 下拉式清單 或 核取方塊 ，以將篩選套用至整個清單。

設計概念

漸進式揭露的目標是：

• 藉由專注于基本，但視需要顯示其他詳細資料，以簡化 UI。
• 藉由減少對雜亂的認知，簡化 UI 的外觀。

這兩個目標都可以使用漸進式揭露控制項來達成，使用者可以按一下以查看更多詳細資料。 不過，您可以達成簡化外觀的第二個目標，而不需要使用明確的漸進式洩漏控制項，方法是：

• 只在內容中顯示內容詳細資料。 例如，當與選取的物件或模式相關時，您可以自動顯示內容相關命令或工具列。

• 減少次要 UI 的能供性權數。能供性 是視覺屬性，可建議如何使用物件。 趨勢是讓使用者可以就地互動的 UI，但讓所有這類 UI 繪製為「按一下我！」會導致太多視覺雜亂。 針對次要 UI，最好使用細微的能供性，並在滑鼠上方提供完整的效果。

  

  在此範例中，[評等] 欄位是互動式的，但在滑鼠暫留之前不會顯示。

• 只有在必要條件完成之後，才會顯示後續步驟。 此方法最適合用於熟悉的工作，讓使用者可以放心地採取第一個步驟。

  

  在此範例中，使用者名稱和密碼頁面一開始只會顯示使用者名稱和選擇性密碼方塊。 確認和提示方塊會顯示在使用者輸入密碼之後。

雖然漸進式揭露是簡化 UI 的絕佳方式，但有下列風險：

• 缺乏可探索性。 使用者可能會假設他們看不到某個專案，則不存在。 使用者可能不會將滑鼠停留或按一下，如果他們看不到他們正在尋找的內容。 使用者可能無法按一下 [更多選項] 之類的專案。
• 缺乏穩定性。 漸進式揭露應該預期或至少是自然的。 如果控制項意外出現並消失，產生的 UI 可能會覺得不穩定。

漸進式洩漏控制

漸進式揭露控制項通常不會顯示描述其行為的直接標籤，因此使用者必須能夠單獨根據控制項的視覺外觀執行下列動作：

• 辨識控制項提供漸進式揭露。
• 判斷目前狀態是否已展開或折迭。
• 判斷是否需要其他資訊、選項或命令才能執行工作。
• 視需要決定如何還原原始狀態。

雖然使用者可以藉由試用和錯誤來判斷上述內容，但您應該嘗試不必要地進行這類實驗。

漸進式揭露控制項具有相當弱 的能供性，這表示其視覺屬性會建議其使用方式，雖然很弱。 下表比較常見漸進式洩漏控制項的外觀：

控制	目的	外觀	字元表示
Chevrons	全部顯示： 在完全或部分隱藏的內容中顯示或隱藏其餘專案。 專案會就地顯示 (使用單一>形箭號) ，或在快顯功能表 (使用雙箭號) 。	形箭號會指向動作發生的方向。	未來的狀態
箭頭	顯示選項： 顯示快顯功能表。	箭頭會指向動作發生的方向。	未來的狀態
加號和減號控制項	展開容器： 流覽階層時，展開或折迭容器內容。	加號和減號不指向，但動作一律會在右邊發生。	未來的狀態
旋轉三角形	顯示詳細資料： 顯示或隱藏個別專案的其他資訊。 它們也可用來擴充容器。	旋轉三角形有點類似旋轉左手，因此它們會指向動作發生的方向。	目前狀態

如果您只執行一件事...

使用者應該能夠單獨檢查，預測漸進式洩漏控制項的行為。 若要達到此目的，請選取適當的使用模式，並一致地套用其外觀、位置和行為。

使用模式

漸進式洩漏控制有數種使用模式。 其中有些是內建在一般控制項中。

Chevrons

形箭號會在完全或部分隱藏的內容中顯示或隱藏其餘專案。 專案通常會就地顯示，但也可以顯示在快顯功能表中。 就地時，專案會保持展開狀態，直到使用者折迭為止。

Chevron 會以下列方式使用：

使用狀況	範例
就地 UI 相關聯的物件會接收輸入焦點，並使用空格鍵啟動單一形箭號。	在這些範例中，就地單一箭號會放在其相關聯控制項的右邊。
具有外部標籤的命令按鈕 命令按鈕會接收輸入焦點，並使用空格鍵啟動單一箭號。	在此範例中，單一箭號按鈕會加上標籤，並放置在標籤左邊。 使用此模式時，沒有其標籤，按鈕會難以理解。
具有內部標籤的命令按鈕 命令按鈕會接收輸入焦點，並使用空格鍵啟動。	在這些範例中，一般命令按鈕會放置雙箭號來建議其意義。

箭頭

箭號會顯示快顯功能表。 專案會保持展開狀態，直到使用者選取或按一下任何位置為止。

如果箭頭按鈕是獨立的控制項，則會接收輸入焦點，並使用空格鍵啟動。 如果箭頭按鈕具有父控制項，則父控制項會收到輸入焦點，並使用 Alt+向下鍵和 Alt+向上鍵啟動箭號，如同下拉式清單控制項一樣。

箭號會以下列方式使用：

使用狀況	範例
個別按鈕 箭號位於個別的按鈕控制項中。	在這些範例中，位於右側的個別箭號按鈕表示命令功能表。
命令按鈕 箭號是命令按鈕的一部分。	在這些範例中，功能表按鈕和分割按鈕具有位於文字右側的箭號。

加號和減號控制項

加號和減號控制項展開或折迭，以顯示在流覽階層時就地顯示容器內容。 專案會保持展開，直到使用者折迭它為止。 雖然這些按鈕看起來像是按鈕，但其行為就地。

相關聯的物件會接收輸入焦點。 加號會以向右鍵啟動，並使用向左鍵的減號。

加號和減號控制項會以下列方式使用：

使用狀況	範例
可折迭的樹狀結構 顯示容器內容的多層級階層。	在此範例中，加號和減號控制項位於相關聯容器的左邊。
可折迭清單 顯示容器內容的兩層階層。	在此範例中，加號和減號控制項位於相關聯清單標頭的左邊。

旋轉三角形

旋轉三角形會顯示或隱藏個別專案的其他資訊。 它們也可用來擴充容器。 專案會保持展開，直到使用者折迭它為止。

相關聯的物件會接收輸入焦點。 折迭的 (右指) 三角形會以向右鍵啟動，而展開的 (向下指向) 三角形與向左鍵。

旋轉三角形會以下列方式使用：

使用狀況	範例
可折迭的樹狀結構 顯示容器內容的多層級階層。	在此範例中，旋轉的三角形位於相關聯容器的左邊。
可折迭清單 兩層階層，用來顯示其他資訊。	在此範例中，旋轉的三角形會放在其相關聯清單專案的左邊。

預覽箭號

如同>形箭號，其他資訊會就地顯示或隱藏。 專案會保持展開，直到使用者折迭它為止。 與箭號不同，圖像具有動作的圖形標記法，通常具有箭號，指出會發生什麼事。

在 Microsoft Windows 媒體播放機的這些範例中，圖像具有箭號，可建議要執行的動作。

預覽箭號最適合用於標準>形箭號無法適當地傳達控制項的行為，例如當洩漏很複雜或有一種以上的洩漏類型時。

指導方針

一般

• 根據漸進式揭露模式的使用方式，選取漸進式揭露模式。 如需每個使用模式的描述，請參閱上表。

• 請勿將連結用於漸進式洩漏控制項。 只使用使用模式一節中呈現的漸進式洩漏控制項。 不過，請使用連結流覽至 [說明] 主題。

  正確：

  

  不正確：

  

  在不正確的範例中，會使用連結來顯示更多選項。 如果連結流覽至另一個頁面或對話方塊，或顯示 [說明] 主題，則此使用方式會正確。

互動

• 針對未直接加上標籤的箭號和箭號，請使用工具提示來描述其用途。

  

  在此範例中，工具提示會指出未標記>形箭號控制項的效果。

• 如果使用者展開或折迭專案，請讓狀態持續存在，以便在下一次顯示視窗時生效，除非使用者可能偏好以預設狀態啟動。 讓狀態持續以每一視窗、每一使用者為基礎。

• 請確定所有展開的內容都可以折迭，反之亦然，而且反轉作業很明顯。 這麼做鼓勵探索並減少挫折。 讓反向作業變得很明顯的最佳方式是讓控制項保持在相同的固定位置。 如果您需要移動控制項，請將它保留在視覺上相異區域內的相同相對位置。

  不正確：

  

  

  在此範例中，按一下箭號的 [取代] 按鈕會顯示 [取代為 ] 文字方塊。 完成此動作之後，Replace 展開器就會變成 Replace 命令，因此無法還原原始狀態。

• 請只使用適用于漸進式洩漏模式的存取金鑰，如使用模式一節所列。 請勿使用 Enter 來啟用漸進式洩漏。

簡報

• 請勿針對漸進式洩漏以外的目的使用三角形箭號。

  不正確：

  

  雖然此範例不是漸進式洩漏模式，但在這裡使用箭號表示命令會顯示在快顯視窗中。

  正確：

  

  在此範例中，會改用專案符號。

• 移除 (不會停用) 目前內容中不適用的漸進式洩漏控制項。 漸進式揭露控制項應該一律提供其承諾，因此當沒有提供更多資訊時，請將其移除。

  不正確：

  

  在此範例中，未套用的漸進式洩漏控制項未正確停用。

Chevrons

• 使用單一形箭號來顯示或隱藏就地。 使用雙箭號來顯示或隱藏使用快顯功能表。 不過，您應該一律針對具有內部標籤的命令按鈕使用雙箭號。

  正確：

  

  不正確：

  

  在不正確的範例中，會使用雙形箭號進行就地漸進式揭露。

  正確：

  

  在此範例中，雙形箭號用於就地漸進式洩漏，因為它是具有內部標籤的命令按鈕。

• 提供形箭號與其相關聯控制項之間的視覺關聯性。 因為就地形箭號會放在其相關聯的 UI 右邊，且靠右對齊，所以形箭號與其相關聯的控制項之間可能會有相當距離。

  正確：

  

  在此範例中，就地形箭號與其相關聯 UI 之間有清楚的關聯性。

  不正確：

  

  在此範例中，就地形箭號與其相關聯的 UI 之間沒有清楚的視覺關聯性，因此似乎在空間中浮動。

箭頭

• 請勿使用可能會與 Back、Forward、Go 或 Play 混淆的箭號圖形。 使用簡單的三角形箭頭 (箭號，而不需在中性背景上) 字幹。

  正確：

  

  這些箭號顯然是漸進式洩漏控制項。

  漸進式洩漏) 不正確 (：

  

  這些箭號看起來不像漸進式洩漏控制項。

  Back、Forward) 的 (不正確：

  

  這些箭號看起來像漸進式洩漏控制項，但不是。

建議的大小和間距

建議針對漸進式洩漏控制項調整大小和間距。

標籤

• 針對具有外部標籤之命令按鈕上的形箭號：
  • 指派唯一 存取金鑰。 如需指導方針，請參閱 鍵盤。
  • 使用 句子樣式大寫。
  • 將標籤撰寫為片語，不使用結尾標點符號。
  • 撰寫標籤，使其描述按一下按鈕的效果，並在狀態變更時變更標籤。
  • 如果介面一律顯示一些選項、命令或詳細資料，請使用下列標籤配對：
    • 更多/較少的選項。 用於選項或混合選項、命令和詳細資料。
    • 更多/較少的命令。 僅適用于命令。
    • 更多/較少的詳細資料。 僅供資訊使用。
    • 更多/較少的 < 物件名稱 > 。 用於其他物件類型，例如資料夾。
  • 否則：
    • 顯示/隱藏選項。 用於選項或混合選項、命令和詳細資料。
    • 顯示/隱藏命令。 僅適用于命令。
    • 顯示/隱藏詳細資料。 僅供資訊使用。
    • 顯示/隱藏 < 物件名稱 > 。 用於其他物件類型，例如資料夾。
• 針對具有內部標籤之命令按鈕上的形箭號，請遵循標準 命令按鈕 指導方針。

文件

參考漸進式洩漏控制項時：

• 如果控制項有固定標籤，請只依控制項的標籤參照控制項;請勿嘗試描述控制項。 使用確切的標籤文字，包括其大寫，但不包含便捷鍵底線。

• 如果控制項沒有標籤或未修正，請依其類型參照控制項：形箭號、箭號、三角形或加/減按鈕。 如有必要，也描述控制項的位置。 如果控制項以動態方式出現，例如 頁面空間 控制項，請描述如何讓控制項出現來啟動參考。

  例子： 若要顯示資料夾中的檔案，請將指標移至資料夾名稱的開頭，然後按一下資料夾旁邊的三角形。

• 請勿將控制項稱為按鈕，除非與其他非按鈕的漸進式洩漏控制項對比。

• 若要描述使用者互動，請使用 click。 如有需要，請使用 click...以展開或折迭。

• 可能的話，請使用粗體文字格式化標籤。 否則，只有在需要防止混淆時，才將標籤放在引號中。

範例：

• (若為箭號) 若要判斷檔案大小，請按一下 [詳細資料]。
• (如需箭號) 若要查看所有選項，請按一下 [搜尋 ] 方塊旁的箭號。
• (針對加號/減號) 若要檢視圖片，請按一下 [ 圖片]。