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

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

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

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

一、基本介紹及結構梳理

1. 什麼是下拉菜單？

下拉菜單是選項的一種呈現方式，當用戶點擊某個觸發圖标/箭頭時，會彈出一個項目列表，用戶需從中選擇一項或多項來滿足自己的選擇需求。

下拉菜單經常用在表單選項、篩選條件、導航等界面模塊中，被觸發後彈出的内容包括但不僅限于單選列表、多選列表、子選項、搜索等，内容較多時可能需要上下滾動，真實情況視選項的實際數量而定。

2. 下拉菜單的構成

下拉菜單看起來跟表單中的選項框幾乎一緻，但在真實的表單頁面中，觸發表單項後可能是下拉菜單，也可能是彈窗或頁面跳轉。同理，下拉菜單也會經常用在除表單之外的其他界面模塊中，從表面上看跟表單一樣，而實際的元素及交互效果則有很大的區别，但本文主要針對表單中的下拉菜單（非導航）作出介紹，有以下十個部分構成：

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

3. 下拉菜單的幾種狀态

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

1）默認狀态

即初始化狀态，操作之前的樣式，用戶可從标簽内容中獲取該下拉菜單的主題内容，通過下拉箭頭預示該内容的可操作性。對于部分選項較少下拉項，系統會默認選擇一個與該用戶最匹配的、或在目标用戶群體中選擇率最高的一項作為默認選項，以此減少用戶的操作次數，降低任務流程的操作成本。

2）懸停狀态

當鼠标經過或停留在一個下拉菜單項時，容器會通過改變填充色、描邊色或其他不同于初始化的樣式提醒用戶該内容的可操作性。懸停狀态隻出現在電腦端，因觸屏設備直接與之産生交互，會直接越過該狀态。

3）聚焦狀态

聚焦狀态是指用戶正在與之發生交互，點擊後，展開選項列表的同時，容器通過投影、邊框加粗或主色調來提醒用戶當前正處在操作中，下拉箭頭會進行垂直翻轉（向上）。在很多其他模塊組件中，展開/收起也是源于箭頭上下方向的提示。

4）完成狀态

用戶完成選擇後，容器中填充被選中的選項并替換占位符，對于非必填的下拉菜單項，後面出現一鍵清除圖标“⨂”，其他元素與初始化狀态相同。

5）禁用狀态

對系統禁用或當前未滿足操作條件的下拉菜單項，為保持内容的可見性，對部分元素置灰以提醒用戶。

6）錯誤反饋

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

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

1. 由選項數量決定（移動端）

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

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

2. 由便捷性決定

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

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

3. 後期延展決定

如果當前選項較少（低于5項），由于内容是管理後台配置、且根據産品需求短時間内有陸續增加的規劃，但最終數量可控，這時，即便是隻有一兩條選項也可選擇使用下拉菜單。

三、下拉菜單類型

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

1. 導航類型

幾乎所有的網站都離不開導航類型菜單，分為水平導航和垂直導航兩種。水平導航一般出現在網站頂部，例如官網頂部的功能分類、電商網站的商品分類等；而垂直導航絕大多數出現在後台管理系統的左側，不管是哪種類型，主要目的是通過所提供的導航鍊接将用戶帶到新的位置。

2. 命令菜單類型

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

3. 表單類型

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

1）标準樣式

标準下拉菜單是最原始、操作最簡單的類型，沒有任何的彎彎繞繞，觸發彈出下拉選項後，選中任一内容即完成與當前表單項的交互。

2）關鍵詞匹配

這種類型常出現在選項較多的場景中，為了方便用戶更快完成選擇任務，在标準樣式的基礎上增加了輸入功能。輸入的過程中，系統根據輸入的關鍵詞在已有的選項中進行匹配、篩選，用戶可在篩選結果中快速找出自己需要的選項，無需輸入所有文字、也不用在内容超多的列表中來回尋找即可完成任務。

3）搜索框

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

4）多選/複選

即用戶在同一表單項中選擇多個選項，雖然這種設計方式操作起來比較複雜，但在内容較多、空間資源不是很充足的管理系統、B端設計中還是很實用的。例如用戶權限配置、帶有二級/三級聯動的機構或地址選擇，多選相比平鋪更節省空間，且這類用戶很多都是經過培訓、相對專業的群體。

四、常見問題及避坑指南

1. 延展不要超過兩級

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

2. 默認值的使用

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

1）選填項

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

2）均衡度适中

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

3）用戶屬性模糊

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

3. 避免滾動失誤

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

解決這個問題需要程序員對滾動交互時的光标位置作出界定，當下拉菜單僅處于聚焦（高亮/主體色/陰影）狀态時滾動選項列表，除此之外滾動頁面即可。這裡需要說明的是，光标離開下拉菜單就可取消聚焦狀态，不用非得等用戶完成選擇任務後再取消，目的是為讓下拉菜單與頁面的滾動互不幹擾且能随時切換。

4. 選項數量

1）選項太少

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

2）選項太多

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

5. 如果輸入比選擇更快

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

6. 減少操作

這裡有一個很經典的例子就是日期組件，對于年、月、日的選擇，分别使用3個下拉菜單看似也能接受，但真的很複雜，且每次前面内容的變化都對後面的數值起着決定性的作用。将三組内容進行合并且讓用戶自定義，就方便很多，能減少部分多餘的操作。

7. 精簡的選項描述

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

8. 選項的優先級

下拉菜單中的選項并非随意擺放，要想迎合用戶、使其有更好的使用體驗，就需要符合一定的規律。将最常用的選項靠前、相關聯的組合、時間按照先後、地區按首字母等優先級排序，讓用戶操作前就能一目了然。

9. 不可用選項置灰

當某個選項被系統禁用或用戶未達到選擇條件時，盡量不要将這些選項隐藏，避免用戶從一開始就誤認為是内容的殘缺或系統本身就不具備某些選項，為後續埋下弊端。

将已存在但不可選擇的内容置灰顯示，不僅能保持内容的完整性、提醒用戶後續可選，還能在某些特殊場景讓用戶主動激活可選條件，提升用戶對産品的使用深度。另外，如果空間資源足夠，在附近提示不可選的原因能确保用戶使用更順暢（鼠标懸停在不可選内容，臨時提示就是一種不錯的方式）。

五、總結

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

關于下拉菜單的使用方法及技巧遠不止于此，隻要我們在設計前考慮清楚何時用、怎麼用、如何更好的使用，再加上後續持續不斷的優化、查漏補缺，才能發揮下拉菜單的最大價值。

#專欄作家#

大漠飛鷹；公衆号：能量眼球，人人都是産品經理專欄作家。緻力于産品需求的驅動、産品體驗的挖掘，利用設計的手段為受衆用戶帶來更好的體驗，即好看、好用。

本文原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部