單選按鈕是表單中的必備元素。當一個列表里包含兩個以上互斥元素而用戶必須從中擇一時,會使用單選按鈕。簡言之,點擊未選中的按鈕,就會讓之前選中的按鈕變為未選中狀態。
善用單選按鈕能幫助減少用戶錯誤輸入,因為單選按鈕只展示有效選項,并且能夠用鍵盤輔助填寫,還能跨平臺渲染。本文中,我們將討論通過可用性測試的單選按鈕的使用方法。
單選按鈕是如何得名的?
單選按鈕因老式汽車上的收音機物理按鈕而得名的。當其中一個按鈕被按下,另外的按鈕就會彈起,只有被按下的按鈕處于『按下』狀態。軟件的單選按鈕仿照這種物理按鈕產生的。
單選按鈕最佳實踐——僅在設置時使用
使用單選按鈕來改變設置,而不要使用它來傳達命令。同樣的,被改變的設置不應在用戶點擊確定或者執行命令之前的生效。如果用戶點擊了返回或者取消按鈕,單選按鈕中做出的更改應該被放棄而回到原始狀態。
如果單選按鈕是用來觸發命令的,那么最好將要改變的元素放在單選按鈕中。這樣做可以方便用戶一步交互操作就執行正確的命令。
選項按照邏輯順序排列
你應該將所有選項按照一定邏輯排列,比如最容易被選擇的到最不容易被選擇的,最簡單的選項到最復雜的選項,或者最小風險到最大風險。不推薦按照字母表順序因為這種順序和語言本身相關因而各地難以統一。
選項應該易于閱讀并且能被清晰分辨
單選按鈕最大的可用性問題在于描述選項的標簽文案是模糊的,或者讓大部分人難以理解。雖然聯系上下文可以稍稍緩解后一個問題,但是最好還是請用戶來測試交互控件。
總是提供一個默認選項
十大UI啟發式設計方法之一就是允許用戶撤消操作。就是說允許用戶將UI控件設置為其原始狀態。對于單選按鈕來說,就意味著它始終需要有一個默認選項被選中。應該默認選擇最安全(防止數據或系統權限丟失)、最保險和最私密的選項。如果安全和隱私不是要考慮的因素,就默認選中最可能被用戶選擇的那一項。
在用戶不必非要決策的情況下,你應該提供一個標簽為”None”的選項。提供給用戶一個明確的、中立的選項比強迫用戶做出一個不準確的決定要好得多。
你的選項縱向排版
橫向排版的單選表單難以瀏覽。橫向排版還會讓按鈕和標簽的關聯性產生問題——按鈕是和它之前的標簽關聯還是和它之后的標簽關聯?縱向排版的選項列表比較安全。
讓單選按鈕的標簽部分也變得可點擊
單選按鈕很小,因此根據費茨定律,它們很難點擊。為了增大點擊區域,應該讓用戶不僅僅點擊或者輕觸按鈕有效,點擊其標簽也應該有效。讓用戶點擊按鈕或者關聯標簽都能觸發控件。
一款名為Danlingo的應用的橫向單選按鈕設計得不錯:它采用了橫向排列的單選按鈕,但是將點擊態明顯區分出來,并且點擊熱區足夠大滿足觸屏設備的點擊需求。
盡可能使用單選按鈕而非下拉菜單
如果可能,使用單選按鈕而非下拉菜單。單選按鈕有更低的認知負載因為它讓所有可能的選項變得可見,讓用戶更方便對比每個選項。
如果你的選項不多于7項,可以考慮采用單選按鈕。用戶能迅速掃視到底有多少個選項,每個選項是什么,而不需要點擊才能查看詳細信息。
避免嵌套
避免單選和其他單選按鈕或者多選按鈕嵌套。應該讓各個選項在同一層級來避免混淆。
使用動畫或者視覺反饋
設計良好的動畫給人一種精巧的體驗。像單選按鈕這種界面元素應該看起來可觸碰,即便單選按鈕被放在一層玻璃后。視覺動效引導讓人感知其是可輸入的,并且在輸入后呈現清晰的視覺反饋。

復選框會是更好的選擇嗎?
如果只有一個選項,你可能會選擇復選框。但是復選框僅僅是用來開啟或者關閉某個單一選項,而單選按鈕可以在不同的選項之間切換。
你應該記住單選按鈕的使用情況:
可選。如果復選框無法完全表意時,采用單選按鈕。如下面的例子,選項是互斥的,因此選用單選按鈕比較好。
安裝向導。在安裝向導上使用單選按鈕讓互斥的選擇變得清晰。單選按鈕的默認狀態對用戶來說是一個重要建議。默認選項可以幫助用戶做出最適合的決定,還可能幫助他們更有信心地使用。
簡單的對或錯。如果用戶對或錯來回答這個問題,那么可以采用復選框。
結論
當設計單選按鈕時,最終要的是要遵循設計標準,保證用戶能預期這個控件的作用以及如何使用它。相反得,違背標準讓用戶界面脆弱,好像任何無預期的改變都會在界面上發生。
細致地設計。單選按鈕可以用紙上原型法來測試,因此你不用為了測驗單選控件的可用性進行任何開發實現。