如何設計選擇菜單

作者:佚名 來源:點融設計中心DDC 時間:2016-07-08 標簽: 設計菜單
 



在界面設計中正確地利用選框、下拉列表或菜單,可以帶來不少很棒的效果,比如:

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

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

3) 它們可以被運用于多種情形下,比如讓用戶從選項里直接點選來進行表格中的填空。

 

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

我們都知道,用戶不喜歡直接在表格里輸入信息。

填寫的流程越長,用戶就越難填寫完整。尤其是在小屏幕的設備上用大拇指進行輸入,那感覺簡直糟透了,而有些元素有可能讓填寫體驗更糟——比如選擇菜單。

選擇菜單和選項數量

在一些界面設計中,有的選擇菜單只有2個選項,有的卻有20多個。這兩種情況其實都是錯誤運用了選擇菜單的反面案例。

錯誤一:選項過多

當一個選擇菜單的可選項超過15個,用戶瀏覽起來就非常困難,也很難定位到自己要的選項。

過長的下拉選項列表非常可怕,它們不僅需要長時間的滾動瀏覽,而且無法一次顯示全部的選項,這讓用戶不得不花費很長時間去尋找,從而讓體驗變得很差。

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

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

我自己就經常找不到“美國”在哪!通常“美國”作為一個較為熱門的選項,會被放在列表的前部。可是如果有些列表是按照字母排序,那么像“阿富汗”等國家會被放在列表前部 (英文以A開頭),而相應的“美國”和“阿聯酋”則會一起被放到列表的尾部 (英文均以U開頭)——所以作為用戶的我,常常在尋找選項之前,還得先想想這個選擇菜單的排列邏輯是什么。

當用戶明確知道他們需要找到哪個選項的時候,可以考慮用具有自動填寫功能的輸入框,而非選擇菜單。

還是以“選擇所在國家”為例,從編程的角度來說,你可以嘗試自動定位用戶所在地,或者實時根據用戶輸入的第一個單詞來自動給出最接近的猜測選項 (圖3)。

圖3:輸入“UNITED”自動匹配可能選項

快速小結:當選項超過15個,別用選擇菜單,考慮一下使用能讓用戶直接輸入或可自動填寫的輸入框。

錯誤二:選項太少

如果選項少于7個,你卻仍舊使用下拉選擇列表的話,那么你就隱藏了其實可以直接全部顯示的信息,換句話說,用戶需要進行額外的點擊才能看到全部的選項。

 



圖4:只有2個選項的下拉列表

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

 



圖5:只有2個選項時,直接顯示全部選項

快速小結:如果選項少于7個,那么直接用單選框吧。

選擇菜單和標簽

所有的輸入表格都需要有標簽,用來提示用戶他們應該怎樣選擇輸入內容。選擇菜單也是如此,你應該給予用戶一些有用的提示,而不只是簡單地標注一個“無選項”或者“請選擇”。

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

 



圖6

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

選擇菜單和默認選項

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

因此在大部分的情況下,更安全的辦法是警示用戶遺漏了某個問題的填寫,而不是為他們提供一個有可能是錯誤的默認選項。

選擇菜單和移動設備

Josh Brewer曾經提出:移動設備放大了所有的可用性問題。

使用以下拉方式展開的選擇菜單,在電腦瀏覽器上可能還算不上是個糟糕的選擇,但在移動設備上,卻可能產生很多問題,甚至選擇菜單本身的情景也無法呈現。

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

下拉列表總是會帶來很多問題,而盡管移動設備上已有不少簡單合適的控件,設計師卻常常在選擇菜單的設計上缺乏恰當的選擇,一個比較糟糕的例子就是讓所有的選擇菜單都以下拉列表的方式展開 (圖7左)。

圖7左:整個輸入過程都是下拉選擇菜單,過于冗長和平淡
圖7右:針對每一個問題和可選項提供了對應的輸入方式

難點一:填完一個表格可能需要很多步

在移動設備上完成一系列選擇菜單的輸入常常是一個多步驟的流程,并且可能讓用戶花費過多的精力。

以圖8為例,完成這樣一個填寫流程需要很多步操作,包括多次的點擊、上下滑動查看以及最終確認并點擊選項。

圖8

難點二:如何合理利用屏幕空間

選擇菜單很難有效地利用屏幕空間,比如iOS9中系統自帶的顯示列表樣式只占用50%的屏幕空間,這也就導致用戶只能在這50%的空間里進行查看和操作。

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

解決方法

假設各組選項來自同一個上下文情景,且不考慮各組選項彼此的聯系,你可以考慮使用下面的控件來替代下拉列表:

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

圖10,RADIO GROUP

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

圖11,STEPPER

3)狀態切換器,可用于快速轉換兩種相反狀態 (圖12)

圖12,SWITCHER

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

圖13,SLIDER

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

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

總結

選擇菜單常常會暴露設計上的諸多問題,比如缺乏必要的填寫引導、在不必要的時候隱藏選項、只提供選擇卻不允許用戶修改等。

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

到底是什么讓設計有好有壞?

好的設計無非就是讓最合適的交互方式出現在了最合適的地方,就比如當你讓用戶做出填寫選擇的同時,也提供了恰當的操作界面,而記住,“恰當”的方式并非固定不變,有時是選框,有時是自動填寫的輸入框,有時是下拉列表,總是根據具體情況而定。

英文原文:NICK BABICH, UX DESIGN: DROP-DOWNS IN FORMS
原文地址:HTTPS://UXPLANET.ORG/UX-DESIGN-DROP-DOWNS-IN-FORMS-C6943EC30037#.9ZI6F6L34
譯文地址:

相關文章:

推薦文章

最新文章

熱門標簽

快乐炸金花 当雄县 | 石柱 | 陇西县 | 静海县 | 内丘县 | 元朗区 | 两当县 | 合江县 | 漳浦县 | 山丹县 | 阜南县 | 普格县 | 孝义市 | 大同市 | 都昌县 | 拉萨市 | 天津市 | 孝义市 | 聂拉木县 | 黄浦区 | 韩城市 | 普格县 | 闻喜县 | 隆德县 | 凤冈县 | 兴国县 | 甘谷县 | 南通市 | 祁阳县 | 梅河口市 | 会宁县 | 遂川县 | 多伦县 | 广德县 | 清涧县 | 惠水县 | 比如县 | 鹤庆县 | 水城县 | 东安县 | 河西区 | 巴南区 | 独山县 | 万宁市 | 化德县 | 连城县 | 昌平区 | 商水县 | 章丘市 | 台前县 | 南雄市 | 兰州市 | 张家口市 | 南宫市 | 英超 | 涡阳县 | 鄂托克前旗 | 亳州市 | 水富县 | 泰和县 | 门源 | 营山县 | 浦县 | 克什克腾旗 | 大港区 | 兰西县 | 古丈县 | 德保县 | 垫江县 | 随州市 | 湘西 | 思南县 | 颍上县 | 井陉县 | 漯河市 | 阿巴嘎旗 | 兰溪市 | 东乡族自治县 | 临朐县 | 大同市 | 无为县 | 兴山县 | 通城县 | 衡阳市 | 宝兴县 | 玉溪市 | 泌阳县 | 洞口县 | 大冶市 | 南汇区 | 陕西省 | 开远市 | 南平市 | 成安县 | 钟祥市 | 玛纳斯县 | 资源县 | 家居 | 南郑县 | 汾阳市 | 兰溪市 | 老河口市 | 团风县 | 怀集县 | 剑阁县 | 四会市 | 绩溪县 | 中阳县 | 两当县 | 佛冈县 | 彩票 | 睢宁县 | 浑源县 | 上思县 | 定日县 | 安顺市 | 疏勒县 | 木兰县 | 兰溪市 | 望城县 | 师宗县 | 修文县 | 罗定市 | 株洲县 | 胶州市 | 靖宇县 | 民乐县 | 泸州市 | 衡阳县 | 广平县 | 平度市 | 合水县 | 涡阳县 | 改则县 | 读书 | 榆林市 | 彩票 | 武功县 | 堆龙德庆县 | 富阳市 | 鹤峰县 | 永春县 | 任丘市 | 民丰县 | 宜都市 | 上杭县 | 阿合奇县 | 德清县 | 枝江市 | 平泉县 | 扬州市 | 临高县 | 衡水市 | 同江市 | 松潘县 | 丽江市 | 中江县 | 措美县 | 拜城县 | 柳州市 | 郑州市 | 永修县 | 阜平县 | 怀化市 | 正定县 | 开封县 | 图们市 | 岳池县 | 尼勒克县 | 确山县 | 岚皋县 | 富川 | 剑阁县 | 察隅县 | 伽师县 | 类乌齐县 | 自贡市 | 荔浦县 | 武义县 | 吴忠市 | 梁山县 | 吕梁市 | 德令哈市 | 新干县 | 大荔县 | 长兴县 | 嵩明县 | 高碑店市 | 抚顺县 | 新干县 | 建瓯市 | 麻城市 | 遂溪县 | 揭东县 | 南昌市 | 林西县 | 甘泉县 | 石首市 | 行唐县 | 辉县市 | 房产 | 英山县 | 登封市 | 类乌齐县 | 南投县 | 耿马 | 法库县 | 隆林 | 绥德县 | 卢龙县 | 塘沽区 | 河北区 | 旬邑县 | 武胜县 | 秭归县 | 泽州县 | 永兴县 | 宿松县 | 凤翔县 | 翁牛特旗 | 广安市 | 晋城 | 政和县 | 壤塘县 | 屏东市 | 宝坻区 | 财经 | 吴旗县 | 泾阳县 | 焉耆 | 盐亭县 | 合山市 | 福州市 | 新疆 | 大余县 | 西乌珠穆沁旗 | 和龙市 | 岳普湖县 | 达孜县 | 上虞市 | 溆浦县 | 元江 | 林甸县 | 醴陵市 | 虞城县 | 永寿县 | 星座 | 马关县 | 文昌市 | 宁阳县 | 巨鹿县 |