本文作者將與你分享關于下拉列表的信息，enjoy~

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

同時，根據Luke Wroblewski和其他一些人的說法，下拉菜單（或選擇）是最常被誤用的表格模式之一，“應該是UI的最終界面”。

讓我們看看其一些局限性和用戶的擔憂：

• 在下拉列表中，可用選項一般不可見，除非你點擊或按鍵才能打開它。此外，列表的長度是被隱藏了的，也就是說，用戶無法預測下拉菜單里面到底包含了多少個元素。
• 從下拉列表中選擇一個選項（特別是在移動設備上）是個多步驟的過程：您必須點擊下拉菜單打開選項列表，然后滾動并瀏覽項目來選擇一個，然后關閉下拉列表。
• 下拉菜單可能會使設計人員變得懶惰：只需將所有可能的選項添加到下拉列表中而不需要排列其優先順序是是極其簡單的（順便說一下，與漢堡包菜單非常的類似）
• 較長的下拉列表，比如國家或地區選擇器對于用戶來講簡直就是噩夢，特別是在一些無法使用鍵盤搜索的設備上。
• 在某些列表可見和可滾動區域很小的移動設備屏幕上滾動選擇可能會很痛苦：

在IOS上，可視選項的數量乍一看可能會出奇地少。

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

考慮選項的數量

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

如果你的下拉列表只包含是或否，開或關的選項，只需用一個簡單的開關控件。

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

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

可見選項的數量取決于屏幕寬度和選項標簽的長度，但建議使用不超過5個項目。

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

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

對于大型和多樣化的列表，請嘗試使用現有的用戶數據來優先選擇該選項，只需列出少數最流行的選項給用戶。這樣一來，有90％的用戶會立即找到自己的喜好，只有10％必須選擇“ 其他”，然后在下一個問題中詳細了解。

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

考慮預期的輸入

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

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

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

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

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

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

當元素的排序順序不清楚時，在選項列表中進行搜索的方法特別有用。

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

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

對于表示數量的離散值（例如乘客數量或購物車中的物品數量），步進器允許用戶通過一次點擊或按鍵來快速增加或減少數量。

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

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

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

考慮設計更智能的下拉列表

不用說，不應該總是避免下拉菜單的使用。您會發現一個選擇菜單是最合適的輸入控件的情況，這很好。試著讓它盡可能的對用戶友好。

• 使用有意義的標簽：即使列表打開，菜單標簽的描述也應該是清楚有效。在選擇菜單中，使用描述性標簽，告訴用戶他們正在選擇什么（即“?選擇類型?”而不是“?請選擇?”）。
• 以明智的方式排序項目：根據用戶數據，將最受歡迎的選擇放在列表的前列?；蛘?，甚至以默認的方式預先選擇最流行的。
• 使用智能默認值：手機和瀏覽器知道用戶的定位，日期和許多其他信息。使用該數據為每個用戶預先選擇最可能的選項。
• 減少字段數量，讓計算機進行運算：如果用戶輸入郵政編碼，電腦可能自動匹配出了城市和國家 – 不需要問。如果用戶輸入信用卡號碼，則計算機可能已經知道它是萬事達卡，無需其他詢問。
• 考慮使用API：使用?Facebook Connect按鈕注冊比填寫注冊表更容易。使用Paypal付款比輸入您的信用卡數據更方便。

如果您想了解更多關于下拉列表的信息，請查看GoldenKrishna和Eric Campbell的精采SXSW主旨演講。

以上內容由Mockplus團隊翻譯整理，僅供學習交流。

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

題圖來自 Pexels，基于 CC0 協議