做過web端界面的同學多數都會遇到下拉菜單這類組件，有些人也會將其稱為選擇器，那這個組件究竟應該叫什么呢？很多大廠的開源組件庫都對其有自己的定義，我們做設計時應該怎么命名以及跟開發的同學溝通呢？
首先，在Ant Design 中，它將下拉菜單（Dropdown）與?選擇器（Select）完全拆分開，如果單純從視覺樣式上來看，兩者并沒有較大差異，因此在日常的方案溝通中容易產生混淆。
而我總結了一下日常描述此組件時出現的不同名稱，比如：選擇器、下拉選擇 、下拉菜單、下拉框、下拉選擇器、選擇框等等…
那到底應該叫什么？！！！！
首先，為了研究名稱的準確性，我查閱了“字典” World Wide Web Consortium （W3C）的cheatsheet文檔，其中只存在有選擇器 （Select） 這一名詞，即選擇器。而下拉菜單（Dropdown）是并沒有存在的，結合對文檔的細致研究，因此總結出使用?“選擇器”?進行表達是一個較為規范的說法。
而我們回過頭來看，為什么 Ant Deisgn 會將同樣的選擇拆分為?下拉菜單與選擇器呢？其實在實際功能上兩者會有較大的不同點。
下拉菜單
主要是針對?操作?進行集合，主要的使用場景是在導航、工具菜單以及部分操作集合里。
導航：比如在ＧrowingIO的官網中，通過下拉菜單，他就可以將產品下面的子欄目導航統一放在下拉菜單中。
工具菜單：比如在 MacOS的全局菜單中，都是將所有的操作放置在頂部的工具欄，通過使用下拉菜單進行呈現，比如 Figma 軟件。
操作集合：比如我們在表格的操作區域經常會使用下拉菜單將很多操作放到一起。
選擇器
主要是針對?選項?進行收折，他是必須包含兩個部分，錄入框以及下拉選項。使用場景是在表單的中可選項過多之后，會使用選擇器將所有選項進行整合。比如我們選擇客戶的歸屬人，因為可選擇的成員較多，因此通過選擇器能夠使所有選項進行集中展示。
其次，兩者的混淆，主要是對下拉選項的問題，其實一般對于下拉選項時，大家更通用的表述是下拉菜單，也會因此造成了兩者之間的混淆。
原文鏈接：CE青年（公眾號）
轉載請注明：學UI網 » 下拉菜單？選擇器？傻傻分不清楚！
