網(wǎng)站建設如何設計選擇菜單發(fā)布者：本站     時(shí)間：2022-05-09 09:05:22

在界面設計中正確地利用選框、下拉列表或菜單，可以帶來(lái)不少很棒的效果，比如：

1）它們能節省屏幕空間，同時(shí)也能減少用戶(hù)輸入錯誤信息的可能 (比如只顯示有效選項)；

2） 它們可以有很多讓設計更出彩的可能性，比如組合部分選項、輸入引導、和在各平臺間完美適配；

3） 它們可以被運用于多種情形下，比如讓用戶(hù)從選項里直接點(diǎn)選來(lái)進(jìn)行表格中的填空。

如何設計選擇菜單

 

圖1：典型的下拉選擇菜單

我們都知道，用戶(hù)不喜歡直接在表格里輸入信息。

填寫(xiě)的流程越長(cháng)，用戶(hù)就越難填寫(xiě)完整。尤其是在小屏幕的設備上用大拇指進(jìn)行輸入，那感覺(jué)簡(jiǎn)直糟透了，而有些元素有可能讓填寫(xiě)體驗更糟——比如選擇菜單。

選擇菜單和選項數量
在一些界面設計中，有的選擇菜單只有2個(gè)選項，有的卻有20多個(gè)。這兩種情況其實(shí)都是錯誤運用了選擇菜單的反面案例。

錯誤一：選項過(guò)多
當一個(gè)選擇菜單的可選項超過(guò)15個(gè)，用戶(hù)瀏覽起來(lái)就非常困難，也很難定位到自己要的選項。

過(guò)長(cháng)的下拉選項列表非?？膳?，它們不僅需要長(cháng)時(shí)間的滾動(dòng)瀏覽，而且無(wú)法一次顯示全部的選項，這讓用戶(hù)不得不花費很長(cháng)時(shí)間去尋找，從而讓體驗變得很差。

如何設計選擇菜單

圖2：選擇國家的選擇列表

一個(gè)典型的例子就是“選擇所在國家”的列表 (圖2)，它擁有超過(guò)100個(gè)選項，用戶(hù)根本無(wú)法對整個(gè)列表有一個(gè)快速了解，也很難在短時(shí)間內找到所需選項。

我自己就經(jīng)常找不到“美國”在哪！通?！懊绹弊鳛橐粋€(gè)較為熱門(mén)的選項，會(huì )被放在列表的前部?？墒侨绻行┝斜硎前凑兆帜概判?，那么像“阿富汗”等國家會(huì )被放在列表前部 (英文以A開(kāi)頭)，而相應的“美國”和“阿聯(lián)酋”則會(huì )一起被放到列表的尾部 (英文均以U開(kāi)頭)——所以作為用戶(hù)的我，常常在尋找選項之前，還得先想想這個(gè)選擇菜單的排列邏輯是什么。

當用戶(hù)明確知道他們需要找到哪個(gè)選項的時(shí)候，可以考慮用具有自動(dòng)填寫(xiě)功能的輸入框，而非選擇菜單。

還是以“選擇所在國家”為例，從編程的角度來(lái)說(shuō)，你可以嘗試自動(dòng)定位用戶(hù)所在地，或者實(shí)時(shí)根據用戶(hù)輸入的第一個(gè)單詞來(lái)自動(dòng)給出最接近的猜測選項 (圖3)。

如何設計選擇菜單

圖3：輸入“UNITED”自動(dòng)匹配可能選項

快速小結：當選項超過(guò)15個(gè)，別用選擇菜單，考慮一下使用能讓用戶(hù)直接輸入或可自動(dòng)填寫(xiě)的輸入框。

錯誤二：選項太少
如果選項少于7個(gè)，你卻仍舊使用下拉選擇列表的話(huà)，那么你就隱藏了其實(shí)可以直接全部顯示的信息，換句話(huà)說(shuō)，用戶(hù)需要進(jìn)行額外的點(diǎn)擊才能看到全部的選項。

 

如何設計選擇菜單

圖4：只有2個(gè)選項的下拉列表

在這種選項較少的情況下，使用單選框會(huì )更好 (圖5)。這樣用戶(hù)能夠立即看到有幾個(gè)可選項，也能快速知道這些選項分別是什么，而不是需要再點(diǎn)擊一次才能看到選項信息。

 

如何設計選擇菜單

圖5：只有2個(gè)選項時(shí)，直接顯示全部選項

快速小結：如果選項少于7個(gè)，那么直接用單選框吧。

選擇菜單和標簽
所有的輸入表格都需要有標簽，用來(lái)提示用戶(hù)他們應該怎樣選擇輸入內容。選擇菜單也是如此，你應該給予用戶(hù)一些有用的提示，而不只是簡(jiǎn)單地標注一個(gè)“無(wú)選項”或者“請選擇”。

提示標簽應該快速直接地告訴用戶(hù)他們應該選擇”什么“，并且暗示用戶(hù)他將要在“哪些”選項里面進(jìn)行挑選 (圖6)。

 

如何設計選擇菜單

圖6

圖6在選框內和選框外都顯示提示信息，明確告知用戶(hù)如何進(jìn)行下一步，例如下拉箭頭暗示用戶(hù)“點(diǎn)擊查看全部選項”，上方提示句則告知用戶(hù)為何要選擇所在國家。

選擇菜單和默認選項
其實(shí)如果你并不能確定大部分 (大概90%吧) 用戶(hù)會(huì )選擇哪一個(gè)選項，你就不應該使用默認選項，尤其當這個(gè)信息是必填的時(shí)候。這里的原因是，如果你提供了默認填寫(xiě)的選項，你也很有可能提供了并非是用戶(hù)真實(shí)需要的選項，而用戶(hù)也很有可能因為瀏覽得太快而根本沒(méi)注意到有些信息已被默認填寫(xiě)了。

因此在大部分的情況下，更安全的辦法是警示用戶(hù)遺漏了某個(gè)問(wèn)題的填寫(xiě)，而不是為他們提供一個(gè)有可能是錯誤的默認選項。

選擇菜單和移動(dòng)設備
Josh Brewer曾經(jīng)提出：移動(dòng)設備放大了所有的可用性問(wèn)題。

使用以下拉方式展開(kāi)的選擇菜單，在電腦瀏覽器上可能還算不上是個(gè)糟糕的選擇，但在移動(dòng)設備上，卻可能產(chǎn)生很多問(wèn)題，甚至選擇菜單本身的情景也無(wú)法呈現。

移動(dòng)設備的屏幕空間很有限，這就意味著(zhù)你只有很小的區域能用以展示信息的上下文。即便這些信息可以上下滑動(dòng)查閱，也意味著(zhù)用戶(hù)在移動(dòng)設備上瀏覽和定位選項會(huì )比在電腦瀏覽器上需要更多時(shí)間。

下拉列表總是會(huì )帶來(lái)很多問(wèn)題，而盡管移動(dòng)設備上已有不少簡(jiǎn)單合適的控件，設計師卻常常在選擇菜單的設計上缺乏恰當的選擇，一個(gè)比較糟糕的例子就是讓所有的選擇菜單都以下拉列表的方式展開(kāi) (圖7左)。

如何設計選擇菜單

圖7左：整個(gè)輸入過(guò)程都是下拉選擇菜單，過(guò)于冗長(cháng)和平淡
圖7右：針對每一個(gè)問(wèn)題和可選項提供了對應的輸入方式

難點(diǎn)一：填完一個(gè)表格可能需要很多步
在移動(dòng)設備上完成一系列選擇菜單的輸入常常是一個(gè)多步驟的流程，并且可能讓用戶(hù)花費過(guò)多的精力。

以圖8為例，完成這樣一個(gè)填寫(xiě)流程需要很多步操作，包括多次的點(diǎn)擊、上下滑動(dòng)查看以及最終確認并點(diǎn)擊選項。

如何設計選擇菜單

圖8

難點(diǎn)二：如何合理利用屏幕空間
選擇菜單很難有效地利用屏幕空間，比如iOS9中系統自帶的顯示列表樣式只占用50%的屏幕空間，這也就導致用戶(hù)只能在這50%的空間里進(jìn)行查看和操作。

如何設計選擇菜單

圖9：一半的屏幕空間通常只能顯示7行選項

解決方法
假設各組選項來(lái)自同一個(gè)上下文情景，且不考慮各組選項彼此的聯(lián)系，你可以考慮使用下面的控件來(lái)替代下拉列表：

1）利用一組單選按鈕或分隔式選項來(lái)顯示類(lèi)型相似但又彼此獨立的選項（例如選擇地區，圖10）

如何設計選擇菜單

圖10，RADIO GROUP

2）數字步進(jìn)器，可以被用在只能遞增/遞減其數量的選項上，以便讓用戶(hù)能便捷地微調數值（例如選擇乘客數量，圖11）

如何設計選擇菜單

圖11，STEPPER

3）狀態(tài)切換器，可用于快速轉換兩種相反狀態(tài) (圖12)

如何設計選擇菜單

圖12，SWITCHER

4）滑動(dòng)控制器，可以流暢地控制數值，并且告知可選范圍 (圖13)

如何設計選擇菜單

圖13，SLIDER

當你需要設計一個(gè)比較復雜的下拉選擇表格時(shí)，先針對性地看看每一個(gè)問(wèn)題和其包含選項的特性，并考慮哪一種交互形式更適用。

記住一點(diǎn)在設計選擇菜單時(shí)的共同原則——你必須盡量簡(jiǎn)化不必要的輸入操作。在某些情況下，多個(gè)選擇菜單甚至能被濃縮成一個(gè)輸入控件，從而精簡(jiǎn)交互流程，并大大降低用戶(hù)在理解選擇操作時(shí)的認知負擔。

總結
選擇菜單常常會(huì )暴露設計上的諸多問(wèn)題，比如缺乏必要的填寫(xiě)引導、在不必要的時(shí)候隱藏選項、只提供選擇卻不允許用戶(hù)修改等。

但這些并不意味著(zhù)你應該在界面設計中避免使用它們，選擇菜單之所以容易產(chǎn)生諸多問(wèn)題，反而是因為設計師并沒(méi)有在合適的情況下以合適的方法加以運用。