
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中详细说明即可。