列表框 vs 下拉列表，哪個更好？

許多UI控件允許用戶選擇選項，它們包括複選框、單選按鈕、切換開關、步進器、列表框和下拉列表。 在本文中，作者對列表框和下拉列表進行了定義，討論何時使用各個元素，以及各個情況下使用哪一種更加合適。

摘要

列表框和下拉列表是緊湊型的UI控件，允許用戶選擇選項。

列表框立即顯示選項並支持多選，而下拉列表則需要單擊以查看選項，並且僅支持單選。

列表框（Listboxes）

通常情況下，列表框包括三個重要組成部分： 容器框、選項列表 和 標籤 。用戶可以單擊容器框中的選項，實現從列表中選擇一個或多個目標。列表框可能會滾動，具體取決於它包含的選項數和可見區域。有時，列表框包含複選框以明確暗示多選功能可用。更復雜的列表框允許用戶通過將選項從一個列表框移動到另一個列表框來調整容器框的大小，重新排序選項列表以及進行選擇。

列表框根據選擇類型可以分爲4種表現形式，各個形式的列表框都可以根據選項的多少和可見區域選擇滾動或不滾動。

• 單選列表框： 使用這種類型的列表框，用戶只能從選項列表中選擇一項。
• 多選列表框： 用戶可以通過在單擊選項時按住Shift，Command或Control鍵來選擇或取消選擇一個或多個選項。
• 帶複選框的多選列表框： 這種類型的列表框包括讓多選功能更加明顯的複選框。
• 多選雙列表框： 這種類型的列表框由兩個列表框組成。左側的列表框包含可用選項，右側的列表框表示所選選項。“ 添加”按鈕將選項從可用列表移至所選列表，而“ 刪除”按鈕將所選選項移回可用列表，以取消選擇。用戶還可以上下移動選項以重新排序列表中的元素。 列表框可以保持靜態或滾動以顯示更多超出其初始高度的選項。它們還支持單項或多項選擇。

▲多選雙列表框允許用戶通過將選項從一個列表框移動到另一個列表框來進行選擇。用戶還可以通過在列表中上下移動選項來重新排序選項。

下拉列表（Dropdown Lists）

下拉列表通常包含四個主要部分： 容器框，向下箭頭按鈕，選項列表 和 標籤 。用戶可以單擊向下箭頭以顯示相互並列的列表選項，他們只能從中選擇一項。像列表框一樣，下拉菜單也可能會滾動，具體取決於展開時下拉列表中包含的選項數量和默認高度。對於下拉列表，選定的選項或默認值在容器框中保持可見，而其他列表選項僅在單擊向下箭頭後出現，選擇一個選項或在下拉列表的外部單擊將下拉列表項收起。

▲下拉列表顯示在容器框中的單個默認值或選定值。單擊向下箭頭時，顯示選項列表，用戶只能從中選擇一個。下拉列表可以支持靜態或滾動，具體取決於它包含多少項及選項列表的默認高度。

▲下拉列表不支持多選功能。用戶只能從靜態或滾動列表中選擇一個選項。

列表框和下拉列表在實際中的應用

列表框和下拉列表可以使表單更加緊湊–特別是當存在許多可選項時，將這些選項顯示爲獨立的單選按鈕或複選框的列表相比來說會佔用較大範圍的不必要的屏幕空間。

使用列表框或下拉列表可以將選項限制爲列表中的某一個，並確保用戶以正確的格式輸入數據，以此來減少錯誤的發生（是防錯的一個典型應用）。

▲當可用選項較少時，選擇適合單選的獨立單選按鈕列表是合適的。當選項過多時，請使用列表框或下拉列表，具體取決於可用的屏幕空間以及用戶能接受的默認顯示數量。與在頁面上垂直列出許多項目相比，這兩個元素都可以容納更多項目並且佔用更少的屏幕空間。

▲當可用選項較少時，獨立複選框的列表適用於多選。當有許多選項可供選擇時，請使用列表框，因爲它們可以容納更多選項，並且比在頁面上垂直列出許多複選框要佔用更少的空間。

列表框和下拉列表適用於APP或網站中進行選擇。它們並非旨在執行命令或觸發模式窗口、對話框或動態控件的顯示。

在電子商務網站上，列表框通常用於容納在類別頁面左側層疊的過濾器，而下拉列表則可能包含用戶可以對產品進行排序的功能。

▲Sephora.com使用可滾動的列表框（左側）和複選框來將過濾器放置在其購物頁面上。用戶可以從每個列表框中選擇一個或多個，以縮小產品的顯示範圍。Sephora.com還使用一個包含類別的下拉列表（右上），用戶可以從中選擇按特定屬性對頁面進行排序。

對於可滾動的列表框和下拉列表，重要的是要考慮它們的大小，因爲它們還與軌道滑動定律有關。

軌道滑動定律是預測用戶將光標或手指移過可選擇區域需要多長時間。時間取決於可點擊區域的長度和寬度，其中較短、較寬的區域比較長，較窄的區域更快，更容易爲用戶導航。

因此，限制可滾動列表框和下拉列表中包含的項目數量，並確保將其設計爲儘可能寬和儘可能短，將有助於用戶快速輕鬆地進行查看和導航。當下拉列表變得過長和狹窄時，用戶可能不小心將光標移到有界區域之外，這將關閉下拉列表（誤操作）並迫使他們重新開始選擇過程。

列表框的優缺點

儘管相對很少使用，但列表框具有的優勢不僅限於支持單選、多選、容納更多選項、佔用過多的屏幕空間。

列表框的優點：

儘管我們很少使用列表框，但列表框的優點不僅侷限於支持單選，多選和容納許多選項而不會佔用過多的屏幕空間，其他優點還包括：

• 交互成本低： 列表框不需要用戶單擊任何內容即可在進行選擇之前顯示其中的選項（如果有太多項，則可能需要用戶滾動列表）。
• 增加的選項可見性： 一次查看多個選項的功能可以加快決策速度並提高選擇準確性。
• 單列和多列視圖： 因爲列表框不限於單列，所以如果列表框寬度允許，則可以顯示更多選項。但是，應避免在多列列表框中出現水平滾動。
• 概覽和重新排序： 使用多選雙列列表框，用戶可以控制選項的顯示順序，並獲得所選選項的清晰概覽，這在列表框包含多個選項時很有用。

列表框的缺點：

• 屏幕空間： 儘管它們很緊湊，但它們確實會比下拉列表佔用更多的屏幕空間。
• 陌生： 用戶可能不知道如何立即與列表框進行交互-特別是，如果多選列表框中未包含複選框，則他們可能不知道如何選擇倍數。按住Control，Command或Shift鍵以選擇和取消選擇多個項目並不是一般Web用戶經常執行的操作。這就是爲什麼將複選框包含在多選列表框中非常重要的原因，除非它們將注意力集中在多選功能上或增加不必要的屏幕混亂。
• 用戶可能無法一次看到所有選定的選項： 如果在可見區域中看不到更多的可用項目，則用戶可能無法同時看到所有選定的項目。爲避免此缺點，請將列表框上方的選定項目顯示爲標記，或在不可滾動的列表中突出顯示選定的項目。

下拉列表的優缺點

下拉列表的優點：

下拉列表的使用頻率比列表框高。它們佔用的屏幕空間更少，但可以容納與列表框一樣多的項目。下拉列表的其他優點包括：

• 爲用戶提供最佳選項的功能： 最佳選項默認處於選中狀態。
• 淡化替代選項和更改： 由於下拉列表隱藏了其他可用選項，因此它們很好地淡化了替代選項並淡化了對其進行更改的能力。（在默認設置可以滿足大多數用戶的情況下，下拉顯示的其他替代選項可能對非專業用戶來說是危險的或令人困惑的）
• 熟悉： 下拉列表是大多數用戶熟悉的選擇機制，在Web和APP中應用的都十分廣泛。

下拉列表的缺點：

下拉列表的一個典型缺點是它們需要單擊以顯示其他的選項。其他缺點包括：

• 內容過多： 它們包含過多的內容，當它們包含過多的選項時可能會很麻煩。
• 減緩用戶使用速度： 例如，當輸入生日或信用卡到期日期時，與使用下拉列表進行選擇相比，在表單字段中鍵入內容通常更加方便和快捷。
• 仔細： 由於它們非常緊湊，因此用戶可能會忽略表單、網頁、或APP中的下拉列表。
• 易於消除： 不小心將光標從框中移開會關閉下拉菜單，人們不得不重新開始選擇過程。

列表框 vs 下拉列表

與使用獨立複選框或單選按鈕相比，當用戶需要選擇5個或更多項目時，最好使用列表框或下拉列表。在列表框，下拉列表或其他選擇控件之間進行選擇時，還需要考慮其他因素，例如可用的屏幕空間，用戶是否可以選擇一個或多個項目以及是否需要淡化或鼓勵進行更改等因素。使用下表中的條件可以幫助您決定使用哪種形式或何時需使用其他控件來滿足要求。

總結

當設計過程中需要用到列表框或下拉列表時，請始終以邏輯順序顯示選項。這也就意味着將相關選項分組放在一起，將最常選擇的選項放在第一位，或者按字母順序組織選項。

文章來源：https://www.nngroup.com/articles/listbox-dropdown/

原文作者：Anna Kaley  尼爾森·諾曼集團（Nielsen Norman Group）用戶體驗專家

本文由 @Henry-Lee 翻譯發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

相關文章