单选框与多选框，如何选择？

关注并将「人人都是产品经理」设为 ★ 星标

每天早上更新，与你一起成长

作者：一只鸡腿

微信公众号：B端设计一只鸡腿

题图来自 Unsplash ，基于 CC0 协议

全文共 3236 字，阅读需要 7 分钟

在B端设计中，单选框和多选框是常见的交互元素，用于用户在界面上进行选择，它们的区别在于用户能够选择的选项数量。

本文将详细介绍单选框和多选框在交互上的区别，并探讨它们在B端设计中的应用。

是什么

1. 单选框

是一种常见的交互元素，用于用户在一组互斥的选项中选择一个选项。用户只能选择其中的一个选项，点击一个选项后，其他选项会自动取消选择。

2. 多选框

允许用户在一组非互斥的选项中选择多个选项，用户可以同时选择多个选项，每个选项之间是独立的。 

总结来说：

单选框适用于用户只能作出一个选择的情况，用户只能选择其中一个选项。

而多选框适用于用户可以作出多个选择的情况，用户可以同时选择多个选项。

通过单选框和多选框，可以提供给用户不同的选择方式，以满足不同的需求。

有什么不同

1. 交互上的不同

1）选择方式

用户只能选择其中的一个选项。

点击一个选项后，其他选项会自动取消选择；用户可以选择多个选项；点击一个选项后，该选项会保持选中状态，用户可以继续选择其他选项。

业务场景示例：

在一个订单管理系统中，有一个下拉菜单用于选择订单状态。订单状态是互斥的，一个订单只能处于一个状态，例如：待处理、已处理、已取消等。

这种情况下，可以使用单选框来表示订单状态，用户只能选择其中一个状态。

2）互斥性

单选框的选项是互斥的，用户一次只能选择一个选项，选择一个选项会自动取消其他选项的选择。

多选框的选项是非互斥的，用户可以同时选择多个选项；每个选项之间是独立的，选择一个选项不会影响其他选项。

业务场景示例：

在一个权限管理系统中，有一个用户角色的选择框。

一个用户可以具备多个角色，例如：管理员、编辑员、审核员等。

这种情况下，可以使用多选框来表示用户角色，用户可以同时选择多个角色。

3）默认选择

单选框通常需要有一个默认选项，以便用户快速选择；默认选项可以根据用户的偏好或常见选择来设置。

多选框默认情况下，多选框不需要有选项被选中，用户需要自行选择感兴趣的选项。

业务场景示例：

在一个商品筛选界面中，有一个多选框用于选择商品的类别。

默认情况下，所有的类别都是未选中状态，用户需要根据自己的需求选择感兴趣的类别。

4）布局方式

单选框只需要展示一个选项，通常可以采用更紧凑的布局方式，节省空间。

可以垂直排列或水平排列，根据界面的整体布局来决定。

多选框需要显示多个选项，通常需要更宽的空间来展示。

可以采用垂直排列或水平排列，根据界面的需求和美观性来决定。

业务场景示例：

在一个调查问卷系统中，有一个多选题的选项。为了节省空间，可以采用水平排列的方式来显示选项，让用户一目了然地选择感兴趣的选项。

5）交互反馈

单选框和多选框在用户进行选择时，都需要提供明确的视觉反馈，以确保用户知道他们的选择已被接受。

可多选框以使用选中状态的颜色、勾选符号或其他视觉效果来表示选项的选择状态。

业务场景示例：

在一个表单提交界面中，单选框和多选框选项被选择后，可以使用不同的颜色或勾选符号来标识选项的选择状态，让用户清楚地知道他们的选择已被接受。

6）数据处理

单选框和多选框的选项选择通常需要进行数据处理和存储。

单选框只需要记录用户选择的选项，可以将选项的值或标识符存储在相应的数据字段中。

多选框需要记录用户选择的多个选项。

可以将选项的值或标识符存储在一个数组或以逗号分隔的字符串中，以便后续的数据处理和使用。

业务场景示例：

在一个购物车系统中，用户可以选择多个商品进行结算。多选框可以用来表示用户选择的商品，系统可以将选中的商品的标识符存储在一个数组中，以便后续生成订单。

2. 应用场景的不同

1）互斥选择

当用户在一组选项中只能选择一个选项时，可以使用单选框。例如，在一个报名表单中，要求用户选择自己的性别，只能选择男或女，这时可以使用单选框。

2）单一选择

当用户需要在一组选项中选择一个默认选项时，可以使用单选框。例如，在一个设置界面中，用户可以选择系统语言，只能选择一种语言作为默认语言，这时可以使用单选框。

3）状态切换

当用户需要在不同状态之间进行切换时，可以使用单选框。例如，在一个任务管理系统中，任务可以有不同的状态，如待处理、进行中、已完成，用户可以通过单选框来切换任务的状态。

多选框的使用场景：

① 多项选择

当用户可以在一组选项中选择多个选项时，可以使用多选框。例如，在一个筛选界面中，用户可以选择多个品牌来筛选商品，这时可以使用多选框。

② 集合选择

当用户需要从一个较大的选项集合中选择多个选项时，可以使用多选框。例如，在一个权限管理系统中，用户可以选择多个权限来赋予给某个角色，这时可以使用多选框。

③ 可选项

当用户可以选择是否使用某个功能或选项时，可以使用多选框。例如，在一个个人设置界面中，用户可以选择是否接收推送通知，这时可以使用多选框。

3. 功能的不同

1）互斥选择

当用户在一组选项中只能选择一个选项时，可以使用单选框。例如，在一个订单处理系统中，用户需要选择订单的处理状态，可以使用单选框来确保每个订单只能有一个状态。

2）单一选择

当用户需要在一组选项中选择一个默认选项时，可以使用单选框。例如，在一个设置界面中，用户可以选择默认语言或默认时区，单选框可以用来显示当前的默认选项。

3）状态切换

当用户需要在不同状态之间进行切换时，可以使用单选框。

例如，在一个任务管理系统中，任务可以有不同的状态，如待处理、进行中、已完成，用户可以通过单选框来切换任务的状态。

多选框：多选框是一种用户可以选择多个选项的控件。

在B端设计中，多选框通常用于以下功能：

① 多项选择

当用户可以在一组选项中选择多个选项时，可以使用多选框。例如，在一个筛选界面中，用户可以选择多个标签来筛选数据，多选框可以用来实现多项选择。

② 集合选择

当用户需要从一个较大的选项集合中选择多个选项时，可以使用多选框。例如，在一个权限管理系统中，用户可以选择多个权限来赋予给某个角色，多选框可以用来选择多个权限。

③ 可选项

当用户可以选择是否使用某个功能或选项时，可以使用多选框。例如，在一个个人设置界面中，用户可以选择是否接收推送通知，多选框可以用来表示可选项的选择状态。

如何选择评判标准

1. 用户体验

评判标准之一是用户体验。

设计应该使得单选框和多选框在使用过程中简洁、直观、易于操作。

例如，单选框和多选框的样式应该与整体界面风格一致，大小合适，选项之间的间距适当，文字清晰易读等。

2. 功能需求

评判标准之二是满足功能需求。

根据具体的业务需求，选择合适的控件。

如果只能选择一个选项，应该使用单选框；如果可以选择多个选项，应该使用多选框。

同时，还需要考虑是否需要默认选中项、是否需要全选或全不选的功能等。

3. 可访问性

评判标准之三是可访问性。

设计应该考虑到不同用户的需求，如色盲用户或视力受损用户。

合理选择颜色、对比度和字体大小，提供辅助文本或提示，以确保所有用户都能够正确理解和使用单选框和多选框。

4. 界面一致性

评判标准之四是界面一致性。在整个系统或产品中，单选框和多选框的样式和交互行为应该保持一致，这样可以减少用户的认知负担，提高使用效率。

5. 易于管理和维护

评判标准之五是易于管理和维护。设计应该考虑到后台管理的需求，如添加、修改或删除选项的方便性。对于多选框，还需要考虑如何处理大量选项的展示和选择。

总结

正确使用和巧妙设计单选框和多选框，可以提高用户体验和操作效率。

在B端设计中，根据具体的应用场景选择合适的交互方式，确保用户能够方便地进行选择操作。