下拉菜單相關(guān)應(yīng)用在平常的交互設(shè)計當中是少不了的一環(huán)，也是飽受用戶批評的重災(zāi)區(qū)。設(shè)計的不好會適得其反，讓它變成繁瑣與 LOW 的代名詞。這篇文章我們從根本上來分析下拉菜單的構(gòu)造、應(yīng)用場景、注意點。
下拉菜單的設(shè)計結(jié)構(gòu)和文本輸入框很接近，只是內(nèi)容多一些，主要有十個部分構(gòu)成。
1.欄目內(nèi)容 2.容器 3.下拉箭頭 4.占位符或提示文本 5.滾動條 6.下拉菜單 7.菜單項 8.分割線 9.選中項 10.提示
1. 標準形態(tài)
標準下拉菜單是針對我們所理解的“下拉”這個動詞，在激活狀態(tài)，當你點擊文本輸入欄的地方時，它會打開一個菜單。這里值得注意的是因為受到下拉菜單高度的限制以及用戶操作效率，菜單項不宜過多也不宜太少，有研究發(fā)現(xiàn)當有超過 10 個或少于 5 個選項時，盡量避免下拉。
2. 自動提示形態(tài)
我個人是超級喜歡這種交互模式的，某些時候這個功能變得格外實用。比如選擇城市地區(qū)時，它可以讓用戶在一長串選項中優(yōu)雅的找到自己心頭所愛，不用瘋狂的讓自己下拉一遍又一遍，
特別提醒：
- 在這個場景之下，用戶雙手是在敲擊鍵盤，所以該組件可以用鍵盤上的“↑↓”來操作尤為重要。
- 同時也要考慮到有些場景，輸入信息是來自用戶的粘貼，所以該交互模式必須支持用戶粘貼信息。
3. 自動補充形態(tài)
這也是幫助用戶從眾多選項當中進行快速完成篩選的另一種交互設(shè)計策略。
4. 附帶搜索框形態(tài)
當然我們也可以在下拉列表當中結(jié)合搜索組件，幫用戶在下拉列表中完成搜索任務(wù)。這種設(shè)計策略就比較老派了，好處是平鋪直敘，壞處是沒有啥新意，不夠優(yōu)雅。
5. 特別提醒
以上小編提到幾種下拉菜單的交互形態(tài)都建議用戶在完成單選任務(wù)的時候去使用，以為下拉菜單對于完成多選任務(wù)并不友好。會讓用戶掉入「多選陷阱」（此概念引用于 Hozin 大佬，再次給出最高的敬意）當中，即通過下拉菜單完成多選任務(wù)后，用戶并不能直觀看到自己選擇了哪些選項。
如果一定要使用下拉菜單完成多選任務(wù)的話，那設(shè)計師必須要帶上一個已選搜集器，這樣用戶就可以在選擇同時知道自己已選了哪些。其實這種交互設(shè)計已經(jīng)不是組件范疇了，而是一種解決多選任務(wù)的交互模式。所以說小編真的不太推薦用下拉列表去完成多選任務(wù)。
又要了喜聞樂見打狗頭的時間，這里又不得不提到 Antdesign 里的組件例子。下圖中就是 Antdesign 試圖用下拉菜單去解決多選陷阱的問題。不得不說這里我們看到 Antdesign 努力的樣子。想嘗試把用戶的已選項在框體內(nèi)作展示，但是難道框體高度會隨著用戶選項增多而不停增高嗎？如果用戶選擇 100 個選項呢？OMG 反正我覺得這只能算一個能用的設(shè)計，但不是一個優(yōu)雅的設(shè)計。
1. 避免默認值
在使用下拉菜單時，設(shè)置默認值絕對是一個糟糕的設(shè)計策略。大量的經(jīng)驗告訴我們?nèi)绻心J值，用戶基本上不會去仔細查看其他選項而是直接跳過，除非你真的確定有 90%的用戶會選擇這個默認值。。∷哉f使用“請選擇”比提供默認值好上千倍。
2. 注意滾動問題
這里要特別支持關(guān)于下拉列表當中的滾動問題，如果鼠標光標位于下拉菜單之外，用戶很可能會向下滾動頁面而不是向下滾動下拉菜單，從而不自覺的隱藏屏幕上下拉菜單。然而，在一些瀏覽器中，只要有焦點，下拉框?qū)嶋H上就會滾動，可能會給用戶留下錯誤的數(shù)據(jù)。
3. 注意數(shù)量
選擇菜單只有 2 個選項，使用下拉框就是個非常糟糕的策略，用戶必須單擊才能查看可用選項。
在這種情況下，應(yīng)該使用單選按鈕。讓用戶能夠立即掃視到有多少選項以及每個選項是什么，而無需單擊任何內(nèi)容來顯示此信息。
活用變體
受限于移動設(shè)備尺寸，造成其屏幕空間非常有限，這意味著用戶在滾動頁面時接受到的信息內(nèi)容非常局限，那就需要設(shè)計師對組件的選擇與設(shè)計要求更高。同時某些框架提供對原生組件使用起來也不太得法，比如 iOS9 提供對原生控件，交互操作鏈路比較長，同時窗體高度占據(jù)了 50%，手勢空間也受到不小的約束。所以針對不同數(shù)據(jù)類型我們可以用同構(gòu)異型的組件去讓用戶完成任務(wù)。
Radio group
Steppers 步進器
當對一組有序數(shù)列進行選擇任務(wù)時，使用「Steppers」也是不錯的選擇，可以用來增加或減少一定數(shù)量。對小步長的有序數(shù)列選擇任務(wù)比較有意義，可以與輸入框結(jié)合使用。同時需要注意的是一般這種數(shù)據(jù)數(shù)量不建議超過 5 個。假如是 100 個數(shù)據(jù)的話肯定不能選擇 steppers ，不然用戶一定會抓狂的。
Sliders 滑塊
同時在數(shù)據(jù)選擇任務(wù)領(lǐng)域當中，使用 Sliders 滑塊也是種不錯的選擇。
單個值情況：
多個值情況：
跟步進器結(jié)合使用
Switches 開關(guān)
開關(guān)比較簡單僅僅支持兩個簡單的，完全相反的選擇。值得注意開關(guān)只有「開」「關(guān)」兩種交互形態(tài)，不存在「不可用」狀態(tài)，開關(guān)不建議加文字說明，并且個人經(jīng)驗告訴得出 Switches 開關(guān)在 B/S 結(jié)構(gòu)的產(chǎn)品當中需要慎用。
這里僅僅只是舉例說明了幾種比較常見代替下拉菜單完成用戶選擇任務(wù)的等效交互組件或者交互模式，實際工作中其他例子舉不勝舉，希望大家可以在工作中沉淀出好的方法。
能用的設(shè)計與優(yōu)雅的設(shè)計的主要區(qū)別是什么？優(yōu)雅的設(shè)計應(yīng)該為用戶完成每個目標任務(wù)時都提供最合適的輸入組件。同樣的目標任務(wù)在不同的場景下的組件設(shè)計肯定有所不同，有時候可能是下拉菜單，有時候可能是 Radio group，有時可能是其他形式，此文小編希望給大家在工作中開拓出更多的設(shè)計思路。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。