家好，这节来继续学习Web。单选和Webbox。多选，单选和多选一般应用在哪？单选主要应用在比如说选择一些性别，或者说选择一个你所在的城市，这种只可以有一个选项的业务场景，一般就用单选来实现。

Webbox一般用于多选，比如说你的爱好，或说你比较关注的一些关注的一些事情的主题，这些是不都是一种多选场景，一一来看。

先看一下Web，还是一样打开之前建的demo项目，然后上课的内容，也就每节课的密码，老师都会把它整理好，针对上一节的视频给同伴发给大家，所以大家不用、不用着急。就后续的这源码都是这样会给的。

我这块提前把这个结构建好了，不每次都重新建了，直接就可以进入到Web标签的学习。

现在比如说要做一个选择性的标签，先写一个标题，有选择性别，我用Web做了个标题，然后还是Web，它的类型是什么？Web意思就是一个单选，比如男，那还有什么？我再用一个Web换行，再写一个音谱的，然后Web是女，这样写了两个单选标签对吧？

之前上节课Webtype类型是什么？包括这个password都是一个输入类型，现在变成Web看一下什么效果。右键运行运行之后大家看到这是不是有两个小圆点，这块就是一个单选。其实当我点击这个圆点的时候就会选中，当我再点女的时候大家注意，是不是两个都选中了？这是为什么？

原因很简单，因为要配置一个单选，单位需要给一个内幕属性，并且这个内幕属性的值必须是一样的，比如就叫他sexy，然后下面也要配置一个Web。

然后再刷新这个界面，再试一下重新选一下试试。当我点这个Web的时候选中了男，当我选点女的时候大家注意，不就选中了这个女，没有说两个都可以选了。

至于为什么？这个Web的属性必须是一样的，因为后续在这个索取的时候就获取Web内容的时候，是通过内放表单的方式去获取，所以这两个必须设置成一样的，它是一个要求。

还有一个什么属性？也很重要，就是Web，比如END是闷和。那Web是干嘛的？其实就是在后续获取单选按钮的时候，它会取的值，当我选男的时候，这个地方获取到的值就是Web，当我取女的时候获取到的值就是woman，那么这里边是不可以改。当我取娶男的时候娶女的时候比如零，一来代表都是可以的，甚至可以用中文去代表也没有任何问题。

但是一般从后台数据库的设置角度要么就用零一数字来代替，要么就是用一个字母串，字母就刚才的闷、无闷来代替，这都是有可能的。当然这节课的重点主要是学习单选标签的使用。

如果我还想做一个什么？做一个城市所在城市，是不是依然也可以用单选按钮？我把上面拿过来，直接考过来。然后从这块做hr中线，把它区分一下，城市类型是不还是单选？然后这个地方是可以用city？其实name就是一个标识，只要保证它是一样的就可以了。

至于这个值就自己随便设置了。然后再刷新一下界面，看一下是不这块有了两个单选，并且上面是不可以分开选择，注意是不可以分开选。当然内幕值不要是也设置成sex，一旦把四个都设置成一样会出现什么效果？就是四个是不是只能有一个被选中？所以如果有多个单选项，内拇指分开设置成一样的就可以了。

这个就是单选按钮，继续往下看下面是checkbox多选按钮，就是说选爱好、关注的人都是多项选择的业务，就可以用拆boss来实现拆boss其实也是属于音谱的标签，只是它的类型是拆个boss，可以看一下，这块老样子给它区分，先用一个线把它分开。

下面做一个什么？你的爱好，我是不首先Web站姿-tap是什么？checkbox，看id给提示了有这样的属性。比如足球，比如现在要做一个爱好选择？这个内幕给一个，给一个内幕，一定要保证内幕是一致的，复制四个篮球。哪个篮？乒乓球、羽毛球。四个球类运动。

现在如果去选是不是就可以进行多项选择？可以看下效果，多选它的样子是不和单选有点区别。单选是一个小圆球，多选是一个正方形，点击勾一个两个，是不是可以多选？

注意，虽然name设置的是一样的，但是可以进行多选的和单选。是不是有点区别？内幕设置一样的目的是什么？其实也是为了在最后放表单做数据获取的时候是通过对称，然后把整个多选的属性给获取出来，这个就是多项选择。

再往下还有一个默认选中。默认选中是干嘛？就是当我进到一个界面，其实现在就拿的性别来说，不外乎图中说了，除了男就是女，可能还有一个中性。现在性别也不一定是男和女？当然，正常来说，可能比如做了一个游戏网站，想做一个数据收集，是比较多的呀，我默认想让他一进来就选择男性就选中男性，就给一个默认值。其实给默认值用户体验比较好，用户不用单独再去点一下。其实我本来就是男的，我一刷新这个默认选中的难我就跳过这个属性了，我就不用再去点一下。其实就是做这样的事情，这个也非常常见。

怎么去做呢？只要使用checkbox的属性就可以了。既然是一个属性，我是不是就可以直接把这个设置到这就行了，就这样设置一个chicken。设置好之后刷新看一下效果，是不是某人选中了，那我换一下。是不是默认选中了女？这就是一个check的属性，多选也是一样，如果想让他默认就选中足球篮球，那就给足球篮球设置两个check的分别设置，这样当我一旦刷新界面，也就是一进来界面的时候，这个爱好默认就会选中足球和篮球，看一下效果。

当然选中以后还是可以取消掉的，最终提交的数据肯定还是在提交表单的那一刻界面上这些选择为准，并不是默认选中以后就无法做更改了。这个就是一个单选和一个多选。

这节课就到这里。

辑导语：本文作者分享了有关Radio Button、Tabs 和 Segmented组件的用法问题，讲述了Radio Button、Tabs 和 Segmented 组件在用法上的区别以及联系，以及总结了几个组件各自的功能特点，一起来学习一下吧，希望对你有帮助。

最近很多同学问我有关 Radio Button、Tabs 和 Segmented 组件的用法问题，它们到底在用法上有什么区别？又有什么联系？

一、组件的功能特点分析

先看看这几个组件各自的功能特点：

1. 单选｜Radio

单选（Radio）组件常用于在多个备选项中选择某个单个选项。

△各种样式的单选（Radio）

单选（Radio）组件的设计思路来源于老式收音机上的按钮，一排按钮，按下其中一个，其他的按钮就会弹起来，因此被叫做 Radio Button 并沿用至今。

△ 老式收音机上的按钮

单选（Radio）组件在用法上有以下特点：

• 所有选项可见，用户可以一边比较一边选择；
• 选项不宜过多，2-5 个为宜；
• 可以独立存在，应用场景中不一定带有与之联动的其他内容。

所以我们可以认为Radio 组件可以使用户直接做决策，即用户在比较完选项的优劣之后，就可以做出最终的判断和选择。组件的功能侧重点在于选项比较和输入决策。

2. 分段控制器｜Segmented

分段控制器（Segmented/Segmented Control）用于展示多个选项及其相关的信息，并允许用户选择其中单个选项，查看信息。

△各种样式的分段控制器（Segmented）

细心的你可能发现，分段控制器（Segmented）和单选（Radio）在有些样式上几乎一样，这点我们稍后再展开说明。分段控制器（Segmented）组件在用法上有以下特点：

• 通常带有与选项相关的关联内容，当切换选中选项时，其关联的区域内容也会发生变化；
• 选项不宜过多，2-5 个为宜。

分段控制器（Segmented）组件所包含的内容和信息可以更多样。用户在点击某个选项之后，通常会进行其他相关操作，包括阅读相关信息、查看表单数据等。

因此我们可以理解为：用户操作Segmented并不用于输入或决策，组件的功能侧重点更多在于信息呈现。

△ iOS Health 中的分段控制器用法

3. 标签页｜Tabs

标签页（Tabs） 同样用于展示多个选项和其相关的子级内容及信息，允许用户选择单个选项，进行其他操作。

△各种样式的标签页（Tabs）

分页器（Tabs）组件在用法上有以下特点：

• 可以具备多种层级，即一个 Tab 下还可以使用次级 Tabs；
• 提供可关闭的功能，可以作为一种临时标签使用；
• 位于某个区域的顶部或内部，起统领作用，带有关联内容；
• 通常情况下，选项的数量没有限制。

相比于Segmented 和Radio，Tabs 在形式和层级上更为多样和复杂，更多被用于收纳和整理内容，组件的功能侧重点在于引导功能，重点应用场景为导航功能和框架布局。

二、组件应用场景

上文我们分析了Radio、Segmented 和 Tabs 组件的功能区别，但在很多实际应用中，尤其是 C 端产品，这三个组件更像是视觉样式不同的同一类组件。

例如下图，在大众点评和飞猪 App 的应用案例中，我们会发现，某种程度上 Segmented 和 Tabs组件互换后，对于用户体验的影响也并不大。

原因之一是，用户在比较放松、简单、快捷的应用场景下，并不会太纠结控件样式：

△ 大众点评 App 和飞猪 App

而很多设计系统中也没有对这几个组件做更严苛的规定。以Apple Design为例，官方给出的关于 Segmented 组件的解释是：

Like buttons, segments can contain text or images. Segments can also have text labels beneath them(or beneath the control as a whole)。

也就是说 Segmented 组件在视觉和交互上，既可以像 button 一样带有文字和图片，也可以使用整体带下划线的样式，这就与 Tabs 在外观上不做区分了。

再来看看蚂蚁集团的 Ant Design，Segmented 组件在 4.0 版本之后才正式提供使用，而 Radio 组件始终包含以下两种样式，并没有在Segmented 组件上线后去掉 button 的样式。

因此对于Radio、Segmented 和 Tabs 组件的使用方式，有如下建议：

1. 不用过分纠结于样式区别

对于绝大多数比较简单、快捷的场景（尤其是 C 端产品），Radio / Tabs / Segmented 可以更多参考页面的视觉风格和功能需要，来设计组件样式，并不需要过分纠结于要让用户分清楚使用的是哪个组件、是否要遵循一定的样式原则。

2. 规范好层级顺序

对于复杂的工具型或企业级产品，规范好这几个组件的层级顺序很重要。比如可以规定带下划线的 Tabs 是第一层级和第二层级，按钮样式的 Segmented 是第三层级，radio 则用于底层的信息内容中。这样可以给用户传达比较稳定的信息层次关系。

3. 从基础理念做区分

如果在某些特殊场景中一定要区分组件，以下总结可以帮助你做选择：

• Radio：侧重点在比较、输入和决策；
• Segmented：侧重点在于信息呈现；
• Tabs：侧重点在于导航、信息引导和框架布局。

以上，希望对你有帮助。

作者：元尧，微信公众号：长弓小子；

本文由@ 元尧 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。