關(guān)于下拉菜單和選擇器的區(qū)分問題，本來在今年5月份就記在我的語雀待解決問題庫中，中間因?yàn)轫?xiàng)目出差就擱置，延遲了兩個月現(xiàn)在來把這個坑填上。

因?yàn)椤跋吕藛巍焙汀斑x擇器”二者在形式上的相似度較高，在實(shí)際應(yīng)用中就經(jīng)常會被混淆。而我在查閱網(wǎng)上相關(guān)文章時，對其使用的區(qū)分也大都模棱兩可，甚至于有的作者在文章也搞錯了這兩者。因此，結(jié)合部分大廠案例以及一些基礎(chǔ)框架應(yīng)用知識，匯總成這篇。

不多廢話，先說結(jié)論：Dropdown 是“導(dǎo)航”，而Select 是“輸入”（下圖這個問題先放在這里，文章結(jié)尾希望你會有一個明確的答案）。

一、下拉菜單（Dropdown）

1. 定義

Ant Design中對于下拉菜單的定義是：“向下彈出的列表。”這種描述實(shí)際是有點(diǎn)不太恰當(dāng)，因?yàn)檫x擇器也有一個類似下拉列表的樣式。而在Arco Design中組件定義是：“將備選命令或菜單折疊到向下展開的浮層容器中。”這里有一個很重要信息，即下拉菜單是“一個命令集合”。

因此，當(dāng)頁面上的操作命令過多時，用此組件可以收納操作元素。點(diǎn)擊或移入觸點(diǎn)，會出現(xiàn)一個下拉菜單，可在菜單中進(jìn)行選擇，并執(zhí)行相應(yīng)的命令。

2. 組件構(gòu)成

下拉菜單的基本夠構(gòu)成元素又兩個，一個是為了表現(xiàn)當(dāng)前狀態(tài)的內(nèi)容的“菜單項(xiàng)”，另一個就是展開的浮層容器“下拉項(xiàng)”，有時下拉項(xiàng)中的選項(xiàng)過多時會搭配滾動條（Scroll）、搜索（Search）聯(lián)動使用。

3. 實(shí)際應(yīng)用

下拉菜單常用于過濾或排序頁面上的內(nèi)容，可以根據(jù)需要設(shè)置樣式，主要的使用場景是在導(dǎo)航、工具菜單以及部分操作集合里。在實(shí)際使用中，可以在下拉入口中放任意內(nèi)容。

1）導(dǎo)航

2）操作集合

二、選擇器（Select）

1. 定義

對于選擇器的的定義理解就簡單了多，“用于一組選項(xiàng)中選擇一個或多個數(shù)值，常用于表單填寫和數(shù)據(jù)篩選”

當(dāng)用戶需要從一組同類數(shù)據(jù)中選擇一個或多個時，可以使用下拉選擇器，點(diǎn)擊后選擇對應(yīng)項(xiàng)。

2. 組件構(gòu)成

選擇器常用于表單中，且具有輸入（Input）的功能屬性。基本有三部分組成：“文本標(biāo)簽”、“選擇框”、“下拉面板”。

部分必填項(xiàng)會使用“*”進(jìn)行標(biāo)記。當(dāng)下拉面板中選項(xiàng)過多會和“搜索框（Search）”聯(lián)動。

3. 實(shí)際應(yīng)用

根據(jù)使用的需求，選擇器一般有兩種類型：“常規(guī)”、“聯(lián)級”。

1）常規(guī)

常規(guī)類型中常見使用有三種：“基本型”、“多選型”和“無邊框型”。

當(dāng)實(shí)際業(yè)務(wù)需求對于，下拉面板中選項(xiàng)有特殊要求，還可以將選擇器進(jìn)行功能拓展，如：“菜單分組”、“搜索”、“可清除”。

2）聯(lián)級

當(dāng)選擇器的選項(xiàng)存在多級，使用平鋪展示，可以逐級選擇。聯(lián)級建議最多不超過3級，操作按鈕始終跟隨最后一個面板。多選時，選擇框中會即時出現(xiàn)用戶已選中項(xiàng)，以標(biāo)簽（Tag）的樣式出現(xiàn)。

三、何時不使用

1. 下拉菜單（Dropdown）

當(dāng)菜單項(xiàng)過長時，應(yīng)該進(jìn)行分組或分級展示，避免菜單過長造成操作不便（Adobe全家桶的下拉菜單就是一個典型范例，但由于其是工具型產(chǎn)品，大體量的選項(xiàng)造成這種現(xiàn)象）。

2. 選擇器（Select）

1）當(dāng)選擇項(xiàng)數(shù)量過少時（少于5個），建議優(yōu)先使用單選框（Radio）平鋪展示。

2）對于一些用戶熟悉的簡單數(shù)值，如出用戶生日期直接使輸入框（Input）會降低用戶操作成本。

三、總結(jié)

無論是下拉菜單還是選擇器，都是需要一個下拉浮層面板來容納更多信息，其交互原則是通過二次操作來節(jié)約頁面的空間。其本質(zhì)是增加用戶操作的，會在無形中增加使用負(fù)擔(dān)，因此在實(shí)際應(yīng)用中應(yīng)該靈活變通，避免出現(xiàn)上文“何時不使用”中情況。

了對于兩者容易混淆的主要原因還是，下拉菜單和選擇器的基本形態(tài)十分相似，因此要區(qū)分的關(guān)鍵還是在于使用場景上。下拉菜單用于“菜單導(dǎo)航”、和“命令集合”，是一種“導(dǎo)航（Navigation）”，選擇器用于“表單填寫”和“數(shù)據(jù)篩選”，是一種“輸入（Input）”，清楚這一點(diǎn)，就很好區(qū)分。

現(xiàn)在回到剛開始的那個問題，應(yīng)該很容易就判斷出哪一個是下拉菜單，哪一個是選擇器了。

參考文章：

選擇器 Select – Ant Design

• https://arco.design/docs/spec/select
• https://element.eleme.cn/#/zh-CN/component/dropdown
• https://tdesign.tencent.com/vue/components/select