axure 手机端滑动选择器_移动端选择器正确使用指南

一.什么是选择器

选择器是一个输入字段， 用户必须在其中选择一个(或多个)选项，这与文本字段中用户可以自由使用的输入区不同。选择器具有各种不同的形状和形式。下拉菜单，复选框，切换按钮，滑块等都是不同类型的选择器，但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量：一个或多个。

二.选择器的类别

-单选选择器

-多选选择器

1.单选选择器

单选选择器按效果又可以分为：点击选择器、滑动选择器、多联动选择器、开关选择器、可搜索效果的选择器、地图选择器。

特点：同一时间只能选择一个选项，当你已经选择完一项后，准备选取另一项，那么后选的一项会立刻使先选的一项被取消选择。

1-1点击选择器

点击选择器可分为两种状态，状态一为立即触发，当你点击后会立即跳到下一步操作；状态二为再次确认触发，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件(如保存按钮)后，再执行操作。

-立即触发式：

特点：直接进入，并没有再次确认的按钮，可以让你快速到达想要的目的。

建议：虽然目的能快速达到，不过也很可能会造成误操作，所以在设定这类选择器时要多考虑手指的触碰区域以及每个选择元素的距离，同时正因为是直接跳转，所以应当加入一些操作提示。

举例：汽车之家在用户选择二手车时就会出现此选择器，当我在汽车之家想要选择二手车时，它会弹出立即触发式选择器控件，我们在控件上可以看到有7个圆形选项，分别为：汽车之家诚信联盟、准新车、奥迪、奔驰、宝马、三厢轿车、分期购车，当我点击“奥迪”选项时就会立即跳转选择后的页面，为了让用户知道自己选择后的状态，在跳转页面时还会弹出非模态弹窗的文字提示“共找到1943辆车”。

-再次确认触发式：

特点：这是最为常见的选择器类型，当所在选项选上，除了选择另一个选项之外，便没法取消选中状态。(选且只能选择一个选项)

建议：在设定此类选择器时我们应该从产品的角度去考虑是否给用户一个默认选项，甚至是否考虑给出一个重置按钮。

举例：我刚注册小红书时，在小红书填写信息页面中，它的默认选项是“男”，我点击“女”，则会自动取消掉“男”，它们两者并不能同时存在，并且只有我点击下一步按钮时才会正式确认我选择完成。

1-2滑动选择器

特点：滑动选择器是将需要选中的内容滑动至中部，然后点击确认按钮确认选中后返回选中内容。大多数运用在选择时间或地址上。

建议：滑动选择器的展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用它。为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在5列以内。

举例：在小红书填写年龄信息时，我们只需用手指在区域内滑动即可选择想要的选项。

1-3多联动选择器

特点：多联动选择器是由两个或两个以上的中继器制作而成，第一个中继器选择后，一般会对第二个中继器进行筛选，不过因为显示的区域有限，所以当你要切换时，还只能挨个切换，效率低下。

建议：可以通过数据以及功能来减少选择时间，例如在选择地区时，根据当前GPS定位地理位置，定位相关省级信息及名称，减少滑动操作。

举例：如下，当我选择了内蒙古自治区，那么2级内容就应该筛选掉内蒙古以外的城市，比较适用于省份-城市或者品牌-产品这种类似的选择，当然下面第一张多联动选择器也结合了滑动选择器。

多联动选择器展示的方式非常多，不仅可以用滑动形式展示，还可以用点击、平铺列表等形式展示。

在左图选择城市时，我们必须要先选择省份，再选择