segmented是什么意思？用法、例句 详解｜一文帮你区分Radio、Tabs 和 Segmented 组件的应用场景

今天给各位分享segmented是什么意思？用法、例句的知识，其中也会对详解｜一文帮你区分Radio、Tabs 和 Segmented 组件的应用场景进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Likebuttons,segmentscancontaintextorimages.Segmentscanalsohavetextlabelsbeneaththem(orbeneaththecontrolasawhole)。

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

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

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

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

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

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

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

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

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

好了，文章到此结束，希望可以帮助到大家。