單選按鈕是表單中的必備元素。當(dāng)一個(gè)列表里包含兩個(gè)以上互斥元素而用戶必須從中擇一時(shí)锋谐，會(huì)使用單選按鈕遍尺。簡(jiǎn)言之，點(diǎn)擊未選中的按鈕涮拗，就會(huì)讓之前選中的按鈕變?yōu)槲催x中狀態(tài)乾戏。

常見的單選按鈕

善用單選按鈕能幫助減少用戶錯(cuò)誤輸入，因?yàn)閱芜x按鈕只展示有效選項(xiàng)三热，并且能夠用鍵盤輔助填寫歧蕉，還能跨平臺(tái)渲染。本文中康铭，我們將討論通過可用性測(cè)試的單選按鈕的使用方法惯退。

只有一個(gè)按鈕可以被按下

單選按鈕是如何得名的？

單選按鈕因老式汽車上的收音機(jī)物理按鈕而得名的从藤。當(dāng)其中一個(gè)按鈕被按下催跪，另外的按鈕就會(huì)彈起锁蠕，只有被按下的按鈕處于『按下』狀態(tài)。軟件的單選按鈕仿照這種物理按鈕產(chǎn)生的懊蒸。

單選按鈕最佳實(shí)踐——僅在設(shè)置時(shí)使用

使用單選按鈕來改變?cè)O(shè)置荣倾，而不要使用它來傳達(dá)命令。同樣的骑丸，被改變的設(shè)置不應(yīng)在用戶點(diǎn)擊確定或者執(zhí)行命令之前的生效舌仍。如果用戶點(diǎn)擊了返回或者取消按鈕，單選按鈕中做出的更改應(yīng)該被放棄而回到原始狀態(tài)通危。
如果單選按鈕是用來觸發(fā)命令的铸豁，那么最好將要改變的元素放在單選按鈕中。這樣做可以方便用戶一步交互操作就執(zhí)行正確的命令菊碟。

用戶只需一步就能完成操作

選項(xiàng)按照邏輯順序排列

你應(yīng)該將所有選項(xiàng)按照一定邏輯排列节芥，比如最容易被選擇的到最不容易被選擇的，最簡(jiǎn)單的選項(xiàng)到最復(fù)雜的選項(xiàng)逆害，或者最小風(fēng)險(xiǎn)到最大風(fēng)險(xiǎn)头镊。不推薦按照字母表順序因?yàn)檫@種順序和語(yǔ)言本身相關(guān)因而各地難以統(tǒng)一。

選項(xiàng)應(yīng)該易于閱讀并且能被清晰分辨

單選按鈕最大的可用性問題在于描述選項(xiàng)的標(biāo)簽文案是模糊的魄幕，或者讓大部分人難以理解相艇。雖然聯(lián)系上下文可以稍稍緩解后一個(gè)問題，但是最好還是請(qǐng)用戶來測(cè)試交互控件纯陨。

總是提供一個(gè)默認(rèn)選項(xiàng)

十大UI啟發(fā)式設(shè)計(jì)方法之一就是允許用戶撤消操作坛芽。就是說允許用戶將UI控件設(shè)置為其原始狀態(tài)。對(duì)于單選按鈕來說队丝，就意味著它始終需要有一個(gè)默認(rèn)選項(xiàng)被選中靡馁。應(yīng)該默認(rèn)選擇最安全（防止數(shù)據(jù)或系統(tǒng)權(quán)限丟失）、最保險(xiǎn)和最私密的選項(xiàng)机久。如果安全和隱私不是要考慮的因素臭墨，就默認(rèn)選中最可能被用戶選擇的那一項(xiàng)。

在用戶不必非要決策的情況下膘盖，你應(yīng)該提供一個(gè)標(biāo)簽為”None”的選項(xiàng)胧弛。提供給用戶一個(gè)明確的、中立的選項(xiàng)比強(qiáng)迫用戶做出一個(gè)不準(zhǔn)確的決定要好得多侠畔。

需要默認(rèn)選項(xiàng)

你的選項(xiàng)縱向排版

橫向排版的單選表單難以瀏覽结缚。橫向排版還會(huì)讓按鈕和標(biāo)簽的關(guān)聯(lián)性產(chǎn)生問題——按鈕是和它之前的標(biāo)簽關(guān)聯(lián)還是和它之后的標(biāo)簽關(guān)聯(lián)？縱向排版的選項(xiàng)列表比較安全软棺。

讓單選按鈕的標(biāo)簽部分也變得可點(diǎn)擊

單選按鈕很小红竭，因此根據(jù)費(fèi)茨定律，它們很難點(diǎn)擊。為了增大點(diǎn)擊區(qū)域茵宪，應(yīng)該讓用戶不僅僅點(diǎn)擊或者輕觸按鈕有效最冰，點(diǎn)擊其標(biāo)簽也應(yīng)該有效。讓用戶點(diǎn)擊按鈕或者關(guān)聯(lián)標(biāo)簽都能觸發(fā)控件稀火。

左：只有按鈕部分可點(diǎn)暖哨；右：更大的點(diǎn)擊區(qū)域

一款名為Danlingo的應(yīng)用的橫向單選按鈕設(shè)計(jì)得不錯(cuò)：它采用了橫向排列的單選按鈕，但是將點(diǎn)擊態(tài)明顯區(qū)分出來凰狞，并且點(diǎn)擊熱區(qū)足夠大滿足觸屏設(shè)備的點(diǎn)擊需求篇裁。

好的案例：橫排版的單選按鈕

盡可能使用單選按鈕而非下拉菜單

如果可能，使用單選按鈕而非下拉菜單赡若。單選按鈕有更低的認(rèn)知負(fù)載因?yàn)樗屗锌赡艿倪x項(xiàng)變得可見达布，讓用戶更方便對(duì)比每個(gè)選項(xiàng)。
如果你的選項(xiàng)不多于7項(xiàng)斩熊，可以考慮采用單選按鈕往枣。用戶能迅速掃視到底有多少個(gè)選項(xiàng)伐庭，每個(gè)選項(xiàng)是什么粉渠，而不需要點(diǎn)擊才能查看詳細(xì)信息。

避免嵌套

避免單選和其他單選按鈕或者多選按鈕嵌套圾另。應(yīng)該讓各個(gè)選項(xiàng)在同一層級(jí)來避免混淆霸株。

嵌套增加額外復(fù)雜度

使用動(dòng)畫或者視覺反饋

設(shè)計(jì)良好的動(dòng)畫給人一種精巧的體驗(yàn)。像單選按鈕這種界面元素應(yīng)該看起來可觸碰集乔，即便單選按鈕被放在一層玻璃后去件。視覺動(dòng)效引導(dǎo)讓人感知其是可輸入的，并且在輸入后呈現(xiàn)清晰的視覺反饋扰路。

單選按鈕動(dòng)效

復(fù)選框會(huì)是更好的選擇嗎尤溜？

如果只有一個(gè)選項(xiàng)，你可能會(huì)選擇復(fù)選框汗唱。但是復(fù)選框僅僅是用來開啟或者關(guān)閉某個(gè)單一選項(xiàng)宫莱，而單選按鈕可以在不同的選項(xiàng)之間切換。

你應(yīng)該記住單選按鈕的使用情況：
可選哩罪。如果復(fù)選框無法完全表意時(shí)授霸，采用單選按鈕。如下面的例子际插，選項(xiàng)是互斥的碘耳，因此選用單選按鈕比較好。

選擇橫屏還是豎屏

安裝向?qū)А?/strong>在安裝向?qū)鲜褂脝芜x按鈕讓互斥的選擇變得清晰框弛。單選按鈕的默認(rèn)狀態(tài)對(duì)用戶來說是一個(gè)重要建議辛辨。默認(rèn)選項(xiàng)可以幫助用戶做出最適合的決定，還可能幫助他們更有信心地使用。

默認(rèn)選項(xiàng)代表著重要建議斗搞，可以進(jìn)一步在其后加上『推薦』

簡(jiǎn)單的對(duì)或錯(cuò)绞蹦。如果用戶對(duì)或錯(cuò)來回答這個(gè)問題，那么可以采用復(fù)選框榜旦。

簡(jiǎn)單的對(duì)錯(cuò)問題可以采用復(fù)選框控件

結(jié)論

當(dāng)設(shè)計(jì)單選按鈕時(shí)幽七，最終要的是要遵循設(shè)計(jì)標(biāo)準(zhǔn)，保證用戶能預(yù)期這個(gè)控件的作用以及如何使用它溅呢。相反得澡屡，違背標(biāo)準(zhǔn)讓用戶界面脆弱，好像任何無預(yù)期的改變都會(huì)在界面上發(fā)生咐旧。
細(xì)致地設(shè)計(jì)驶鹉。單選按鈕可以用紙上原型法來測(cè)試，因此你不用為了測(cè)驗(yàn)單選控件的可用性進(jìn)行任何開發(fā)實(shí)現(xiàn)铣墨。

原文鏈接