序
這是第二篇，上一篇寫的是《最常見也最基礎(chǔ)的表單設(shè)計(jì)-輸入框》苫幢，身邊朋友看了之后提了些意見访诱，在這先感謝@面包的建議，這篇文章有圖片作加持韩肝。
昨晚輾轉(zhuǎn)難眠触菜，計(jì)劃想用5-6篇把表單的組件全寫了，如果對(duì)于表單設(shè)計(jì)有不同的看法哀峻，歡迎交流涡相。
前言
今天就說(shuō)表單中的第二個(gè)必備元素 - 單選按鈕。
單選按鈕由按鈕和選項(xiàng)組成剩蟀，一個(gè)小小的單選按鈕也是有很多細(xì)節(jié)的催蝗。
目錄
· 為什么叫單選按鈕
· 原則
· 縱向放置單選按鈕
· 按照優(yōu)先級(jí)排序選項(xiàng)
· 容易理解的選項(xiàng)
· 默認(rèn)必須一個(gè)被選中
· 單選按鈕需要更容易點(diǎn)擊
· 必要的視覺反饋
· 有時(shí)復(fù)選框也是不錯(cuò)的解決方案
· 是下拉列表還是單選按鈕？
· 實(shí)操案列
· 最后
為什么叫單選按鈕
單選按鈕又叫[Radio button]育特，為什么是Radio button丙号？按鈕跟收音機(jī)有什么關(guān)系？
單選按鈕這個(gè)行為受早期汽車上收音機(jī)的物理按鈕所影響缰冤，最開始汽車上調(diào)節(jié)收音機(jī)電臺(tái)是通過旋轉(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)性問題爷恳，不然會(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)史隆。
不推薦使用字母序，從一定角度上存在問題曼验。如果是個(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)茨法則)
必要的視覺反饋
單選按鈕這組件看起來(lái)是可點(diǎn)擊的朱监，使用必要的動(dòng)效可在選擇后有清晰的視覺反饋。一個(gè)適當(dāng)?shù)膭?dòng)效會(huì)給用戶帶去微妙的用戶體驗(yàn)原叮。
有時(shí)復(fù)選框也是不錯(cuò)的解決方案
復(fù)選表達(dá)的意思是用來(lái)開啟(關(guān)閉)或選擇(反選)一個(gè)選項(xiàng)赫编，而單選按鈕可以在不同的選項(xiàng)之間切換巡蘸。在兩個(gè)或以上選項(xiàng)且單選的情況下，需采用單選按鈕擂送。只有一個(gè)簡(jiǎn)單的問題悦荒，就可以選擇復(fù)選框。
第一種 多個(gè)選項(xiàng)且單選的情況下：利用單選按鈕的互斥性嘹吨，讓選擇變得清晰搬味。
單選按鈕默認(rèn)選中的選項(xiàng)會(huì)給用戶帶去"是單選"的認(rèn)知。而默認(rèn)選項(xiàng)同時(shí)可以幫助用戶做出最適合的決定蟀拷，還能幫助他們更有信心地使用身腻。
第二種 只有一個(gè)簡(jiǎn)單的問題：比方一個(gè)說(shuō)簡(jiǎn)單的問題，需要回答"是"或“否”時(shí)匹厘，使用復(fù)選框是正確的選擇嘀趟。
是下拉列表還是單選按鈕？
根據(jù)選項(xiàng)的數(shù)量去判斷使用單選按鈕還是下拉列表愈诚。當(dāng)2≤選項(xiàng)個(gè)數(shù)(單選)≤7時(shí)她按，可以使用單選按鈕。因?yàn)閱芜x按鈕比起下拉列表更能減少用戶的認(rèn)知負(fù)擔(dān)炕柔。通過掃描就可以知道有多少選項(xiàng)酌泰，而且選項(xiàng)都是在頁(yè)面上可見的，可以讓用戶對(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)選中“男”(比方通過定量數(shù)據(jù)分析發(fā)現(xiàn)用戶是90%的男性)，若女性用戶如果沒有注意就直接跳過了性別的選擇虑省，但在完成表單提交信息時(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ō)是違背了單選按鈕的原則，但是很巧妙的解決了問題叉寂，那這個(gè)重新設(shè)計(jì)就是有意義的萍启，是解決問題的。
最后
一個(gè)小小的組件(單選按鈕[Radio button])的背后也是有很多可以挖掘的點(diǎn)的屏鳍，在表單組件設(shè)計(jì)中只需要注意那么一點(diǎn)勘纯，那整體的體驗(yàn)也會(huì)提升不止一點(diǎn)。還是那句話：表單只是個(gè)收集用戶信息的方式钓瞭，用戶需要的是高效愉快的完成填寫驳遵。
參考書：《交互設(shè)計(jì)精髓》
以上的觀點(diǎn)從我個(gè)人總結(jié)出發(fā)，雖說(shuō)文筆拙劣山涡，但是如果你有不同的意見堤结，歡迎交流～
文末了流量千萬(wàn)不要浪費(fèi)！老鐵交叉推薦走一波：
