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

摘要

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

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

列表框（Listboxes）

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

列表框根據(jù)選擇類型可以分為4種表現(xiàn)形式，各個形式的列表框都可以根據(jù)選項的多少和可見區(qū)域選擇滾動或不滾動。

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

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

下拉列表（Dropdown Lists）

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

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

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

列表框和下拉列表在實際中的應(yīng)用

列表框和下拉列表可以使表單更加緊湊–特別是當(dāng)存在許多可選項時，將這些選項顯示為獨立的單選按鈕或復(fù)選框的列表相比來說會占用較大范圍的不必要的屏幕空間。

使用列表框或下拉列表可以將選項限制為列表中的某一個，并確保用戶以正確的格式輸入數(shù)據(jù)，以此來減少錯誤的發(fā)生（是防錯的一個典型應(yīng)用）。

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

▲當(dāng)可用選項較少時，獨立復(fù)選框的列表適用于多選。當(dāng)有許多選項可供選擇時，請使用列表框，因為它們可以容納更多選項，并且比在頁面上垂直列出許多復(fù)選框要占用更少的空間。

列表框和下拉列表適用于APP或網(wǎng)站中進行選擇。它們并非旨在執(zhí)行命令或觸發(fā)模式窗口、對話框或動態(tài)控件的顯示。

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

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

對于可滾動的列表框和下拉列表，重要的是要考慮它們的大小，因為它們還與軌道滑動定律有關(guān)。

軌道滑動定律是預(yù)測用戶將光標(biāo)或手指移過可選擇區(qū)域需要多長時間。時間取決于可點擊區(qū)域的長度和寬度，其中較短、較寬的區(qū)域比較長，較窄的區(qū)域更快，更容易為用戶導(dǎo)航。

因此，限制可滾動列表框和下拉列表中包含的項目數(shù)量，并確保將其設(shè)計為盡可能寬和盡可能短，將有助于用戶快速輕松地進行查看和導(dǎo)航。當(dāng)下拉列表變得過長和狹窄時，用戶可能不小心將光標(biāo)移到有界區(qū)域之外，這將關(guān)閉下拉列表（誤操作）并迫使他們重新開始選擇過程。

列表框的優(yōu)缺點

盡管相對很少使用，但列表框具有的優(yōu)勢不僅限于支持單選、多選、容納更多選項、占用過多的屏幕空間。

列表框的優(yōu)點：

盡管我們很少使用列表框，但列表框的優(yōu)點不僅局限于支持單選，多選和容納許多選項而不會占用過多的屏幕空間，其他優(yōu)點還包括：

• 交互成本低：列表框不需要用戶單擊任何內(nèi)容即可在進行選擇之前顯示其中的選項（如果有太多項，則可能需要用戶滾動列表）。
• 增加的選項可見性：一次查看多個選項的功能可以加快決策速度并提高選擇準(zhǔn)確性。
• 單列和多列視圖：因為列表框不限于單列，所以如果列表框?qū)挾仍试S，則可以顯示更多選項。但是，應(yīng)避免在多列列表框中出現(xiàn)水平滾動。
• 概覽和重新排序：使用多選雙列列表框，用戶可以控制選項的顯示順序，并獲得所選選項的清晰概覽，這在列表框包含多個選項時很有用。

列表框的缺點：

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

下拉列表的優(yōu)缺點

下拉列表的優(yōu)點：

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

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

下拉列表的缺點：

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

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

列表框 vs 下拉列表

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

總結(jié)

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

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

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

本文由 @Henry-Lee 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議