使用漸進式展示控件，用戶可以控制顯示或隱藏包括數據、選項或命令等附加信息。通過聚焦于基本信息，只在需要時展示附加的細節，漸進式展示控件提升了界面的簡明性。

一些漸進式展示控件

何時使用該控件

思考以下問題：

• 用戶是不是不需要在所有場景、所有時間都能看到全部信息？如果是這樣，使用漸進式控件展示信息可以簡化基礎體驗，同時允許用戶輕松訪問完整信息。
  
  在此示例中，安全中心始終顯示重要的安全狀態，漸進展示控件可以按需展示細節。
• 如果信息是默認展示的，用戶是否會有選擇隱藏它們的傾向？在一些情況下用戶是否需要更多空間？用戶是否有足夠的動力來個性化設置自己的界面？如果這些都不是，請不要使用漸進式展示控件。

錯誤示例：在該例中，用戶不會想要隱藏界面上的這些信息。

• 附加的信息是否是高級信息、對程序有實質影響、很復雜或者與其他獨立的子任務相關？如果是這些情況，考慮在獨立的窗口中使用命令按鈕或者鏈接、而不是漸進式展示控件來顯示信息。（如果附加信息是針對高級用戶的，那么就是高級信息；如果附加信息會令其他的信息難以閱讀或者排版，那么就是復雜信息。）
  

  在此示例中，有關軟件名稱和發行者的信息主要對高級用戶有意義，因此使用到單獨窗口的鏈接。

• 附加信息是描述項目的功能或者使用方法的句子或者短語嗎？如果是這樣，考慮使用工具提示或者信息提示。

• 附加信息是否與當前任務有關，但是獨立于當前已經展示的信息？如果是這樣，考慮使用tabs選項卡代替。但是，可折疊列表通常比選項卡更可取，因為它們更靈活，可伸縮。

• 顯示或隱藏附加信息本質上是為了過濾數據嗎？ 如果是，請考慮使用下拉列表或復選框，而不是將篩選器應用于整個列表。

設計思路

漸進式展示的目的在于：

• 通過聚焦于基本信息和只在需要的情況下展示附加信息來簡化界面。
• 通過減少雜亂來簡化界面的的外觀。
  這兩個目標都可以通過使用漸進式展示控件實現，點擊該控件可以展示更多細節。但是也可以在不使用漸進式控件的情況下實現第二個目的，具體的做法是：

1. 只在上下文中顯示相關的細節。例如，選定對象或模式時，可以自動顯示相關的上下文命令或工具欄。
2. 減少次級UI的示能。示能是暗示對象應該如何被使用的視覺特性。現行的做法是將用戶可能會與之交互的控件都放在易于觸及的地方，但如果界面上所用的控件都是這樣，整個界面就像在都在尖叫“快點擊我吧！”，視覺會很雜亂，干擾很多。對于次級UI控件，最好使用示能較弱的表現形式，在鼠標hover過上方之后再展示完全的形態。
   
   在該例中，評星部分是可以交互的，但只在鼠標hover之后才能明顯地看出來

• 在先決步驟完成之后再顯示接下來的步驟。這個設計模式最好用在用戶比較熟悉的任務中，用戶能自己很容易地填寫開始的幾個步驟。
  
  在該例中，用戶姓名和密碼頁面最開始只顯示了用戶姓名和可選的密碼框。當用戶輸入了密碼之后，驗證信息和提示框才會出現

盡管漸進式展示控件可以簡化UI界面，但它們也有以下風險：

• 比較難以發現。用戶可能會認為他們看不到的東西就不存在。如果用戶沒有找到他們需要的東西，他們也許不會hover或者點擊該控件。用戶總是有可能不會去點擊類似“更多”這樣的選項。

• 缺少穩定性。我們總是希望漸進式展示控件自然、起碼是感覺起來是自然的。如果控件總是出人意料地出現又消失，最終UI界面就會給人以不穩定的感覺。

漸進式展示控件

漸進式展示控件一般沒有直接描述它們行為的標簽，所以要保證用戶在僅僅觀察漸進式控件的外觀情況下就能做到以下幾點：

• 識別出控件具有漸進式展示的功能。
• 了解當前的狀態是需要擴展展示還是需要縮略展示。
• 了解要完成當前任務，是否需要更多地信息、選項或者指令。
• 了解在有需要的情況下，如何回到初始狀態。

盡量避免用戶需要嘗試和試錯才能確定以上幾點。
漸進式展示控件的示能比較弱，也就是說他們的視覺屬性盡管可以暗示他們的功能用法，但是這種能力相對較弱。下表比較了幾種常見漸進式控件的示能：

V形箭頭

三角箭頭

加號和減號控件

旋轉三角符號

如果只記住一件事：
用戶應該只通過視覺觀察就能正確地預知漸進式展示控件的功能。要實現這一點，請選擇適當的使用模式，并保持它們的外觀、位置和行為始終一致。

應用范例

漸進式展示控件有幾種使用模式，其中的幾種被組合成了通用控件。

V形箭頭

V形箭頭在完全或部分隱藏的內容中顯示或隱藏剩余的項目。通常項目是就地顯示的，但是它們也可以顯示在彈出菜單中。當就地顯示時，該項保持展開狀態，直到用戶將其折疊為止。
V形箭頭有以下幾種使用形式：

• 就地展開相關的對象會接收輸入焦點，單個V形箭頭可以使用空格鍵激活。
  

  在這些例子中，V形單箭頭位于它們的相關控件的右邊

• 帶有擴展標簽的命令按鈕 命令按鈕獲取輸入焦點，單個V形箭頭可以使用空格鍵激活。

  在該例中，單V箭頭按鈕被文字標記，并與標簽左對齊。在這種模式下，沒有標簽的單V箭頭按鈕是很難理解的

• 含有內部箭頭標簽的命令按鈕 命令按鈕獲取了輸入焦點并可以被空格鍵激活。

  在常規的命令按鈕中，雙v箭頭的方向與按鈕所指含義的方向相同

三角箭頭

點擊三角箭頭可以展示一個彈出式的命令菜單。直到用戶做出選擇或者點擊別處之前，該菜單會一直保持展開狀態。
如果箭頭按鈕是一個單獨的控件，它會接收輸入焦點并且被空格鍵激活。如果箭頭按鈕有父級控件，父級控件會接受輸入焦點，三角箭頭按鈕可以被Alt+上箭頭鍵或Alt+下箭頭鍵被激活，這一行為與下拉菜單控件相同。
三角箭頭有以下幾種使用方式：

• 獨立按鈕 箭頭放置于一個獨立的按鈕中。
  
  在上例中，置于右方的三角箭頭按鈕預示著可以展開命令菜單。

• 命令按鈕 三角箭頭是命令按鈕的一部分。
  
  在上例中，分裂式按鈕和菜單按鈕的文字標簽右方都含有三角箭頭。

加號和減號控件

加號和減號控件用于在層級結構中展示或隱藏容器內容。除非用戶收起，項目將一直保持展開狀態。盡管這個控件看起來像按鈕，但它們的行為都是就地發生的。

與之相關的對象獲得輸入焦點。右箭頭鍵可以激活加號控件，左箭頭鍵可以激活減號控件。

加號和減號控件有以下幾種使用方式：

• 可折疊樹狀圖使用多層級結構以展示容器內容。
  
  在該例中，加號和減號控件放置于相關容器對象的左邊。
• 可折疊列表使用兩層結構以展示容器內容。
  
  在該例中，加號和減號控件放在相關列表標題的左邊

可旋轉三角箭頭

可旋轉三角箭頭可以就地顯示或隱藏一個獨立項目的附加信息。它們也可以用來擴展容器。如果用戶沒有主動收起，項目會保持展開狀態。
相關對象獲得輸入焦點。收起箭頭（向右的箭頭）可使用向右箭頭鍵激活，擴展箭頭（向下的箭頭）可使用左箭頭鍵激活。

可旋轉三角箭頭有以下幾種使用形式：

• 可折疊樹狀圖：使用多層級結構展示容器內容。
  

  該例中，可旋轉三角箭頭位于相關控件的左邊

• 可折疊列表視圖：使用二層結構實時展示附加信息。
  

  該例中，可旋轉三角箭頭位于相關列表項目的左邊

預覽箭頭

和V形箭頭一樣，附加信息都被實時展示或隱藏，除非用戶主動收起，項目會一直保持展開狀態。和V形箭頭不同的是，預覽箭頭通常都有一個圖像化的圖標來表示動作含義，通常用箭頭來表示將要發生的動作。

這幾個例子來自于Microsoft Windows Media Player，帶箭頭的圖標預示著將要發生的動作

預覽箭頭最好在標準V型箭頭不能充分表達控件行為的情況下使用，比如信息展示動作很復雜，或者有多種類型的信息需要展示。

設計指南

通用原則

• 根據具體情境使用合適的漸進式展示控件。各種用法的詳細說明請見上文敘述。
• 漸進式展示控件不要加上鏈接。只能使用在應用范例中提到的這些控件。但是，導航到“幫助主題”還是可以使用鏈接的。
  
  正確示例
  
  
  錯誤示例：該例中，鏈接被用來就地展示更多選項，這是錯誤的。但是如果該鏈接會導航用戶至其他的頁面或者對話框，或者展示“幫助主題”頁面，則是可以的。

交互

• 對于沒有直接標簽的V形箭頭和三角箭頭，使用工具提示來描述它們的作用。
  

  示例

• 除非用戶更希望以默認狀態開始程序，如果用戶收起或者展示了一個項目，保持這個狀態，使其在下次窗口打開時依然生效。保證該狀態對每個界面、每個用戶身份都生效。

• 確保所有能展開的內容都可以折疊收起，反之亦然，并且反向操作是足夠明顯的。這樣做可以鼓勵用戶探索，減少挫折感。使反向操作明顯的最佳方法是將控件始終保持在同一固定位置。如果需要移動控件，請將其保持其視覺上的相對位置不變。
  

  錯誤示例：在這個例子中，單擊帶V型箭頭的Replace按鈕，會顯示Replace with 文字框。完成此操作后，Replace展開按鈕變成了Replace命令按鈕，因此也無法恢復原始狀態了。

• 對漸進式展示控件合理分配存取鍵，遵守設計范例中給出的存取鍵設置規范。不要使用Enter鍵激活漸進式展示控件。

展示

• 三角狀箭頭標志不要用于除了漸進式展示控件之外的用途上。
  
  錯誤示例：雖然這個例子不是漸進展示模式，但是在這里使用箭頭表明將有命令出現在一個彈出窗口中。

正確示例：在這里使用子彈標記是正確的做法

• 當漸進式控件不再適用于當前上下文的時候，移去（而不是禁用）它。漸漸進式控件控制應該始終表達它們的功能，所以當沒有更多的信息可以提供時，刪除它們。
  
  錯誤示例：不再適用的漸進式展示控件直接刪除，而不是禁用

V形箭頭

• 使用V形單箭頭就地展示或收起內容。使用V形雙箭頭展開或收起一個彈出框。但是對于帶有標簽文字的命令按鈕，還是要使用雙箭頭。
  

  正確示例
  
  
  錯誤示例。雙箭頭用來就地展示內容是不對的
  
  
  正確示例：這里雙箭頭可以用來就地展示內容，因為它位于一個帶標簽文字的命令按鈕中

• 為V形箭頭和它的相關聯控件設計視覺線索。因為V形箭頭位于相關控件的右側，并且右對齊，所以在V形箭頭和相關控件之間可能會有有相當長的距離。

正確示例：V形箭頭和相關控件之間有明顯的視覺聯系

錯誤示例：V形箭頭和相關控件之間沒有明顯的視覺聯系，看起來像是漂浮在一邊

三角箭頭

• 不要使用會讓用戶誤會有“回退”、“前進”、“開始”或者“播放”含義的箭頭圖標。直接使用不帶主干的中性顏色三角形箭頭。
  
  正確示例：這些圖標很明顯是漸進式展示控件
  
  
  漸進式展示控件的錯誤示例：這些箭頭看起來不像漸進式展示控件
  
  
  前進/后退按鈕錯誤示例：這些箭頭看起來像漸進式展示控件，但它們并不是

建議尺寸和間距

漸進式展示控件的建議尺寸和間距

標簽

• 對于帶有雙箭頭控件的命令按鈕：
  1.分配一個單獨的存取鍵。
  2.使用句式大小寫規則。
  3.使用短語作為標簽文字，結尾不要有標點符號。
  4.如果圖面總是顯示一些選項、命令或細節，請使用以下標簽對:
  更多 / 更少選項（More/Fewer options）。用于選項或選項、命令和詳細信息的混合。
  更多 / 更少命令（More/Fewer commands）。僅用于命令。
  更多 / 更少信息（More/Fewer details）。僅用于信息。
  更多 / 更少（More/Fewer）。用于其他對象類型，如文件夾。
  其他情況:
  顯示 / 隱藏選項（Show/Hide options）。用于選項或選項、命令和詳細信息的混合。
  顯示 / 隱藏命令（Show/Hide commands）。僅用于命令。
  顯示 / 隱藏詳細信息（Show/Hide details）。僅用于信息。
  顯示 / 隱藏（Show/Hide）。用于其他對象類型，如文件夾。
• 對于帶有內部標簽的命令按鈕上的V形箭頭，請遵循標準命令按鈕設計指南。

說明

當提到漸進式命令按鈕時：

• 如果控件有固定的標簽，直接用標簽文字指代該控件，不要再去描述該控件的樣式形態；使用包含大小寫規則的確切標簽文字，但是不要帶有存取鍵的下劃線標志。
• 如果控件沒有標簽或者標簽不固定，提到該控件時就要使用類型來描述它: V形箭頭、箭頭、三角箭頭或加號 / 減號按鈕。 如果需要，還要描述該控件的位置。 如果控件是動態顯示的，例如頁面空間控件，則通過描述如何使控件顯示來啟動引用。

示例：若要顯示文件夾中的文件，請將指針移動到文件夾名稱的開頭，然后單擊文件夾旁邊的三角形。

• 除非在與其他非按鈕形式的漸進式展示控件做對比，不要將它單獨描述為按鈕。

• 使用“單擊”描述用戶的交互動作。如果需要更簡明。使用"單擊..."這樣的句式來擴展或者省略。

• 盡可能使用粗體字表示標簽文字。此外在為了防止混淆的情況下，可以把標簽文字放在引號中。
  示例：

• (V形箭頭)要確定文件大小，請單擊詳細信息。

• (對于箭頭)要查看所有選項，請單擊搜索框旁邊的箭頭。

• (對加號/減號)要查看圖片，請單擊圖片。