本文列舉了下拉菜單設計中的一些要點，並結合多個例子分析了怎麼讓下拉菜單使用得恰到好處。
正確地使用下拉菜單是美妙的，它們可以幫助用戶縮小選擇範圍，逆轉屏幕空間並防止錯誤的數據輸入。但是，在某些情況下，下拉菜單的意義不大，反而會對用戶體驗產生負面影響。
重要的是要知道何時使用下拉菜單或其他接口元素，例如單選按鈕，打開的文本欄位等，過度使用或濫用它們會造成可用性問題。
在本文中，我將討論下拉菜單的性質，並分析應該或不應該使用它們的情況。我還將展示一些不好的例子，以幫助你進行設計。
01 避免長列表下拉
在表單中使用下拉菜單似乎很容易——它們在界面上不會佔用太多空間，所有瀏覽器都支持它們，並且用戶對它們的了解也足夠多。但是，當選項超過15種時，用戶可能會不知所措，而他們也難以導航。
看到20多個未分類的選項可能會令人迷惑並且令人生畏，用戶很難找到他們想要的輸入；還會出現滾動問題，用戶必須將滑鼠光標保持在下拉框中，否則，他們最終將向下滾動頁面。
長下拉列表最經典的示例是國家選擇器，通常有100多個選項。儘管通常按字母順序對其進行排序，但有時會將流行國家/地區放在頂部，這可能會使用戶感到困惑。
更好的選擇是使用具有自動完成功能的文本欄位，因為用戶已經知道他們在尋找什麼輸入。
自定義搜索輸入
02 選項太少
另一方面，如果選項太少， 那麼下拉菜單將是一個糟糕的選擇，因為它通過隱藏可能已經暴露的信息而在用戶流中引入了不必要的摩擦。
更好的選擇是使用單選按鈕，該按鈕允許用戶立即掃描可用選項，而無需花費任何精力或精力。
如果選項很少，最好使用單選框，而不要使用下拉菜單
03 禁用灰色選項
當某個選項被禁用或不可用時，應將其顯示為灰色，而不是將其刪除。如果刪除了禁用項，則界面將失去空間一致性，並使用戶更難學習——他們可能僅由于禁用項而無法找到某些選項。
與其刪除已禁用的選項，不如將它們變灰以指示其「已禁用」或「不可用」狀態。您也可以考慮顯示工具提示，以指示該選項被禁用的原因以及如何使其處於活動狀態。
與其刪除禁用的選項，不如將它們變灰以指示其「禁用」狀態
04 避免打字速度更快時使用下拉菜單
在某些情況下，鍵入實際上可能比使用下拉菜單更快。一種典型的情況是輸入信用卡有效期。鍵入mm / yy絕對快得多，而不是從兩個下拉菜單（月和年）中滾動。
儘管使用自由格式的輸入欄位確實需要某種形式的數據驗證，但從可用性的角度來看，它仍然是更好的選擇——因為它可以減少用戶的負擔。
對於用戶而言，鍵入時可能更快，請避免使用下拉菜單。
05 避免過度使用
當某些數據或信息可以自動導出時，無需不斷詢問用戶的輸入。
這樣的示例之一就是在結帳過程中使用的「卡類型」欄位，可以根據信用卡號的前幾個數字，確定卡的類型，因此要求用戶自己選擇卡的類型會產生額外的麻煩。
當可以在其他地方找到數據時，不要養成添加新輸入欄位的習慣。
06 減少動作數量
可以根據所需信息自定義下拉菜單的菜單部分，以減少操作數量。
一個經典的例子是「日期選擇」欄位，如果使用普通的列表菜單，則需要3個下拉菜單（月，日和年），這對於用戶來說很煩人。
更好的選擇是自定義菜單組件，以允許用戶選擇僅具有一個下拉菜單的輸入。
使用自定義菜單減少所需的操作數量。
07 使用簡潔明了的標籤
用戶根據他們的標籤選擇菜單選項，因此準確和提供信息非常重要。通常，最好使用句子大小寫並編寫簡潔的標籤，以清楚表明選擇的目的。
以下是寫好標籤的一些準則：
對於動作菜單項，請使用動詞來描述將要發生的動作對於連結，請使用名詞來標識用戶將定向到的頁面排除菜單項中的文章；使用「刪除頁面」，而不是「刪除頁面」將菜單項保持在一行文本中通過按邏輯順序對列表進行排序來組織菜單項也很重要——如果知道的話，將選擇最多的選項排列在頂部。這需要用戶研究，應隨時間進行測試和完善以重新評估結果。
作者：LDesign1，公眾號ID：LDesign1
本文由@LDesign1 原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash， 基於CC0協議