下拉菜單更好的替代選擇（移動端）

使用下拉菜單的形式似乎已是司空見慣：它不占用太多空間的界面，它自動驗證輸入，所有瀏覽器和平台都支持它，實現下拉菜單非常的方便且容易，用戶對他們也習以為常了。

與此同時，根據Luke Wroblewski和被多人提及的原則：“下拉菜單應該是最後的選擇”的說法，那麼下拉菜單卻是最經常被誤用的。

讓我們看一看下拉菜單的局限性和令人擔憂的地方：

下拉菜單更好的替代選擇（移動端）

但是好消息是這裏有大量的很棒的可替代下拉菜單控件的選擇，能為你在不同的情況下所用到。

若隻有兩個選項（例如開/關），那麼使用下拉菜單就是一個錯誤的選擇。這裏你需要用複選框(CheckBox)或者用切換開關（toggle switch）。

下拉菜單更好的替代選擇（移動端）

對於個數少且互斥的選項，建議使用單選按鈕（radio buttons）或分段控件（segmented），使所有可用的選項第一眼可見，且無需打開列表。

下拉菜單更好的替代選擇（移動端）

下拉菜單更好的替代選擇（移動端）

當用戶確切地知道他們在尋找什麼時，對於大量確定的選項，考慮使用“請輸入…”這樣的解決方案，其中篩選選項列表在輸入第一個或兩個字母之後顯示。

下拉菜單更好的替代選擇（移動端）

對於大型和多樣的列表，嚐試使用現有的用戶數據來排列優先級，隻列出幾個用戶常選的選項。這種方式有一個好處就是90%的用戶會立即發現自己偏好的選擇項，隻有10%的人選擇立即“其他”然後跳到指定的下一個問題。

下拉菜單更好的替代選擇（移動端）

下拉列表的好處之一是用戶不必輸入很多內容。然而，如果預期的輸入不是太長並且經常被問到（例如個人信息），通常用輸入的方式是比較容易的，而不是從列表中選擇：

下拉菜單更好的替代選擇（移動端）

通常，在移動設備上輸入數值會比數字下拉列表效率高。

下拉菜單更好的替代選擇（移動端）

如果驗證用戶輸入的內容很重要，輸入內容用於篩選可用選項時，“請輸入……”這個方法可能是有用的。

下拉菜單更好的替代選擇（移動端）

當列表元素的排序順序不清晰時，在選項列表中搜索的能力特別有用。

下拉菜單更好的替代選擇（移動端）

同樣的技術也應該應用於國家列表上面：使用讓用戶盡快開始鍵入並過濾結果來替代列出200多個條目的方案。

下拉菜單更好的替代選擇（移動端）

對於表示數量的非連續值（例如乘客數量或購物車中的商品數量），步進器（stepper）允許用戶點擊來快速增加或減少數值。

下拉菜單更好的替代選擇（移動端）

對於連續數值或在某個範圍內的數值，請考慮使用滑塊。

下拉菜單更好的替代選擇（移動端）

選擇當下最近日期，使用多個選擇菜單選擇可能是一次非常痛苦的體驗，因此我們選擇使用日期選擇器（date picker）。（但千萬別用它輸入出生日期）

下拉菜單更好的替代選擇（移動端）

雖然本文一直在告誡你不要使用下拉菜單，但如果在某些場景下，你確實認為讓用戶在下拉菜單中選擇是一種最合適的輸入方式，也沒關系，不過你要進來讓下拉菜單更友好一些。

使用有意義的標簽：當下拉菜單打開時，菜單標題和描述也需要保留且清晰可見。在“選擇”菜單中使用一個描述性標簽，告訴用戶他們正在選擇什麼（即“選擇類型”而不是“請選擇”）。
按合理的方式排序條目：基於用戶數據嚐試將最流行的選項放在列表的頂部。甚至預先選擇用戶最常選的選項作為默認選項。
使用智能默認值：手機和瀏覽器知道用戶的位置、日期等大量的信息。利用已知的數據預先為每個用戶選擇最有可能的選項。
減少用戶需要填寫的內容，讓計算機分擔一些工作：如果用戶輸入郵政編碼，毫無疑問計算機已經能識別出這個郵政編碼所屬的國家和城市。如果用戶輸入信用卡號碼，計算機也可以自動識別出這是Master信用卡。不需要讓用戶自己填寫。