下拉菜單是在界面設(shè)計(jì)中很常用的組件，它以下拉的方式同時(shí)展示多個(gè)標(biāo)簽并幫助用戶縮小選擇范圍，快速滿足用戶的選擇需求，尤其是一些導(dǎo)航，設(shè)計(jì)師會(huì)很依賴下拉菜單的使用。在 UI 設(shè)計(jì)中，雖然經(jīng)常會(huì)使用到下拉菜單，但很多設(shè)計(jì)師對它并不是很了解，如果過度使用或?yàn)E用，也會(huì)對用戶體驗(yàn)產(chǎn)生負(fù)面影響，所以，如何正確的使用下拉菜單就顯得非常重要，設(shè)計(jì)師需要對它有一個(gè)更為全面的了解。

那么，如何區(qū)分下拉菜單設(shè)計(jì)的是否合理？到底有哪些利弊？什么場景下需要使用下拉菜單，筆者將從什么是下拉菜單開始，對下拉菜單的構(gòu)成、類型、使用場景及注意事項(xiàng)進(jìn)行一步步梳理總結(jié)，希望本篇文章對大家有一定的幫助。

本期大綱

1. 基本介紹及結(jié)構(gòu)梳理
2. 使用下拉菜單需滿足的條件
3. 下拉菜單類型
4. 常見問題及避坑指南
5. 總結(jié)

基本介紹及結(jié)構(gòu)梳理

1. 什么是下拉菜單？

下拉菜單是選項(xiàng)的一種呈現(xiàn)方式，當(dāng)用戶點(diǎn)擊某個(gè)觸發(fā)圖標(biāo)/箭頭時(shí)，會(huì)彈出一個(gè)項(xiàng)目列表，用戶需從中選擇一項(xiàng)或多項(xiàng)來滿足自己的選擇需求。

下拉菜單經(jīng)常用在表單選項(xiàng)、篩選條件、導(dǎo)航等界面模塊中，被觸發(fā)后彈出的內(nèi)容包括但不僅限于單選列表、多選列表、子選項(xiàng)、搜索等，內(nèi)容較多時(shí)可能需要上下滾動(dòng)，真實(shí)情況視選項(xiàng)的實(shí)際數(shù)量而定。

2. 下拉菜單的構(gòu)成

下拉菜單看起來跟表單中的選項(xiàng)框幾乎一致，但在真實(shí)的表單頁面中，觸發(fā)表單項(xiàng)后可能是下拉菜單，也可能是彈窗或頁面跳轉(zhuǎn)。同理，下拉菜單也會(huì)經(jīng)常用在除表單之外的其他界面模塊中，從表面上看跟表單一樣，而實(shí)際的元素及交互效果則有很大的區(qū)別，但本文主要針對表單中的下拉菜單（非導(dǎo)航）作出介紹，有以下十個(gè)部分構(gòu)成：

1）標(biāo)簽：告知用戶該下拉菜單項(xiàng)需要選擇什么內(nèi)容；

2）容器：用于承載選擇前的信息提示（占位符）及選擇后的內(nèi)容；

3）下拉箭頭：提醒用戶有可點(diǎn)擊的延展項(xiàng)，點(diǎn)擊后彈出下拉框，箭頭垂直翻轉(zhuǎn)，再次點(diǎn)擊箭頭或選擇內(nèi)容后復(fù)原。另外，部分產(chǎn)品使用到倒三角代替下拉箭頭，其作用相同；

4）占位符：對標(biāo)簽進(jìn)行描述或補(bǔ)充，減少用戶出錯(cuò)的可能，選擇內(nèi)容后會(huì)直接替換占位符；

5）下拉框（容器）：用于承載下拉選項(xiàng)的容器，點(diǎn)擊下拉箭頭后會(huì)彈出下拉框；

6）選項(xiàng)列表：供用戶選擇的內(nèi)容；

7）分隔線：當(dāng)列表中選項(xiàng)較多時(shí)，添加分隔線能更好的區(qū)分每個(gè)單獨(dú)的選項(xiàng)（視情況而定）；

8）已選中：彈出下拉菜單后，通常會(huì)用單選/復(fù)選框、主體色、加粗等樣式提示用戶默認(rèn)選項(xiàng)或已選中的內(nèi)容；

9）滾動(dòng)條：下拉框的高度會(huì)有一個(gè)最大值，當(dāng)選項(xiàng)列表高度超過下拉框的高度時(shí)，就會(huì)出現(xiàn)滾動(dòng)條；

10）系統(tǒng)反饋：用戶未操作必填內(nèi)容就提交任務(wù)時(shí)，系統(tǒng)會(huì)給予提示。

3. 下拉菜單的幾種狀態(tài)

不管是出于系統(tǒng)問題還是用戶的原因，下拉菜單能否操作或有什么限制，都應(yīng)該給予用戶及時(shí)的反饋。雖然存在多種交互狀態(tài)且在視覺上都比較相似，但在設(shè)計(jì)時(shí)需要明顯的區(qū)分開來，常見的狀態(tài)有默認(rèn)、懸停、聚焦、完成、禁用和錯(cuò)誤提示，下面一起來看看設(shè)計(jì)師如何通過不同的視覺樣式反饋給用戶。

默認(rèn)狀態(tài)

即初始化狀態(tài)，操作之前的樣式，用戶可從標(biāo)簽內(nèi)容中獲取該下拉菜單的主題內(nèi)容，通過下拉箭頭預(yù)示該內(nèi)容的可操作性。對于部分選項(xiàng)較少下拉項(xiàng)，系統(tǒng)會(huì)默認(rèn)選擇一個(gè)與該用戶最匹配的、或在目標(biāo)用戶群體中選擇率最高的一項(xiàng)作為默認(rèn)選項(xiàng)，以此減少用戶的操作次數(shù)，降低任務(wù)流程的操作成本。

懸停狀態(tài)

當(dāng)鼠標(biāo)經(jīng)過或停留在一個(gè)下拉菜單項(xiàng)時(shí)，容器會(huì)通過改變填充色、描邊色或其他不同于初始化的樣式提醒用戶該內(nèi)容的可操作性。懸停狀態(tài)只出現(xiàn)在電腦端，因觸屏設(shè)備直接與之產(chǎn)生交互，會(huì)直接越過該狀態(tài)。

聚焦?fàn)顟B(tài)

聚焦?fàn)顟B(tài)是指用戶正在與之發(fā)生交互，點(diǎn)擊后，展開選項(xiàng)列表的同時(shí)，容器通過投影、邊框加粗或主色調(diào)來提醒用戶當(dāng)前正處在操作中，下拉箭頭會(huì)進(jìn)行垂直翻轉(zhuǎn)（向上）。在很多其他模塊組件中，展開/收起也是源于箭頭上下方向的提示。

完成狀態(tài)

用戶完成選擇后，容器中填充被選中的選項(xiàng)并替換占位符，對于非必填的下拉菜單項(xiàng)，后面出現(xiàn)一鍵清除圖標(biāo)"?"，其他元素與初始化狀態(tài)相同。

禁用狀態(tài)

對系統(tǒng)禁用或當(dāng)前未滿足操作條件的下拉菜單項(xiàng)，為保持內(nèi)容的可見性，對部分元素置灰以提醒用戶。

錯(cuò)誤反饋

相比輸入框，下拉菜單項(xiàng)出錯(cuò)的情況較少，用戶出現(xiàn)漏選、或任務(wù)流程存在兩個(gè)互斥的選項(xiàng)時(shí)，系統(tǒng)會(huì)通過強(qiáng)提醒警示用戶，例如將提示文本、容器描邊及填充使用紅色。

使用下拉菜單需滿足的條件

1. 由選項(xiàng)數(shù)量決定（移動(dòng)端）

首先，選項(xiàng)數(shù)量不能太少也不能太多。說人話，就是選項(xiàng)數(shù)量為 5~9 條是使用下拉菜單的最佳選擇。因下拉區(qū)域的空間有限，考慮到用戶操作的難易程度，大多數(shù)情況下，低于 5 條選項(xiàng)使用單選按鈕即可滿足，超過 9 條就需要更多的展示空間，使用操作欄彈窗或頁面跳轉(zhuǎn)則體驗(yàn)更好。當(dāng)然這并非絕對，只是作為一個(gè)參考值而已，使用下拉菜單以 5~9 條為例，可滿足工作中的大部設(shè)計(jì)需求。

其次，在選項(xiàng)數(shù)量滿足的條件下，選項(xiàng)文本的字?jǐn)?shù)也需越短越好，如果文本過長導(dǎo)致折行或省略，用戶體驗(yàn)也會(huì)大打折扣，還不如棄用下拉菜單、換種方式呈現(xiàn)。

2. 由便捷性決定

能讓用戶選擇的就不要讓用戶去輸入。比如用戶在選擇退款原因時(shí)，常見的原因就那么幾種，使用下拉菜單的樣式呈現(xiàn)，比碼字的操作效率會(huì)高出很多，即便用戶有自定義需求，增加一個(gè)「其他」選項(xiàng)完全可以滿足。

另外，需要說明的是，這種方案只能滿足大部分設(shè)計(jì)需求及使用場景，沒有絕對好的設(shè)計(jì)。當(dāng)輸入有可能比選擇更快時(shí)，那就果斷讓用戶輸入，這種情況一般出現(xiàn)在日歷控件中，如果用戶年齡跨度較大，想象一下，需要在幾十甚至上百組數(shù)據(jù)中找到自己的出生年份也是件很痛苦的事情，還不如輸入 4 個(gè)數(shù)字來的快。

3. 后期延展決定

如果當(dāng)前選項(xiàng)較少（低于 5 項(xiàng)），由于內(nèi)容是管理后臺(tái)配置、且根據(jù)產(chǎn)品需求短時(shí)間內(nèi)有陸續(xù)增加的規(guī)劃，但最終數(shù)量可控，這時(shí)，即便是只有一兩條選項(xiàng)也可選擇使用下拉菜單。

下拉菜單類型

根據(jù)用戶需求、內(nèi)容性質(zhì)的不同、處理各種信息時(shí)更加方便，其下拉菜單的視覺樣式、交互方式也會(huì)有所不同。例如：在導(dǎo)航中使用下拉菜單、表單中使用下拉框，甚至某些特殊場景中，下拉框和下拉菜單還能互換，但為了兼顧不同類型、提升可用性，仍需特別留意這幾種類型及變化。

1. 導(dǎo)航類型

幾乎所有的網(wǎng)站都離不開導(dǎo)航類型菜單，分為水平導(dǎo)航和垂直導(dǎo)航兩種。水平導(dǎo)航一般出現(xiàn)在網(wǎng)站頂部，例如官網(wǎng)頂部的功能分類、電商網(wǎng)站的商品分類等；而垂直導(dǎo)航絕大多數(shù)出現(xiàn)在后臺(tái)管理系統(tǒng)的左側(cè)，不管是哪種類型，主要目的是通過所提供的導(dǎo)航鏈接將用戶帶到新的位置。

2. 命令菜單類型

命令菜單主要用于計(jì)算機(jī)桌面軟件及應(yīng)用程序的頂部，點(diǎn)擊后會(huì)展開很多選項(xiàng)按鈕以供用戶進(jìn)行下一步操作，部分較為復(fù)雜的功能選項(xiàng)會(huì)伴隨著二級（子菜單）選項(xiàng)列表，方便用戶對軟件、應(yīng)用更好的控制。

3. 表單類型

眾所周知，在條件允許的情況下，用戶選擇的速度要遠(yuǎn)遠(yuǎn)大于碼字的速度，且更有利于系統(tǒng)進(jìn)行數(shù)據(jù)統(tǒng)計(jì)，所以在很多表單中，都會(huì)設(shè)計(jì)一個(gè)選項(xiàng)字段，讓用戶通過下拉菜單選項(xiàng)便捷式選擇。表單類型的下拉菜單也有多種類型樣式，下面將一一進(jìn)行介紹：

標(biāo)準(zhǔn)樣式

標(biāo)準(zhǔn)下拉菜單是最原始、操作最簡單的類型，沒有任何的彎彎繞繞，觸發(fā)彈出下拉選項(xiàng)后，選中任一內(nèi)容即完成與當(dāng)前表單項(xiàng)的交互。

關(guān)鍵詞匹配

這種類型常出現(xiàn)在選項(xiàng)較多的場景中，為了方便用戶更快完成選擇任務(wù)，在標(biāo)準(zhǔn)樣式的基礎(chǔ)上增加了輸入功能。輸入的過程中，系統(tǒng)根據(jù)輸入的關(guān)鍵詞在已有的選項(xiàng)中進(jìn)行匹配、篩選，用戶可在篩選結(jié)果中快速找出自己需要的選項(xiàng)，無需輸入所有文字、也不用在內(nèi)容超多的列表中來回尋找即可完成任務(wù)。

搜索框

這是一種比較老派的做法，觸發(fā)下拉菜單后，通常會(huì)在選項(xiàng)列表上方增設(shè)一個(gè)搜索框，用戶輸入關(guān)鍵詞后進(jìn)行搜索，相比上面提到的關(guān)鍵詞匹配就有些落后了，不僅視覺樣式變得復(fù)雜、也增加了用戶的操作成本。部分 PC 端網(wǎng)站的選擇地址控件中還有使用，但更多產(chǎn)品直接使用了城市拼音首字母進(jìn)行分類篩選，顯然比這種搜索方式的效率更高。

多選/復(fù)選

即用戶在同一表單項(xiàng)中選擇多個(gè)選項(xiàng)，雖然這種設(shè)計(jì)方式操作起來比較復(fù)雜，但在內(nèi)容較多、空間資源不是很充足的管理系統(tǒng)、B 端設(shè)計(jì)中還是很實(shí)用的。例如用戶權(quán)限配置、帶有二級/三級聯(lián)動(dòng)的機(jī)構(gòu)或地址選擇，多選相比平鋪更節(jié)省空間，且這類用戶很多都是經(jīng)過培訓(xùn)、相對專業(yè)的群體。

常見問題及避坑指南

1. 延展不要超過兩級

菜單的子層級越多、操作越復(fù)雜、用戶體驗(yàn)就越差，盡量不要超過兩級，如果超過兩級，在條件允許的情況下進(jìn)行二次分析增刪、合并分類，以此來減少用戶操作負(fù)擔(dān)。當(dāng)然這并非絕對，只能在相對情況下盡量避免，例如選擇地址（省、市、區(qū)/縣）時(shí)就無法刪減。

2. 默認(rèn)值的使用

默認(rèn)值主要針對表單類型的下拉菜單，在可預(yù)知的場景中、通過行為預(yù)判提前為用戶選中某個(gè)最常用、選擇頻率最高或當(dāng)前用戶最有可能選擇的內(nèi)容，方便被精準(zhǔn)匹配到的用戶不用做任何操作即可完成任務(wù)，同時(shí)也提高效率。但根據(jù)筆者在體驗(yàn)的多個(gè)產(chǎn)品中、以及看過相關(guān)方面的各種資料說明，是否需要提供默認(rèn)選項(xiàng)則各自參半，成了兩相對立的局面，暫且不論默認(rèn)選項(xiàng)是否合理，但如果出現(xiàn)以下情況請慎用。

選填項(xiàng)

為選填表單項(xiàng)提供默認(rèn)值，用戶極有可能直接略過該項(xiàng)，最終默認(rèn)值并非用戶的真實(shí)需求，這也將變得毫無意義，甚至在后續(xù)的數(shù)據(jù)分析中產(chǎn)生誤導(dǎo)，影響產(chǎn)品的走向。另外，即便用戶注意到了，不想選擇任何內(nèi)容，還得手動(dòng)清除，這就需要用戶付出更多的時(shí)間成本和操作成本，與用戶體驗(yàn)相悖。

均衡度適中

當(dāng)多個(gè)選項(xiàng)的使用率較為均衡，提供默認(rèn)選項(xiàng)確實(shí)會(huì)減少這一小部分用戶的操作成本，但在大部分的用戶群體中，只要不影響其利益或用戶認(rèn)為無關(guān)緊要就會(huì)默認(rèn)該選項(xiàng)的可用性，同樣會(huì)出現(xiàn)上述問題。

用戶屬性模糊

這種主要針對千人千面的推薦設(shè)定，在一些新注冊或行為飄忽不定的用戶群體中，推薦默認(rèn)選項(xiàng)也會(huì)將出錯(cuò)的概率大幅度提升。

3. 避免滾動(dòng)失誤

對于選項(xiàng)較多的下拉菜單，滾動(dòng)不可避免，但有沒有一種可能，我們在明明需要滾動(dòng)下拉列表、可滾動(dòng)的卻是整個(gè)網(wǎng)頁，而鼠標(biāo)離開下拉區(qū)域去滾動(dòng)頁面、真正發(fā)生滾動(dòng)交互的則是下拉列表，苦不堪言。

解決這個(gè)問題需要程序員對滾動(dòng)交互時(shí)的光標(biāo)位置作出界定，當(dāng)下拉菜單僅處于聚焦（高亮/主體色/陰影）狀態(tài)時(shí)滾動(dòng)選項(xiàng)列表，除此之外滾動(dòng)頁面即可。這里需要說明的是，光標(biāo)離開下拉菜單就可取消聚焦?fàn)顟B(tài)，不用非得等用戶完成選擇任務(wù)后再取消，目的是為讓下拉菜單與頁面的滾動(dòng)互不干擾且能隨時(shí)切換。

4. 選項(xiàng)數(shù)量

選項(xiàng)太少

表單選項(xiàng)太少能使用下拉菜單嗎？答案是"當(dāng)然能"。但這又是何苦呢，如果只有兩個(gè)選項(xiàng)，用單選按鈕它不香嗎，用戶只喜歡用最少的操作在最短的時(shí)間內(nèi)完成自身所需，每多操作一次都可能會(huì)離開。

選項(xiàng)太多

下拉選項(xiàng)過多可能會(huì)對用戶產(chǎn)生負(fù)面影響，但有些時(shí)候是無法避免的，例如選擇國家、地址、區(qū)號等，不管怎么做都沒法簡化。這時(shí)，增加前面所講到的關(guān)鍵詞匹配、搜索框功能，就能提高用戶的完成效率，也讓產(chǎn)品變得更容易使用。

5. 如果輸入比選擇更快

在部分特殊場景中，輸入明顯比選擇更快。試想一下，自己的出生年份僅僅四個(gè)數(shù)字，但卻要在幾十個(gè)選項(xiàng)中滾動(dòng)查找，真的很費(fèi)時(shí)間，選擇信用卡的有效期也是如此，要解決這個(gè)問題只需一個(gè)數(shù)字鍵盤，讓用戶自己輸入會(huì)容易許多。

6. 減少操作

這里有一個(gè)很經(jīng)典的例子就是日期組件，對于年、月、日的選擇，分別使用 3 個(gè)下拉菜單看似也能接受，但真的很復(fù)雜，且每次前面內(nèi)容的變化都對后面的數(shù)值起著決定性的作用。將三組內(nèi)容進(jìn)行合并且讓用戶自定義，就方便很多，能減少部分多余的操作。

7. 精簡的選項(xiàng)描述

一句話能說清楚的就不要用兩句話，文字越多、理解成本就越高。在空間有限的下拉區(qū)域，選項(xiàng)要盡可能簡短，直擊核心內(nèi)容。

8. 選項(xiàng)的優(yōu)先級

下拉菜單中的選項(xiàng)并非隨意擺放，要想迎合用戶、使其有更好的使用體驗(yàn)，就需要符合一定的規(guī)律。將最常用的選項(xiàng)靠前、相關(guān)聯(lián)的組合、時(shí)間按照先后、地區(qū)按首字母等優(yōu)先級排序，讓用戶操作前就能一目了然。

9. 不可用選項(xiàng)置灰

當(dāng)某個(gè)選項(xiàng)被系統(tǒng)禁用或用戶未達(dá)到選擇條件時(shí)，盡量不要將這些選項(xiàng)隱藏，避免用戶從一開始就誤認(rèn)為是內(nèi)容的殘缺或系統(tǒng)本身就不具備某些選項(xiàng)，為后續(xù)埋下弊端。

將已存在但不可選擇的內(nèi)容置灰顯示，不僅能保持內(nèi)容的完整性、提醒用戶后續(xù)可選，還能在某些特殊場景讓用戶主動(dòng)激活可選條件，提升用戶對產(chǎn)品的使用深度。另外，如果空間資源足夠，在附近提示不可選的原因能確保用戶使用更順暢（鼠標(biāo)懸停在不可選內(nèi)容，臨時(shí)提示就是一種不錯(cuò)的方式）。

總結(jié)

正確的使用下拉菜單既可以保持界面的美觀度，還能合理的利用空間資源、提高用戶選擇效率，但切勿濫用、亂用。

關(guān)于下拉菜單的使用方法及技巧遠(yuǎn)不止于此，只要我們在設(shè)計(jì)前考慮清楚何時(shí)用、怎么用、如何更好的使用，再加上后續(xù)持續(xù)不斷的優(yōu)化、查漏補(bǔ)缺，才能發(fā)揮下拉菜單的最大價(jià)值。

作者：能量眼球