一直想做一个关于UI设计组件的系列分享，正好在国外网站看到了这篇关于选择控件的文章。就从这篇文章开始吧。后续会有更多关于UI组件的文章分享给大家。其中包含自译外文、也包含自己工作多年对组件设计的理解。感兴趣的朋友点个关注吧~

说到选择控件，不得不提开关。“开关”这个词来源于收音机带柄的物理开关，每次在激活和停止之间切换。这种交互方式在生活场景中随处可见，你每次开灯、打开车载收音机，都会触发一次这样的选择操作。那让我们来看一下，这个熟悉的操作在界面中是如何应用的。

选择控件可以细分为Checkbox、Radio button、Toggle-Switch、Choice chips、Multi-select chips等。具体样式如下图所示。

Checkbox——当只有一个或多个独立选项，用户可以选择任意数量的选项时，使用Checkbox。中文名称也叫“复选框”。它的状态可以有未选中、选中一个或选中多个。是用于多选的一种推荐样式。

Radio button——当列表中有两个或多个选项互斥且用户必须只选择其中一个时，使用Radio button。中文名称叫“单选按钮”。

Toggle-Switch——当有两个互斥选项，并且总是有默认值的时候，使用Toggle-Switch。中文名称“切换开关”。切换选择立即生效。

Choice chips——是单选按钮的替代品，当选项文字较短时使用。中文名称也叫“单选标签”。包含至少两个选项，用户可以从中做出单一选择。

Multi-select chips ——是复选框的替代品，选项文字较短时使用。中文名称叫“复选标签”或“多选标签”。允许用户选择多个选项，主要功能是“筛选”。

选择控件已经在UI设计中使用了相当长的一段时间，为了让朋友们更好理解各种控件的具体使用场景，我在下面的文章里列出了各种选择控件的用法，你可以根据实际用途选择正确的类型。

图中列举了Radio Button、Checkbox、Single checkbox、以及toogle Switch的四种区分方法。第一种是根据选项数量划分；第二种是选项之间的关系是否互斥；第三种是选项是否有默认状态；第四种是选择的生效时机。

日常使用过程中，我们根据选项的数量去使用就可以了。多个选项，只能选中1个时使用Radio Button；多个选项，可不选、可多选时使用Checkbox；两个选项，可选可不选时，使用Single Checkbox。

除Checkbox外，其他3种控件的选项都是互斥的，其他三种都是有默认状态的。Toogle Switch是自动生效的，其他3种都是用户触发后生效。

选项默认有选中、非选中、不可选中3种使用状态。但是在操作过程中，可能也有点击状态的效果。在网页端还有悬停、聚焦和按下的效果。虽然状态很多，但是在设计过程中考虑全面，是很好的习惯。

区分Checkbox和Toggle-Switch的用法

Toggle-Switch(切换开关)一般是即时生效的，比如你手机的夜间模式，一般是有开关按钮的，你点击开关之后，手机就立刻切换到夜间模式了。不需点击其他按钮。

Checkbox的选项一般是和确认按钮联动的，点击选中后尚未生效，点击确认按钮后才生效。比如我们在使用大众点评、携程搜索某些关键词后，筛选一些词条后需要点击确认按钮，才会生效。

不规范的样式会造成用户困惑

选择控件有很多的种类，文章中列举的是比较常见的样式，用户对类似的样式已经养成了固有的印象。有些APP可能会根据自己的设计风格对选项的样式进行优化。但前提是要考虑清楚对于用户而言是否容易理解，是否会对用户造成迷惑。尤其是在多选的情况。

考虑用户的浏览体验

选项标签左对齐时，浏览效果和使用效率最佳。选项左对齐能保持浏览信息时，视角从上到下始终在一条水平线上，浏览效率高。同时选项与文字之间的距离相等，信息之间的关联性最好。

多选项水平并列时尽量使用Chips

Checkbox比较适用于选项垂直展示的情况。当选项较多时，考虑到信息亲密性，Checkbox加文字的形式，会导致用户对信息有误解，不知道选中的选项是前面文字的还是后面文字的。这种情况下，选用Chips（标签）的形式会比较科学，降低用户的决策成本，提升产品用户体验。

尽量把选项展示出来，而不是折叠收起

将选项信息直接透传出来，能帮用户更好地理解该功能。如果你将一种功能的状态采用收起的状态，可能会导致用户找不到想要的功能，从而造成信息不精准或功能完成率低。

最好是有一个默认的选中状态

有一个很通用的设计理念，叫“别让用户思考”。需要选择的时候，给用户一些默认选项是很重要的，能够减少用户的操作。并且在异常情况下，比如用户误触选了一个选项，如果没有设置选中状态，用户很难把自己误操作点击的选项取消掉；如果有设置默认状态，用户就可以很轻松点击默认选项，取消误触发的选项了。

突出所选项，可以吸引用户注意

很多APP选项选中之后，会增强选中项的展示比重，比如加个底色，以此来吸引用户注意力，达到让用户二次确认的目的。

有意识的加大点击热区，让操作更便捷

在相对比较宽松的空间，同时包含选择框和文字的情况下。根据费茨定律，目标大小对点击效果起着重要作用。如果点击区域只有选择框大小，会很难点击，导致用户以为有BUG。如果有类似情况，建议设计师在不会引起用户误触的情况下，尽量增大点击热区。

Powered by Froala Editor