編輯導(dǎo)語：下拉菜單的模式在設(shè)計中最為常見了，那你有沒有依賴下拉菜單呢？本文作者從四個角度進行了全面的梳理與分析，幫助你詳細了解下拉菜單的設(shè)計，做設(shè)計的同學(xué)感興趣就來看看吧。

下拉菜單是在界面設(shè)計中很常用的組件，它以下拉的方式同時展示多個標(biāo)簽并幫助用戶縮小選擇范圍，快速滿足用戶的選擇需求，尤其是一些導(dǎo)航，設(shè)計師會很依賴下拉菜單的使用。

在UI設(shè)計中，雖然經(jīng)常會使用到下拉菜單，但很多設(shè)計師對它并不是很了解，如果過度使用或濫用，也會對用戶體驗產(chǎn)生負面影響，所以，如何正確的使用下拉菜單就顯得非常重要，設(shè)計師需要對它有一個更為全面的了解。

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

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

1. 什么是下拉菜單？

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

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

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

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

1. 標(biāo)簽：告知用戶該下拉菜單項需要選擇什么內(nèi)容；
2. 容器：用于承載選擇前的信息提示（占位符）及選擇后的內(nèi)容；
3. 下拉箭頭：提醒用戶有可點擊的延展項，點擊后彈出下拉框，箭頭垂直翻轉(zhuǎn)，再次點擊箭頭或選擇內(nèi)容后復(fù)原。另外，部分產(chǎn)品使用到倒三角代替下拉箭頭，其作用相同；
4. 占位符：對標(biāo)簽進行描述或補充，減少用戶出錯的可能，選擇內(nèi)容后會直接替換占位符；
5. 下拉框（容器）：用于承載下拉選項的容器，點擊下拉箭頭后會彈出下拉框；
6. 選項列表：供用戶選擇的內(nèi)容；
7. 分隔線：當(dāng)列表中選項較多時，添加分隔線能更好的區(qū)分每個單獨的選項（視情況而定）；
8. 已選中：彈出下拉菜單后，通常會用單選/復(fù)選框、主體色、加粗等樣式提示用戶默認選項或已選中的內(nèi)容；
9. 滾動條：下拉框的高度會有一個最大值，當(dāng)選項列表高度超過下拉框的高度時，就會出現(xiàn)滾動條；
10. 系統(tǒng)反饋：用戶未操作必填內(nèi)容就提交任務(wù)時，系統(tǒng)會給予提示。

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

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

1）默認狀態(tài)

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

2）懸停狀態(tài)

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

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

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

4）完成狀態(tài)

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

5）禁用狀態(tài)

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

6）錯誤反饋

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

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

1. 由選項數(shù)量決定（移動端）

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

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

2. 由便捷性決定

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

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

3. 后期延展決定

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

三、下拉菜單類型

根據(jù)用戶需求、內(nèi)容性質(zhì)的不同、處理各種信息時更加方便，其下拉菜單的視覺樣式、交互方式也會有所不同。例如：在導(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ǒng)的左側(cè)，不管是哪種類型，主要目的是通過所提供的導(dǎo)航鏈接將用戶帶到新的位置。

2. 命令菜單類型

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

3. 表單類型

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

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

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

2）關(guān)鍵詞匹配

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

3）搜索框

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

4）多選/復(fù)選

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

四、常見問題及避坑指南

1. 延展不要超過兩級

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

2. 默認值的使用

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

1）選填項

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

2）均衡度適中

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

3）用戶屬性模糊

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

3. 避免滾動失誤

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

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

4. 選項數(shù)量

1）選項太少

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

2）選項太多

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

5. 如果輸入比選擇更快

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

6. 減少操作

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

7. 精簡的選項描述

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

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

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

9. 不可用選項置灰

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

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

五、總結(jié)

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

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

#專欄作家#

大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設(shè)計的手段為受眾用戶帶來更好的體驗，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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