編輯導讀：「Radio Button」是構成表單功能的基礎元素之一，合適巧妙的設計它可以讓用戶對表單完成有個很好的心理預期，對提高用戶體驗至關重要。本文作者圍繞Radio Button進行了分析，與你分享。

今天在群里有個小伙伴截了兩個boss直聘當中有關單選任務的設計問題，不研究不知道，一探究其根本發現「Radio button」這個表單設計當中最基本的元素可講的點還是挺多的。今天我們就手把手從基本的組件層面來聊下「Radio button」。

一、「Radio button」的含義

1. 「選擇」的概念

從社會學角度給出的定義：意思是挑選，選取，指從一些人或事物中選出合乎要求的目標 。

2. 「Radio button」的隱喻

「Radio button」顧名思義直譯成中文就是「收音機按鈕」，其物理原型是老式電臺收音機。老式收音機使用物理按鈕，并且默認打開就會接收到一個電臺頻率，按下一個按鈕后，其他所有按鈕都會彈出。

二、「Radio button」的定義與特征

那么結合剛才聊到的“選擇”概念與“raddio button”隱喻，我們就可以給出“radio button”的定義與特征：

「Radio button」的定義：從若干個后選項當中，完成單選任務的組件。

「Radio button」的特征：

• 后選項必然大于等于兩個。
• 后選項的集合之間天然互斥。
• 默認情況之下，必然有一個選項是選中狀態。
• 每次只能選中一個后選項。

為了說明觀點補充的下W3School的截圖：

三、打爆大廠的狗頭

講了這么多以后終于可以打爆antdeisgn的狗頭了，可能當中有些我們不知道的考量，但是antdesign給出最基本最簡單用法是值得商榷的。僅僅只有一個后選項，那么選與不選有什么差別，也并沒有給出默認選中的狀態。只能說這種改造方式，違背原生控件的意圖，也有違用戶對于“選擇”動作的基本認知了。所以在使用大廠設計時我們也要時刻提高警惕，不可迷信也不可全信。

四、「Radio button」的基本狀態

「Radio button」的交互狀態比較簡單，分別是「選中」，「未選中」、「不可選」三種。這里特別提醒一點，「Radio button」并不像「check box」有「不確定」狀態。

五、「Radio button」的設計竅門

1. 選項的邏輯順序

「Radio button」的選項應該按某種邏輯順序排列，例如從最簡單的操作到最復雜的操作，或者從最低風險到最高風險。讓用戶心理狀態符合某種預期，更好的理解表單。

2. 選項應該是全面和清晰的

「Radio button」的控件內容比較少，用戶對于它的理解來源于標簽（Label）的釋意與選項的描述，那么清晰準確的語義表達對于用戶來說至關重要，合適的上下文聯系可以讓用戶容易理解設計者的意圖。

3. 提供默認選擇

由「Radio button」的隱喻造成其默認情況下必定有一選中選項，那么將“最安全”或者“用戶最希望的選項”作為默認值變的很關鍵。適合的默認值會增強用戶信心，提高表單完成率。

如果用戶需要跳過該項選擇，那就該在選項中提供一個為“無”的候選項。因為為用戶提供明確的選擇選項比強迫用戶從選項中選擇體驗要好得多。

4. 盡量垂直排列選項

當頁面布局在合理范圍之內，后選項自上而下設計是一種比較優雅的設計方式。即節約橫向設計空間，也讓用戶信息獲取難易度降到最低。

當后選相水平放置時，用戶在掃描選項時可能會遇到問題，很難分辨哪個標簽對應哪個選項，所以「Radio button」的后選項橫向排列不利于用戶掃視信息。

不優雅的設計

如果真的無法避免水平放置，那么選項之間合適的間距設計會變得十分重要，或者通過外觀的設計從視覺上讓用戶得到更好的體驗。

優雅的設計

5. 較大的點擊區域

在衡量交互成本時，目標的大小起著重要作用。單選按鈕本質上很小，很難點擊到它們。嘗試增加目標區域，以便更容易地選擇選項。讓用戶不僅可以通過單擊圓圈來選擇選項，還可以通過單擊文字來選擇。

左：有限的區域可供點擊 右：較大的可點擊區域。

6. 使用「Radio Button」而不是「下拉框」

同樣是用戶完成單選任務的基本組件，「Radio Button」和「下拉框」使用場景略有區別。

在web端場景下，2≤選項≤5時，從操作路徑，用戶獲取信息效率等幾個方面綜合考慮，使用「Radio Button」好過使用「下拉框」。

7. 「Radio Button」在移動場景的樣式變體

移動設備屏幕橫向空間受限，原生形態的「Radio Button」樣式不利于節約空間，所以眾多設計師創造出很多同構異型的組件樣式，這里小編不一一枚舉。但是有一種樣式特別說明下（如圖所示），以按鈕group的樣式來完成用戶單選任務，這里不推薦Antdesign這種選項與選項之間無縫連接的設計方式。因為這么設計會讓用戶產生疑惑：這到底是tab類組件還是單選組件？建議的做法還是選項之間留有適當的空間，讓其有別于tab類組件。

六、關于「Radio Button」的小結

「Radio Button」是構成表單功能的基礎元素之一，合適巧妙的設計它可以讓用戶對表單完成有個很好的心理預期，對提高用戶體驗至關重要。并且在平常的工作設計中，對大廠產品的設計也需要有懷疑精神，并不是所有都是正確優雅的設計。

作者：月亮月六便士；公眾號：月亮體驗設計坊

本文由 @月亮與六便士 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。