以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理渊季，僅供學(xué)習(xí)交流阅畴，Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具柄慰。

在表單中使用下拉列表似乎不是什么很費(fèi)勁的事情嫉到，它們?cè)谟脩艚缑嫔险加玫目臻g不大梦湘，可自動(dòng)驗(yàn)證輸入瞎颗，支持所有的瀏覽器和各平臺(tái)。而且實(shí)現(xiàn)起來簡(jiǎn)單方便捌议，用戶對(duì)其也足夠了解哼拔。

同時(shí)，根據(jù)Luke Wroblewski和其他一些人的說法瓣颅，下拉菜單（或選擇）是最常被誤用的表格模式之一倦逐，“應(yīng)該是UI的最終界面”。

讓我們看看其一些局限性和用戶的擔(dān)憂：

在下拉列表中弄捕，可用選項(xiàng)一般不可見僻孝，除非你點(diǎn)擊或按鍵才能打開它。此外守谓，列表的長(zhǎng)度是被隱藏了的穿铆，也就是說，用戶無法預(yù)測(cè)下拉菜單里面到底包含了多少個(gè)元素斋荞。

從下拉列表中選擇一個(gè)選項(xiàng)（特別是在移動(dòng)設(shè)備上）是個(gè)多步驟的過程：您必須點(diǎn)擊下拉菜單打開選項(xiàng)列表荞雏，然后滾動(dòng)并瀏覽項(xiàng)目來選擇一個(gè)，然后關(guān)閉下拉列表平酿。

下拉菜單可能會(huì)使設(shè)計(jì)人員變得懶惰：只需將所有可能的選項(xiàng)添加到下拉列表中而不需要排列其優(yōu)先順序是是極其簡(jiǎn)單的（順便說一下凤优，與漢堡包菜單非常的類似）

較長(zhǎng)的下拉列表，比如國(guó)家或地區(qū)選擇器對(duì)于用戶來講簡(jiǎn)直就是噩夢(mèng)蜈彼，特別是在一些無法使用鍵盤搜索的設(shè)備上筑辨。

在某些列表可見和可滾動(dòng)區(qū)域很小的移動(dòng)設(shè)備屏幕上滾動(dòng)選擇可能會(huì)很痛苦：

?

在iOS上，可視選項(xiàng)的數(shù)量乍一看可能會(huì)出奇地少幸逆。

但好消息是棍辕，在許多情況下暮现，有很多替代性輸入控件可以更好地幫助你完成工作。

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

對(duì)于一個(gè)二擇其一（開或關(guān)）的選項(xiàng)楚昭，下拉菜單是個(gè)非常不明智的選擇栖袋。而你需要用的是一個(gè)復(fù)選框和開關(guān)切換控件。

?

如果你的下拉列表只包含是或否抚太，開或關(guān)的選項(xiàng)塘幅，只需用一個(gè)簡(jiǎn)單的開關(guān)控件。

對(duì)于少數(shù)互斥選項(xiàng)尿贫，建議使用單選按鈕或分段控件电媳，以便所有選項(xiàng)一次可見，而無需打開列表庆亡。

?

分段控件可一次顯示所選項(xiàng)和替代選項(xiàng)

?

可見選項(xiàng)的數(shù)量取決于屏幕寬度和選項(xiàng)標(biāo)簽的長(zhǎng)度匆背，但建議使用不超過5個(gè)項(xiàng)目

對(duì)于大量指定明確的選項(xiàng)，當(dāng)用戶非常確定他們正在尋找的內(nèi)容時(shí)身冀，請(qǐng)考慮“開始輸入... ”解決方案，其中在輸入第一個(gè)或兩個(gè)字母之后選項(xiàng)列表會(huì)篩選出用戶所需的選項(xiàng)括享。

?

不用滾動(dòng)列表搂根，讓用戶開始輸入而只顯示已過濾的選項(xiàng)

對(duì)于大型和多樣化的列表，請(qǐng)嘗試使用現(xiàn)有的用戶數(shù)據(jù)來優(yōu)先選擇該選項(xiàng)铃辖，只需列出少數(shù)最流行的選項(xiàng)給用戶剩愧。這樣一來，有90％的用戶會(huì)立即找到自己的喜好娇斩，只有10％必須選擇“ 其他”仁卷，然后在下一個(gè)問題中詳細(xì)了解。

?

雖然“其他”不是一個(gè)完美的解決方案犬第，但這樣的優(yōu)先性可能會(huì)改善大多數(shù)用戶的用戶體驗(yàn)

考慮預(yù)期的輸入

下拉列表的優(yōu)勢(shì)之一就是用戶不必輸入太多锦积。但是，如果預(yù)期的輸入不是太長(zhǎng)或者不會(huì)被頻繁詢問的話（例如個(gè)人數(shù)據(jù)）歉嗓，則輸入起來更容易一些丰介，而不是從列表中選擇它：

?

?

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

通常，在數(shù)字鍵盤上輸入數(shù)字值通常更有效鉴分。

?

?

?盡管數(shù)字下拉列表的排序順序是很清楚的哮幢，但比起滾動(dòng)選擇，輸入數(shù)值更簡(jiǎn)單些志珍。

如果驗(yàn)證用戶的輸入非常重要橙垢，那么使用輸入字段來篩選可用選項(xiàng)時(shí)，“輸入...”方法可能很有用伦糯。

?

?列出美國(guó)的選項(xiàng)時(shí)柜某，只需輸入一個(gè)字母可以很好地篩選出來嗽元。

當(dāng)元素的排序順序不清楚時(shí)，在選項(xiàng)列表中進(jìn)行搜索的方法特別有用莺琳。

?

貨幣的排序順序用戶可能不清楚还棱，因此請(qǐng)確保他們可以搜索名稱和貨幣代碼。

同樣的方法也應(yīng)該應(yīng)用于國(guó)家列表：而不是列出200多個(gè)項(xiàng)目惭等。應(yīng)允許用戶輸入盡可能快的篩選出結(jié)果珍手。

?

對(duì)于表示數(shù)量的離散值（例如乘客數(shù)量或購(gòu)物車中的物品數(shù)量），步進(jìn)器允許用戶通過一次點(diǎn)擊或按鍵來快速增加或減少數(shù)量辞做。

?

對(duì)于位于刻度上的值或非離散值琳要，請(qǐng)考慮使用滑塊。

?

顯示最小值和最大值的數(shù)值范圍可有助于理解上下文秤茅。

選擇一個(gè)由多個(gè)選擇菜單組成的日期可能是一個(gè)痛苦的體驗(yàn)稚补，所以選擇就近的日期，需使用日期選擇器框喳。（但不要用它來輸入出生日期？文弧）

?考慮設(shè)計(jì)更智能的下拉列表

不用說，不應(yīng)該總是避免下拉菜單的使用五垮。您會(huì)發(fā)現(xiàn)一個(gè)選擇菜單是最合適的輸入控件的情況乍惊，這很好。試著讓它盡可能的對(duì)用戶友好放仗。

使用有意義的標(biāo)簽：即使列表打開润绎，菜單標(biāo)簽的描述也應(yīng)該是清楚有效。在選擇菜單中诞挨，使用描述性標(biāo)簽莉撇，告訴用戶他們正在選擇什么（即“?選擇類型?”而不是“?請(qǐng)選擇?”）。

以明智的方式排序項(xiàng)目：根據(jù)用戶數(shù)據(jù)惶傻，將最受歡迎的選擇放在列表的前列棍郎。或者银室，甚至以默認(rèn)的方式預(yù)先選擇最流行的坝撑。

使用智能默認(rèn)值：手機(jī)和瀏覽器知道用戶的定位，日期和許多其他信息粮揉。使用該數(shù)據(jù)為每個(gè)用戶預(yù)先選擇最可能的選項(xiàng)巡李。

減少字段數(shù)量，讓計(jì)算機(jī)進(jìn)行運(yùn)算：如果用戶輸入郵政編碼扶认，電腦可能自動(dòng)匹配出了城市和國(guó)家 - 不需要問侨拦。如果用戶輸入信用卡號(hào)碼，則計(jì)算機(jī)可能已經(jīng)知道它是萬事達(dá)卡辐宾，無需其他詢問狱从。

考慮使用API：使用?Facebook Connect按鈕注冊(cè)比填寫注冊(cè)表更容易膨蛮。使用Paypal付款比輸入您的信用卡數(shù)據(jù)更方便。

如果您想了解更多關(guān)于下拉列表的信息季研，?請(qǐng)查看GoldenKrishna和Eric Campbell的精采SXSW主旨演講

原文地址：https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53

學(xué)習(xí)工具敞葛，但不受限于某種工具。Mockplus做原型与涡，更快更簡(jiǎn)單惹谐，現(xiàn)在下載Mockplus，免費(fèi)體驗(yàn)暢快的原型設(shè)計(jì)之旅驼卖。????