網(wǎng)站建設中下拉菜單更好的替代選擇發(fā)布者：本站     時(shí)間：2022-05-05 09:05:01

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

與此同時(shí)，根據Luke Wroblewski和被多人提及的原則：“下拉菜單應該是最后的選擇”的說(shuō)法，那么下拉菜單卻是最經(jīng)常被誤用的。

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

下拉菜單控件的可用是選項不可見(jiàn)的，直到你點(diǎn)擊或點(diǎn)擊打開(kāi)它。同時(shí)， 在第一眼看到列表時(shí)，列表的長(cháng)度是隱藏的，即用戶(hù)無(wú)法預測一個(gè)下拉菜單是包含2個(gè)還是50個(gè)元素。
從下拉列表中選擇一個(gè)選項，（尤其是在移動(dòng)設備上）是一個(gè)多步驟的過(guò)程：你必須點(diǎn)擊下拉菜單打開(kāi)選項列表，然后滾動(dòng)和瀏覽項目并選擇一個(gè)，然后關(guān)閉下拉。
下拉菜單可以讓設計師懶惰：設計師很容易就把所有可能的選項不分任何優(yōu)先級一起放到下拉列表里（這很類(lèi)似于漢堡菜單的做法）。
像國家地區選擇這種很長(cháng)的下拉菜單，用眼睛掃描起來(lái)簡(jiǎn)直是噩夢(mèng)，尤其是在鍵盤(pán)搜索通常是不可用的移動(dòng)端。
在可見(jiàn)、可滾動(dòng)但面積很小的屏幕上滾動(dòng)去選擇想要的選項是一件非常痛苦的事情。
下拉菜單更好的替代選擇（移動(dòng)端）

在IOS系統上，第一眼可見(jiàn)的選項少的驚人。
但是好消息是這里有大量的很棒的可替代下拉菜單控件的選擇，能為你在不同的情況下所用到。

考慮選項的數量
若只有兩個(gè)選項（例如開(kāi)/關(guān)），那么使用下拉菜單就是一個(gè)錯誤的選擇。這里你需要用復選框(CheckBox)或者用切換開(kāi)關(guān)（toggle switch）。

下拉菜單更好的替代選擇（移動(dòng)端）

如果你的下拉菜單僅僅包含是/否、開(kāi)/關(guān)這樣的選項，那么就用開(kāi)關(guān)控件來(lái)替代它
對于個(gè)數少且互斥的選項 ，建議使用單選按鈕（radio buttons）或分段控件（segmented），使所有可用的選項第一眼可見(jiàn)，且無(wú)需打開(kāi)列表。

下拉菜單更好的替代選擇（移動(dòng)端）

分段控件(SEGMENTED CONTROLS)可以一次性展示出所有的可選項
下拉菜單更好的替代選擇（移動(dòng)端）

可見(jiàn)選項的數量取決于屏幕寬度和選項標簽的長(cháng)度，但不要超過(guò)5項
當用戶(hù)確切地知道他們在尋找什么時(shí)，對于大量確定的選項，考慮使用“請輸入…”這樣的解決方案，其中篩選選項列表在輸入第一個(gè)或兩個(gè)字母之后顯示。

下拉菜單更好的替代選擇（移動(dòng)端）

用讓用戶(hù)來(lái)輸入文字來(lái)篩選選項的方式替代滑動(dòng)下拉菜單
對于大型和多樣的列表，嘗試使用現有的用戶(hù)數據來(lái)排列優(yōu)先級，只列出幾個(gè)用戶(hù)常選的選項。這種方式有一個(gè)好處就是90%的用戶(hù)會(huì )立即發(fā)現自己偏好的選擇項，只有10%的人選擇立即“其他”然后跳到指定的下一個(gè)問(wèn)題。

下拉菜單更好的替代選擇（移動(dòng)端）

雖然“其他”不適一個(gè)優(yōu)雅的解決方案，但是優(yōu)先級排序的方式能夠提高大多用戶(hù)的體驗
考慮預填寫(xiě)
下拉列表的好處之一是用戶(hù)不必輸入很多內容。然而，如果預期的輸入不是太長(cháng)并且經(jīng)常被問(wèn)到（例如個(gè)人信息），通常用輸入的方式是比較容易的，而不是從列表中選擇：

下拉菜單更好的替代選擇（移動(dòng)端）

在移動(dòng)設備上輸入生日的年份，使用數字鍵盤(pán)比滑動(dòng)長(cháng)列表要容易的多
通常，在移動(dòng)設備上輸入數值會(huì )比數字下拉列表效率高。

下拉菜單更好的替代選擇（移動(dòng)端）

盡管數字下拉列表是清晰的，但是輸入數值依然比滑動(dòng)選擇要方便。
如果驗證用戶(hù)輸入的內容很重要，輸入內容用于篩選可用選項時(shí)，“請輸入……”這個(gè)方法可能是有用的。

下拉菜單更好的替代選擇（移動(dòng)端）

在羅列出美國各洲的時(shí)候，只需輸入一個(gè)字母就能大大簡(jiǎn)化原本很長(cháng)的列表。
當列表元素的排序順序不清晰時(shí)，在選項列表中搜索的能力特別有用。

下拉菜單更好的替代選擇（移動(dòng)端）

不清楚貨幣代碼排列順序的用戶(hù)，能確保他們能在名稱(chēng)和貨幣代碼間進(jìn)行搜索
同樣的技術(shù)也應該應用于國家列表上面：使用讓用戶(hù)盡快開(kāi)始鍵入并過(guò)濾結果來(lái)替代列出200多個(gè)條目的方案。

下拉菜單更好的替代選擇（移動(dòng)端）

對于表示數量的非連續值（例如乘客數量或購物車(chē)中的商品數量），步進(jìn)器（stepper）允許用戶(hù)點(diǎn)擊來(lái)快速增加或減少數值。

下拉菜單更好的替代選擇（移動(dòng)端）

對于連續數值或在某個(gè)范圍內的數值，請考慮使用滑塊。

下拉菜單更好的替代選擇（移動(dòng)端）

顯示最大值和最小值的范圍有助于用戶(hù)理解
選擇當下最近日期，使用多個(gè)選擇菜單選擇可能是一次非常痛苦的體驗，因此我們選擇使用日期選擇器（date picker）。（但千萬(wàn)別用它輸入出生日期）

下拉菜單更好的替代選擇（移動(dòng)端）

設計更智能的下拉菜單
雖然本文一直在告誡你不要使用下拉菜單，但如果在某些場(chǎng)景下，你確實(shí)認為讓用戶(hù)在下拉菜單中選擇是一種最合適的輸入方式，也沒(méi)關(guān)系，不過(guò)你要進(jìn)來(lái)讓下拉菜單更友好一些。

使用有意義的標簽：當下拉菜單打開(kāi)時(shí)，菜單標題和描述也需要保留且清晰可見(jiàn)。在“選擇”菜單中使用一個(gè)描述性標簽，告訴用戶(hù)他們正在選擇什么（即“選擇類(lèi)型”而不是“請選擇”）。
按合理的方式排序條目：基于用戶(hù)數據嘗試將最流行的選項放在列表的頂部。甚至預先選擇用戶(hù)最常選的選項作為默認選項。
使用智能默認值：手機和瀏覽器知道用戶(hù)的位置、日期等大量的信息。利用已知的數據預先為每個(gè)用戶(hù)選擇最有可能的選項。
減少用戶(hù)需要填寫(xiě)的內容，讓計算機分擔一些工作：如果用戶(hù)輸入郵政編碼，毫無(wú)疑問(wèn)計算機已經(jīng)能識別出這個(gè)郵政編碼所屬的國家和城市。如果用戶(hù)輸入信用卡號碼，計算機也可以自動(dòng)識別出這是Master信用卡?。不需要讓用戶(hù)自己填寫(xiě)。
考慮使用API：使用第三方的方式注冊比填寫(xiě)注冊表要容易。PayPal支付比輸入你的信用卡信息更容易。