編輯導(dǎo)語：下拉菜單，是進(jìn)行界面設(shè)計(jì)的一種常用控件，雖然經(jīng)常會(huì)用到，但是很多人可能并不是很了解它。本文作者為我們介紹了下拉菜單的類型、利弊，以及我們應(yīng)該如何使用下拉菜單。希望通過本篇文章，可以幫助你拓展關(guān)于下拉菜單的設(shè)計(jì)知識(shí)。

一、前言

Dropdown（下拉菜單）是界面設(shè)計(jì)中的常用控件，它可以用下拉列表展示多個(gè)內(nèi)容標(biāo)簽，用戶能從預(yù)定的列表中選擇一項(xiàng)或多項(xiàng)。在研究相關(guān)控件時(shí)，會(huì)發(fā)現(xiàn)這個(gè)控件有很多不同的名稱：下拉菜單、下拉框、選擇器、選擇框等等。

Ant Design將下拉菜單與選擇器分別放在不同的屬性里，下拉菜單歸屬導(dǎo)航、選擇器歸屬數(shù)據(jù)錄入，F(xiàn)iori?Design?將下拉菜單與選擇器定義為同一種控件。

其實(shí)，根據(jù)W3C規(guī)范規(guī)定，其應(yīng)該命名為select element（選擇元素）。

為方便表述，下文統(tǒng)一稱之為下拉菜單。

二、下拉菜單是什么

最簡(jiǎn)單的下拉菜單包含四個(gè)主要部分：一個(gè)容器框，一個(gè)朝下的箭頭按鈕，一個(gè)項(xiàng)目列表和一個(gè)標(biāo)簽。用戶可以單擊向下箭頭以顯示項(xiàng)目列表，從中選擇一項(xiàng)或多項(xiàng)。

下拉菜單有3種變體，可以根據(jù)選擇類型進(jìn)行分類：

1. 單選列表框：用戶只能從互斥選項(xiàng)列表中選擇一項(xiàng)
2. 多選列表框：允許用戶選擇多個(gè)選項(xiàng)
3. 搜索選擇：允許用戶搜索大量選項(xiàng)

選項(xiàng)過多時(shí)，下拉菜單可能會(huì)滾動(dòng)，具體取決于展開時(shí)包含的項(xiàng)目數(shù)量。對(duì)于下拉列表，選定的選項(xiàng)或默認(rèn)值在容器框中保持可見，而其他列表項(xiàng)僅在單擊向下箭頭后出現(xiàn)，完成選擇或在下拉列表的外部單擊可將其關(guān)閉。

三、下拉菜單的類型

下拉菜單常見用法有以下幾種：

1. 命令菜單

命令菜單主要應(yīng)用于計(jì)算機(jī)程序和應(yīng)用程序（如Microsoft Word）中，目的是為用戶提供下一步操作，點(diǎn)擊下拉后可以查看更多控制界面的按鈕。

2. 導(dǎo)航菜單

水平導(dǎo)航欄中常見的一種導(dǎo)航菜單，用于向用戶提供更多鏈接，可以將用戶帶到新的位置。

3. 表單填寫

用戶可以選擇一個(gè)選項(xiàng)來輸入表單字段，幫助用戶從許多不同選項(xiàng)中進(jìn)行便捷選擇：

4. 屬性選擇

允許用戶從許多選項(xiàng)中選擇一個(gè)值，其作用方式類似于表單填寫中的下拉菜單。

盡管最初“下拉框”和“下拉菜單”可互換使用，但隨著設(shè)計(jì)規(guī)范的不斷完善，兩者之間出現(xiàn)了功能上的區(qū)別。如今，“下拉菜單”更多用于命令和導(dǎo)航列表，而“下拉框”通常用于表單數(shù)據(jù)填寫和屬性選擇。

四、下拉菜單的利弊

在界面設(shè)計(jì)中使用下拉菜單是一個(gè)很方便的解決方案，但是過度使用會(huì)顯得界面繁瑣笨重，我們必須了解其優(yōu)缺點(diǎn)來確定什么情況下使用是最佳的。

1. 使用下拉菜單的優(yōu)勢(shì)

• 提供最佳選項(xiàng)：為用戶提供系統(tǒng)最佳項(xiàng)，默認(rèn)情況下可以處于選中狀態(tài)；
• 淡化替代選項(xiàng)：由于下拉列表隱藏了其他可用選項(xiàng)，因此很好地淡化了替代選項(xiàng)。這在默認(rèn)值可以滿足大多數(shù)用戶的情況下，并且替代選項(xiàng)對(duì)非專業(yè)用戶來說是危險(xiǎn)的情況下是有利的；
• 節(jié)省空間：如果界面只能為用戶提供很少的空間，下拉菜單非常實(shí)用。雖然下拉菜單很小，但是可以在很小的空間中包含大量信息；
• 操作熟悉：下拉菜單是大多數(shù)用戶熟悉的選擇控件，在計(jì)算機(jī)應(yīng)用程序中使用廣泛；
• 輸入可預(yù)測(cè)：通過輸入文本字段收集用戶信息是不可預(yù)測(cè)的，用戶可能會(huì)輸入錯(cuò)誤，拼寫錯(cuò)誤或誤解輸入內(nèi)容。下拉菜單通過提供的選項(xiàng)，可以預(yù)測(cè)用戶的輸入內(nèi)容；
• 靈活：下拉菜單最大的優(yōu)點(diǎn)就是一個(gè)下拉列表就能包含所有選項(xiàng)，無需根據(jù)選項(xiàng)數(shù)量而更改設(shè)計(jì)。

2. 使用下拉菜單的缺點(diǎn)

• 當(dāng)下拉菜單包含太多選項(xiàng)時(shí)需要滾動(dòng)，會(huì)放慢用戶輸入速度；
• 下拉菜單默認(rèn)情況下會(huì)隱藏可用選項(xiàng)，用戶無法感知選項(xiàng)內(nèi)容；
• 下拉列表看起來像已經(jīng)完成，當(dāng)用戶填寫表格時(shí)，會(huì)在視覺上掃描要填寫的空字段，單選按鈕和復(fù)選框更容易被發(fā)現(xiàn)；

• 將光標(biāo)從下拉框中移出時(shí)會(huì)不小心關(guān)閉下拉列表，用戶需要重新開始一輪新的選擇過程。

五、下拉菜單vs其他控件

1. 切換/開關(guān)

如果用戶輸入的是兩個(gè)互相對(duì)立的選項(xiàng)，則可以使用開關(guān)。如：有效或無效、是或否、開或關(guān)等。切換開關(guān)可以替換兩個(gè)單選項(xiàng)，允許用戶在兩??個(gè)相反的狀態(tài)之間進(jìn)行選擇，最適合用于更改系統(tǒng)功能和首選項(xiàng)。

2. 單選按鈕

當(dāng)選項(xiàng)很少（5個(gè)或更少）時(shí)，單選按鈕可用于替換下拉菜單。與下拉菜單相比，使用單選按鈕的好處是可以輕松地掃描選項(xiàng)，而無需強(qiáng)制用戶交互來查看可用選項(xiàng)。

心理學(xué)家J. A.Bargas Avila及其團(tuán)隊(duì)在關(guān)于網(wǎng)頁表單設(shè)計(jì)的研究中表明了使用單選按鈕優(yōu)于下拉菜單：“單選按鈕的優(yōu)勢(shì)在于所有選項(xiàng)都可以立即看到，而下拉菜單的優(yōu)勢(shì)在于節(jié)省了屏幕空間”。

在CXL進(jìn)行的可用性研究中，他們發(fā)現(xiàn)，與使用單選按鈕相比，下拉菜單顯著降低了用戶的速度：“調(diào)查參與者完成單選按鈕表單（n = 354）的平均速度比使用選擇菜單按鈕（n = 354）的表單快2.5秒。在置信度為95％的情況下，單選按鈕明顯更快?！?/p>

3. 輸入框

對(duì)于輸入可能更快的情況，應(yīng)避免使用下拉菜單。例如，當(dāng)輸入金額或年齡時(shí)：

與下拉菜單的交互相比，在輸入框中輸入內(nèi)容通常更快、更方便，從下拉菜單中選擇一個(gè)值所需的最小交互次數(shù)如下：

對(duì)于屏幕顯示尺寸有限的界面，特別是移動(dòng)端界面，單擊下拉菜單后，選項(xiàng)列表可能并不完整。因此，用戶必須上下滾動(dòng)以查看適合屏幕的選項(xiàng)數(shù)量。對(duì)于無序列表，找到正確的值需要耗費(fèi)更多時(shí)間。

4. 列表框

與使用復(fù)選框或單選按鈕相比，當(dāng)用戶可以選擇5個(gè)或更多選項(xiàng)時(shí)，最好使用列表框或下拉列表。

在列表框與下拉列表之間進(jìn)行選擇時(shí)，還需要考慮其他因素，例如可用的屏幕空間量，是否需要用戶淡化其他選項(xiàng)或是否允許用戶進(jìn)行更改等。設(shè)計(jì)師?Anna Kaley針列表框與下拉列表的優(yōu)劣進(jìn)行了詳細(xì)分析，下面列舉了部分分析結(jié)果：

可見當(dāng)屏幕空間足夠、需要查看已選項(xiàng)以及需要對(duì)已選項(xiàng)進(jìn)行更改時(shí)，使用列表框比下拉菜單更合適。例如，巨量引擎在填寫地域時(shí)，為了方便用戶對(duì)比已選項(xiàng)與未選項(xiàng)以及更改已選內(nèi)容，使用了雙列表框。

六、如何使用下拉菜單

1. 盡可能指定默認(rèn)選擇，如果未指定所選項(xiàng)目可使用占位符

通常情況下請(qǐng)給一個(gè)默認(rèn)選項(xiàng)，如果需要指示所有項(xiàng)目都適用，可提供“全部”作為選項(xiàng)，并將其放在列表的開頭；如果允許用戶不要選擇任何選項(xiàng)，請(qǐng)?zhí)峁盁o”作為選項(xiàng)，并將其放在列表的開頭。

若一定要使選項(xiàng)默認(rèn)選擇空，可以通過容器框中使用占位符來解決該問題，使其看起來也為“空”。為了獲得良好的可訪問性，建議不要使用空白下拉列表。

2.?以可預(yù)測(cè)的方式對(duì)選項(xiàng)進(jìn)行排序

排序選項(xiàng)列表應(yīng)包含用戶可用的所有項(xiàng)目，可選擇以下方式排序：

• 邏輯：將項(xiàng)目按有意義的順序排序，將相關(guān)選項(xiàng)組合在一起，并首先顯示最常用的選項(xiàng)，然后顯示不太常用的選項(xiàng)；
• 按字母順序：按字母順序?qū)ω泿牛Q和類似內(nèi)容進(jìn)行排序；
• 數(shù)值：將數(shù)值按順序排列，通常從最低的數(shù)字開始；
• 時(shí)間順序：將與時(shí)間相關(guān)的信息按時(shí)間順序排序，通常最新的優(yōu)先。

3. 使用簡(jiǎn)短的描述性選項(xiàng)

文本值應(yīng)盡可能短，因?yàn)榱斜韮H限于使用單行，太長(zhǎng)的值可能會(huì)被截?cái)唷?/p>

4.?不可用的選項(xiàng)置灰

不能選擇的選項(xiàng)不要?jiǎng)h除，應(yīng)保留在視圖中并用灰色表示。如果用戶將鼠標(biāo)懸停在變灰的選項(xiàng)上超過一秒鐘，可以考慮顯示一條簡(jiǎn)短的氣泡幫助說明為什么禁用該選項(xiàng)以及如何使其處于活動(dòng)狀態(tài)。

5. 通過點(diǎn)擊觸發(fā)下拉框，而不是懸停觸發(fā)

懸停菜單會(huì)迫使用戶必須將指針放在菜單內(nèi)，如果用戶指針離開下拉菜單，菜單將被關(guān)閉，這無疑增加了用戶的操作難度。

6. 找到不同控件中的平衡關(guān)系

使用下拉菜單是避免用戶輸入內(nèi)容的便捷方法，眾所周知，打字需要用戶付出大量的認(rèn)知成本，這就是為什么下拉列表在表單設(shè)計(jì)中很常見的原因。

但是下拉菜單并不是萬能的，使用下拉菜單（尤其是表單中的下拉菜單）時(shí)，應(yīng)平衡表單類型、用戶類型等各種其他因素的關(guān)系，這需要設(shè)計(jì)師從眾多控件中進(jìn)行權(quán)衡。

七、結(jié)語

關(guān)于下拉菜單的設(shè)計(jì)指南遠(yuǎn)不止于此，以上僅是筆者通過學(xué)習(xí)與工作的個(gè)人感悟，感謝閱讀。

參考文章鏈接

• https://experience.sap.com/fiori-design-web/select/
• https://www.nngroup.com/articles/listbox-dropdown/
• https://www.nngroup.com/articles/drop-down-menus/
• https://cxl.com/research-study/form-field-usability-buttons/
• https://www.zuko.io/blog/why-drop-downs-are-bad-for-online-forms

本文由 @LIZ醬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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