起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識除了下拉菜單之外，你還有更好的選擇
除了下拉菜單之外，還有很多種類的輸入控件可能更加適合具體的場景。
在表單里使用下拉菜單可能是一種不用思考的做法：這玩意兒不占地方，不需要做輸入驗證，所有平臺都支持，技術(shù)門檻低，用戶都很熟悉使用方法。
然而與之同時，下拉菜單又是最容易被錯誤使用的表單控件。它被?Luke Wroblewski?（譯者Z Yuhan：專注于表單領(lǐng)域的人機(jī)交互專家，我也一直有關(guān)注）等人描述成“界面設(shè)計里最后的選項”（Mobile DropDowns Revisited、Fuck Drop Downs）。
來看看下拉菜單的局限性和考量：
- 使用下拉菜單時，在點擊展開之前，可選項全部不可見的。并且菜單長度無法一眼看出，因此用戶無法預(yù)知里面是2個選項還是50個。
- 使用下拉菜單需要很多步驟：點擊下拉菜單展開列表->滾動列表并掃視進(jìn)行選擇->關(guān)閉下拉菜單。
- 下拉菜單會讓設(shè)計師變懶：很容易什么都不想，就把所有需要選擇的功能做成下拉菜單（變得類似漢堡菜單那樣了）。
- 如果列表較長，可能找起來很難，尤其是對于沒有搜索功能的移動端。
- 在移動屏幕上狹小的菜單區(qū)域滾動時，可能有點難受。
在 iOS 上，一次可以看到的選項數(shù)量可能非常少：
不過，好在除了下拉菜單之外，還有很多種類的輸入控件可能更加適合具體的場景。
一、考慮選項有多少個
1、對于二元選擇題（是/否），下拉菜單絕對是個糟糕的選項。這種情況應(yīng)該使用復(fù)選框或開關(guān)。
2、如果選項較少（建議是5個或以內(nèi)），建議使用單選框或分段選擇器，這樣就能一眼看到所有選項，而不需要去打開列表。
3、對于數(shù)量較多，且指向性較為明確的選項，如果用戶知道他們找的是什么，可以考慮采用可輸入的解決方案。即允許用戶輸入，并在輸入的同時過濾出可能的答案。這樣就可以節(jié)省下翻閱長列表的時間了。
4、對于數(shù)量較多，且指向性較為不明確的選項，可以試著對選項進(jìn)行優(yōu)先級排列，只給用戶展示選擇數(shù)量最多的選項。這樣的好處是節(jié)省了90%用戶的時間，讓他們能夠一眼看到自己的答案。而剩下的10%可以選擇“其它”，并在下一個問題中給出進(jìn)一步選擇。
盡管“其它”看起來不是非常優(yōu)雅，但這種方式可以提升大部分用戶的體驗。
二、考慮是否需要輸入
1、下拉菜單的好處之一是減少用戶打字的時間。但是如果打字次數(shù)不多，耗時也不長（例如個人信息），那么輸入可能比選擇還更加輕松一些：
2、通常來說，在手機(jī)上使用數(shù)字鍵盤輸入純數(shù)值會比在菜單中選擇數(shù)值更加快一些。
3、如果用戶的輸入需要驗證，例如必須符合特定格式的地址名稱，那么可以把輸入當(dāng)做搜索，一邊打字一邊過濾出可能的選項，讓用戶選擇。
4、如果選項的排列順序不是很明確，那么選項搜索的功能是非常有幫助的。例如選擇貨幣種類：
對于國家列表也是如此：與其一次列出超過兩百個國家名稱，還不如通過輸入和過濾來幫助用戶找到答案。
5、對于精確數(shù)值（如購物車?yán)锏纳唐窋?shù)量），可以使用計數(shù)器來讓用戶快速對數(shù)字進(jìn)行增減。
6、對于不精確的數(shù)值，可以使用滑塊。
7、用分離的多個下拉菜單選擇日期是非常糟糕的體驗。對于較近的時間，一定要使用日期選擇器。但是像出生日期這種較遠(yuǎn)的時間就別這么干了。
三、如何讓下拉菜單更加智能
也不是說任何時候都不能使用下拉菜單，有時下拉菜單確實是最合適的方式。只是請在使用的時候，最好把它設(shè)計得更加用戶友好一點。（參考：Dropdowns: Design Guidelines）
- 有意義的提示文本：能夠清晰表述，且在展開菜單之后依舊能夠看得到。告訴用戶你想要他們選擇的是什么東西（例如“選擇類別”就比“請選擇”要好）。
- 合理排列選項：把選擇人數(shù)最多的選項放在最頂上，或者干脆把最有可能的答案作為默認(rèn)選項。
- 幫助用戶選擇：手機(jī)和瀏覽器都有辦法知道日期、地址等很多其它信息。可以利用這些信息幫助用戶事先選擇一次。
- 讓程序幫用戶做盡可能多的事情：如果已經(jīng)知道用戶所在的程序，就不需要再輸入郵編。如果用戶已經(jīng)輸入了信用卡號碼，就不需要再選擇信用卡類型。
- 考慮使用API：使用微信賬號關(guān)聯(lián)比填寫注冊信息方便多了。用支付寶付款，比網(wǎng)銀快了。
本文譯自?Dropdown Alternatives for Better (Mobile) Forms?by?Zoltan Kolin
譯者：Z Yuhan，原作者推薦了一個名為去XX的下拉菜單的油管視頻，我覺得一般，如果你能翻又懂英文可以去看看。
公眾號：體驗進(jìn)階
譯文地址：https://zhuanlan.zhihu.com/p/28824880
本文由 @Z Yuhan 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自 Pexels，基于 CC0 協(xié)議
也是非常疑惑，生日日期，地區(qū)，輸入效率明明比選擇效率高（當(dāng)然如果第一個選項就是你的目標(biāo)另當(dāng)別論），手機(jī)上進(jìn)行選擇時還經(jīng)常點錯，但為什么還是都用下拉選擇呢？習(xí)慣？
可能也有數(shù)據(jù)統(tǒng)計方面的需要，比如1995年輸入可能輸入1995或95，不便統(tǒng)計數(shù)據(jù)，設(shè)置格式或輸入后報錯對用戶來講成本更高。
感謝分享，最近也遇到了類似的問題，不知道用什么比較合適。 ??
不錯