“下拉選單”和“選擇器”兩者在形式上的相似度較高，在實際應用中經常會被混淆。本文作者結合部分大廠及一些基礎框架應用知識，對“下拉選單”和“選擇器”進行了總結分析，一起來看一下吧。
關於下拉選單和選擇器的區分問題，本來在今年5月份就記在我的語雀待解決問題庫中，中間因為專案出差就擱置，延遲了兩個月現在來把這個坑填上。
因為“下拉選單”和“選擇器”二者在形式上的相似度較高，在實際應用中就經常會被混淆。而我在查閱網上相關文章時，對其使用的區分也大都模稜兩可，甚至於有的作者在文章也搞錯了這兩者。因此，結合部分大廠案例以及一些基礎框架應用知識，彙總成這篇。
不多廢話，先說結論
：
Dropdown 是“
導航
”，而Select 是“
輸入
”（下圖這個問題先放在這裡，文章結尾希望你會有一個明確的答案）。
一、下拉選單（Dropdown）
1. 定義
Ant Design中對於下拉選單的定義是：“
向下彈出的列表。
”這種描述實際是有點不太恰當，因為選擇器也有一個類似下拉列表的樣式。而在Arco Design中元件定義是：“
將備選命令或選單摺疊到向下展開的浮層容器中。
”這裡有一個很重要資訊，即下拉選單是“
一個命令集合
”。
因此，當頁面上的操作命令過多時，用此元件可以收納操作元素。點選或移入觸點，會出現一個下拉選單，可在選單中進行選擇，並執行相應的命令。
2. 元件構成
下拉選單的基本夠構成元素又兩個，一個是為了表現當前狀態的內容的“
選單項
”，另一個就是展開的浮層容器“
下拉項
”，有時下拉項中的選項過多時會搭配捲軸（Scroll）、搜尋（Search）聯動使用。
3. 實際應用
下拉選單常用於過濾或排序頁面上的內容，可以根據需要設定樣式，主要的使用場景是在導航、工具選單以及部分操作集合裡。在實際使用中，可以在下拉入口中放任意內容。
1）導航
2）操作集合
二、選擇器（Select）
1. 定義
對於選擇器的的定義理解就簡單了多，“
用於一組選項中選擇一個或多個數值，常用於表單填寫和資料篩選
”
當用戶需要從一組同類資料中選擇一個或多個時，可以使用下拉選擇器，點選後選擇對應項。
2. 元件構成
選擇器常用於表單中，且具有
輸入（Input）的功能屬性。基本有三部分組成：“文字標籤”、“選擇框”、“下拉麵板”。
部分必填項會使用
“*”
進行標記。當下拉麵板中選項過多會和“
搜尋框（Search）
”聯動。
3. 實際應用
根據使用的需求，選擇器一般有兩種型別：
“常規”、“聯級”。
1）常規
常規型別中常見使用有三種：“基本型”、“多選型”和“無邊框型”。
當實際業務需求對於，下拉麵板中選項有特殊要求，還可以將選擇器進行功能拓展，如：“選單分組”、“搜尋”、“可清除”。
2）聯級
當選擇器的選項存在多級，使用平鋪展示，可以逐級選擇。聯級建議最多不超過3級，操作按鈕始終跟隨最後一個面板。多選時，選擇框中會即時出現使用者已選中項，以標籤（Tag）的樣式出現。
三、何時不使用
1. 下拉選單（Dropdown）
當選單項過長時，應該進行分組或分級展示，避免選單過長造成操作不便（Adobe全家桶的下拉選單就是一個典型範例，但由於其是工具型產品，大體量的選項造成這種現象）。
2. 選擇器（Select）
1）當選擇項數量過少時（少於5個），建議優先使用單選框（Radio）平鋪展示。
2）對於一些使用者熟悉的簡單數值，如出使用者生日期直接使輸入框（Input）會降低使用者操作成本。
三、總結
無論是下拉選單還是選擇器，都是需要一個下拉浮層面板來容納更多資訊，其互動原則是透過二次操作來節約頁面的空間。其本質是增加使用者操作的，會在無形中增加使用負擔，因此在實際應用中應該靈活變通，避免出現上文“何時不使用”中情況。
了對於兩者容易混淆的主要原因還是，下拉選單和選擇器的基本形態十分相似，因此要區分的關鍵還是在於使用場景上。下拉選單用於“
選單導航
”、和“
命令集合
”，是一種“
導航（Navigation）
”，選擇器用於“
表單填寫
”和“
資料篩選
”，是一種“
輸入（Input）
”，清楚這一點，就很好區分。
現在回到剛開始的那個問題，應該很容易就判斷出哪一個是下拉選單，哪一個是選擇器了。
參考文章：
選擇器 Select – Ant Design
https：//arco。design/docs/spec/select
https：//element。eleme。cn/#/zh-CN/component/dropdown
https：//tdesign。tencent。com/vue/components/select
本文由 @YMOOOM 原創釋出於人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基於 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。