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

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

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

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

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

一、選擇器的作用

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

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

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

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

• 文本標(biāo)簽
• 選擇框
• 下拉面板
• 星號

如下圖：

三、選擇器的類型

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

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

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

1. 單選選擇器：僅支持選擇一個(gè)選項(xiàng)。

2. 多選選擇器：允許用戶在選項(xiàng)列表中選擇多個(gè)選項(xiàng)。

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

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

1. 帶清除按鈕：可以一次性清除已選項(xiàng)。

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

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

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

5. 可新增選項(xiàng)：允許用戶增加選項(xiàng)。

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

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

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

9. 帶前綴圖標(biāo)：選擇框上帶有圖標(biāo)。

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

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

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

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

如下圖：

五、選擇器的大小

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

如下圖：

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

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

1）二用

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

2）二不用

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

2. 注意事項(xiàng)

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

七、相似組件

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

八、小結(jié)

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

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

just do it！

相關(guān)閱讀：

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

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

好玩的B端組件 丨 導(dǎo)航