下拉菜單相關應用在平常的交互設計當中是少不了的一環，也是飽受用戶批評的重災區。設計的不好會適得其反，讓它變成繁瑣與 LOW 的代名詞。這篇资讯我們從根本上來分析下拉菜單的構造、應用場景、注意點。
下拉菜單的設計結構和文本輸入框很接近，只是內容多一些，主要有十個部分構成。
1.欄目內容 2.容器 3.下拉箭頭 4.佔位符或提示文本 5.滾動條 6.下拉菜單 7.菜單項 8.分割線 9.選中項 10.提示
1. 標準形態
標準下拉菜單是針對我們所理解的“下拉”這個動詞，在激活狀態，當你點擊文本輸入欄的地方時，它會打開一個菜單。這里值得注意的是因為受到下拉菜單高度的限制以及用戶操作效率，菜單項不宜過多也不宜太少，有研究發現當有超過 10 個或少于 5 個選項時，盡量避免下拉。
2. 自動提示形態
我個人是超級喜歡這種交互模式的，某些時候這個功能變得格外實用。比如選擇城市地區時，它可以讓用戶在一長串選項中優雅的找到自己心頭所愛，不用瘋狂的讓自己下拉一遍又一遍，
特別提醒︰
- 在這個場景之下，用戶雙手是在敲擊鍵盤，所以該組件可以用鍵盤上的“↑↓”來操作尤為重要。
- 同時也要考慮到有些場景，輸入信息是來自用戶的粘貼，所以該交互模式必須支持用戶粘貼信息。
3. 自動補充形態
這也是幫助用戶從眾多選項當中進行快速完成篩選的另一種交互設計策略。
4. 附帶搜索框形態
當然我們也可以在下拉列表當中結合搜索組件，幫用戶在下拉列表中完成搜索任務。這種設計策略就比較老派了，好處是平鋪直敘，壞處是沒有啥新意，不夠優雅。
5. 特別提醒
以上小編提到幾種下拉菜單的交互形態都建議用戶在完成單選任務的時候去使用，以為下拉菜單對于完成多選任務並不友好。會讓用戶掉入「多選陷阱」（此概念引用于 Hozin 大佬，再次給出最高的敬意）當中，即通過下拉菜單完成多選任務後，用戶並不能直觀看到自己選擇了哪些選項。
如果一定要使用下拉菜單完成多選任務的話，那設計師必須要帶上一個已選搜集器，這樣用戶就可以在選擇同時知道自己已選了哪些。其實這種交互設計已經不是組件範疇了，而是一種解決多選任務的交互模式。所以說小編真的不太推薦用下拉列表去完成多選任務。
又要了喜聞樂見打狗頭的時間，這里又不得不提到 Antdesign 里的組件例子。下圖中就是 Antdesign 試圖用下拉菜單去解決多選陷阱的問題。不得不說這里我們看到 Antdesign 努力的樣子。想嘗試把用戶的已選項在框體內作展示，但是難道框體高度會隨著用戶選項增多而不停增高嗎？如果用戶選擇 100 個選項呢？OMG 反正我覺得這只能算一個能用的設計，但不是一個優雅的設計。
1. 避免默認值
在使用下拉菜單時，設置默認值絕對是一個糟糕的設計策略。大量的經驗告訴我們如果有默認值，用戶基本上不會去仔細查看其他選項而是直接跳過，除非你真的確定有 90%的用戶會選擇這個默認值 。。 運凳褂謾扒胙≡瘛北忍 ├ 現島蒙杴П 。
2. 注意滾動問題
這里要特別支持關于下拉列表當中的滾動問題，如果鼠標光標位于下拉菜單之外，用戶很可能會向下滾動頁面而不是向下滾動下拉菜單，從而不自覺的隱藏屏幕上下拉菜單。然而，在一些瀏覽器中，只要有焦點，下拉框實際上就會滾動，可能會給用戶留下錯誤的數據。
3. 注意數量
選擇菜單只有 2 個選項，使用下拉框就是個非常糟糕的策略，用戶必須單擊才能查看可用選項。
在這種情況下，應該使用單選按鈕。讓用戶能夠立即掃視到有多少選項以及每個選項是什麼，而無需單擊任何內容來顯示此信息。
活用變體
受限于移動設備尺寸，造成其屏幕空間非常有限，這意味著用戶在滾動頁面時接受到的信息內容非常局限，那就需要設計師對組件的選擇與設計要求更高。同時某些框架提供對原生組件使用起來也不太得法，比如 iOS9 提供對原生控件，交互操作鏈路比較長，同時窗體高度佔據了 50%，手勢空間也受到不小的約束。所以針對不同數據類型我們可以用同構異型的組件去讓用戶完成任務。
Radio group
在“”一文當中小編以及有詳細的解釋這里就不在進行贅述，這里提供资讯鏈接手把手帶你重新認識 Radio Button，不了解的朋友可以跳回去看一看哦
Steppers 步進器
當對一組有序數列進行選擇任務時，使用「Steppers」也是不錯的選擇，可以用來增加或減少一定數量。對小步長的有序數列選擇任務比較有意義，可以與輸入框結合使用。同時需要注意的是一般這種數據數量不建議超過 5 個。假如是 100 個數據的話肯定不能選擇 steppers ，不然用戶一定會抓狂的。
Sliders 滑塊
同時在數據選擇任務領域當中，使用 Sliders 滑塊也是種不錯的選擇。
單個值情況︰
多個值情況︰
跟步進器結合使用
Switches 開關
開關比較簡單僅僅支持兩個簡單的，完全相反的選擇。值得注意開關只有「開」「關」兩種交互形態，不存在「不可用」狀態，開關不建議加文字說明，並且個人經驗告訴得出 Switches 開關在 B/S 結構的產品當中需要慎用。
這里僅僅只是舉例說明了幾種比較常見代替下拉菜單完成用戶選擇任務的等效交互組件或者交互模式，實際工作中其他例子舉不勝舉，希望大家可以在工作中沉澱出好的方法。
能用的設計與優雅的設計的主要區別是什麼？優雅的設計應該為用戶完成每個目標任務時都提供最合適的輸入組件。同樣的目標任務在不同的場景下的組件設計肯定有所不同，有時候可能是下拉菜單，有時候可能是 Radio group，有時可能是其他形式，此文小編希望給大家在工作中開拓出更多的設計思路。
歡迎關注作者微信公眾號︰「月亮體驗設計坊」
復制本文鏈接 资讯為作者獨立觀點不代表欧美freesex黑人又粗又大，亚洲av无码一区二区二三区，欧美情侣性视频立 。 span>未經允許不得轉載。
繼續閱讀與本文標簽相同的资讯
最新 用「環球影城」App 的案例，看看設計師是如何分析優化的！
16小時前推薦︰ 應駿
最新 用一篇资讯，幫你快速入門「增長黑客」
16小時前推薦︰ 騰訊CDC體驗設計
最新 如何建立B端產品的規範要求？我總結了五個方面！
16小時前推薦︰ 知果日記
最新 掌握這4個方法，不試用競品也能做競品調研！
16小時前推薦︰ 體驗進階
第三波！2021年9月精選實用設計干貨合集
2天前推薦︰ 陳子木
發表評論 已發布 6 條