详解｜一文帮你区分 Radio、Tabs 和 Segmented 组件的应用场景！
Hi，我是元尧。欢迎长按下图二维码加我微信，带你进设计师交流群，与上万小伙伴一起交流成长！
「👇 添加好友请备注：设计交流」
PART 1
组件的功能特点分析
先看看这几个组件各自的功能特点：
单选（Radio）组件常用于在多个备选项中选择某个单个选项。
△ 各种样式的单选（Radio）
单选（Radio）组件的设计思路来源于老式收音机上的按钮，一排按钮，按下其中一个，其他的按钮就会弹起来，因此被叫做 Radio Button 并沿用至今。
△ 老式收音机上的按钮
单选（Radio）组件在用法上有以下特点：
所以我们可以认为 Radio 组件可以使用户直接做决策，即用户在比较完选项的优劣之后，就可以做出最终的判断和选择。组件的功能侧重点在于选项比较和输入决策。
2. 分段控制器｜Segmented
细心的你可能发现，分段控制器（Segmented）和单选（Radio）在有些样式上几乎一样，这点我们稍后再展开说明。分段控制器（Segmented）组件在用法上有以下特点：
分段控制器（Segmented）组件所包含的内容和信息可以更多样。用户在点击某个选项之后，通常会进行其他相关操作，包括阅读相关信息、查看表单数据等。因此我们可以理解为：用户操作 Segmented 并不用于输入或决策，组件的功能侧重点更多在于信息呈现。
3. 标签页｜Tabs
- 可以具备多种层级，即一个 Tab 下还可以使用次级 Tabs；
- 提供可关闭的功能，可以作为一种临时标签使用；
- 位于某个区域的顶部或内部，起统领作用，带有关联内容；
- 通常情况下，选项的数量没有限制。
PART 2
组件应用场景
上文我们分析了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 组件的使用方式，有如下建议：
对于绝大多数比较简单、快捷的场景（尤其是 C 端产品），Radio / Tabs / Segmented 可以更多参考页面的视觉风格和功能需要，来设计组件样式，并不需要过分纠结于要让用户分清楚使用的是哪个组件、是否要遵循一定的样式原则。
对于复杂的工具型或企业级产品，规范好这几个组件的层级顺序很重要。比如可以规定带下划线的 Tabs 是第一层级和第二层级，按钮样式的 Segmented 是第三层级，radio 则用于底层的信息内容中。这样可以给用户传达比较稳定的信息层次关系。
如果在某些特殊场景中一定要区分组件，以下总结可以帮助你做选择：
了解更多设计理念和设计方法