编辑指南:与用户可以自由使用的输入区域不同，选择器规定用户只能选择一个或多个选项。选择器有不同的形状和形式，主要分为单项选择选择器和多项选择选择器。本文将分析选择器的类别及其十个应用点，希望对你有所帮助。

首先，什么是选择器

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

第二，选择器的范畴

单选选择器多选选择器

2.1收音机选择器

收音机选择器可分为点击选择器、滑动选择器、多连杆选择器、开关选择器、可搜索效果的选择器和地图选择器。

特点:一次只能选择一个选项。当你选择了一个，你就准备选择另一个，然后后面的会立刻取消第一个。

2.1.1点击选择器

点击选择器可以分为两种状态，第一种状态是立即触发，当你点击时，你会立即跳转到下一个操作；第二种状态是再次确认触发。当选择一个项目时，不会立即触发该操作，但在执行该操作之前，需要单击另一个触发组件(如保存按钮)。

立即触发:

特点:直接访问，没有按钮重新确认，让你快速达到预期目的。

建议:虽然可以很快达到目的，但也可能造成误操作。因此，在设置这种选择器时，应该更多地考虑手指的触摸面积和每个选定元素的距离。同时因为是直接跳转，所以要补充一些操作技巧。

例如，当用户在汽车之家选择二手车时，该选择器将出现。当我想在汽车之家选择二手车时，它会弹出一个即时触发选择器控制。我们可以看到控件上有七个循环选项，分别是:车家信用社，准新车，奥迪，奔驰，宝马，轿车，分期付款车。当我点击“奥迪”选项时，我会立即跳转到所选页面。为了让用户知道我选择后的状态，

再次确认触发器:

特点:这是最常见的选择器类型。当选择该选项时，除了另一个选项之外，不能取消选择它。(只能选择一个选项)

建议:在设置这类选择器时，要考虑从产品的角度，是给用户一个默认选项，还是甚至给一个重置按钮。

比如我第一次注册小红书的时候，在小红书的信息页面，它的默认选项是“男”。如果我点击“女性”，“男性”将被自动取消。它们不能同时存在，只有当我点击下一步按钮时，我才会正式确认我的选择。

2.1.2滑动选择器

特点:滑动选择器将要选择的内容滑动到中间，然后点击确认按钮确认选择，返回到所选内容。大多数用于选择时间或地址。

建议:滑动选择器显示区域有限，部分选项会被隐藏。最好是在用户对所有选项都很熟悉，有期待的情况下使用。为了保证手机屏幕的触摸精度，避免意外触摸，建议将滚轮选择器控制在5列以内。

比如小红书填写年龄信息时，我们只需要在区域内滑动手指，选择想要的选项。

2.1.3多个联动选择器

特点:多连杆选择器由两个或多个中继器组成。选择第一个中继器后，通常会屏蔽第二个中继器。但是由于显示区域有限，想要切换的时候只能一个一个切换，效率不高。

建议:可以使用数据和函数来减少选择时间。比如选择地区时，根据当前GPS定位地理位置，定位相关的省信息和地名，减少滑动操作。

比如如下，我选择内蒙古自治区的时候，二级内容应该过滤掉内蒙古以外的城市，更适合省-市或者品牌-产品等类似的选择。当然，下面第一个多连杆选择器也结合了滑动选择器。

多链接选择器有多种显示方式，不仅可以通过滑动显示，还可以通过单击和平铺列表显示。

选择左图中的城市时，一定要先选省，再选市，最后选县；

右边没有顺序，但是你先选颜色的时候，如果没有同样尺寸的衣服，就不会选断货尺寸，先选尺寸也是一样的道理。

开关选择器

功能:开关选择器只有两个选项，用于在开和关状态之间切换。开关属于触发器组件。当开关被切换时，它命令的操作将立即生效。常用的是授权。开关的默认状态并不都是闭合的，应该从产品本身的设置来决定。

建议:如果某个开关的功能被用户频繁使用，可以默认打开开关，但是需要打开一些特殊的开关按钮时，必须提前通知用户。

比如我打开UC浏览器的设置，它的辅助功能是用拨动选择器，拨动开关只需要点一下。

2.1.5搜索选择器

特点:可搜索选择器一般在选项较多时使用，尤其是电商购物的APP搜索选择器。搜索选择器会根据用户输入的内容对中继器进行模糊搜索，让用户快速找到并选择内容。

建议:在搜索区输入字符时，可以给用户更多的文字提示和指导信息。

比如小红书搜索时，会出现数字信息提示，可以引导用户找到想要的搜索结果:笔记或者商品页面。

2.1.6地图选择器

特点:作为最特殊的选择器，功能复杂，操作方式多样。地图选择器的操作可以点击、拖动、放大和缩小等。它主要用于生活应用程序。

建议:选择器可以加入更多有趣、互动、可感知的设计，比如加入节日元素、车辆行驶路线、热门区域，甚至是选择后手机的震动。

示例:

出租车应用必备的地图选择器，滴滴出行的用户可以实时看到车辆信息，通过点击、拖拽、放大等方式选择上车地点。选择后，还会有一条短信提示用户确认操作是否正确。

Shell APP用一个地图选择器让用户选择二手房，同时采用联动效果。第一步是查面积，可以清楚的看到面积内卖出的房子数量。点击所选区域后，我们可以看到每个路段的房屋数量，点击路段后，我们可以看到房屋数量和每个物业的平均价格，直到弹出详细信息框。这有助于用户在选择二手房时从大数据分析二手房的情况，具有更好的对比性和选择性。

2.2多选选择器

当收音机选择器不能满足用户需求时，我们可以使用多选选择器。常用的多选选择器都采用点击方式，当然也有滑动式多选选择器。

2.2.1点击多选选择器

功能:当用户想要选择多个类别时，我们可以通过点击多选选择器为用户显示选项。如果通过点击屏幕选择或取消选择该选项，它不会立即触发操作。在执行操作之前，需要单击其他触发器组件(如保存按钮)。

建议:从用户的角度出发，尽量不要强制用户选择数量或者默认全部数量；选择多个选项时，触摸面积不宜过小，以免误操作。

比如小红书在选择感兴趣的内容时使用了点击选择题选择器，但在选择兴趣时却强制用户关注至少四个兴趣。对于兴趣单一或者兴趣少的用户来说，这无疑会造成用户体验差，被迫再次选择次要兴趣。

2.2.2滑动多选选择器

特别说明:从用户的角度来说，它可以选择多个区域的内容，所以我把它分为多个选择器。

特点:当系统给出的选项不在自己的选择区间内时，可以自定义好选择区间，将定义权限交给用户。同样，它需要在执行操作之前单击另一个触发器类组件(如保存按钮)。

建议:用户滑动操作时应有明确的操作提示，让用户时刻感知当前状态；滑动面积应尽可能不超过100个刻度。如果刻度距离太小，用户在滑动时很难准确选择范围。

比如在汽车家居APP中，当我想选择汽车的价格区间时，就会出现这个选择器。我们可以滑动手指来选择它的价格范围，这比上面的单选价格更广泛。用户可以自行选择上方的单选项选择器，也可以滑动多选项选择器，让用户有更多的选择。

第三，选择器的十大应用点

3.1易于理解

标题很容易理解:

在选择器中，标题一定要简单明了，让用户快速知道自己为什么要做出选择(比如你关注一个烹饪APP，它会让你查看自己喜欢的菜谱，标题可以用“选择菜谱”这个词，简单明了)。

文本标签很容易理解:

一般用短语代替句子，不用标点符号结尾(比如选择想要的菜谱时，菜谱后面的文字不用加标点符号)。

选择状态很容易理解:

用户可以清楚地感知到什么是选中、未选中和禁用(例如，选中状态为高亮显示，未选中状态为正常显示，禁用状态为灰度显示)。

反馈提示很容易理解:

当你在选择中遇到选项限制或者需要确认操作时，反馈提示一定要一目了然(比如选择某件衣服时，S码无法选择，会被显示的灰度文本代替，甚至可以用中间的横线穿过文本，明确告诉用户不能选择)。

3.2基本分类

从逻辑顺序:

逻辑排序使用户能够快速准确地找到他们需要的选项，尤其是在选择地址/时间/号码等常规选项时，这些选项可以根据字母/距离/大小进行排序。比如在下面选择地址时，按照A-Z字母排序，可以大大节省用户的选择时间。

从产品利益角度订购:

当然，为了产品本身的利益，也可以自己优化排序方式。选项的顺序可以说服用户选择。用户可以选择第一个选项，因为第一个选项在列表中的位置；它可以帮助用户，也可以使用户向产品的期望方向倾斜。比如你选择一个菜谱，产品会把用户评价高的菜谱放在最前面，以便让用户选择更好的菜谱；当然，商家也会这么做。比如你想买某个产品，商家会把热门、优质的产品放在选项的最上面，让你先选择。

从用户体验订购:

站在用户的角度，什么对用户体验好，那就先放一放。比如在车辆类别排序上，车家把用户最多的车排在第一位，把用户最少的轻客排在最后一位；同样，在汽车品牌的选择上，它将热门品牌单独列出，放在最前面，让用户快速选择。

3.3一致性

一致的视觉布局:

每个元素之间的对齐、元素之间的间距以及按钮不同状态的视觉表示。一般来说，移动终端倾向于左对齐，有利于快速阅读选择的内容，可以提高用户的浏览效率，减少错误。

统一图片/插图样式:

在图文结合的选择器中，必须保证图片(插图)的质量和风格的统一。

3.4默认选项的合理使用

默认选项是选择器的开始状态。不同的选择器有不同的默认模式。

默认情况下未选中:

这是最常见的状态，特别是对于选择年龄、生日等个人隐私信息，系统没有办法进行默认选择。

默认情况下，会选择其中一个选项:

如果要默认其中一个，必须考虑两个因素。因素一:你想在潜意识里向用户传递信息。在无线电选择器中默认选择一个项目后，您可以下意识地向用户传达信息。第二个因素是产品的倾向性。比如这款产品90%的性别是女性，建议默认选项是女性。

默认情况下全部选中:

其实默认全选，从用户体验来说真的没那么友好。比如选择器界面，微博，你第一次进入这个界面的时候就已经勾选了，不注意的时候习惯性的点击下面的按钮，就会立即生效，没有返回的余地。(吐槽:有些应用连一键取消功能都没有，一键取消& # 8230；)这也是为了产品牺牲了一些用户体验！

3.5给用户更多选择

收音机选择器的更多选择:

如果用户不想做选择，应该提供一个中立的选项给用户一个明确的方向。中性选择比强制选择好。例如，在选择行业领域时，如果没有自己所在的领域或对自己的领域不确定，可以选择“不限”或“其他”。

多选选择器的更多选择:

在多选选择器中，如果不能控制用户的准确选项范围，可以考虑滑动多选选择器，给用户更多的选择范围。车家和车帝在选择车辆价格时采用相同的方式。

3.6控制状态

选择控件的状态/外观必须在操作过程中改变，用户应该清楚地知道它是否可以被选择。控件状态一般分为三种:未选中、选中和禁用。

未选中:

选择器的启动状态向用户指示可以操作选择控制。

选定:

用户操作选择状态，选择控件处于选择状态。

禁用:

一般会灰显，用户无法与选项交互。

3.7操作技巧

它意味着用户在操作过程中可以得到相应的反馈，用户可以根据反馈判断当前状态和操作后状态。在选择器中，操作提示一般使用辅助文案提示和非模态弹出提示。

辅助复印提示(选择之前和期间):

辅助文案是指将一些文案信息放在选择控件的主体之外，作为解释。例如，以下是区域选择。当我选择不同级别的区域时，上面会出现辅助提示文案，让你可以清楚的知道你在上一级选择了什么。

同样，当我选择价格范围时，幻灯片选择器的左上角会有一个文本提示:

模态弹出提示(选择后):

非模态弹出窗口通常在用户完成操作后出现在跳转页面。为了让用户了解页面上所选选项的状态，无模式弹出窗口通知用户共有7辆车辆符合标准，如下所示。

当然，除了模态弹出窗口，还有模态弹出窗口，但是用户体验很差，所以目前很少使用，所以没有列出来。

3.8合理使用操作区域

展开点击区域:

选择按钮类操作时，很容易点击失败或误操作。我们可以通过扩展点击区域的交互区域来提高可用性。例如，在下图中，虽然按钮在左侧，但水平区域可以列为可点击区域。

当然，我们也可以从设计的角度扩大视觉范围，从而增加点击范围，既提高了视觉水平，又增强了交互体验。(图文结合)

注意交互间距:

元素之间一定要有合理的交互距离，否则容易被误选。

有效面积的合理利用:

在选项较多的选择器中，我们可以很好的利用主控件以外的区域。比如在选择城市/品牌时，我们可以制作一个A-Z索引式字母交互区，帮助用户快速找到想要的选项。

3.9有趣

让用户选择很无聊。如果变得有趣，会大大提升用户体验。

从文本级别:

比如用户在填写性别信息时，你给用户的文字信息不是“男”/“女”，而是“帅哥”“酷妹”，会让用户觉得这是一件有趣的事情，而不是被动的选择。(注意:这个名称必须符合产品的特点)

从视觉层面:

添加可玩性选项，比如车家的头像切换，可以选择自己喜欢的头像。(头像不是强制的，不操作是默认选项)

从交互层面来看:

让用户享受选择。比如魂的星球主页就很不错。在未选中状态下，他的角色会旋转360度左右。当然也可以快速拖放，或者放大缩小，充满可玩性。另外，内部设置最佳匹配/新人的亮点，帮助用户选择。

3.10选择器的合理使用

不同的产品使用选择器的方式不同，因为每个选择器都有其优缺点，如何选择真的取决于产品本身。

然后我就拿市面上最常见的五种地址选择器来分析利弊:

多个链接选择器(平铺):

卡车帮助采用多连杆平铺选择器，其特点是能够一目了然地看到所有地址。但是查找很多地址是需要时间的，但是当你频繁使用这个功能的时候，就会形成内存，再查找的时候就会形成内存点击，效率高。除了操作，还有路径提示，不仅可以帮你记住层次选项，还可以实时返回路径重新选择。

手势操作:点对点

多连杆选择器(列表跳转类型):

闲鱼使用多链表跳转选择器。这种选择器最大的缺陷是用户在选择第三级后可能会忘记上一级的内容，所以不得不切换到上一级。闲鱼之所以用它，是因为它只有两级联动，没有遗忘现象。但是这种列表类型的选择效率没有平铺的高，而且人眼是用来扫描水平内容的，所以水平内容的获取往往比垂直的多。个人不建议在地址选择器中使用多链表跳转类型。

手势操作:滑动点-点

多连杆选择器(列表类型):

换乘中使用了多联动列表选择器，优点是可以根据正确的字母找到城市，数据太大可以快速找到。但是如果层次选项出现错误，也需要切换到下一级，操作中没有辅助信息提示。

手势操作:滑动/点-滑动/点

多连杆选择器(滑动式):

安居客使用多联动滑动选择器，不会遮挡后面的主要内容信息，选择地址后可以立即看到地址过滤结果。优点是可以快速选择多级地址，层次清晰，扩展性强，可以制作多个地址。缺点是不适合3级以上的地址选择。

手势操作:点-滑/点-点

地图选择器:

美团外卖用的是地图选择器，一般用在需要精准定位的生活应用中。其优点是能快速准确定位，并自动提取定位信息。它的缺点很明显，不能包含层次，对范围有约束。