在表單中使用下拉菜單有很多優(yōu)點(diǎn)：

1. 它們?cè)赨I上占用的空間不多；

2. 支持自動(dòng)驗(yàn)證輸入簿煌；

3. 所有瀏覽器和平臺(tái)都支持它們；

4.它們實(shí)現(xiàn)起來既方便又便宜诺凡，用戶熟悉变屁；

同時(shí)，雖然下菜單是最常被濫用的表單控件之一揽咕，但是也是公認(rèn)的“應(yīng)該是不得已的選項(xiàng)”

下面我們來看看一些局限性和關(guān)注點(diǎn)：

1. 使用下拉菜單時(shí)悲酷，在點(diǎn)擊展開之前，無法一眼看出菜單選項(xiàng)亲善，因此用戶無法預(yù)知里面是2個(gè)還是50個(gè)選項(xiàng)设易。

2.從下拉列表中選擇一個(gè)選項(xiàng)（特別是在移動(dòng)設(shè)備上）步驟繁瑣：

（1）您必須點(diǎn)擊下拉列表以打開選項(xiàng)列表

（2）滾動(dòng)并瀏覽項(xiàng)目以選擇一個(gè)項(xiàng)目

（3）然后關(guān)閉下拉菜單

3. 設(shè)計(jì)師設(shè)計(jì)下拉菜單更輕松：只需將所有可能的選項(xiàng)添加到下拉列表中，不需要考慮優(yōu)先級(jí)（類似漢堡菜那樣）

4. 較長的下拉菜單（如國家/地區(qū)選擇器）尋找起來會(huì)很麻煩蛹头，特別是在沒有搜索功能的移動(dòng)設(shè)備上顿肺。

5. 在列表中可見和可滾動(dòng)區(qū)域很小，某些移動(dòng)屏幕上滾動(dòng)瀏覽選項(xiàng)會(huì)不方便渣蜗。

不過除了下拉菜單之外屠尊，還有很多代替輸入控件可以更符合具體的場景使用。

一 考慮選項(xiàng)的數(shù)量

1. 例如：下表中示例1（開/關(guān)）決策袍睡，使用下拉菜單是一個(gè)非常糟糕的選擇知染。應(yīng)該使用一個(gè)復(fù)選框或切換開關(guān)。

示例1

2.如果選項(xiàng)較少時(shí)斑胜，建議使用單選按鈕或分段控件控淡，以便所有選項(xiàng)一次顯示，而無需打開列表止潘。

示例2-1

示例2-2

3. 如果選項(xiàng)數(shù)量多時(shí)掺炭，并且當(dāng)用戶確切地知道他們?cè)谡沂裁磿r(shí)，請(qǐng)考慮一個(gè)“?開始輸入...?”解決方案凭戴，而不是滾動(dòng)列表涧狮，允許用戶輸入，只顯示過濾的選項(xiàng)。節(jié)省翻看列表的時(shí)間者冤。

示例3

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

考慮什么場景中需要用戶輸入

1. 下拉列表的好處之一是用戶不必輸入太多內(nèi)容摇予。但是，如果不需要輸入太長并且經(jīng)常被詢問（例如個(gè)人信息）吗跋，那么通常輸入更容易侧戴，而不是從列表中選擇；

使用數(shù)字鍵盤在移動(dòng)設(shè)備上輸入出生年份比通過滾動(dòng)長列表更容易

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

即使數(shù)字下拉列表的排序順序清晰，但鍵入仍然比滾動(dòng)更容易

3. 如果需要驗(yàn)證用戶的輸入秩冈，那么在輸入字段用于搜索，一邊打字一邊過濾出可能的選項(xiàng)斥扛，讓用戶選擇入问。

列出美國的州時(shí)，只需輸入一個(gè)字母即可過濾列表

4. 當(dāng)選項(xiàng)的排序順序不明確時(shí)稀颁，在選項(xiàng)列表中搜索的功能尤其有用芬失。

貨幣的排序順序可能不清楚，因此確保他們可以搜索名稱和貨幣代碼

例如：國家列表：與其一次列出超過兩百個(gè)國家名稱匾灶，還不如通過輸入和過濾來幫助用戶

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

6. 對(duì)于位于刻度上的不精確數(shù)值阶女，可以使用滑塊颊糜。

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

三、如何讓下拉菜單更加智能

不言而喻憔杨，不應(yīng)該總是避免下拉菜單鸟赫。當(dāng)選擇菜單是最適合的輸入控件時(shí)，請(qǐng)根據(jù)以上情況的考量，設(shè)計(jì)的更加方便抛蚤。

使用有意義的文案：即使列表打開台谢，仍然可以看到。在選擇菜單中岁经，使用描述性文案告訴用戶他們正在選擇什么（即“?選擇類別”而不是“?請(qǐng)選擇?”）对碌。

以合理的方式對(duì)項(xiàng)目進(jìn)行排序：根據(jù)用戶數(shù)據(jù)，嘗試將最受歡迎的選項(xiàng)放在列表頂部蒿偎。甚至默認(rèn)選擇最常選的一個(gè)朽们。

先為用戶默認(rèn)選擇：手機(jī)和瀏覽器都有辦法知道用戶的位置，日期和其他信息诉位。使用該數(shù)據(jù)為每個(gè)用戶預(yù)先選擇最可能的選項(xiàng)骑脱。

減少字段數(shù)量并讓計(jì)算機(jī)完成工作：如果用戶輸入郵政編碼，計(jì)算機(jī)就可以知道城市和州 - 無需詢問苍糠。如果用戶輸入信用卡號(hào)碼叁丧，計(jì)算機(jī)就已經(jīng)知道信用卡信息 - 不需要問。

考慮使用API：?使用微信岳瞭、QQ注冊(cè)比填寫注冊(cè)表更容易拥娄。用Paypal支付比輸入信用卡數(shù)據(jù)要容易得多。

原文鏈接