如何使用下拉菜單？下拉菜單設計的7個小技巧(下拉菜單欄怎么設置)

正確地設計下拉菜單，可以幫助用戶縮小選擇范圍，減少屏幕其他元素的干擾，以及防止用戶輸入錯誤的信息。但是，在某些情況下，下拉菜單的錯誤使用將給用戶體驗帶來嚴重的負面影響。如何使用下拉菜單？下面就跟大家分享下拉菜單設計的7個小技巧！

本文將依據下拉菜單的屬性，通過舉例來討論下拉菜單的使用場景，希望在設計上對大家有所幫助。

1、 避免過長的下拉列表

在表單使用下拉菜單看起來很簡單，它們不會占用界面空間，適配所有瀏覽器，用戶對于此類組件足夠熟悉。但是，當下拉菜單里有超過15個選項時，用戶會變得不知所措，選擇起來非常費勁。

用戶需要從20多個未分類的選項中找到想要的內容，想想都令人頭大。此外還存在滾動的問題，用戶必須把光標保持在下拉列表中，不然很容易滾動整個頁面，造成誤操作。

國家選擇器應該是最經典的長列表下拉菜單了，常常有超過100多個選項。雖然列表中的選項一般情況下會按字母順序排列，但是將熱門國家/地區放在列表頂部的做法依舊不能滿足用戶需求。更好的做法是，增加自動填充功能或搜索功能，因為用戶知道它們想要選擇的內容是什么。（比如系統可以根據地理位置或場景自動填充國家，或用戶自主搜索國家）

2、 避免選項過少

而選項過少，使用下拉菜單組件也將是一個糟糕的決定。隱藏了本可以直接展示的信息內容，反而給用戶的流程造成阻礙，降低了用戶完成任務的效率。比較好的方式是使用單選組件，可以讓用戶快速瀏覽選項內容，提升用戶的操作效率。

3、置灰不可選項，而非刪除

當某個選項被禁用或不可用時，應將其顯示為灰色，而不是直接刪除。因為這些不可用選項被禁用的情況有多種（如可能是在當前場景下是不可用的，在其他場景是可用的）?？梢钥紤]使用給不可用選項增加提示，說明其被禁用原因以及如何使其為可用狀態。

4、 鍵盤輸入可能更快

在某些情況下，鍵入可能比下拉選擇速度更快。典型的案例就是信用卡日期。鍵入mm/yy絕對快得多，而不是從兩個下拉菜單（月和年）中滾動。

盡管使用自由格式的輸入字段需要某種形式的數據驗證，但從可用性的角度來看，它仍然是最好的選擇——因為它可以減少用戶的負擔。

5、 避免過度使用

當某些數據或信息可以自動填入時，無需要求用戶進行手動輸入。這樣的示例之一就是在結帳過程中使用的“卡類型”功能。根據信用卡號的前幾個數字，可以確定卡的類型，此時要求用戶自己選擇卡的類型會額外增加用戶的操作。

6、 減少操作

可以根據所需信息自定義下拉菜單的交互方式，以減少操作步驟。一個經典的例子是“日期選擇”功能，如果使用普通的列表菜單，則需要3個下拉菜單（月，日和年），這對于用戶來說很繁瑣。

更好的選擇是自定義菜單組件，以允許用戶僅使用一個下拉菜單選擇輸入。

7、 使用簡潔明了的標簽

用戶根據菜單標簽內容選擇選項，因此準確提供信息非常重要。通常，最好使用簡潔的標簽，以清楚表明選擇的目的。以下是一些標簽的準則：

對于動作菜單項，請使用動詞來描述將要發生的動作

對于鏈接，請使用名詞來標識用戶跳轉到的頁面

排除菜單項中的冠詞；使用“刪除頁面”，而不是“刪除這個頁面”

將菜單項保持在一行文本中

通過按邏輯順序對列表進行排序來組織菜單項也很重要-如果可以，通常將最常選擇的選項放在下拉列表頂部。然后通過用戶調研，不斷進行測試和完善，以重新評估結果。

原文地址：7 tips for dropdown menu design

譯文地址：微交互Lab

作者：Jeremiah Lam

譯者：焱碩