三大章节深度分析！帮你完整掌握「选择控件」设计

写在前面

我们 UI 设计师在界面设计的时候经常会使用到单选按钮、复选框、开关这些选择控件，它们是设计中经常会使用到的让用户进行选择的控件。尽管它们在用户界面中是常用的组件，但设计师、产品经理在为他们的任务选择合适的组件时，仍然会有很多现实的麻烦，而我们则需要更认真地探究其中的细节。良好的掌握每个组件的使用场景，可以更加积极的帮助用户体验产品。本文通过结合实际案例与思考，与各位分享这类选择控件在 web 端的使用逻辑与细节差异，希望能对设计工作带来一定的指导意义。

你是否有这种困惑？

当我们需要用户在两个选项中选择一个选项时，在这种情况下可以使用三种控件：单个复选框、两个单选按钮或者开关，那么我们应该如何做出抉择呢？

感觉似乎使用 Radio 单选按钮、Checkbox 复选框和 Switch 切换开关这三个组件好像都是可以的。下面文中会对于这三个组件的基本特点、使用准则，以及常见场景等的探讨来告知设计师们该如何去做出正确的选择。

要搞清楚这些组件的使用问题，我们需要来了解一下这些组件的由来与用法场景。

一、什么是选择控件

选择控件（Selection Control）：是一种供用户选择不同选项的，常用于表单、设置页等。它一般分为三类：单选按钮（Radio）、复选框（Checkbox） 和开关（Switch）。

1. 选择控件的由来与用法

不论是单选按钮、复选框还是开关，他们都能在现实世界中找到事例。这些组件是将现实生活中的事物映射反应到界面设计中，使得用户可以更加简单高效地理解他们本身所代表的交互含义，通过官方定义的"建议"用来指导标准化使用。

2. 选择控件的差异

单选按钮、复选框、开关组件它们都具有不同的时效性。

单选按钮/复选框本质上只是变输入为选择的快捷方式，当需要用户输入的内容只有几种固定的格式时，可以通过变输入为选择，这样不仅节约时间，也能避免输入出错，但这需要提托页面中的其他触发组件来保存和执行这样的操作。开关这类组件被点击后会立刻执行，并触发界面或系统中可明显被用户感知到的某些变化。

二、如何正确使用选择控件

如何才能正确的选择合适的控件，这就需要从了解每一个组件开始。

1. Radio 单选按钮

① 了解单选按钮按钮的由来

单选按钮（Radio）最早的设计模型来源于老式收音机上用于频率和预设电台之间切换的物理按键。当其中一个按键被按下时，所有其他的按键都会被弹出，被按下的那个按键就成为了唯一一个处于"按下"状态的选中按钮。单选按钮将这一物理特征进行了隐喻设计，是一种泾渭分明的表现。

但是感觉这样的说法可能有些不严谨。从物理世界演化到 UI 后，这个组件有了交互上的变化，UI 设计中的单选按钮功能只是录入内容，并不立即执行，而收音机的物理按键却能立即触发（换台）操作，所以单选按钮的使用是在不断的演变中发展变化着，未来也许还有新的改变。

UI 概念是由 Xerox PARC 的研究首次引入的，它是一家研发公司，应用业务涉及到常用的计算机技术，包括：以太网、图形用户界面、编程、鼠标等。Xerox Star 8010 工作站是第一款在图形用户界面中带有单选按钮的设备。

② 单选按钮的特点

单选按钮是将所有信息条件暴露给用户，它不像开关在使用上带有猜测、探索的必要。

1. 标识性：单选按钮通常以圆形图标的形式呈现，旁边附有文字说明，用于表示选项的内容。这种设计使得单选按钮易于用户识别和操作。
2. 互斥性：仅允许用户在一组选项中选择其中一项。
3. 直观性：每个单项选择都非常直观，它会公开所有可用选项，用户能够一眼看到所有可用的选项并做出选择。如果希望用户明确阅读完所有选项，则最好使用单选按钮。
4. 拓展性：单选按钮的拓展性更强，相对于复选框、开关的布尔值，单选按钮能承载两个或两个以上的选项。
5. 默认值：单选会提供默认值选项，且默认值可以承载具体内容。

③ 单选组件的用法准则

单选按钮是主要用于两个或更多选项列表的选择器，列表中的所有选项是相互排斥的，用户必须清楚准确地选择一个选项。

1. 当用户点击一个未选择的单选选项时，它将取消选择先前选择的任何其他选项。
2. 要为用户提供默认选项，确保它对于用户来讲是最安全或者最可能的选项。
3. 选择较少的情况下使用单选按钮组件更好，但选项一旦较多，例如七八个的时候就不太适合一一展开，这会占用很多空间，因此将选项收起来放在下拉选单里会比较合适。
4. 清楚表明单选按钮各个状态，才能使用户更明确使用，达到设计目的。

④ 案例场景分析

1）让用户明确知道单选、复选的区别，强调各个选项的不同

不同的选项内容，如果采用复选框，用户需要在两个差距较大的选项中去思考，延长考虑时间，使得用户更为焦躁。

2）开启/关闭的单选状态，建议使用复选框

复选框对于绝大多数用户都是非常清楚，复选框对于在空间、视觉焦点上使用更为集中，如果只针对开启/关闭的单选状态，则不建议选择单选按钮，推荐使用复选框。

3）每个选项都关联内容时，使用单选按钮

如果默认选项内容设计的好，会让更多人保持选择默认选项。

在表单设计中一个不错的默认选项，会让很多人保持选择默认选项，提升表单操作效率。下图案例如果采用复选框或者开关控件，用户就不得不去思考开启后是什么，还要担心理解开启/关闭后带来的影响，但对于绝大多数用户来说，系统默认内容无需改动，给用户提供的默认选择，一般是安全、方便的选项。

4）较长需隐藏拆分的内容情况，使用单选按钮

在界面设计中，如果遇到的内容需要重新组织或者拆分时，选择使用单选按钮组件。不仅能够做到信息简洁，也能够提高用户的浏览效率。

5）垂直排列单选，信息阅读更佳

如果选项文字名称较长，需要添加说明，这时单选组件承载的信息较多，同时使用垂直排列的方式能让用户有一致的阅读浏览方向，眼球动线移动幅度较小，信息获取体验更佳。如果选项文字较少，也可横排不占用太多的垂直空间。

6）提供默认选项，保持视觉分量相同

单选按钮总是默认选中一个选项，不应该展示没有默认选择的单选组件。这个规则的唯一例外情况是在使用单选按钮进行用户问卷选择时，使用单选按钮在所有选项列表中要有相同的视觉分量，使用户从列表中选择任何选项的可能性是相等的。默认被选中的单选框设计可以为用户提供明确的建议。默认的选项可以引导用户做出最佳选择，并增强他们继续完成任务的信心。

7）明确的可交互区域，让用户易于操作

单选按钮、复选框是 UI 设计中最小的交互式元素之一，因此它们需要有一个易于访问的点击区域。单选组件交互操作时需要让用户不仅通过单击或点击该小控件，还可以单击标签相关联的文本来选择一个选项，确保用户可以单击单选控件或标签文本上的任意一个选项时都易于操作。

8）所有的选项要对齐

单选按钮不应该有什么子选项，单选按钮的设计初衷是让用户在多个选项中选择一个，而不是在一个选项内部进行进一步的选择。单选按钮通常与 RadioGroup 一起使用，用于将多个单选按钮组合为一组，确保同一组内的单选按钮只能有一个被选中。错误的排列会让用户感到困扰，所有的选项要对齐放置在同一层级。

9）选项小于等于 5 个，可使用单选按钮

当选项小于 5 个，应考虑使用单选按钮，用户可以不需要任何点击或输入操作即可马上浏览所有选项并直接点击选择出来。

10）选项只有且必须一个时，使用单选按钮

当选项只能选择一个，且必须选择 1 个时，应使用单选按钮。

11）单选项确保选项既全面又互斥

如果无法保证全面，需提供"其他"选项，比如在婚姻状态里，除已婚、未婚外，如果你不知道还有别的什么状态，最好提供"其他"选项作为补充，否则诸如离异、丧偶等情况会无法使用该系统。

2. Checkbox 复选框

① 了解复选框组件

复选框的物理原型来自于纸张上的多选题，例如餐厅的菜单，选多选少互不影响，并且用户倾向于用✅这个符号来勾选，这个符号从古代商号记流水账核查到现在教师批阅作业的"对勾"，无一不表示着"正确、认可"。它代表的是一种选择，而现实中的多选题，往往是非时效性的，勾选之后不会立即生效。

复选框既可以是单个选项，也可以是可供选择的一组选项。当用户可以选择任意数量的选项，包括零个、一个或几个时可使用复选框组件。集合中的每个复选框都独立于其他所有复选框，因此选中一个复选框不会对其他复选框产生任何影响。而复选框让用户在两个选项之间进行选择，勾选后和未勾选表示则可表示"是/否、要/不要、开启/关闭…" 等结果，准确的使用复选框也需要认清复选框的各种状态，才能更好的表示选项意义。

② 复选框的特点

1. 直观性：每个复选框通常由一个方框和一个标签组成，标签用于描述选项内容，用户可以通过点击方框来切换其选中状态。
2. 非互斥性：复选框通常用户表示一组非互斥的选项，即选择一个不会影响其他选项状态。
3. 多选性：复选框允许用户从一组选项中选择一个或多个，与单选按钮不同，复选框的选中状态是独立的，选项之间相互独立且相关，用户可以同时选中多个复选框。
4. 公开性：复选框可公开所有可用选项，用户一眼能够看到所有可用的选项并做出选择。
5. 灵活性：复选框可以用于多种场景，如在线调研、注册表单等，能够提高用户体验和效率。

③ 复选框的用法准则

1. 为了方便用户快速理解，复选框的选项内容一般是一句话，不用逗号隔开。
2. 父级复选框允许快速便捷选择或取消选择所有项目。
3. 复选框表示状态，用户可以延迟提交的交互操作。
4. 复选框作为单选状态时，操作对象和选项主体内容视觉焦点是不分开的，选择后就知道被选中了（比如登录页面中的用户需知）。
5. 复选框也可直接表示选项内容的开启、关闭。

④ 案例分析

1) 使用复选框代表用户清楚会发生什么

如果使用单选或开关，会发现视觉干扰特别严重，一般表单内容不需要特别去强调每一个选项的开启关闭状态。如果排版受限制，可以将复选框放到标签的右侧对齐。

2）复选框的标签文本要措辞主动

使用复选框，要保证选项后标签文本的措辞积极主动，而不是否定的。这将帮助用户理解如果打开复选框会发生什么。

3) 提前告知用户，提示消息可减少复选框错误选择概率

如果用户必须从列表中选择一些选项，您应该在用户开始执行之前告知用户，通过显示提示类似"您应该至少选择 X 个选项"的消息，来减少用户复选框错误选择的机率。

4）复选框生效需配合提交按钮

一般情况下，复选框不会像开关一样点击后立即生效，它需要配合提交按钮生效。所以用户在提交前可查看选择的内容是否正确，更有助于信息防错。如果在设置页面，复选框也可单独作为设置且立即生效。

复选组件的选项信息和复选框在一起，特别是对于批量填写或设置多个字段，使用复选框效率更高。

5）用复选框控制表单局部细节

如果控制对象的功能是表单页面的一个局部或信息内容不多，用户也清楚了解选择后是什么，这种时候复选框更适合。我们不需要过重的给用户强调是什么，用复选框比使用开关能使得表单结构内容更清晰。

6）多选项使用复选框

在表单中，同个问题中提供多个选项时，使用复选框。勾选能直接表明"要"或"不要"。

7）有且只有一个明显选项时，用复选框

只有"选择"或"取消选择"一个显而易见的选项时，更适合使用复选框。

8）存在父子嵌套关系的分组，多选项能清晰表达中间选择状态。

未全选中中间状态表示在列表中选择了多个子选项（但不是全部），这时，开关按钮不能表示部分选项被选中的状态，单选按钮亦不能表示嵌套关系。

3. Switch 开关

① 了解开关组件

开关组件是现实生活中仿照物理开关按钮在界面设计中的映射，提供了两种最简单、直接的对立选项，比如开/关、启动/禁用等。它就像生活中控制灯泡的开关，当我们去操作开关时，灯泡会点亮或者熄灭，会对事物立即产生影响。它的意符必须明确，不然用户不知道即将要启动或者关闭什么。

在界面设计中，开关也同样具备即时触发的特性，如打开 Wi-Fi、开启暗黑模式等，由于开关具备很明显的在用户心中扎根的隐喻心智，相较于复选组件而言，操作前后的状态更明显，感知更强烈。

开关组件提示用户在两个互斥选项中进行选择，并且总是有一个默认值。当用户必须回答是或否问题和二进制操作，如启用或禁用特定设置时，它是最合适的组件。开关组件也属于双态按钮，是指有开和关两个两种状态，是在两个状态之间切换。

在使用开关组件时要注意需要提供足够的视觉反馈，告知用户什么状态下是开着的。

② 开关组件的特点

1. 直观性：开关切换组件的设计通常很直观，开关主体选项信息和开关组件是分离的，两个视觉焦点，用户可以通过滑动滑块来改变状态，而不需要阅读额外的说明和标签。
2. 二元性：开关切换组件表示两种相反且互斥的状态，通常多用在表示"开启/关闭"，主要在选项中来回切换，这种二元性使得它非常适合于需要明确状态切换的场景。
3. 及时性：当用户操作开关时，相关的功能和设置会立即给予用户反馈，无需额外的确认步骤。
4. 易用性：开关组件简单易懂，即使技术不太熟悉的用户也能快速学会如何使用。
5. 可访问性：现在的开关设计考虑到可访问性，确保所有用户，包括有视觉或运动障碍的人，都能方便地使用。

③ 开关组件的用法准则

1. 当用户点击一个开关时，其对应的动作立即生效。
2. 由于开关显示实际状态，所以有时状态变化会有延迟。在这种情况下，可使用"处理中"的状态动画，减少用户焦虑。
3. 开关组件没有 hover 效果，有动作效果，用手指的切换更容易，这个组件非常适合应用于移动设备。
4. 避免使用开关控制局部细节或者次要的设置，开关的视觉权重比较高，所以用它控制内容较多更为合适，比如可以将它作为总开关打开或关闭一组设置。
5. 通常不要用开关替代复选框，如果在规范中定义了复选框，则尽可能保持一致的使用规范。
6. 对象名称要传达清晰，让用户能够明确感知操作后的动作开启或关闭什么。
7. 拨动开关的滑块后如果状态切换失败，要马上弹回来。8）开关的规范做法是滑块在左为"关"状态，在右边为"开"。9）由于开关会立即执行，所以若是危险的操作需要用户再次确认。

④ 案例场景分析

1）开关的文本内容意思需传达清晰

开关主体的信息和按钮是分离的，和单选、复选框不一样。
用户在点击开关按钮前，必须清晰告知用户点击后会发生什么，有时需要通过增加副标题文字内容来加以说明。

2）立即生效的场景一般使用开关组件

在表单填写时，往往最终会有「提交」按钮作为结束态，开关作为表单字段的填写，用户点击后并不能够立即生效，而是需要再次点击「提交」按钮，这样处理会让开关的特点所滞后。所以开关组件应该提供即时生效的结果，它们不应该要求用户单击保存或者提交按钮来应用新状态。

3）着重提醒用户有风险

开关的视觉权重较高，在复杂的表单信息中，它能够快速吸引用户注意力，给用户以视觉提醒。

4）避免大面积使用开关，可使用它控制局部细节或者次要设置

开关在视觉感知上和按钮有些接近，所以尽可能避免在表单中大量使用开关来控制局部层级内容，推荐使用复选框来替代开关作为局部内容控制。

5）作为高层级内容控制或信息设置

开关作为总控制来显示更高层级内容，避免 web 表单中过多使用开关按钮，会和其他的基本组件造成视觉干扰。少量使用既凸显其重要性，又能提升用户浏览表单的效率。

6）避免写"开启/关闭"带动词含义的字在组件上

如果要将说明文本放在按钮里面，它们会让人搞不懂是表示当前状态还是表示切换后的状态，此时如果图形本身状态辨认度较低，就会使这个问题尤为严重。所以，在设计开关时，一定要分别用艳丽和暗淡的颜色来表示开和关状态。

7）语序和状态要一致

用户有可能不知道当前点击状态到底是开启还是关闭。我们可以使用文案辅助来清晰地传达意图和反馈。如以下场景，在文案中添加「开启」二字结合开关按钮使用，能有效减少用户对于按钮与文案之间关系的思考。请勿使用文案是"关闭"作为开启的语序，增加理解成本。

三、选择控件的总结思考

单选按钮、复选框、开关组件在正确使用时需特别注意哪些？

1. 选择控件的已选状态应该要比未选状态更加醒目。
2. 我们把选择控件所代表的内容称为标签，标签文本都应该简洁易懂，避免使用否定词汇，否则用户还需要绕弯理解。开关标签被误解尤为常见，如"请勿打开"、"补光灯关闭"、"延时关闭"这些都是不好的，它们都有否定词。
3. 把控件图标+文字一起作为可点击区域，会使用户操作更方便。

明确清楚单选按钮、复选框、开关各组件的使用方法，才能设计出更加好用易用的产品。

1. 单选组件承载的信息量较多，如果希望用户对比感知到两者信息的明显不同，那么推荐使用单选组件。
2. 复选框组件适用和拓展性极强，即可以单独作为设置使用，也不用配合其他提交按钮作为表单填写的一部分。
3. 开关在表单结构、各种控件内容较多时，需要页面清晰、避免过多的视觉突出，所以尽量避免让无数个开关组件在表单中使用。

理论只是指导实践的一部分，上述内容方法可能只在用户认知和易用性之间，找到一个相对平衡点，在未来的设计中具体的使用场景情况，还是要具体问题具体分析。

写在最后

文中主要概括总结了单选按钮、复选框、开关的使用规范及案例。设计规范只是基于产品本身建立的一个标准，为了保持后续视觉统一而提供规范化的参考。

在实际的工作设计中，设计规范主要起到指导作用，每个产品需要根据各自的属性特点和使用场景进行灵活调整，让组件规范个性化匹配自身产品的特点。

设计规范只是设计执行中一个基本准则和使用标准，遵循的同时既要根据各产品中不同的设计细节，查缺补漏、迭代优化，将产品亮点与规范达到一种平衡，在标准的基础上突出自身产品特点，让其更具有优秀的代表性。以上总结如果不妥之处，望大家交流指正，一起探讨学习。

作者：iFlytek STC UXD