在界面設(shè)計中正確地利用選框瀑罗、下拉列表或菜單，可以帶來不少很棒的效果
example
它們能節(jié)省屏幕空間墅冷，同時也能減少用戶輸入錯誤信息的可能 (比如只顯示有效選項)晴弃；
它們可以有很多讓設(shè)計更出彩的可能性，比如組合部分選項、輸入引導上鞠、和在各平臺間完美適配际邻；
它們可以被運用于多種情形下，比如讓用戶從選項里直接點選來進行表格中的填空芍阎。
我們都知道世曾，用戶不喜歡直接在表格里輸入信息。
填寫的流程越長谴咸，用戶就越難填寫完整轮听。尤其是在小屏幕的設(shè)備上用大拇指進行輸入，那感覺簡直糟透了岭佳，而有些元素有可能讓填寫體驗更糟——比如選擇菜單血巍。
選擇菜單和選項數(shù)量
在一些界面設(shè)計中，有的選擇菜單只有2個選項珊随，有的卻有20多個述寡。這兩種情況其實都是錯誤運用了選擇菜單的反面案例。
錯誤一：選項過多
當一個選擇菜單的可選項超過15個叶洞，用戶瀏覽起來就非常困難鲫凶，也很難定位到自己要的選項。
過長的下拉選項列表非绸帽伲可怕螟炫，它們不僅需要長時間的滾動瀏覽，而且無法一次顯示全部的選項艺晴，這讓用戶不得不花費很長時間去尋找昼钻，從而讓體驗變得很差。
一個典型的例子就是“選擇所在國家”的列表 (圖2)财饥，它擁有超過100個選項换吧，用戶根本無法對整個列表有一個快速了解，也很難在短時間內(nèi)找到所需選項钥星。
我自己就經(jīng)常找不到“美國”在哪沾瓦！通常“美國”作為一個較為熱門的選項谦炒，會被放在列表的前部贯莺。可是如果有些列表是按照字母排序宁改，那么像“阿富汗”等國家會被放在列表前部 (英文以A開頭)缕探，而相應的“美國”和“阿聯(lián)酋”則會一起被放到列表的尾部 (英文均以U開頭)——所以作為用戶的我，常常在尋找選項之前还蹲，還得先想想這個選擇菜單的排列邏輯是什么爹耗。
當用戶明確知道他們需要找到哪個選項的時候耙考，可以考慮用具有自動填寫功能的輸入框，而非選擇菜單潭兽。
還是以“選擇所在國家”為例倦始，從編程的角度來說，你可以嘗試自動定位用戶所在地山卦，或者實時根據(jù)用戶輸入的第一個單詞來自動給出最接近的猜測選項 (圖3)鞋邑。
快速小結(jié)：當選項超過15個，別用選擇菜單账蓉，考慮一下使用能讓用戶直接輸入或可自動填寫的輸入框枚碗。
錯誤二：選項太少
如果選項少于7個，你卻仍舊使用下拉選擇列表的話铸本，那么你就隱藏了其實可以直接全部顯示的信息肮雨，換句話說，用戶需要進行額外的點擊才能看到全部的選項归敬。
在這種選項較少的情況下酷含，使用單選框會更好 (圖5)。這樣用戶能夠立即看到有幾個可選項汪茧，也能快速知道這些選項分別是什么椅亚，而不是需要再點擊一次才能看到選項信息。
快速小結(jié)：如果選項少于7個呀舔，那么直接用單選框吧。
選擇菜單和標簽
所有的輸入表格都需要有標簽扩灯，用來提示用戶他們應該怎樣選擇輸入內(nèi)容媚赖。選擇菜單也是如此，你應該給予用戶一些有用的提示珠插，而不只是簡單地標注一個“無選項”或者“請選擇”惧磺。
提示標簽應該快速直接地告訴用戶他們應該選擇”什么“，并且暗示用戶他將要在“哪些”選項里面進行挑選 (圖6)捻撑。
圖6在選框內(nèi)和選框外都顯示提示信息磨隘，明確告知用戶如何進行下一步，例如下拉箭頭暗示用戶“點擊查看全部選項”顾患，上方提示句則告知用戶為何要選擇所在國家番捂。
選擇菜單和默認選項
其實如果你并不能確定大部分 (大概90%吧) 用戶會選擇哪一個選項，你就不應該使用默認選項江解，尤其當這個信息是必填的時候设预。這里的原因是，如果你提供了默認填寫的選項犁河，你也很有可能提供了并非是用戶真實需要的選項鳖枕，而用戶也很有可能因為瀏覽得太快而根本沒注意到有些信息已被默認填寫了懈贺。
因此在大部分的情況下逊抡，更安全的辦法是警示用戶遺漏了某個問題的填寫葱弟，而不是為他們提供一個有可能是錯誤的默認選項餐屎。
選擇菜單和移動設(shè)備
Josh Brewer曾經(jīng)提出：移動設(shè)備放大了所有的可用性問題估盘。
使用以下拉方式展開的選擇菜單察迟，在電腦瀏覽器上可能還算不上是個糟糕的選擇隐绵，但在移動設(shè)備上愧怜，卻可能產(chǎn)生很多問題缠局，甚至選擇菜單本身的情景也無法呈現(xiàn)则奥。
移動設(shè)備的屏幕空間很有限，這就意味著你只有很小的區(qū)域能用以展示信息的上下文狭园。即便這些信息可以上下滑動查閱读处，也意味著用戶在移動設(shè)備上瀏覽和定位選項會比在電腦瀏覽器上需要更多時間。
下拉列表總是會帶來很多問題唱矛，而盡管移動設(shè)備上已有不少簡單合適的控件罚舱，設(shè)計師卻常常在選擇菜單的設(shè)計上缺乏恰當?shù)倪x擇，一個比較糟糕的例子就是讓所有的選擇菜單都以下拉列表的方式展開 (圖7左)绎谦。
圖7右：針對每一個問題和可選項提供了對應的輸入方式）
難點一：填完一個表格可能需要很多步
在移動設(shè)備上完成一系列選擇菜單的輸入常常是一個多步驟的流程，并且可能讓用戶花費過多的精力窃肠。
以圖8為例包个，完成這樣一個填寫流程需要很多步操作，包括多次的點擊冤留、上下滑動查看以及最終確認并點擊選項碧囊。
難點二：如何合理利用屏幕空間
選擇菜單很難有效地利用屏幕空間，比如iOS9中系統(tǒng)自帶的顯示列表樣式只占用50%的屏幕空間纤怒，這也就導致用戶只能在這50%的空間里進行查看和操作糯而。
解決方法：
假設(shè)各組選項來自同一個上下文情景，且不考慮各組選項彼此的聯(lián)系泊窘，你可以考慮使用下面的控件來替代下拉列表：
數(shù)字步進器，可以被用在只能遞增/遞減其數(shù)量的選項上州既，以便讓用戶能便捷地微調(diào)數(shù)值（例如選擇乘客數(shù)量谜洽，圖11）
狀態(tài)切換器吴叶，可用于快速轉(zhuǎn)換兩種相反狀態(tài) (圖12)
滑動控制器，可以流暢地控制數(shù)值蚌卤，并且告知可選范圍 (圖13)
當你需要設(shè)計一個比較復雜的下拉選擇表格時奥秆，先針對性地看看每一個問題和其包含選項的特性，并考慮哪一種交互形式更適用咸灿。
記住一點在設(shè)計選擇菜單時的共同原則——你必須盡量簡化不必要的輸入操作构订。在某些情況下，多個選擇菜單甚至能被濃縮成一個輸入控件避矢，從而精簡交互流程悼瘾，并大大降低用戶在理解選擇操作時的認知負擔。
總結(jié)
選擇菜單常常會暴露設(shè)計上的諸多問題审胸，比如缺乏必要的填寫引導亥宿、在不必要的時候隱藏選項、只提供選擇卻不允許用戶修改等砂沛。
但這些并不意味著你應該在界面設(shè)計中避免使用它們烫扼，選擇菜單之所以容易產(chǎn)生諸多問題，反而是因為設(shè)計師并沒有在合適的情況下以合適的方法加以運用碍庵。
到底是什么讓設(shè)計有好有壞映企？
好的設(shè)計無非就是讓最合適的交互方式出現(xiàn)在了最合適的地方，就比如當你讓用戶做出填寫選擇的同時静浴，也提供了恰當?shù)牟僮鹘缑嫜呙ィ涀。扒‘敗钡姆绞讲⒎枪潭ú蛔兤幌恚袝r是選框豆赏，有時是自動填寫的輸入框，有時是下拉列表富稻，總是根據(jù)具體情況而定掷邦。
英文原文：Nick Babich, UX Design: Drop-Downs in Forms.
原文地址：https://uxplanet.org/ux-design-drop-downs-in-forms-c6943ec30037#.9zi6f6l34
本文譯者：小包（點融黑幫），目前就職于點融技術(shù)部DDC椭赋。
