单选、复选、开关是交互设计中经常会使用到的选择控件，越是常用的控件，其中的细节就越值得探究。本文笔者将结合自己实际工作案例与思考产物，与各位分享这类选择控件的使用逻辑与细节差异。
PART 01
___
你是否遇到过这种情况？
当我们需要用户在两个选项之间选择一个选项时，在这种情况下，可以使用三种控件：单个复选框、两个单选框或切换开关，那么如何做出决策呢？
要搞清楚这个问题，我们首先来回顾一下这些控件的由来与用法。
PART 02
___
常用选择控件的由来与用法
不论是单选还是开关，他们都能在现实世界中找到有迹可循的事例。这些控件将现实生活中大家所熟知的事物映射到界面设计中，使得用户可以更加简单高效理解他们本身所代表的交互含义。
单选按钮（radio button）
-
由来
单选按钮的命名（Radio）来源于旧收音机上用于频率和预设电台之间切换的的实际物理按钮。当一个按钮被按下时，所有其他的按钮都会弹出，使被按下的按钮成为唯一处于“按下”状态的按钮。单选按钮将这一物理特征进行了隐喻设计。
UI概念是由Xerox PARC的研究首次引入的，Xerox PARC是一家研发公司，几乎涉及到我们现在每天使用的计算机技术，包括：以太网，图形用户界面（GUI），面向对象的编程，计算机鼠标，激光打印等。Xerox Star 8010工作站是第一款在图形用户界面中带有单选按钮的设备。
2. 用法
-
仅允许用户在一组选项中选择其中一项；
-
后选的一项会立即使先前选择的选项自动取消；
-
需要为用户提供默认选项，确保它对于用户来讲最安全 or 最可能的选项（其中最多的就是“无”）；
来源于：材料设计指南/微软控件指南
复选框（checkbox）
-
由来
复选框的物理原型来自于纸张上的多选题，例如餐厅的菜单，选多选少，互不影响。并且我们倾向于用✅这个符号来勾选，而这个符号从古代商号记流水账的“红挑儿”到现在教师批阅作业的“对勾”，无一不表示着“正确、认可”。从语义上来讲，它代表的正是一种选择。并且现实中的多选题，往往是非时效性的，勾选之后并不是立即生效的。
-
用法
-
允许用户从一组中选项选择一个或多个选项
-
选项之间相互独立且相关；
-
父级复选框允许轻松选择或取消选择所有项目；
-
复选框表示状态，用户可以延迟提交操作的交互；
来源于：材料设计指南/微软控件指南
开关 (switch)
1. 由来
开关按钮其实是现实中开关在界面设计中的映射。现实世界中，我们去操作开关时（例如打开灯、打开燃气灶），会对其他事物立即产生影响。
而在界面设计中，开关也同样具备即时触发的特性（例如：打开Wi-Fi、开启暗黑模式）由于开关具备很明显的、在大众心中扎根的隐喻心智，并且相较于复选而言，操作前后的状态更明显，感知更强烈。
2. 用法
-
用于在两种相反且互斥的选项中来回切换（用的最多的就是“开启/关闭”）；
-
当用户拨动一个开关时，其对应的动作立即生效；
-
因为开关显示的是实际状态，所以有时它的状态变化会有延迟。在这种情况下，使用”处理中”的状态动画；
来源于：微软控件指南
标签(chips)
1. 由来
标签通常是输入框中多个元素的组合，它的物理原型来自于悬挂在售卖货品上的纸质标签，例如衣物上的吊牌，上面精简展示了衣物的规格信息。标签有选中态和交互态等丰富的交互，因其具备单选和复选的属性，通常可以作为单选按钮与复选框的替代选择控件。
2. 用法
-
选择标签（choice chips）: 单选按钮的一个替代方案。包含至少两个选项，选择标签代表用户可以做出的单一选择。
-
过滤标签（filter chips ）: 是复选框的一个替代方案。允许用户选择多个选项，主要用于移动端上进行筛选。
来源于：材料设计指南
PART 03
___
选择控件的差异
不同的时效性
为了方便理解，以下是笔者总结的几个比较典型的应用案例：
PART 04
___
如何正确使用选择控件？
回到文章开头提到的那个问题，可从以下三个核心切入点去着手解决：
1. What? 选择的主体是什么？
2. Why? 选择的目的是什么，有无业务上对于选项上的偏向？
3. How? 完成选择之后，接下来的实际业务逻辑是什么？
比如下图中：
选择的主体是「安心退改服务」，作为一项付费服务，其目的一方面是为用户提供更安心的购票服务，另一方面则是创造收益，即：业务更加偏向于用户选择购买。
如果这里使用单选，就会同时提供「是与否」的两个选择，而使用复选框，则只提供一个选项，让用户尽量忽视否定的选择，从而达到引导购买的作用。
之所以没有使用开关，是因为在此场景下，用户操作之后并非立即获得服务，还需要点击支付完成购买。所以这里的选择更多表示一种选择的「状态」，而非立即获得服务的「操作」
再比如下图中：
选择的主体是「VIP抢票服务」，其目的同样是提供服务以及创造收益，但与上面案例中「安心退改服务」不同的是：此处除了希望能被用户选择，还希望能让用户立刻感知到服务价值，因而在用户勾选之后，当前页面会实时更新抢票成功率、通过头部氛围层的切换，以金色来传达VIP抢票的尊贵氛围感。
由于开关隐喻性质极强，用户在操作之前比复选更由预期（理解成本更低），且用户勾选之后会触发明显被感知到的一系列变化，因而相比起复选框，开关是更合适的选择。
最后一个例子如下：
选择的主题是「行程时间满意度」，其目的是收集用户反馈，以便优化智能方案推荐策略。这是一个中性问题，正负向答案都很重要，都需要展示出来让用户选择。如果这里使用单选，通常需要额外的组件来保存或执行操作，导致操作路径变长；并且需要设置默认选项，增加了样式的复杂度。因而可立即触发的单选标签相较于前者是更合适的方式。
PART 05
___
结语
当我们陷入选择控件的纠结中，不妨从业务目标出发，找到决策的切入点，从而得出设计的最优解。希望本文对各位有所帮助。
本篇文章来源于微信公众号: TripDesign
