雷鋒網(wǎng)按：本文譯者@三達(dá)不留點(diǎn)gpj，來源@簡書。

當(dāng)設(shè)計(jì)單選按鈕時(shí)，最重要的是遵循設(shè)計(jì)標(biāo)準(zhǔn)，因?yàn)檫@能增強(qiáng)用戶預(yù)測哪個(gè)選項(xiàng)能做什么和如何操作它。相反地，違反了標(biāo)準(zhǔn)的設(shè)計(jì)會(huì)讓用戶感覺到設(shè)計(jì)界面脆弱，仿佛什么事都有可能沒有警告而發(fā)生。

單選按鈕是表單系統(tǒng)的一個(gè)基本元素。它們被使用在當(dāng)存在互斥的兩個(gè)或多個(gè)選項(xiàng)列表而用戶必須選擇其中一個(gè)時(shí)。換句話說，點(diǎn)選某個(gè)尚未選中的單選按鈕，之前的選擇就會(huì)恢復(fù)成未選中。

正確的使用單選按鈕——它們能夠阻止用戶輸入錯(cuò)誤的數(shù)據(jù)，因?yàn)樗鼈儍H顯示合法的選項(xiàng)。

一、單選按鈕的名字由何而來

單選按鈕的命名源自于舊式汽車中收音機(jī)用來切換頻道的物理按鍵——當(dāng)一個(gè)按鈕被按下，其他的就會(huì)被彈出，留下唯一的按鈕處于被選中的狀態(tài)?，F(xiàn)代軟件中的單選按鈕正是仿照的這些物理按鈕。

二、單選按鈕的最佳實(shí)踐

1、使用單選按鈕僅用來設(shè)置

使用單選按鈕來更改設(shè)置，而不是作為操作按鈕來執(zhí)行命令。同時(shí)，改變的設(shè)置不應(yīng)該在用戶點(diǎn)擊命令按鈕(標(biāo)記為“前進(jìn)”或“保存”為例)前生效。如果用戶點(diǎn)擊返回或取消按鈕，任何在該單選按鈕組所做的更改都應(yīng)該被丟棄而且回到初始狀態(tài)。

如果單選按鈕只被用來影響一個(gè)命令的執(zhí)行，那最好還是用顯示命令的變化來取代。這樣做允許用戶選擇單個(gè)交互的正確命令。

2、選項(xiàng)的邏輯順序

你應(yīng)該將所有選項(xiàng)按邏輯順序擺放，比如按被選中可能性由大到小，按操作難易度由簡單到復(fù)雜，按風(fēng)險(xiǎn)由小到大。字母順序不應(yīng)該受到推崇，因?yàn)樗墙⒃谡Z言的基礎(chǔ)之上不能本地化。

3、選項(xiàng)應(yīng)該是全面的和分明的

單選鈕的最大可用性問題來自于標(biāo)簽?zāi)：?，有誤導(dǎo)性，或描述的選項(xiàng)令普通用戶無法理解。雖然上下文幫助說明可以減少后者的問題，但讓用戶測試任何重要的交互控制仍然是最好的選擇。

4、通常給一個(gè)默認(rèn)選項(xiàng)

UI設(shè)計(jì)的十原則之一告訴我們用戶應(yīng)該能夠取消或重做他們的行為。這意味著通過UI控制應(yīng)該能夠讓用戶回到初始狀態(tài)。在單選按鈕的情況下，這意味著單選按鈕應(yīng)該預(yù)先選擇一個(gè)選項(xiàng)。選擇最安全(防止數(shù)據(jù)丟失或系統(tǒng)訪問)、最穩(wěn)當(dāng)和私有的選項(xiàng)。如果不必考慮安全性，那就選擇最有可能或方便的選項(xiàng)。

如果用戶可能需要避免作出選擇，你應(yīng)該提供一個(gè)選項(xiàng)，比如“沒有”。為用戶提供一個(gè)明確的，中立的默認(rèn)選項(xiàng)比要求的內(nèi)隱行為不是從列表中選擇要好。

5、設(shè)法讓你的選項(xiàng)列表垂直排列

橫向單選按鈕有時(shí)很難瀏覽和布局。單選按鈕的水平安排使它不容易告訴用戶按鈕對應(yīng)的標(biāo)簽：是按鈕前面的還是后面的。垂直排列的按鈕則更佳安全些。

設(shè)法讓你的選項(xiàng)列表垂直排列，每行一個(gè)選項(xiàng)足以。如果你還是需要在一行水平排列多個(gè)選項(xiàng)，請確保按鈕和標(biāo)簽的間距設(shè)計(jì)以清晰地傳達(dá)哪個(gè)選項(xiàng)對應(yīng)哪個(gè)標(biāo)簽。例如，應(yīng)該避免下圖中出現(xiàn)的很難理解第四個(gè)選項(xiàng)對應(yīng)哪個(gè)按鈕的情況：

6、使用標(biāo)簽作為點(diǎn)擊區(qū)域

單選按鈕本身很小，按照菲茲法則，它們很難被點(diǎn)擊或輕拍到。為了擴(kuò)大點(diǎn)擊區(qū)域，不要讓僅僅點(diǎn)擊按鈕本身才有效，點(diǎn)擊標(biāo)簽或相關(guān)詞組同樣有效才對。

好的水平排布的單選按鈕組案例可以在Duolingo app中看到：它們使用一組經(jīng)典的橫向按鈕，在視覺上凸顯出目標(biāo)區(qū)域并且對于觸摸設(shè)備來說足夠大。

7、使用單選按鈕而不是下拉列表

如果可能，就使用單選按鈕而不是下拉列表。單選按鈕認(rèn)知成本低因?yàn)樗阉羞x項(xiàng)可見從而讓用戶很容易比較選擇。

如果你的選擇項(xiàng)少于7個(gè)，你應(yīng)該考慮使用單選按鈕。用戶能夠很快看到有幾個(gè)選項(xiàng)以及每個(gè)選項(xiàng)是什么，而不用點(diǎn)擊或其他操作再去發(fā)現(xiàn)這些信息。

8、避免嵌套

避免嵌套單選按鈕和其他單選按鈕或復(fù)選框。應(yīng)該把所有選項(xiàng)置于同一層級(jí)避免用戶困惑。

9、使用動(dòng)畫和視覺反饋

好的動(dòng)畫讓操作體驗(yàn)感覺到是精心設(shè)計(jì)過的。通過視覺和動(dòng)畫反饋能夠讓人最快的理解輸入信息。

二、復(fù)選框是一個(gè)更好的選擇嗎?

如果只有兩個(gè)選項(xiàng)，你應(yīng)該使用單獨(dú)一個(gè)復(fù)選框取而代之。然而，復(fù)選框只適合針對一個(gè)選項(xiàng)是開啟還是關(guān)閉，單選按鈕則可以被用到完全不同的選項(xiàng)中。

你應(yīng)該記住如下兩種情況，如果兩個(gè)解決方案都有可能：

替代選項(xiàng)

如果復(fù)選框無法完全清晰的表明意義，則使用單選按鈕。在例子中，選項(xiàng)是對立的因此使用單選按鈕是更好的方案。

設(shè)置向?qū)?/span>

你應(yīng)該在向?qū)ы撁嫔鲜褂脝芜x按鈕使選項(xiàng)明確，即使一個(gè)復(fù)選框也是可以接受的。一個(gè)有默認(rèn)值的單選設(shè)計(jì)能給用戶一個(gè)很好的建議。默認(rèn)選項(xiàng)可能引導(dǎo)用戶做出最好的決定，并提升它們在操作過程中的信心。

簡單的是或否的答案

當(dāng)你有一個(gè)簡單的問題而用戶只需回答是或否的時(shí)候，使用復(fù)選框是正確無誤的。

三、結(jié)論

當(dāng)設(shè)計(jì)單選按鈕時(shí)，最重要的是遵循設(shè)計(jì)標(biāo)準(zhǔn)，因?yàn)檫@能增強(qiáng)用戶預(yù)測哪個(gè)選項(xiàng)能做什么和如何操作它。相反地，違反了標(biāo)準(zhǔn)的設(shè)計(jì)會(huì)讓用戶感覺到設(shè)計(jì)界面脆弱，仿佛什么事都有可能沒有警告而發(fā)生。

單選按鈕很容易使用紙上原型測試，所以你不需要實(shí)現(xiàn)任何產(chǎn)出來檢測用戶是否理解該設(shè)計(jì)并正確地使用它。

本文由人人都是產(chǎn)品經(jīng)理授權(quán)雷鋒網(wǎng)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。