設計 | 移動端下拉表單的最佳替代方案

簡評：移動端下拉表單非常常見，但是你有注意過實際上有更好的替代選項嗎？

表單中的下拉菜單大家可能早就司空見慣了：它們在用戶界面中占的空間不大，能夠自動驗證輸入，還支持所有的瀏覽器和平台。實現起來簡單方便，用戶也非常熟悉。

但是呢，Luke Wroblewski 以及其他大佬都表示過，下拉菜單「should be the UI of last resort」，它們太容易被誤用了，應該是設計師的最後選擇。

讓我們看看它的局限性：

• 在下拉列表中，只有點擊或按鍵才能打開它，可用選項是不可見。此外，表單長度默認隱藏，也就是說，用戶無法預知下拉菜單裡面到底包含了多少個選項
• 從下拉列表中選擇一個選項（特別是在移動設備上）很繁瑣：用戶必須先打開選項列表，然後滾動並瀏覽項目，最後選擇一個，然後才能合上下拉列表
• 下拉菜單又會讓設計師變得慵懶：將所有可能的選項添加到下拉列表中是沒有任何優先順序可言（這與漢堡包菜單類似），這都根本不用動腦
• 較長的下拉列表（比如國家或地區選擇）對於用戶來講簡直就是噩夢，特別是在一些無法使用鍵盤搜索的設備上
• 在一些移動屏幕可見和可滾動列表區域很小的時候，這個滾動體驗非常糟糕：

在 iOS 上，可視選項的數量乍一看可能會出奇地少（其實很多）n

其實在許多情況下，有很多替代輸入控制項會更好地幫你完成工作。

考慮選項的數量

• 對於二選一的選項，別用下拉菜單。你需要的是一個複選框或者開關切換控制項：

• 對於少數互斥選項，建議使用單選按鈕或分段控制項。無需打開列表，所有可用的選項都可以看到：

▼ 可視選項的數量取決於屏幕寬度和選項標籤的長度，超過 5 個項目時不建議使用n

• 對於大量指明的選項，當用戶知道他們正在尋找什麼時，考慮「開始輸入……」解決方案，其中過濾選項列表顯示在第一個或兩個字母之後。

• 對於大型和多樣化的列表，嘗試使用現有的用戶數據來排列優先順序，先列出用戶最常用的選項。這樣一來，90％ 的用戶會立即找到自己的偏好，只有 10％ 必須選擇「其他」，然後再跳到下一個問題。優先順序排序會很大改善用戶體驗：

考慮預期的輸入

• 下拉列表的優點之一是用戶不用輸入很多內容。但如果預期的輸入不是太長，並且經常被詢問（例如個人數據），那麼用輸入的方式是比較有效的，而非從列表中選擇它：

總之，在移動設備的數字鍵盤上輸入數字值通常會更有效：

• 如果驗證用戶輸入是非常重要，「開始輸入……」的方法對使用輸入欄位來篩選選項是很有用的：

• 當元素的排序順序不清晰時，在選項列表中的搜索能力就很有幫助了：

不清楚貨幣代碼排列順序的用戶，也能確保他們能在名稱和貨幣代碼間進行搜索n

• 同樣的技術也應該應用於國家列表中：讓用戶開始輸入並儘快篩選結果，而非給出 200 多個國家選項：

• 對於表示數量（如乘客人數或購物車中的物品數量）的預估值，步進器（stepper）允許用戶通過一次點擊或按鍵即可快速增加或減少數量：

• 對於位於數字範圍內的的非預估值和預估值，或許可以考慮使用滑塊：

• 多個下拉菜單選擇日期的體驗肯定不好，不如進入就近日期，使用日期選擇器（date picker）。（輸入出生日期時不要用這個！）

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

下拉菜單並非一無是處，它當然也有用武之地。當你認為選擇菜單是最合適的輸入控制項時，務必要注意用戶體驗：

• 使用有意義的標籤：列表打開時，菜單標籤的描述也應該是清晰可見的。在選擇菜單中，使用描述性標籤，告訴用戶他們正在選擇什麼（即「選擇類型」而非「請選擇」）
• 合理分配排序條目：基於用戶數據，將最常點選的選項放在列表前面，合理安排選項優先順序
• 使用智能默認值：根據用戶的位置，日期和其他信息。利用該數據為每個用戶預先選擇最可能的選項
• 減少欄位的數量 讓計算機輔助選擇：如果用戶輸入郵政編碼，則計算機就知道對應的城市；如果用戶輸入信用卡卡號，則計算機就知道它來自哪家銀行
• 考慮使用 API：使用第三方社交網路登錄比填寫註冊表更容易。使用支付寶或者微信付款也比綁定信用卡更方便

原文鏈接：Dropdown alternatives for better (mobile) forms

推薦閱讀：極簡主義設計的最佳實踐

推薦閱讀：