導(dǎo)讀：下拉菜單相關(guān)應(yīng)用在平常的交互設(shè)計(jì)當(dāng)中是少不了的一環(huán)，也是被用戶飽受批評(píng)的重災(zāi)區(qū)。設(shè)計(jì)得不好會(huì)適得其反，讓它變成繁瑣與LOW的代名詞。這篇文章我們也跟上一篇radio button一樣，從根本上來分析下拉菜單的構(gòu)造、應(yīng)用場(chǎng)景、注意點(diǎn)。

一、下拉菜單的構(gòu)造圖解

下拉菜單的設(shè)計(jì)結(jié)構(gòu)和文本輸入框很接近，只是內(nèi)容多一些，主要有十個(gè)部分構(gòu)成。

1. 欄目?jī)?nèi)容
2. 容器
3. 下拉箭頭
4. 占位符或提示文本
5. 滾動(dòng)條
6. 下拉菜單
7. 菜單項(xiàng)
8. 分割線
9. 選中項(xiàng)
10. 提示

二、下拉菜單的類型

1. 標(biāo)準(zhǔn)形態(tài)

標(biāo)準(zhǔn)下拉菜單是針對(duì)我們所理解的“下拉”這個(gè)動(dòng)詞，在激活狀態(tài)，當(dāng)你點(diǎn)擊文本輸入欄的地方時(shí)，它會(huì)打開一個(gè)菜單。這里值得注意的是因?yàn)槭艿较吕藛胃叨鹊南拗埔约坝脩舨僮餍?，菜單?xiàng)不宜過多也不介意太少，有研究發(fā)現(xiàn)當(dāng)有超過 10 個(gè)或少于 5 個(gè)選項(xiàng)時(shí)，盡量避免下拉。

2. 自動(dòng)提示形態(tài)

我個(gè)人是超級(jí)喜歡這種交互模式的，某些時(shí)候這個(gè)功能變得格外實(shí)用。比如選擇城市地區(qū)時(shí)，它可以讓用戶在一長(zhǎng)串選項(xiàng)中優(yōu)雅的找到自己心頭所愛，不用瘋狂的讓自己下拉一遍又一遍，

特別提醒：

• 在這個(gè)場(chǎng)景之下，用戶雙手是在敲擊鍵盤，所以該組件可以用鍵盤上的“????”來操作尤為重要。
• 同時(shí)也要考慮到有些場(chǎng)景，輸入信息是來自用戶的粘貼，所以該交互模式必須支持用戶粘貼信息。

3. 自動(dòng)補(bǔ)充形態(tài)

這也是幫助用戶從眾多選項(xiàng)當(dāng)中進(jìn)行快速完成篩選的另一種交互設(shè)計(jì)策略。

4. 附帶搜索框形態(tài)

當(dāng)然我們也可以在下拉列表當(dāng)中結(jié)合搜索組件，幫用戶在下拉列表中完成搜索任務(wù)。這種設(shè)計(jì)策略就比較老派了，好處是平鋪直敘，壞處是沒有啥新意，不夠優(yōu)雅。

5. 特別提醒

以上小編提到幾種下拉菜單的交互形態(tài)都建議用戶在完成單選任務(wù)的時(shí)候去使用，私以為下拉菜單對(duì)于完成多選任務(wù)并不友好。會(huì)讓用戶掉入「多選陷阱」（此概念引用于Hozin大佬，再次給出最高的敬意）當(dāng)中，即通過下拉菜單完成多選任務(wù)后，用戶并不能直觀看到自己選擇了哪些選項(xiàng)。

如果一定要使用下拉菜單完成多選任務(wù)的話，那設(shè)計(jì)師必須要帶上一個(gè)已選搜集器，這樣用戶就可以在選擇同時(shí)知道自己已選了哪些。其實(shí)這種交互設(shè)計(jì)已經(jīng)不是組件范疇了，而是一種解決多選任務(wù)的交互模式。所以說小編真的不太推薦用下拉列表去完成多選任務(wù)。

6. 打爆大廠的狗頭

又要了喜聞樂見打狗頭的時(shí)間，這里又不得不提到Antdesign里的組件例子。下圖中就是Antdesign試圖用下拉菜單去解決多選陷阱的問題。不得不說這里我們看到Antdesign努力的樣子。想嘗試把用戶的已選項(xiàng)在框體內(nèi)作展示，但是難道框體高度隨著用戶選項(xiàng)增多而不停增高嗎？如果用戶選擇100個(gè)選項(xiàng)呢？OMG反正我覺得這只能算一個(gè)能用的設(shè)計(jì)，但是不是一個(gè)優(yōu)雅的設(shè)計(jì)。

三、下拉菜單使用小竅門

1. 避免默認(rèn)值

在使用下拉菜單時(shí)，設(shè)置默認(rèn)值絕對(duì)是一個(gè)糟糕的設(shè)計(jì)策略。大量的經(jīng)驗(yàn)告訴我們?nèi)绻心J(rèn)值，用戶基本上不會(huì)去仔細(xì)查看其他選項(xiàng)而是直接跳過，除非你真的確定有90%的用戶會(huì)選擇這個(gè)默認(rèn)值?。。∷哉f使用“請(qǐng)選擇”比提供默認(rèn)值好上千倍。

2. 注意滾動(dòng)問題

這里要特別支持關(guān)于下拉列表當(dāng)中的滾動(dòng)問題，如果鼠標(biāo)光標(biāo)位于下拉菜單之外，用戶很可能會(huì)向下滾動(dòng)頁面而不是向下滾動(dòng)下拉菜單，從而不自覺的隱藏屏幕上下拉菜單。然而，在一些瀏覽器中，只要有焦點(diǎn)，下拉框?qū)嶋H上就會(huì)滾動(dòng)，可能會(huì)給用戶留下錯(cuò)誤的數(shù)據(jù)。

3. 注意數(shù)量

選擇菜單只有2個(gè)選項(xiàng)，使用下拉框就是個(gè)非常糟糕的策略，用戶必須單擊才能查看可用選項(xiàng)。

在這種情況下，應(yīng)該使用單選按鈕。讓用戶將能夠立即掃視到有多少選項(xiàng)以及每個(gè)選項(xiàng)是什么，而無需單擊任何內(nèi)容來顯示此信息。

4. 活用變體

受限于移動(dòng)設(shè)備尺寸，造成其屏幕空間非常有限，這意味著用戶在滾動(dòng)頁面時(shí)接受到的信息內(nèi)容非常局限，那就需要設(shè)計(jì)師對(duì)組件的選擇與設(shè)計(jì)要求更高。同時(shí)某些框架提供對(duì)原生組件使用起來也不太得法，比如iOS9提供對(duì)原生控件，交互操作鏈路比較長(zhǎng)，同時(shí)窗體高度占據(jù)了50%，手勢(shì)空間也受到不小的約束。所以針對(duì)不同數(shù)據(jù)類型我們可以用同構(gòu)異型的組件去讓用戶完成任務(wù)。

5. Radio group

在“手把手帶你重新認(rèn)識(shí)Radio Button”一文當(dāng)中小編以及有詳細(xì)的解釋這里就不在進(jìn)行贅述，這里提供文章鏈接手把手帶你重新認(rèn)識(shí)Radio Button，不了解的朋友可以跳回去看一看哦

6. Steppers 步進(jìn)器

當(dāng)對(duì)一組有序數(shù)列進(jìn)行選擇任務(wù)時(shí)，使用「Steppers 」也是不錯(cuò)的選擇，可以用來增加或減少一定數(shù)量。對(duì)小步長(zhǎng)的有序數(shù)列選擇任務(wù)比較有意義，可以與輸入框結(jié)合使用。同時(shí)需要注意的一般這種數(shù)據(jù)數(shù)量不建議超過5個(gè)。假如是100個(gè)數(shù)據(jù)的話肯定不能選擇steppers了不然用戶一定會(huì)抓狂的。

Sliders滑塊

同時(shí)在數(shù)據(jù)選擇任務(wù)領(lǐng)域當(dāng)中，使用Sliders滑塊也是種不錯(cuò)的選擇。

單個(gè)值情況：

多個(gè)值情況：

跟步進(jìn)器結(jié)合使用

7. Switches 開關(guān)

開關(guān)比較簡(jiǎn)單僅僅支持兩個(gè)簡(jiǎn)單的，完全相反的選擇。值得注意開關(guān)只有「開」「關(guān)」兩種交互形態(tài)，不存在「不可用」?fàn)顟B(tài)，開關(guān)不建議加文字說明，并且個(gè)人經(jīng)驗(yàn)告訴得出Switches開關(guān)在B/S結(jié)構(gòu)的產(chǎn)品當(dāng)中需要慎用。關(guān)于開關(guān)的問題有興趣的朋友可以私信我或者加我好友我們仔細(xì)探討下這個(gè)問題。

這里僅僅只是舉例說明了幾種比較常見代替下拉菜單完成用戶選擇任務(wù)的等效交互組件或者交互模式，實(shí)際工作中其他例子舉不勝舉，希望大家可以在工作中沉淀出好的方法。

四、文末小結(jié)

能用的設(shè)計(jì)與優(yōu)雅的設(shè)計(jì)的主要區(qū)別是什么？?jī)?yōu)雅的設(shè)計(jì)應(yīng)該為用戶完成每個(gè)目標(biāo)任務(wù)時(shí)都提供最合適的輸入組件。同樣的目標(biāo)任務(wù)在不同的場(chǎng)景下的組件設(shè)計(jì)肯定有所不同，有時(shí)候可能是下拉菜單，有時(shí)候可能是Radio group，有時(shí)可能是其他形式，此文小編希望給大家在工作中開拓出更多的設(shè)計(jì)思路。

作者：月亮與六便士（vx：Callen_0304）；公眾號(hào)：月亮體驗(yàn)設(shè)計(jì)坊

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。