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

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

1. 「選擇」的概念

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

2. 「Radio button」的隐喻

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

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

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

「Radio button」的特征：

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

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

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

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

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

作者：月亮月六便士；公衆号：月亮體驗設計坊

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

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!