中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

“下拉菜單”和“選擇器”兩者在形式上的相似度較高，在實(shí)際應(yīng)用中經(jīng)常會(huì)被混淆。本文作者結(jié)合部分大廠及一些基礎(chǔ)框架應(yīng)用知識(shí)，對(duì)“下拉菜單”和“選擇器”進(jìn)行了總結(jié)分析，一起來(lái)看一下吧。

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

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

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

一、下拉菜單（Dropdown）

1. 定義

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

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

2. 組件構(gòu)成

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

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

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

1）導(dǎo)航

2）操作集合

二、選擇器（Select）

1. 定義

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

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

2. 組件構(gòu)成

選擇器常用于表單中，且具有輸入（Input）的功能屬性?；居腥糠纸M成：“文本標(biāo)簽”、“選擇框”、“下拉面板”。

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

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

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

1）常規(guī)

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

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

2）聯(lián)級(jí)

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

三、何時(shí)不使用

1. 下拉菜單（Dropdown）

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

2. 選擇器（Select）

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

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

三、總結(jié)

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

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

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

參考文章：

選擇器 Select – Ant Design

https://arco.design/docs/spec/select

https://element.eleme.cn/#/zh-CN/component/dropdown

https://tdesign.tencent.com/vue/components/select