除了下拉菜單之外你還有更好的選擇

本文譯自 Dropdown Alternatives for Better (Mobile) Forms by Zoltan Kolin

——

在表單里使用下拉菜單可能是一種不用思考的做法：這玩意兒不佔地方，不需要做輸入驗證，所有平台都支持，技術門檻低，用戶都很熟悉使用方法。

然而與之同時，下拉菜單又是最容易被錯誤使用的表單控制項。它被 Luke Wroblewski （譯者Z Yuhan：專註於表單領域的人機交互專家，我也一直有關注）等人描述成「界面設計里最後的選項」（Mobile DropDowns Revisited、Fuck Drop Downs）。

來看看下拉菜單的局限性和考量：

• 使用下拉菜單時，在點擊展開之前，可選項全部不可見的。並且菜單長度無法一眼看出，因此用戶無法預知裡面是2個選項還是50個。
• 使用下拉菜單需要很多步驟：點擊下拉菜單展開列表->滾動列表並掃視進行選擇->關閉下拉菜單。
• 下拉菜單會讓設計師變懶：很容易什麼都不想，就把所有需要選擇的功能做成下拉菜單（變得類似漢堡菜單那樣了）。
• 如果列表較長，可能找起來很難，尤其是對於沒有搜索功能的移動端。
• 在移動屏幕上狹小的菜單區域滾動時，可能有點難受。

在 iOS 上，一次可以看到的選項數量可能非常少：

不過，好在除了下拉菜單之外，還有很多種類的輸入控制項可能更加適合具體的場景。

一、考慮選項有多少個

1、對於二元選擇題（是/否），下拉菜單絕對是個糟糕的選項。這種情況應該使用複選框或開關。

2、如果選項較少（建議是5個或以內），建議使用單選框或分段選擇器，這樣就能一眼看到所有選項，而不需要去打開列表。

3、對於數量較多，且指向性較為明確的選項，如果用戶知道他們找的是什麼，可以考慮採用可輸入的解決方案。即允許用戶輸入，並在輸入的同時過濾出可能的答案。這樣就可以節省下翻閱長列表的時間了。

4、對於數量較多，且指向性較為不明確的選項，可以試著對選項進行優先順序排列，只給用戶展示選擇數量最多的選項。這樣的好處是節省了90%用戶的時間，讓他們能夠一眼看到自己的答案。而剩下的10%可以選擇「其它」，並在下一個問題中給出進一步選擇。

儘管「其它」看起來不是非常優雅，但這種方式可以提升大部分用戶的體驗。

二、考慮是否需要輸入

1、下拉菜單的好處之一是減少用戶打字的時間。但是如果打字次數不多，耗時也不長（例如個人信息），那麼輸入可能比選擇還更加輕鬆一些：

2、通常來說，在手機上使用數字鍵盤輸入純數值會比在菜單中選擇數值更加快一些。

3、如果用戶的輸入需要驗證，例如必須符合特定格式的地址名稱，那麼可以把輸入當做搜索，一邊打字一邊過濾出可能的選項，讓用戶選擇。

4、如果選項的排列順序不是很明確，那麼選項搜索的功能是非常有幫助的。例如選擇貨幣種類：

對於國家列表也是如此：與其一次列出超過兩百個國家名稱，還不如通過輸入和過濾來幫助用戶找到答案。

5、對於精確數值（如購物車裡的商品數量），可以使用計數器來讓用戶快速對數字進行增減。

6、對於不精確的數值，可以使用滑塊。

7、用分離的多個下拉菜單選擇日期是非常糟糕的體驗。對於較近的時間，一定要使用日期選擇器。但是像出生日期這種較遠的時間就別這麼幹了。

三、如何讓下拉菜單更加智能

也不是說任何時候都不能使用下拉菜單，有時下拉菜單確實是最合適的方式。只是請在使用的時候，最好把它設計得更加用戶友好一點。（參考：Dropdowns: Design Guidelines）

• 有意義的提示文本：能夠清晰表述，且在展開菜單之後依舊能夠看得到。告訴用戶你想要他們選擇的是什麼東西（例如「選擇類別」就比「請選擇」要好）。
• 合理排列選項：把選擇人數最多的選項放在最頂上，或者乾脆把最有可能的答案作為默認選項。
• 幫助用戶選擇：手機和瀏覽器都有辦法知道日期、地址等很多其它信息。可以利用這些信息幫助用戶事先選擇一次。
• 讓程序幫用戶做儘可能多的事情：如果已經知道用戶所在的程序，就不需要再輸入郵編。如果用戶已經輸入了信用卡號碼，就不需要再選擇信用卡類型。
• 考慮使用API：使用微信賬號關聯比填寫註冊信息方便多了。用支付寶付款，比網銀快了。

——

譯者 Z Yuhan：

原作者推薦了一個名為去XX的下拉菜單的油管視頻，我覺得一般，如果你能翻又懂英文可以去看看。

這篇之前有收錄過其它的翻譯版本，這個是我自己翻譯的版本。我翻譯文章的目的主要是自我學習和分享出自己的理解，所以我選文一般不受是否已被翻譯過影響。

未經允許請勿轉載，公眾號上更是不要擅自申請原創，謝謝

推薦閱讀：