01 什么是选择控件

选择控件（selection control）：是一种供用户选择不同选项的组件，常用于表单、设置页。它分为三类：单选按钮（radio button）、复选框（checkbox） 和开关（switch）。

在文本框中我们提过，当需要用户输入的内容只有几种固定的格式时，我们可以变输入为选择，这样不仅节约时间，也能避免输入出错，选择控件就是在这样的情况下出现的。

分类 

单选按钮：在若干（≥2）选项中，同一时间只能选择一个选项。其中，后选的一项会立刻使先选的一项被取消选择。

单选按钮是录入类组件，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件（如保存按钮）后，再执行操作。

macOS

复选框：在若干（≥1）选项中，同时可以选择任意多个选项，选项之间互相独立。和单选按钮一样，复选框也是录入类组件。

macOS

开关：用来在开和关两种状态之间切换。开关属于触发类组件，拨动开关时，它所指挥的某个操作会立即生效。

iOS

单选按钮没有物理原型，有人说它的原型是老式收音机上的按键，但我想那可能不严谨。的确，单选按钮的名字来源于此（radio button “收音机按键”），它们都是单选功能。但从物理世界演化到UI后，这个组件有了交互上的变化，因为UI中的单选按钮的功能只是录入内容，并不立即执行；而收音机的物理按键却能立即触发（换台）操作。

老式收音机的按键是单选按钮名称的来源，但并非它的物理原型

复选框的原型则是纸张上的多选题：

复选框的原型：选多少都可以，互相不影响

开关的原型历史悠久：

开关控件的物理原型

Tips：

• 单选按钮和复选框通常是多个成组出现，开关却不用。

• 单选按钮至少有两个选项，复选框至少有一个选项。

选用哪一类

在UI设计中，当遇到需要用户点选的场景，我们如何决定是用按钮、单选按钮、复选框还是开关呢？有时候感觉似乎开关可以用两个单选按钮代替，有时候不知道按钮和单选按钮该用哪一种，还有时候好像一个复选框也可以当开关使….造成这种困惑是因为这四种组件有一个共同点，那就是它们都可以供用户进行选择。

但事实上，它们有根本的不同：如前面所说，按钮和开关属于触发类组件，单选按钮和复选框属于录入类组件。

这两类的区别：触发类组件被点击后会立刻触发界面或系统中的某些变化，比如打开或关闭新的页面、让Wi-Fi连接状态改变、让声音模式改变等等；而录入类组件本质上只是在录入数据，因为它只是一种变输入为选择的快捷手段，点击它以后我们感觉不到页面的变化，得靠点击页面中的其他触发组件来保存和执行这样的录入。

这样两类、四种组件，分别有适合自己出现的场合，按照下面的流程图来梳理，就不会错：

不得不提，有时候单选按钮可以用下拉菜单（dropdown menu）代替，这样可以节约不少空间，但同时会使用户无法直观看到所有选项，且增加交互步骤，所以请斟酌后取舍。

更适合用下拉菜单的情况：

• 当选项较多（多于5个）时，比如选择国家；

• 默认选项是推荐项，且隐藏选项是用户可预期的，比如等差数字（50%、75%、100%、125%…..）；

• 空间受限。

更适合用单选按钮的情况：

• 当选项较少（≤5），且希望用户直观看到并比较每一个选项，如会员付费方案；

• 需要快速选择、节约时间；

• 界面中表单太长、单选题太多，不方便每一个都去展开查看。

Tips：

• 还有更多的单选形式，如“选择纸片”，以后讲。

02 一个选择控件

拆分 

单选按钮

通常，未选中的用一个圆表示，选中的则在圆中间加一个同心小圆。

它有默认选中项，那是最保险或保护隐私的一项，要么就是用户最可能选、最被推荐的一项。设置默认选项的好处是，能让用户感觉更可靠，从细节上提升体验感。设计大牛Jakob Nielsen的十大可用性原则中说到，最好能让用户随时撤销操作，带有默认选中项的单选按钮，重新加载页面就可以回到默认状态。

复选框

未选择的项用方框表示，选中的项则是方框里再加一个对勾，不确定的项是在方框里加一条横线。

它不需要默认选中项，可选范围从0到全选。复选框可以嵌套在一起形成多个层级。

复选框可以嵌套，单选按钮不行（材料设计）

开关

它由两个元素组成：滑块（thumb）和轨道（track）。

它有默认状态：开或者关。

Tips：

• 选择控件的已选状态应该要比未选状态更加醒目。

• 我们把选择控件所代表的内容称为标签。标签文本都应该简洁易懂，避免使用否定词汇，否则用户还需要绕个弯来理解。开关标签被误解尤为常见，诸如“请勿打开”、“补光灯关闭“、“延时关闭”这些都是不好的，它们都有否定词。

• 把控件图标+文字一起作为可点击/触控区域，操作更方便。

状态 

单选按钮

单选按钮有两种录入情况：已选（selected）和未选（unselected） 。

在移动端和网页，单选按钮的状态有4种：

单选按钮的状态

因为太小了，单选按钮不适合用在电视上，电视上的单选请用选择纸片（choice chips）表示，即未选择和已选择用背景和字体颜色的变化来体现。

电视上的单选纸片（长虹）

单选按钮的状态示意图，供参考：

复选框

复选框有三种录入情况：未勾选（unchecked）、已勾选（checked）和不确定（indeterminate），不确定是专门用于父子复选框的，设父复选框下面有n个子复选框，当有m个选中、且0<m<n时，父复选框的情况即为不确定；当m=0：父、子都为未勾选；当m=n：父、子都为已勾选。

在三种终端，它的状态有5种：

由于复选框本身较小，在电视上不容易被发现，所以它的焦点框不应该只是复选框那般大小，最好是覆盖了标签的大面积实心焦点：

安卓TV

复选框的状态示意图，供参考：

开关

开关只有两种情况：开和关。它的状态有：

开关的状态示意图，供参考：

当开关图标本身颜色已经可以说明它的状态时，尽量不要写“开/关”或“ON/OFF”这样的字在图标上，那样会画蛇添足。

此外，避免写“开启/关闭”这种带动词含义的字在组件上，它们会让人搞不懂是表当前状态还是表拨动操作，此时如果图形本身状态辨认度较低，就会使这个问题尤为严重。所以，在设计开关时，一定要分别用艳丽和暗淡的颜色来表示开和关状态，举个例子：

Tips：

• 拨动开关的滑块后如果状态切换失败，要马上弹回来。

• 开关的规范做法是滑块在左为“关”状态，在右边为“开”。

• 由于开关会立即执行，所以若是危险的操作需要用户再次确认。

尺寸

移动端

第三个表的示意图：

网页端

电视端

03 界面中的选择控件

标签的位置

约定俗成的做法是单选按钮和复选框的标签都位于右侧，开关的标签位于左侧：

标签的位置（材料设计）

复选框的标签在右边，最常见于购物车：

购物车：复选框的标签在右（京东到家和淘宝）

但经常会发现，在同一个APP里的其他地方，复选框的标签被放在组件的左侧：

提交订单页：复选框的标签在左（京东到家和淘宝）

为什么和购物车不一样呢？我的分析是，这取决于标签的长度和内容，如果标签是简短的文字，或排列整齐一目了然的商品（如购物车），那么为了美观和快速勾选，应该把组件放在左侧左对齐；但如果标签格式复杂或者内容专业性强、涉及到利益，供用户斟酌的话（如系统设置、支付方式、优惠券选择等），最好把标签放在左边，这样能让人顺着阅读习惯从左至右完成“阅读-思考-决定-勾选”的流程。

Tips：

• 标签位置总结：开关的标签在左边；单选按钮和复选框的标签如果简单，就放右边，如果复杂、涉及到利益，就放左边。

• 考虑界面设计的一致性，同类情况下，标签位置统一。

组件的布局

选择组件通常是多个选项集体出现，这就有了怎么布局的问题。规范的做法是尽量纵向排列，因为横向会不方便阅读，也容易造成每一项的勾选框和标签之间的混淆。

纵向排列（macOS）

如果不能避免横向，请确保选项之间的间距拉开，不要这样：

错误示例，间距不合理

应该这样：

正确示例，间距合适（百度云）

Tips：

• 单选和多选的选项排序，按照：用户最可能选到最不可能选、最简单到最复杂、风险从小到大。但没必要按照首字母顺序来。

• 有人说tab标签的本质就是单选按钮，我觉得不正确，它们是两种不同类型的组件，前者是触发类，后者是录入类，且不可互换

选择组件到此结束，下次见，祝你天天开心。

关键词：怎么发布h5页面 如何自己做h5 h5页面报价