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

對于B端產品經理而言，了解B端的產品組件是工作的基礎，本篇文章將從七個方面詳細介紹B端產品的輸入類組件：選擇器，希望通過本篇文章能讓你對B端產品的選擇器有一定的了解。

想做好一個廚師，就必須要認識鹽、醬油、雞精、蠔油、蔥姜蒜這些東西，而且還要熟悉他們的作用。

同樣的道理，如果想做好一個B端產品經理，就必須要認識組成B端產品的各種組件。它們就像廚師的蔥姜蒜一樣，是成為一個優秀的B端產品最最基本的基本功。

想象一下，如果一個廚師，不認識蔥姜蒜，會是什么樣的局面？

今天我們就來了解一下B端產品使用頻率最高的一個輸入類組件：選擇器。

一、選擇器的作用

當選項過多時（一般超過5個），彈出一個下拉菜單給用戶做選擇操作，常用于表單填寫或屬性選擇，這就是選擇器的作用。

用“選擇”代替“輸入”，可以減少用戶的使用成本。畢竟，做選擇題比做問答題方便。

二、選擇器的構成

一個基本的選擇器，是有以下四部分組成：

• 文本標簽
• 選擇框
• 下拉面板
• 星號

如下圖：

三、選擇器的類型

1. 根據可選擇數量

根據可選擇數量，選擇器可以分為兩種：

• 單選選擇器
• 多選選擇器

1. 單選選擇器：僅支持選擇一個選項。

2. 多選選擇器：允許用戶在選項列表中選擇多個選項。

2. 根據擴展功能

根據擴展功能的不同，選擇器有以下幾種類型：

1. 帶清除按鈕：可以一次性清除已選項。

2. 菜單分組：待選項過多時，可以使用層級來顯示，方便用戶操作。多用于數據結構比較復雜的情況。

3. 超過一定數量顯示個數：已選擇數量超過一定個數時折疊顯示，同時顯示被折疊的選項數量。

4. 帶搜索框：當待選項數量較多時，在下拉面板中增加搜索功能，方便用戶選擇數據。

5. 可新增選項：允許用戶增加選項。

6. 限制可選數量：超過規定的數量，就不可以在繼續選擇，待選項置灰。

7. 可直接搜索待選項：支持用戶在選擇框中輸入關鍵詞搜索。

8. 可遠程搜索待選項：根據用戶在選擇框中輸入的關鍵詞來遠程請求數據。

9. 帶前綴圖標：選擇框上帶有圖標。

10. 無邊框模式：無邊框的選擇器，通常用在空間受限等需要輕量化選擇的場景使用。

四、選擇器的狀態

選擇器組件可分為三種狀態：

• 普通狀態
• 禁用狀態
• 加載中

如下圖：

五、選擇器的大小

提供大小、中（默認）、大三種不同尺寸的的選擇器，高度分別為：30px、36px、42px。

如下圖：

六、使用規則與注意事項

1. 選擇器組件的二用二不用

1）二用

1. 用戶在填寫表單時使用，選擇器提供封閉式選項，可以防止用戶輸入錯誤。同時可以提升輸入效率，使用“選擇”替代“輸入”。
2. 在進行屬性選擇時使用，用戶可以從一組數據中選擇一個值作為關鍵詞進行信息篩選。

2）二不用

1. 選項數量不超過5個時不能使用。不超過5個建議使用單選框或者復選框組件。
2. 選項數據過于簡單時不用。例如用戶的出生日期、月份、年份等。過于簡單的數據可以讓用戶使用輸入框組件直接輸入。

2. 注意事項

• 標簽文本需要非常直觀說明選擇器的作用。
• 下拉面板中的選項的排列要有規律，比如訂單狀態選擇器中，根據訂單的流轉順序排列。方便用戶的快速找到需要的選項。
• 當下拉面板中的選項數據過多時，配合使用滾動功能，防止下拉面板太長，影響頁面整體布局。
• 特殊場景，可以配合使用擴展功能，提示用戶使用效率。

七、相似組件

以下是幾個與選擇器功能相似的組件，通過橫向對比，更容易掌握各組件的作用與應用場景。

八、小結

每個組件有每個組件的作用，在合適的場景使用合適的組件，對B端產品的用戶體驗來說至關重要！

熟悉B端組件，就像廚師熟悉蔥姜蒜一樣，是你B端產品生涯不可或缺的一項基本技能。

just do it！

相關閱讀：

好玩的B端組件 丨 數據穿梭框

好玩的B端組件 丨 上傳組件

好玩的B端組件 丨 導航