本文譯自 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的下拉選單的油管影片，我覺得一般，如果你能翻又懂英文可以去看看。

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

最後，送大家一個表單設計的趣味測試，看看能拿到什麼等級：