以下內(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í)，按照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ì)于體現(xiàn)數(shù)量的離散值(例如乘客數(shù)量或購(gòu)物車中的物品數(shù)量)，步進(jìn)器允許用戶通過一次點(diǎn)擊或按鍵來快速增加或減少數(shù)量。

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

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

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

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

不消說，不該該總是制止下拉菜單的使用。您會(huì)發(fā)現(xiàn)一個(gè)選擇菜單是最合適的輸入控件的情況，這很好。試著讓它盡可能的對(duì)用戶友好。

標(biāo)簽：東營(yíng) 九江 烏魯木齊 林芝 鹽城