那麼組合方塊、多重選擇、列錶框和下拉清單之間有什麼區別呢？雖然所有這些 UI 元件可能看起來相似，但它們具有不同的用途。選擇通常取決於可用選項的數量及其可見性。 讓我們看看它們有何不同，它們的目的是什麼，以及如何選擇正確的東西——避免一路上誤解和錯誤的期望。
並非所有清單模式都相同 上面突出顯示的所有 UI 元件都有一個共同點：它們支援使用者與清單的互動。然而，他們的做法略有不同。 讓我們逐一看一下：
下拉→清單在被觸發之前是隱藏的。 組合方塊 → 輸入要過濾的內容 + 選擇 1 個選項。 多重選擇 → 輸入篩選 + 選擇多個選項。 列錶框 → 預設情況下所有清單選項可見（+捲動）。 雙列錶框 → 在 2 個列錶框之間移動項目。
換句話說，Combobox 將文字輸入欄位與下拉清單結合在一起，以便使用者可以鍵入內容來過濾並選擇單一選項。透過多重選擇，使用者可以選擇許多選項（通常顯示為藥丸或晶片）。 列錶框預設顯示所有可見的清單選項，通常帶有捲動功能。當用戶需要立即查看所有可用選項時，這會很有幫助。雙列錶框（也稱為傳輸清單）是列錶框的變體，允許使用者在兩個列錶框（左↔右）之間移動項目，通常用於批次選擇。 從不隱藏常用選項 如上所述，選擇正確的 UI 元件取決於 2 個因素：有多少清單選項可用，以及所有這些選項是否需要預設可見。所有清單也可以具有樹結構、巢狀和群組選擇。
對於任何 UI 元件，我多年來一直遵循一個原則：永遠不要隱藏常用選項。如果使用者經常依賴某個特定的選擇，那麼向他們隱藏它就沒有什麼價值。 我們可以預先選擇它，或者（如果只有 2-3 個常用選項）將它們顯示為選項卡或按鈕，然後在互動時顯示清單的其餘部分。一般來說，始終顯示流行的選項是個好主意 - 即使它可能會使使用者介面混亂。 如何選擇？ 並非每個清單都需要複雜的選擇方法。對於少於 5 個項目的列表，簡單的單選按鈕或複選框通常效果最佳。但是，如果使用者需要從大量選項清單（例如，200 多個項目）中進行選擇，則組合方塊 + 多重選擇會很有幫助，因為過濾速度更快（例如，國家/地區選擇）。
當人們需要一次存取多個選項時，列錶框非常有用，特別是當他們還需要從該清單中選擇多個選項時。它們對於經常使用的過濾器可能會有幫助。
雙列錶框經常被忽略和忽略。但它對於複雜的任務非常有幫助，例如批量選擇或分配角色、任務、職責。它是唯一允許用戶在提交之前與來源清單並排查看完整選擇清單（也稱為「傳輸清單」）的 UI 元件。 事實上，雙列錶框通常比拖放更快、更準確且更易於存取。 可用性考慮因素 需要記住的一個重要注意事項是，所有清單類型都需要支援鍵盤導航（例如 ↑/↓ 箭頭鍵）以實現可存取性。有些人在開始打字後幾乎總是依靠鍵盤來選擇選項。
除此之外：
對於包含 7 個以上選項的列表，請考慮新增「全選」和「全部清除」功能以簡化使用者互動。 對於帶有組合框的冗長列表，請在單擊/點擊時向用戶公開所有選項，否則它們可能永遠不會被看到， 最重要的是，不要將非交互元素顯示為按鈕以避免混淆，並且不要將交互元素顯示為靜態標籤。
總結：並非所有內容都是下拉式選單 名字很重要。垂直選項清單通常被描述為「下拉式選單」——但通常它有點太籠統而沒有意義。 “Dropdown”提示清單預設隱藏。 「多重選擇」意味著清單中的多重選擇（複選框）。 “Combobox”意味著文字輸入。 「列錶框」只是一個可選擇項目的列表，始終可見。 我們的目標並不是為了與上面的定義一致。而是為了協調意圖——在決定、設計、建構和使用這些 UI 元件時使用相同的語言。 它應該適用於每個人——設計師、工程師和最終用戶——只要靜態標籤看起來不像互動式按鈕，單選按鈕就不像複選框。 認識“AI 介面設計模式” 認識 AI 介面的設計模式，Vitaly 的新視訊課程，其中包含現實生活中產品的實際範例 - 現場用戶體驗培訓即將開始。跳到免費預覽。 Meet Design Patterns For AI Interfaces，Vitaly 的介面設計和使用者體驗的影片課程。
影片 + 使用者體驗培訓 僅視訊影片 + 使用者體驗培訓$ 450.00 $ 799.00
取得視訊 + 使用者體驗培訓30 個視訊課程（10 小時）+ 即時使用者體驗培訓。 100 天退款保證。限影片$ 275.00$ 395.00
取得視訊課程 30 節視訊課程（10 小時）。每年更新。也可以作為包含 3 個視訊課程的 UX 捆綁包提供。
有用的資源
自動完成：使用者體驗指南，作者：Vitaly Friedman 組合框，來自 eBay 👍 組合框，由 Elastic 提供 組合框，作者：Elisa 組合框，由 MongoDB 製作 👍 組合框，由 Visa 提供 👍 組合框，作者：Watson (Docplanner) 組合框，來自維基媒體 組合框，由 Zendesk 設計 多重選擇（MongoDB Combobox 設計文件），作者：MongoDB 👍 多選查找，維基媒體 多選組合框，作者：Vaadin 多項選擇，按 Visa 傳輸（列錶框範例），Ant Design 列錶框，作者：Hopper 列錶框，作者：Vaadin 列錶框，由 Visa 提供 雙重清單選擇器，由 Red Hat (PatternFly) 提供 雙列錶框，由 Salesforce（Lightning Design System）提供 轉會清單，作者：Mantine 雙列錶框，由 Dashlite 設計 徽章、藥丸、晶片、標籤，作者：Vitaly Friedman 列錶框與下拉列表，作者：Anna Kaley (NN/g)
