本文將依據下拉菜單的屬性，通過舉例來討論下拉菜單的使用場景，希望在設計上對大家有所幫助。
正確地設計下拉菜單，可以幫助用戶縮小選擇範圍，減少屏幕其他元素的干擾，以及防止用戶輸入錯誤的信息。但是，在某些情況下，下拉菜單的錯誤使用將給用戶體驗帶來嚴重的負面影響。在什麼情況下使用下拉菜單至關重要。
本文將依據下拉菜單的屬性，通過舉例來討論下拉菜單的使用場景，希望在設計上對大家有所幫助。
01 避免過長的下拉列表
在表單使用下拉菜單看起來很簡單，它們不會占用界面空間，適配所有瀏覽器，用戶對於此類組件足夠熟悉。
但是，當下拉菜單里有超過15個選項時，用戶會變得不知所措，選擇起來非常費勁——用戶需要從20多個未分類的選項中找到想要的內容，想想都令人頭大。
此外還存在滾動的問題，用戶必須把光標保持在下拉列表中，不然很容易滾動整個頁面，造成誤操作。
國家選擇器應該是最經典的長列表下拉菜單了，常常有超過100多個選項。雖然列表中的選項一般情況下會按字母順序排列，但是將熱門國家/地區放在列表頂部的做法依舊不能滿足用戶需求。更好的做法是，增加自動填充功能或搜索功能，因為用戶知道它們想要選擇的內容是什麼。（比如系統可以根據地理位置或場景自動填充國家，或用戶自主搜索國家）
02 避免選項過少
而選項過少，使用下拉菜單組件也將是一個糟糕的決定。隱藏了本可以直接展示的信息內容，反而給用戶的流程造成阻礙，降低了用戶完成任務的效率。比較好的方式是使用單選組件，可以讓用戶快速瀏覽選項內容，提升用戶的操作效率。
03 置灰不可選項，而非刪除
當某個選項被禁用或不可用時，應將其顯示為灰色，而不是直接刪除。因為這些不可用選項被禁用的情況有多種（如可能是在當前場景下是不可用的，在其他場景是可用的）。可以考慮使用給不可用選項增加提示，說明其被禁用原因以及如何使其為可用狀態。
04 鍵盤輸入可能更快
在某些情況下，鍵入可能比下拉選擇速度更快。典型的案例就是信用卡日期。鍵入mm/yy絕對快得多，而不是從兩個下拉菜單（月和年）中滾動。
儘管使用自由格式的輸入字段需要某種形式的數據驗證，但從可用性的角度來看，它仍然是最好的選擇——因為它可以減少用戶的負擔。
05 避免過度使用
當某些數據或信息可以自動填入時，無需要求用戶進行手動輸入。這樣的示例之一就是在結帳過程中使用的“卡類型”功能。根據信用卡號的前幾個數字，可以確定卡的類型，此時要求用戶自己選擇卡的類型會額外增加用戶的操作。
06 減少操作
可以根據所需信息自定義下拉菜單的交互方式，以減少操作步驟。一個經典的例子是“日期選擇”功能，如果使用普通的列表菜單，則需要3個下拉菜單（月，日和年），這對於用戶來說很繁瑣。
更好的選擇是自定義菜單組件，以允許用戶僅使用一個下拉菜單選擇輸入。
07 使用簡潔明瞭的標簽
用戶根據菜單標簽內容選擇選項，因此準確提供信息非常重要。通常，最好使用簡潔的標簽，以清楚表明選擇的目的。以下是一些標簽的準則：
- 對於動作菜單項，請使用動詞來描述將要發生的動作
- 對於鏈接，請使用名詞來標識用戶跳轉到的頁面
- 排除菜單項中的冠詞；使用“刪除頁面”，而不是“刪除這個頁面”
- 將菜單項保持在一行文本中
通過按邏輯順序對列表進行排序來組織菜單項也很重要-如果可以，通常將最常選擇的選項放在下拉列表頂部。然後通過用戶調研，不斷進行測試和完善，以重新評估結果。
原文：7 tips for dropdown menu design
作者：Jeremiah Lam
編譯作者：微交互Lab；公號“微交互Lab”，定期分享設計好文
本文由@微交互Lab 翻譯發佈於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基於 CC0 協議。