
在表單中使用下拉菜單有很多優(yōu)點(diǎn):
1. 它們在UI上占用的空間不多;
2. 支持自動驗證輸入;
3. 所有瀏覽器和平臺都支持它們;
4.它們實現(xiàn)起來既方便又便宜,用戶熟悉;
同時,雖然下菜單是最常被濫用的表單控件之一,但是也是公認(rèn)的“應(yīng)該是不得已的選項”
下面我們來看看一些局限性和關(guān)注點(diǎn):
1. 使用下拉菜單時,在點(diǎn)擊展開之前,無法一眼看出菜單選項,因此用戶無法預(yù)知里面是2個還是50個選項。
2.從下拉列表中選擇一個選項(特別是在移動設(shè)備上)步驟繁瑣:
(1)您必須點(diǎn)擊下拉列表以打開選項列表
(2)滾動并瀏覽項目以選擇一個項目
(3)然后關(guān)閉下拉菜單
3. 設(shè)計師設(shè)計下拉菜單更輕松:只需將所有可能的選項添加到下拉列表中,不需要考慮優(yōu)先級(類似漢堡菜那樣)
4. 較長的下拉菜單(如國家/地區(qū)選擇器)尋找起來會很麻煩,特別是在沒有搜索功能的移動設(shè)備上。
5. 在列表中可見和可滾動區(qū)域很小,某些移動屏幕上滾動瀏覽選項會不方便。

不過除了下拉菜單之外,還有很多代替輸入控件可以更符合具體的場景使用。
一 考慮選項的數(shù)量
1. 例如:下表中示例1(開/關(guān))決策,使用下拉菜單是一個非常糟糕的選擇。應(yīng)該使用一個復(fù)選框或切換開關(guān)。

2.如果選項較少時,建議使用單選按鈕或分段控件,以便所有選項一次顯示,而無需打開列表。


3. 如果選項數(shù)量多時,并且當(dāng)用戶確切地知道他們在找什么時,請考慮一個“?開始輸入...?”解決方案,而不是滾動列表,允許用戶輸入,只顯示過濾的選項。節(jié)省翻看列表的時間。

4. 對于數(shù)量多且多樣化的列表,可以使用現(xiàn)有的用戶數(shù)據(jù)來確定選項的優(yōu)先順序,并僅列出用戶的前幾個最受歡迎的選項。這樣一來,有90%的用戶可以立即找到自己的偏好,只有10%的用戶需要選擇其他,然后在下一個問題中選擇。盡管“其它”看起來不是非常完美,但這種方式可以提升大部分用戶的體驗。

考慮什么場景中需要用戶輸入
1. 下拉列表的好處之一是用戶不必輸入太多內(nèi)容。但是,如果不需要輸入太長并且經(jīng)常被詢問(例如個人信息),那么通常輸入更容易,而不是從列表中選擇;

2. 一般來說,在手機(jī)上輸入數(shù)字通常比使用菜單選擇數(shù)字更加方便。

3. 如果需要驗證用戶的輸入,那么在輸入字段用于搜索,一邊打字一邊過濾出可能的選項,讓用戶選擇。

4. 當(dāng)選項的排序順序不明確時,在選項列表中搜索的功能尤其有用。

例如:國家列表:與其一次列出超過兩百個國家名稱,還不如通過輸入和過濾來幫助用戶

5.對于表示數(shù)量精確值(例如乘客購物車中的物品數(shù)量),可以允許用戶通過單擊快速增加或減少數(shù)量。

6. 對于位于刻度上的不精確數(shù)值,可以使用滑塊。

7. 用多個選擇菜單選擇一個日期可能是一個非常痛苦的經(jīng)歷,所以為了輸入最近的日期,需要使用日期選擇器。(但用它來輸入較遠(yuǎn)的日期是不方便的)

三、如何讓下拉菜單更加智能
不言而喻,不應(yīng)該總是避免下拉菜單。當(dāng)選擇菜單是最適合的輸入控件時,請根據(jù)以上情況的考量,設(shè)計的更加方便。
使用有意義的文案:即使列表打開,仍然可以看到。在選擇菜單中,使用描述性文案告訴用戶他們正在選擇什么(即“?選擇類別”而不是“?請選擇?”)。
以合理的方式對項目進(jìn)行排序:根據(jù)用戶數(shù)據(jù),嘗試將最受歡迎的選項放在列表頂部。甚至默認(rèn)選擇最常選的一個。
先為用戶默認(rèn)選擇:手機(jī)和瀏覽器都有辦法知道用戶的位置,日期和其他信息。使用該數(shù)據(jù)為每個用戶預(yù)先選擇最可能的選項。
減少字段數(shù)量并讓計算機(jī)完成工作:如果用戶輸入郵政編碼,計算機(jī)就可以知道城市和州 - 無需詢問。如果用戶輸入信用卡號碼,計算機(jī)就已經(jīng)知道信用卡信息 - 不需要問。
考慮使用API:?使用微信、QQ注冊比填寫注冊表更容易。用Paypal支付比輸入信用卡數(shù)據(jù)要容易得多。