家好，這節來繼續學習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 協議。