一、什么是單選框？

顧名思義，單選框表示只能選擇一個選項，再具體一點，可以理解為只能從一組相互排斥的選項中選擇其中一個選項。

單選框有選中和未選中兩種狀態，樣式上用填充的圓表示選中，描邊的圓表示未選中，通過改變狀態來給用戶反饋。

二、何時使用單選框？

除了單選框，選擇類組件還有很多其他形式，比如下拉列表、復選框等，我們首先來對比區分一下這幾個易混淆的組件。

單選框VS下拉列表

當用戶需要從大量選項中進行選擇時，為了節省空間，可以使用下拉列表代替單選按鈕。但是下拉列表將內容都隱藏在下一層級中，需要用戶多做一次選擇，操作成本和認知成本都會變高。

▲ 當選擇不多于3項，建議使用單選框，這樣選項可以直接展示出來，用戶只需要點擊選擇即可；當選擇超過5項時，可以考慮使用下拉列表，確保選項不會占用大量空間。

單選框VS復選框

復選框允許用戶一次選擇多個選項，選中其中一個選項，不會對其他選項產生影響。對于何時使用單選框還是復選框沒有明確的界定，需要具體問題具體分析。

三、單選框設計指南

始終確保良好的可用性

對于這樣一個簡單的組件，想要做好用好，在設計上有一些不可忽視的細節。

首先要避免在單選框列表中嵌套下一層級的選項，因為使用單選框的目的之一就是為了讓所有選項清晰呈現給用戶，嵌套過多層級會導致整個結構的混亂。

▲ 另外要明確的是，單選按鈕不應該是唯一可點擊的熱區，而是要將按鈕和標簽一起作為熱區，便于用戶準確點擊操作。

▲ 這個選擇模塊由單選按鈕、文字標簽和圖標共同組成，可操作的范圍很大，視覺層次也很清晰，設計得既整潔又實用。

保證可讀性

單選框列表的布局要有邏輯性，盡量減輕用戶的認知負荷。

▲ 用戶習慣于上下瀏覽選項和列表，如果將這些選項水平排布，可能會造成兩點問題：一個是瀏覽時視線移動的不習慣，另一個就是如果選項位置過于緊湊，用戶可能不知道每個標簽到底對應哪個按鈕。

除了列表要垂直布局，標簽也需要很簡潔。標簽越長，用戶需要花費更多的時間和精力才能了解整個列表。

提供默認選擇

想象這樣一個使用場景，我們下載了一個新的設計軟件，第一次打開時跳出一個彈窗，提示我們是選擇經典布局，還是個性化布局，但是我們對這個軟件不是很了解，可能并不清楚這兩個布局到底是什么樣子。

最后

最后為大家精選了單選框設計樣式資源，學習好的單選框設計風格和樣式，獲取最新的設計靈感！

關注公眾號后臺回復【單選框】獲取設計文件。

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》好的單選框設計具備哪些特質？把握住這些知識點！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務