在界面設(shè)計(jì)中正確地利用選框、下拉列表或菜單，可以帶來不少很棒的效果，比如：
1）它們能節(jié)省屏幕空間，同時(shí)也能減少用戶輸入錯(cuò)誤信息的可能 (比如只顯示有效選項(xiàng))；
2） 它們可以有很多讓設(shè)計(jì)更出彩的可能性，比如組合部分選項(xiàng)、輸入引導(dǎo)、和在各平臺間完美適配；
3） 它們可以被運(yùn)用于多種情形下，比如讓用戶從選項(xiàng)里直接點(diǎn)選來進(jìn)行表格中的填空。
圖1：典型的下拉選擇菜單
我們都知道，用戶不喜歡直接在表格里輸入信息。
填寫的流程越長，用戶就越難填寫完整。尤其是在小屏幕的設(shè)備上用大拇指進(jìn)行輸入，那感覺簡直糟透了，而有些元素有可能讓填寫體驗(yàn)更糟——比如選擇菜單。
選擇菜單和選項(xiàng)數(shù)量
在一些界面設(shè)計(jì)中，有的選擇菜單只有2個(gè)選項(xiàng)，有的卻有20多個(gè)。這兩種情況其實(shí)都是錯(cuò)誤運(yùn)用了選擇菜單的反面案例。
錯(cuò)誤一：選項(xiàng)過多
當(dāng)一個(gè)選擇菜單的可選項(xiàng)超過15個(gè)，用戶瀏覽起來就非常困難，也很難定位到自己要的選項(xiàng)。
過長的下拉選項(xiàng)列表非常可怕，它們不僅需要長時(shí)間的滾動(dòng)瀏覽，而且無法一次顯示全部的選項(xiàng)，這讓用戶不得不花費(fèi)很長時(shí)間去尋找，從而讓體驗(yàn)變得很差。
圖2：選擇國家的選擇列表
一個(gè)典型的例子就是“選擇所在國家”的列表 (圖2)，它擁有超過100個(gè)選項(xiàng)，用戶根本無法對整個(gè)列表有一個(gè)快速了解，也很難在短時(shí)間內(nèi)找到所需選項(xiàng)。
我自己就經(jīng)常找不到“美國”在哪！通常“美國”作為一個(gè)較為熱門的選項(xiàng)，會被放在列表的前部?？墒侨绻行┝斜硎前凑兆帜概判颍敲聪?ldquo;阿富汗”等國家會被放在列表前部 (英文以A開頭)，而相應(yīng)的“美國”和“阿聯(lián)酋”則會一起被放到列表的尾部 (英文均以U開頭)——所以作為用戶的我，常常在尋找選項(xiàng)之前，還得先想想這個(gè)選擇菜單的排列邏輯是什么。
當(dāng)用戶明確知道他們需要找到哪個(gè)選項(xiàng)的時(shí)候，可以考慮用具有自動(dòng)填寫功能的輸入框，而非選擇菜單。
還是以“選擇所在國家”為例，從編程的角度來說，你可以嘗試自動(dòng)定位用戶所在地，或者實(shí)時(shí)根據(jù)用戶輸入的第一個(gè)單詞來自動(dòng)給出最接近的猜測選項(xiàng) (圖3)。
圖3：輸入“UNITED”自動(dòng)匹配可能選項(xiàng)
快速小結(jié)：當(dāng)選項(xiàng)超過15個(gè)，別用選擇菜單，考慮一下使用能讓用戶直接輸入或可自動(dòng)填寫的輸入框。
錯(cuò)誤二：選項(xiàng)太少
如果選項(xiàng)少于7個(gè)，你卻仍舊使用下拉選擇列表的話，那么你就隱藏了其實(shí)可以直接全部顯示的信息，換句話說，用戶需要進(jìn)行額外的點(diǎn)擊才能看到全部的選項(xiàng)。
圖4：只有2個(gè)選項(xiàng)的下拉列表
在這種選項(xiàng)較少的情況下，使用單選框會更好 (圖5)。這樣用戶能夠立即看到有幾個(gè)可選項(xiàng)，也能快速知道這些選項(xiàng)分別是什么，而不是需要再點(diǎn)擊一次才能看到選項(xiàng)信息。
圖5：只有2個(gè)選項(xiàng)時(shí)，直接顯示全部選項(xiàng)
快速小結(jié)：如果選項(xiàng)少于7個(gè)，那么直接用單選框吧。
選擇菜單和標(biāo)簽
所有的輸入表格都需要有標(biāo)簽，用來提示用戶他們應(yīng)該怎樣選擇輸入內(nèi)容。選擇菜單也是如此，你應(yīng)該給予用戶一些有用的提示，而不只是簡單地標(biāo)注一個(gè)“無選項(xiàng)”或者“請選擇”。
提示標(biāo)簽應(yīng)該快速直接地告訴用戶他們應(yīng)該選擇”什么“，并且暗示用戶他將要在“哪些”選項(xiàng)里面進(jìn)行挑選 (圖6)。
圖6
圖6在選框內(nèi)和選框外都顯示提示信息，明確告知用戶如何進(jìn)行下一步，例如下拉箭頭暗示用戶“點(diǎn)擊查看全部選項(xiàng)”，上方提示句則告知用戶為何要選擇所在國家。
選擇菜單和默認(rèn)選項(xiàng)
其實(shí)如果你并不能確定大部分 (大概90%吧) 用戶會選擇哪一個(gè)選項(xiàng)，你就不應(yīng)該使用默認(rèn)選項(xiàng)，尤其當(dāng)這個(gè)信息是必填的時(shí)候。這里的原因是，如果你提供了默認(rèn)填寫的選項(xiàng)，你也很有可能提供了并非是用戶真實(shí)需要的選項(xiàng)，而用戶也很有可能因?yàn)闉g覽得太快而根本沒注意到有些信息已被默認(rèn)填寫了。
因此在大部分的情況下，更安全的辦法是警示用戶遺漏了某個(gè)問題的填寫，而不是為他們提供一個(gè)有可能是錯(cuò)誤的默認(rèn)選項(xiàng)。
選擇菜單和移動(dòng)設(shè)備
Josh Brewer曾經(jīng)提出：移動(dòng)設(shè)備放大了所有的可用性問題。
使用以下拉方式展開的選擇菜單，在電腦瀏覽器上可能還算不上是個(gè)糟糕的選擇，但在移動(dòng)設(shè)備上，卻可能產(chǎn)生很多問題，甚至選擇菜單本身的情景也無法呈現(xiàn)。
移動(dòng)設(shè)備的屏幕空間很有限，這就意味著你只有很小的區(qū)域能用以展示信息的上下文。即便這些信息可以上下滑動(dòng)查閱，也意味著用戶在移動(dòng)設(shè)備上瀏覽和定位選項(xiàng)會比在電腦瀏覽器上需要更多時(shí)間。
下拉列表總是會帶來很多問題，而盡管移動(dòng)設(shè)備上已有不少簡單合適的控件，設(shè)計(jì)師卻常常在選擇菜單的設(shè)計(jì)上缺乏恰當(dāng)?shù)倪x擇，一個(gè)比較糟糕的例子就是讓所有的選擇菜單都以下拉列表的方式展開 (圖7左)。
圖7左：整個(gè)輸入過程都是下拉選擇菜單，過于冗長和平淡
圖7右：針對每一個(gè)問題和可選項(xiàng)提供了對應(yīng)的輸入方式
難點(diǎn)一：填完一個(gè)表格可能需要很多步
在移動(dòng)設(shè)備上完成一系列選擇菜單的輸入常常是一個(gè)多步驟的流程，并且可能讓用戶花費(fèi)過多的精力。
以圖8為例，完成這樣一個(gè)填寫流程需要很多步操作，包括多次的點(diǎn)擊、上下滑動(dòng)查看以及最終確認(rèn)并點(diǎn)擊選項(xiàng)。
圖8
難點(diǎn)二：如何合理利用屏幕空間
選擇菜單很難有效地利用屏幕空間，比如iOS9中系統(tǒng)自帶的顯示列表樣式只占用50%的屏幕空間，這也就導(dǎo)致用戶只能在這50%的空間里進(jìn)行查看和操作。
圖9：一半的屏幕空間通常只能顯示7行選項(xiàng)
解決方法
假設(shè)各組選項(xiàng)來自同一個(gè)上下文情景，且不考慮各組選項(xiàng)彼此的聯(lián)系，你可以考慮使用下面的控件來替代下拉列表：
1）利用一組單選按鈕或分隔式選項(xiàng)來顯示類型相似但又彼此獨(dú)立的選項(xiàng)（例如選擇地區(qū)，圖10）
圖10，RADIO GROUP
2）數(shù)字步進(jìn)器，可以被用在只能遞增/遞減其數(shù)量的選項(xiàng)上，以便讓用戶能便捷地微調(diào)數(shù)值（例如選擇乘客數(shù)量，圖11）
圖11，STEPPER
3）狀態(tài)切換器，可用于快速轉(zhuǎn)換兩種相反狀態(tài) (圖12)
圖12，SWITCHER
4）滑動(dòng)控制器，可以流暢地控制數(shù)值，并且告知可選范圍 (圖13)
圖13，SLIDER
當(dāng)你需要設(shè)計(jì)一個(gè)比較復(fù)雜的下拉選擇表格時(shí)，先針對性地看看每一個(gè)問題和其包含選項(xiàng)的特性，并考慮哪一種交互形式更適用。
記住一點(diǎn)在設(shè)計(jì)選擇菜單時(shí)的共同原則——你必須盡量簡化不必要的輸入操作。在某些情況下，多個(gè)選擇菜單甚至能被濃縮成一個(gè)輸入控件，從而精簡交互流程，并大大降低用戶在理解選擇操作時(shí)的認(rèn)知負(fù)擔(dān)。
總結(jié)
選擇菜單常常會暴露設(shè)計(jì)上的諸多問題，比如缺乏必要的填寫引導(dǎo)、在不必要的時(shí)候隱藏選項(xiàng)、只提供選擇卻不允許用戶修改等。
但這些并不意味著你應(yīng)該在界面設(shè)計(jì)中避免使用它們，選擇菜單之所以容易產(chǎn)生諸多問題，反而是因?yàn)樵O(shè)計(jì)師并沒有在合適的情況下以合適的方法加以運(yùn)用。
到底是什么讓設(shè)計(jì)有好有壞？
好的設(shè)計(jì)無非就是讓最合適的交互方式出現(xiàn)在了最合適的地方，就比如當(dāng)你讓用戶做出填寫選擇的同時(shí)，也提供了恰當(dāng)?shù)牟僮鹘缑?，而記?。?ldquo;恰當(dāng)”的方式并非固定不變，有時(shí)是選框，有時(shí)是自動(dòng)填寫的輸入框，有時(shí)是下拉列表，總是根據(jù)具體情況而定。