序
這是第二篇，上一篇寫(xiě)的是《最常見(jiàn)也最基礎(chǔ)的表單設(shè)計(jì)-輸入框》，身邊朋友看了之后提了些意見(jiàn)，在這先感謝@面包的建議，這篇文章有圖片作加持。
昨晚輾轉(zhuǎn)難眠，計(jì)劃想用5-6篇把表單的組件全寫(xiě)了，如果對(duì)于表單設(shè)計(jì)有不同的看法，歡迎交流。
前言
今天就說(shuō)表單中的第二個(gè)必備元素 - 單選按鈕。
單選按鈕由按鈕和選項(xiàng)組成，一個(gè)小小的單選按鈕也是有很多細(xì)節(jié)的。
目錄
· 為什么叫單選按鈕
· 原則
· 縱向放置單選按鈕
· 按照優(yōu)先級(jí)排序選項(xiàng)
· 容易理解的選項(xiàng)
· 默認(rèn)必須一個(gè)被選中
· 單選按鈕需要更容易點(diǎn)擊
· 必要的視覺(jué)反饋
· 有時(shí)復(fù)選框也是不錯(cuò)的解決方案
· 是下拉列表還是單選按鈕？
· 實(shí)操案列
· 最后
為什么叫單選按鈕
單選按鈕又叫[Radio button]，為什么是Radio button？按鈕跟收音機(jī)有什么關(guān)系？
單選按鈕這個(gè)行為受早期汽車(chē)上收音機(jī)的物理按鈕所影響，最開(kāi)始汽車(chē)上調(diào)節(jié)收音機(jī)電臺(tái)是通過(guò)旋轉(zhuǎn)按鈕進(jìn)行切換的，但是隨著使用頻率的增加，人們發(fā)現(xiàn)這個(gè)行為在駕駛時(shí)很危險(xiǎn)，之后便進(jìn)行了重新設(shè)計(jì)，把旋轉(zhuǎn)按鈕改變成了6個(gè)合金按鈕組成。每個(gè)合金按鈕都會(huì)預(yù)設(shè)對(duì)應(yīng)一個(gè)電臺(tái)。試想：是不是只要按下一個(gè)按鈕，就可以切換到需要的電臺(tái)呢。
原則
單選按鈕必須是互斥的，這意味著當(dāng)選擇一個(gè)選項(xiàng)時(shí)，之前已選中的選項(xiàng)會(huì)被反選。因?yàn)橛谢コ獾拇嬖冢詥芜x按鈕都是兩個(gè)或以上成組的出現(xiàn)，而且成組內(nèi)只有一個(gè)單選按鈕可以被選中。
縱向放置單選按鈕
在布局上，盡量嘗試垂直放置單選按鈕，每一行放置一個(gè)單選按鈕。
水平放置的單選按鈕在整個(gè)表單中眼動(dòng)掃描的效率會(huì)下降。如果一定要水平放置單選按鈕，一定要注意按鈕和選項(xiàng)間的關(guān)聯(lián)性問(wèn)題，不然會(huì)發(fā)生按鈕和其兩邊的哪一邊選項(xiàng)有關(guān)聯(lián)的誤解，那完成表單的效率就會(huì)大大降低。
確保足夠的空間去水平放置單選按鈕，并將未選擇和已選擇的狀態(tài)做出區(qū)分，這樣就可以正確看清選項(xiàng)。
按照優(yōu)先級(jí)排序選項(xiàng)
按照邏輯的優(yōu)先級(jí)順序?qū)芜x按鈕的選項(xiàng)進(jìn)行排序，比如哪個(gè)選項(xiàng)更有可能被選中，或是最容易理解的選項(xiàng)到最難理解的選項(xiàng)。
不推薦使用字母序，從一定角度上存在問(wèn)題。如果是個(gè)需要適應(yīng)多種語(yǔ)言的Web，那就會(huì)很難本地化(例如：中文的拼音首字母是Z，英文Chinese的首字母C)。
容易理解的選項(xiàng)
設(shè)計(jì)單選按鈕時(shí)需要注意，選項(xiàng)的描述也很重要。一個(gè)模糊的描述很容易產(chǎn)生誤導(dǎo)，會(huì)讓用戶很難決策，雖說(shuō)可以對(duì)應(yīng)標(biāo)簽去理解，但選項(xiàng)描述的文案設(shè)計(jì)同樣也是交互設(shè)計(jì)中很重要的一部分。
默認(rèn)必須一個(gè)被選中
用戶是可以切換和重做選擇的，這個(gè)意味著可以控制這個(gè)單選按鈕恢復(fù)到默認(rèn)狀態(tài)。那就意味著單選按鈕總有一個(gè)是默認(rèn)被選中的。
默認(rèn)被選中的可以是：有商業(yè)目的或大多數(shù)用戶選擇的選項(xiàng)。如果強(qiáng)烈推薦一個(gè)選項(xiàng)，可以加上"推薦"的一個(gè)標(biāo)簽。
當(dāng)用戶此時(shí)不需要在單選按鈕上做出決策時(shí)，可以提供一個(gè)意義為"不選"的選項(xiàng)。提供一個(gè)明確的選項(xiàng)總比強(qiáng)迫用戶做出一個(gè)不準(zhǔn)確的決策會(huì)要好的多。
單選按鈕需要更容易點(diǎn)擊
單選按鈕的按鈕很小，根據(jù)費(fèi)茨定律他將會(huì)很難被點(diǎn)擊。需要增加點(diǎn)擊熱區(qū)的大小，讓用戶不僅僅只能點(diǎn)擊按鈕才可以選擇，點(diǎn)擊選項(xiàng)(詞)也可以觸發(fā)選擇。這樣點(diǎn)擊熱區(qū)的大小就顯得極為重要了。
使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大小（S）有關(guān)。
——Wikipedia(費(fèi)茨法則)
必要的視覺(jué)反饋
單選按鈕這組件看起來(lái)是可點(diǎn)擊的，使用必要的動(dòng)效可在選擇后有清晰的視覺(jué)反饋。一個(gè)適當(dāng)?shù)膭?dòng)效會(huì)給用戶帶去微妙的用戶體驗(yàn)。
有時(shí)復(fù)選框也是不錯(cuò)的解決方案
復(fù)選表達(dá)的意思是用來(lái)開(kāi)啟(關(guān)閉)或選擇(反選)一個(gè)選項(xiàng)，而單選按鈕可以在不同的選項(xiàng)之間切換。在兩個(gè)或以上選項(xiàng)且單選的情況下，需采用單選按鈕。只有一個(gè)簡(jiǎn)單的問(wèn)題，就可以選擇復(fù)選框。
第一種 多個(gè)選項(xiàng)且單選的情況下：利用單選按鈕的互斥性，讓選擇變得清晰。
單選按鈕默認(rèn)選中的選項(xiàng)會(huì)給用戶帶去"是單選"的認(rèn)知。而默認(rèn)選項(xiàng)同時(shí)可以幫助用戶做出最適合的決定，還能幫助他們更有信心地使用。
第二種 只有一個(gè)簡(jiǎn)單的問(wèn)題：比方一個(gè)說(shuō)簡(jiǎn)單的問(wèn)題，需要回答"是"或“否”時(shí)，使用復(fù)選框是正確的選擇。
是下拉列表還是單選按鈕？
根據(jù)選項(xiàng)的數(shù)量去判斷使用單選按鈕還是下拉列表。當(dāng)2≤選項(xiàng)個(gè)數(shù)(單選)≤7時(shí)，可以使用單選按鈕。因?yàn)閱芜x按鈕比起下拉列表更能減少用戶的認(rèn)知負(fù)擔(dān)。通過(guò)掃描就可以知道有多少選項(xiàng)，而且選項(xiàng)都是在頁(yè)面上可見(jiàn)的，可以讓用戶對(duì)每個(gè)選項(xiàng)進(jìn)行對(duì)比。
實(shí)操案列
正如我們一直理解的單選按鈕是圓形的，復(fù)選框是方形的，我們已經(jīng)對(duì)這些養(yǎng)成了習(xí)慣。
在很多地方我們會(huì)看到圓形的復(fù)選框，圖標(biāo)形或TAG形等等的單選按鈕(比如iOS設(shè)置)。即使在外觀上做最大的改變，但是唯一不變的行為——互斥性和默認(rèn)選中一個(gè)，這便構(gòu)成了單選按鈕的原則。
但我們會(huì)在一些地方看到和上文沖突的一個(gè)點(diǎn)：?jiǎn)芜x按鈕默認(rèn)必須一個(gè)被選中。
為什么這么做？
其實(shí)也會(huì)留下很多的思考：假設(shè)根據(jù)默認(rèn)選中“男”(比方通過(guò)定量數(shù)據(jù)分析發(fā)現(xiàn)用戶是90%的男性)，若女性用戶如果沒(méi)有注意就直接跳過(guò)了性別的選擇，但在完成表單提交信息時(shí)也不會(huì)觸發(fā)校驗(yàn)(必填信息且已填)，那收集的信息就會(huì)不正確。
猜想
猜想：是否因?yàn)槭占溯^多的不正確信息，所以對(duì)單選按鈕進(jìn)行了重新設(shè)計(jì)？
默認(rèn)不選中任何一項(xiàng)，需要用戶主動(dòng)去作選擇，在不選的情況也會(huì)在提交時(shí)觸發(fā)校驗(yàn)，告知未對(duì)性別進(jìn)行選擇。但選擇性別后，單選按鈕還是互斥的，雖說(shuō)是違背了單選按鈕的原則，但是很巧妙的解決了問(wèn)題，那這個(gè)重新設(shè)計(jì)就是有意義的，是解決問(wèn)題的。
最后
一個(gè)小小的組件(單選按鈕[Radio button])的背后也是有很多可以挖掘的點(diǎn)的，在表單組件設(shè)計(jì)中只需要注意那么一點(diǎn)，那整體的體驗(yàn)也會(huì)提升不止一點(diǎn)。還是那句話：表單只是個(gè)收集用戶信息的方式，用戶需要的是高效愉快的完成填寫(xiě)。
參考書(shū)：《交互設(shè)計(jì)精髓》
以上的觀點(diǎn)從我個(gè)人總結(jié)出發(fā)，雖說(shuō)文筆拙劣，但是如果你有不同的意見(jiàn)，歡迎交流～
文末了流量千萬(wàn)不要浪費(fèi)！老鐵交叉推薦走一波：
