phpradio切换技巧_详解｜一文帮你区分RadioTabs 和 Segmented 组件的应用场景

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

一、组件的功能特点剖析

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

1. 单选｜Radio

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

△各种样式的单选（Radio）

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

△ 老式收音机上的按钮

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

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

2. 分段掌握器｜Segmented

分段掌握器（Segmented/Segmented Control）用于展示多个选项及其干系的信息，并许可用户选择个中单个选项，查看信息。

△各种样式的分段掌握器（Segmented）

细心的你可能创造，分段掌握器（Segmented）和单选（Radio）在有些样式上险些一样，这点我们稍后再展开解释。
分段掌握器（Segmented）组件在用法上有以下特点：

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

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

△ iOS Health 中的分段掌握器用法

3. 标签页｜Tabs

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

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

分页器（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. 从根本理念做区分

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

以上，希望对你有帮助。

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

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

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