從四個部分，幫你完全掌握單選框的設計方法

單選框是非常常見的表單元素。它通常被用來從一組互斥的相關選項中選擇一個單獨的選項。當點擊一個未選中的單選框時，它會被選中，其他按鈕則會變成未選中狀態。

發展歷史

單選框的命名（Radio）來源于舊收音機上的物理按鈕，當時被用來在頻率和預置電臺之間切換。當一個按鈕被按下時，所有其他的按鈕都會彈出，使被按下的按鈕成為唯一處于「按下」狀態的按鈕。

該概念后來被用在磁帶錄音機、盒式錄音機以及大名鼎鼎的「隨身聽」上。

計算機出現之后，施樂公司提出了GUI的概念， Xerox Star 8010工作站是第一個在圖形用戶界面上使用單選框的設備。

后來被Apple Lisa，Apple Macintosh以及Microsoft Windows采用，成為了標準的用戶界面組件，一直沿用至今。

何時使用

當用戶需要在一組互斥的選項中進行單一選擇時使用單選框；如果要進行多個選擇，推薦使用多選框。

當選項數目在2-7個之間時使用單選框；如果選項超過7個，推薦使用下拉框。

如果有兩個含義相反的選項，如「同意」和「不同意」，「接受」和「拒絕」等，建議使用一個多選框或者開關。

如果每個選項都有同等的優先級，沒有推薦選項時，使用單選框；如果需要向用戶推薦某個選項，可以使用下拉框。

提供的選項用戶是不是很熟悉？如果用戶看了第一個選項就能預見到所有的內容，如「周一」，那么后邊的選項是「周二到周日」等，這種情況下就不需要將所有的選項都展示出來，可以使用下拉框來簡化界面。

行為交互指南

1. 選項

在設計單選框的選項時，要充分考慮用戶的實際情況，給出的選項要覆蓋到所有的情況。例如，要考慮到用戶不進行選擇的情況，這時需要提供一個「無」的選項。

同樣，給出的選項有可能都不符合用戶的情況，如果所有的選項用戶都可能不會選，就需要提供一個「其它」選項。

所有選項應該滿足「互斥」的原則，因此選項之間要避免存在交集。例如，在一個年齡的選擇設置上，如果提供的選項為「20-30歲」和「30-40歲」，那么如果用戶剛好30歲該如何選擇？

選項覆蓋要全面，不能出現遺漏。如果遺漏某種情況，用戶可能無法進行選擇。例如，在一個年齡的選擇設置上，如果提供的選項為「20-30歲」、「31-40歲」、「40歲以上」，那如果用戶小于20歲該如何選擇？

默認選項

因為單選框代表了一組互斥的選擇，所以默認情況下總是要選擇一個單選項。如果默認情況沒有選擇，當用戶進行選擇之后，就無法返回默認情況，這違反了「可撤銷重做」的交互原則。

將第一個選項作為默認選項，這符合用戶的認知。如果將第二個或其他選項作為默認選項，用戶會以為出現了問題并感到疑惑。這時需要調整選項的順序，確保第一個選項為默認。

因為默認選項總是第一個，因此需要選擇最安全，最有可能的選項作為默認選項，提前預判用戶的操作，提升選擇效率。

選項排序

選項排序會影響用戶操作，因此需要遵守一定原則。一般情況下，按邏輯順序，選擇概率由高到低；或者按照復雜程度排序，由簡單到復雜；也可以按照操作后風險排序，將最安全的操作放在前邊，由風險最低到最高進行排序。

排列對齊方式
默認情況下，推薦豎直排列。豎直排列相對于水平排列而言，容易讀取和定位，可以提高用戶的瀏覽效率，所有的選項進行左對齊，不用受制于選項的標簽文字長短。

但是豎直排列會占用較多的垂直空間，如果垂直空間受限，可以考慮水平排列。水平排列的時候，要注意每個選項之間的間距，間距盡量大一點，要不然用戶會分不清單選按鈕的文字到底是在前邊還是后邊。

交互區域

單選框的面積較小，用戶在點擊的時候會比較困難。可以通過擴大點擊區的交互區域來提高易用性，將標簽文字也設置為可點擊，增加操作區域的面積，方便用戶操作。

文字標簽

每個選項都要配合相應的文字標簽來指示該選項所代表的含義。文字標簽需要簡潔明了，一般使用短語而不是句子，因此不需要以句號來結尾。

盡量保證每個文字標簽用語的表達的一致性，不要出現有的用名詞，有的用動詞的情況。

僅體現每個選項之間的差異，不用重復選項之間相同的部分，將重復部分提出來放在整個選項的上方。

保證選項盡量簡潔，如果需要解釋說明，可以在選項下方使用單獨一行文字。

如果標簽文字無法進行精簡，必須使用多行文字，將單選按鈕與文字頂對齊。

狀態

每個選項都有選中和未選中兩種情況，每種情況對應了3種交互狀態，分別為默認、懸浮和禁用。

以上就是我對單選框的總結，分為定義、發展歷史、使用場景和行為交互四個部分。其中難免有遺漏和錯誤，歡迎大家一起來討論！

更多設計技巧：

歡迎關注作者微信公眾號：「瓦力UX」