你未曾見過的移動端下拉列表替代方案

以下內(nèi)容由Mockplus團隊翻譯整理，僅供學(xué)習(xí)交流，Mockplus是更快更簡單的原型設(shè)計工具。

在表單中使用下拉列表似乎不是什么很費勁的事情，它們在用戶界面上占用的空間不大，可自動驗證輸入，支持所有的瀏覽器和各平臺。并且實現(xiàn)起來簡單便利，用戶對其也足夠了解。

同時，按照Luke Wroblewski和其他一些人的說法，下拉菜單(或選擇)是最常被誤用的表格模式之一，“應(yīng)該是UI的最終界面”。

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

不才拉列表中，可用選項一般不成見，除非你點擊或按鍵才能打開它。此外，列表的長度是被隱藏了的，也就是說，用戶無法預(yù)測下拉菜單里面到底包羅了多少個元素。

從下拉列表中選擇一個選項(特別是在移動設(shè)備上)是個多步驟的過程：您必需點擊下拉菜單打開選項列表，然后滾動并瀏覽項目來選擇一個，然后關(guān)閉下拉列表。

下拉菜單可能會使設(shè)計人員變得懶惰：只需將所有可能的選項添加到下拉列表中而不需要擺列其優(yōu)先挨次是是極其簡單的(順便說一下，與漢堡包菜單非常的類似)

較長的下拉列表，好比國家或地區(qū)選擇器對于用戶來講簡直就是噩夢，特別是在一些無法使用鍵盤搜索的設(shè)備上。

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

在iOS上，可視選項的數(shù)量乍一看可能會出奇地少。

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

考慮選項的數(shù)量

對于一個二擇其一(開或關(guān))的選項，下拉菜單是個非常不明智的選擇。而你需要用的是一個復(fù)選框和開關(guān)切換控件。

如果你的下拉列表只包羅是或否，開或關(guān)的選項，只需用一個簡單的開關(guān)控件。

對于少數(shù)互斥選項，建議使用單選按鈕或分段控件，以便所有選項一次可見，而無需打開列表。

分段控件可一次顯示所選項和替代選項

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

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

不消滾動列表，讓用戶開始輸入而只顯示已過濾的選項

對于大型和多樣化的列表，請嘗試使用現(xiàn)有的用戶數(shù)據(jù)來優(yōu)先選擇該選項，只需列出少數(shù)最流行的選項給用戶。這樣一來，有90%的用戶會立即找到本身的愛好，只有10%必需選擇“ 其他”，然后不才一個問題中詳細了解。

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

考慮預(yù)期的輸入

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

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

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

盡管數(shù)字下拉列表的排序挨次是很清楚的，但比起滾動選擇，輸入數(shù)值更簡單些。

如果驗證用戶的輸入非常重要，那么使用輸入字段來篩選可用選項時，“輸入...”方法可能很有用。

列出美國的選項時，只需輸入一個字母可以很好地篩選出來。

當(dāng)元素的排序挨次不清楚時，在選項列表中進行搜索的方法特別有用。

貨幣的排序挨次用戶可能不清楚，因此請確保他們可以搜索名稱和貨幣代碼。

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

對于體現(xiàn)數(shù)量的離散值(例如乘客數(shù)量或購物車中的物品數(shù)量)，步進器允許用戶通過一次點擊或按鍵來快速增加或減少數(shù)量。

對于位于刻度上的值或非離散值，請考慮使用滑塊。

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

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

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

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

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