中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：本文作者分享了有關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 協議。