1.4 選擇器與計步器

1.4.1 選擇器

選擇器控件的功能類似于單選按鈕和復選框控件的功能，主要適用于用戶與產品進行交互時，選擇目標信息項并輸入的場景。常見的選擇器有單項分類選擇器、多項分類選擇器、搜索選擇器和時間選擇器等。

1．單項分類選擇器

單項分類選擇器是產品設計過程中頻次出現最高的一類選擇器，通常以下拉列表框的形式出現，如圖1-17所示。其特點是選項以下拉列表的形式展開，選擇其中一項作為信息輸入指令。

圖1-17 單項分類選擇器控件

單項選擇器經常與列表頁一起使用，用于篩選出列表頁的數據內容。例如，有一個顯示某年級學生成績的列表頁，這個年級有3個班級，默認顯示全部班級學生的成績，如果我們只查看一班的成績，在下拉列表框中選擇一班，然后進行篩選，就可以得到一班學生成績的列表了。另外，在表單頁中，我們也可以經常看到下拉列表框，例如，我們維護一名學生的基本信息，該學生的性別信息就可以通過下拉列表框來選擇。

在實際的產品設計過程中，還有單項多級分類選擇器，例如，我們在電商網站購物時經常會見到的商品選擇器就是單項多級分類選擇器的一種，如圖1-18所示。

圖1-18 單項多級分類選擇器控件示例

對于單項多級分類選擇器，要一級一級地往下篩選，最終選擇目標信息。例如，在常見的地區選擇器中，首先要選擇省，然后選擇市，再選擇區/縣。

2．多項分類選擇器

單項多級分類選擇器和多項分類選擇器的主要區別在于，對于后者可以選擇多項。例如，在電商網站進行商品檢索時，我們可以同時選擇多個品類的商品并進行搜索。多項分類選擇器控件如圖1-19所示，在選擇單肩包的同時，我們還可以選擇手提包等。

圖1-19 多項分類選擇器控件

3．搜索分類選擇器

搜索分類選擇器在單項/多項分類選擇器的基礎上，增加了搜索功能。在某些場景中，選擇項的信息量過大，導致手動篩選效率非常低下。搜索功能可以有效地提高選擇效率。如圖1-20所示，我們可以通過中文或者拼音搜索目標城市選項。

圖1-20 搜索分類選擇器控件

4．時間選擇器

時間選擇器是一種特殊的選擇器。其特殊之處在于，它所選擇的信息類型只有時間，雖然信息類型單一，但它的使用頻率不亞于單項分類選擇器。圖1-21展示了一個經典的移動端日期選擇器控件的樣式。

圖1-21 時間選擇器控件的樣式

用戶可以滑動選擇年、月、日、時、分、秒等信息，至于是精確到日還是秒，根據實際的場景需要，在產品原型或者PRD中詳細說明即可。