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

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

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

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

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

一、選擇器的作用

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

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

二、選擇器的構(gòu)成

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

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

如下圖：

三、選擇器的類型

1. 根據(jù)可選擇數(shù)量

根據(jù)可選擇數(shù)量，選擇器可以分為兩種：

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

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

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

2. 根據(jù)擴展功能

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

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

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

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

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

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

6. 限制可選數(shù)量：超過規(guī)定的數(shù)量，就不可以在繼續(xù)選擇，待選項置灰。

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

8. 可遠程搜索待選項：根據(jù)用戶在選擇框中輸入的關(guān)鍵詞來遠程請求數(shù)據(jù)。

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

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

四、選擇器的狀態(tài)

選擇器組件可分為三種狀態(tài)：

• 普通狀態(tài)
• 禁用狀態(tài)
• 加載中

如下圖：

五、選擇器的大小

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

如下圖：

六、使用規(guī)則與注意事項

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

1）二用

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

2）二不用

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

2. 注意事項

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

七、相似組件

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

八、小結(jié)

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

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

just do it！

相關(guān)閱讀：

好玩的B端組件 丨 數(shù)據(jù)穿梭框

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

好玩的B端組件 丨 導航