編輯導語：下拉菜單，是進行界面設計的一種常用控制項，雖然經常會用到，但是很多人可能並不是很了解它。本文作者為我們介紹了下拉菜單的類型、利弊，以及我們應該如何使用下拉菜單。希望通過本篇文章，可以幫助你拓展關於下拉菜單的設計知識。
一、前言
Dropdown（下拉菜單）是界面設計中的常用控制項，它可以用下拉列表展示多個內容標籤，用戶能從預定的列表中選擇一項或多項。在研究相關控制項時，會發現這個控制項有很多不同的名稱：下拉菜單、下拉框、選擇器、選擇框等等。
Ant Design將下拉菜單與選擇器分別放在不同的屬性裡，下拉菜單歸屬導航、選擇器歸屬數據錄入，Fiori Design 將下拉菜單與選擇器定義為同一種控制項。
其實，根據W3C規範規定，其應該命名為select element（選擇元素）。
為方便表述，下文統一稱之為下拉菜單。
二、下拉菜單是什麼
最簡單的下拉菜單包含四個主要部分：一個容器框，一個朝下的箭頭按鈕，一個項目列表和一個標籤。用戶可以單擊向下箭頭以顯示項目列表，從中選擇一項或多項。
下拉菜單有3種變體，可以根據選擇類型進行分類：
單選列表框：用戶只能從互斥選項列表中選擇一項多選列表框：允許用戶選擇多個選項搜索選擇：允許用戶搜索大量選項選項過多時，下拉菜單可能會滾動，具體取決於展開時包含的項目數量。對於下拉列表，選定的選項或默認值在容器框中保持可見，而其他列表項僅在單擊向下箭頭後出現，完成選擇或在下拉列表的外部單擊可將其關閉。
三、下拉菜單的類型
下拉菜單常見用法有以下幾種：
1. 命令菜單
命令菜單主要應用於電腦程式和應用程式（如Microsoft Word）中，目的是為用戶提供下一步操作，點擊下拉後可以查看更多控制界面的按鈕。
2. 導航菜單
水平導航欄中常見的一種導航菜單，用於向用戶提供更多連結，可以將用戶帶到新的位置。
3. 表單填寫
用戶可以選擇一個選項來輸入表單欄位，幫助用戶從許多不同選項中進行便捷選擇：
4. 屬性選擇
允許用戶從許多選項中選擇一個值，其作用方式類似於表單填寫中的下拉菜單。
儘管最初「下拉框」和「下拉菜單」可互換使用，但隨著設計規範的不斷完善，兩者之間出現了功能上的區別。如今，「下拉菜單」更多用於命令和導航列表，而「下拉框」通常用於表單數據填寫和屬性選擇。
四、下拉菜單的利弊
在界面設計中使用下拉菜單是一個很方便的解決方案，但是過度使用會顯得界面繁瑣笨重，我們必須了解其優缺點來確定什麼情況下使用是最佳的。
1. 使用下拉菜單的優勢
提供最佳選項：為用戶提供系統最佳項，默認情況下可以處於選中狀態；淡化替代選項：由於下拉列表隱藏了其他可用選項，因此很好地淡化了替代選項。這在默認值可以滿足大多數用戶的情況下，並且替代選項對非專業用戶來說是危險的情況下是有利的；節省空間：如果界面只能為用戶提供很少的空間，下拉菜單非常實用。雖然下拉菜單很小，但是可以在很小的空間中包含大量信息；操作熟悉：下拉菜單是大多數用戶熟悉的選擇控制項，在計算機應用程式中使用廣泛；輸入可預測：通過輸入文本欄位收集用戶信息是不可預測的，用戶可能會輸入錯誤，拼寫錯誤或誤解輸入內容。下拉菜單通過提供的選項，可以預測用戶的輸入內容；靈活：下拉菜單最大的優點就是一個下拉列表就能包含所有選項，無需根據選項數量而更改設計。
2. 使用下拉菜單的缺點
當下拉菜單包含太多選項時需要滾動，會放慢用戶輸入速度；下拉菜單默認情況下會隱藏可用選項，用戶無法感知選項內容；下拉列表看起來像已經完成，當用戶填寫表格時，會在視覺上掃描要填寫的空欄位，單選按鈕和複選框更容易被發現；
將光標從下拉框中移出時會不小心關閉下拉列表，用戶需要重新開始一輪新的選擇過程。
五、下拉菜單vs其他控制項
1. 切換/開關
如果用戶輸入的是兩個互相對立的選項，則可以使用開關。如：有效或無效、是或否、開或關等。切換開關可以替換兩個單選項，允許用戶在兩個相反的狀態之間進行選擇，最適合用於更改系統功能和首選項。
2. 單選按鈕
當選項很少（5個或更少）時，單選按鈕可用於替換下拉菜單。與下拉菜單相比，使用單選按鈕的好處是可以輕鬆地掃描選項，而無需強制用戶交互來查看可用選項。
心理學家J. A.Bargas Avila及其團隊在關於網頁表單設計的研究中表明了使用單選按鈕優於下拉菜單：「單選按鈕的優勢在於所有選項都可以立即看到，而下拉菜單的優勢在於節省了屏幕空間」。
在CXL進行的可用性研究中，他們發現，與使用單選按鈕相比，下拉菜單顯著降低了用戶的速度：「調查參與者完成單選按鈕表單（n = 354）的平均速度比使用選擇菜單按鈕（n = 354）的表單快2.5秒。在置信度為95％的情況下，單選按鈕明顯更快。」
3. 輸入框
對於輸入可能更快的情況，應避免使用下拉菜單。例如，當輸入金額或年齡時：
與下拉菜單的交互相比，在輸入框中輸入內容通常更快、更方便，從下拉菜單中選擇一個值所需的最小交互次數如下：
對於屏幕顯示尺寸有限的界面，特別是移動端界面，單擊下拉菜單後，選項列表可能並不完整。因此，用戶必須上下滾動以查看適合屏幕的選項數量。對於無序列表，找到正確的值需要耗費更多時間。
4. 列表框
與使用複選框或單選按鈕相比，當用戶可以選擇5個或更多選項時，最好使用列表框或下拉列表。
在列表框與下拉列表之間進行選擇時，還需要考慮其他因素，例如可用的屏幕空間量，是否需要用戶淡化其他選項或是否允許用戶進行更改等。設計師 Anna Kaley針列表框與下拉列表的優劣進行了詳細分析，下面列舉了部分分析結果：
可見當屏幕空間足夠、需要查看已選項以及需要對已選項進行更改時，使用列表框比下拉菜單更合適。例如，巨量引擎在填寫地域時，為了方便用戶對比已選項與未選項以及更改已選內容，使用了雙列表框。
六、如何使用下拉菜單
1. 儘可能指定默認選擇，如果未指定所選項目可使用佔位符
通常情況下請給一個默認選項，如果需要指示所有項目都適用，可提供「全部」作為選項，並將其放在列表的開頭；如果允許用戶不要選擇任何選項，請提供「無」作為選項，並將其放在列表的開頭。
若一定要使選項默認選擇空，可以通過容器框中使用佔位符來解決該問題，使其看起來也為「空」。為了獲得良好的可訪問性，建議不要使用空白下拉列表。
2. 以可預測的方式對選項進行排序
排序選項列表應包含用戶可用的所有項目，可選擇以下方式排序：
邏輯：將項目按有意義的順序排序，將相關選項組合在一起，並首先顯示最常用的選項，然後顯示不太常用的選項；按字母順序：按字母順序對貨幣，名稱和類似內容進行排序；數值：將數值按順序排列，通常從最低的數字開始；時間順序：將與時間相關的信息按時間順序排序，通常最新的優先。
3. 使用簡短的描述性選項
文本值應儘可能短，因為列表僅限於使用單行，太長的值可能會被截斷。
4. 不可用的選項置灰
不能選擇的選項不要刪除，應保留在視圖中並用灰色表示。如果用戶將滑鼠懸停在變灰的選項上超過一秒鐘，可以考慮顯示一條簡短的氣泡幫助說明為什麼禁用該選項以及如何使其處於活動狀態。
5. 通過點擊觸發下拉框，而不是懸停觸發
懸停菜單會迫使用戶必須將指針放在菜單內，如果用戶指針離開下拉菜單，菜單將被關閉，這無疑增加了用戶的操作難度。
6. 找到不同控制項中的平衡關係
使用下拉菜單是避免用戶輸入內容的便捷方法，眾所周知，打字需要用戶付出大量的認知成本，這就是為什麼下拉列表在表單設計中很常見的原因。
但是下拉菜單並不是萬能的，使用下拉菜單（尤其是表單中的下拉菜單）時，應平衡表單類型、用戶類型等各種其他因素的關係，這需要設計師從眾多控制項中進行權衡。
七、結語
關於下拉菜單的設計指南遠不止於此，以上僅是筆者通過學習與工作的個人感悟，感謝閱讀。
參考文章連結
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醬 原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議