編輯導(dǎo)讀：「Radio Button」是構(gòu)成表單功能的基礎(chǔ)元素之一，合適巧妙的設(shè)計它可以讓用戶對表單完成有個很好的心理預(yù)期，對提高用戶體驗至關(guān)重要。本文作者圍繞Radio Button進(jìn)行了分析，與你分享。

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

一、「Radio button」的含義

1. 「選擇」的概念

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

2. 「Radio button」的隱喻

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

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

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

「Radio button」的定義：從若干個后選項當(dāng)中，完成單選任務(wù)的組件。

「Radio button」的特征：

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

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

三、打爆大廠的狗頭

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

四、「Radio button」的基本狀態(tài)

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

五、「Radio button」的設(shè)計竅門

1. 選項的邏輯順序

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

2. 選項應(yīng)該是全面和清晰的

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

3. 提供默認(rèn)選擇

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

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

4. 盡量垂直排列選項

當(dāng)頁面布局在合理范圍之內(nèi)，后選項自上而下設(shè)計是一種比較優(yōu)雅的設(shè)計方式。即節(jié)約橫向設(shè)計空間，也讓用戶信息獲取難易度降到最低。

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

不優(yōu)雅的設(shè)計

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

優(yōu)雅的設(shè)計

5. 較大的點擊區(qū)域

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

左：有限的區(qū)域可供點擊 右：較大的可點擊區(qū)域。

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

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

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

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

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

六、關(guān)于「Radio Button」的小結(jié)

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

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

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。