大家好谨朝，我是Clippp。今天為大家分享的是「單選框」設(shè)計。組件的功能在于提升可用性字币，幫助用戶輕松做出決策则披。雖然單選框只是一個很簡單的組件，但在設(shè)計上從不缺乏細節(jié)洗出，更不能疏于考慮士复。
一起來看看好的單選框設(shè)計需要具備哪些特點，如何結(jié)合當(dāng)下的使用場景翩活，靈活運用單選框得到最優(yōu)解阱洪。
一、什么是單選框菠镇？
顧名思義冗荸，單選框表示只能選擇一個選項，再具體一點利耍，可以理解為只能從一組相互排斥的選項中選擇其中一個選項蚌本。
單選框有選中和未選中兩種狀態(tài)，樣式上用填充的圓表示選中隘梨，描邊的圓表示未選中程癌，通過改變狀態(tài)來給用戶反饋。
▲?常見的樣式是按鈕在左標(biāo)簽在右出嘹，在結(jié)合特定的場景使用時席楚，兩者的位置可以視情況靈活調(diào)換。
二税稼、何時使用單選框烦秩？
除了單選框，選擇類組件還有很多其他形式郎仆，比如下拉列表只祠、復(fù)選框等，我們首先來對比區(qū)分一下這幾個易混淆的組件扰肌。
單選框VS下拉列表
當(dāng)用戶需要從大量選項中進行選擇時抛寝，為了節(jié)省空間，可以使用下拉列表代替單選按鈕曙旭。但是下拉列表將內(nèi)容都隱藏在下一層級中盗舰，需要用戶多做一次選擇，操作成本和認知成本都會變高桂躏。
▲?當(dāng)選擇不多于3項钻趋，建議使用單選框，這樣選項可以直接展示出來剂习，用戶只需要點擊選擇即可蛮位；當(dāng)選擇超過5項時较沪，可以考慮使用下拉列表，確保選項不會占用大量空間失仁。
單選框VS復(fù)選框
復(fù)選框允許用戶一次選擇多個選項尸曼，選中其中一個選項，不會對其他選項產(chǎn)生影響萄焦。對于何時使用單選框還是復(fù)選框沒有明確的界定控轿，需要具體問題具體分析。
▲?這里提一個使用復(fù)選框時需要注意的小問題楷扬，比如在只有兩個選項時使用復(fù)選框解幽，用戶可能會以為只需要從這兩個選項里面選擇一個，反而造成誤導(dǎo)烘苹。
三躲株、單選框設(shè)計指南
始終確保良好的可用性
對于這樣一個簡單的組件，想要做好用好镣衡，在設(shè)計上有一些不可忽視的細節(jié)霜定。
首先要避免在單選框列表中嵌套下一層級的選項，因為使用單選框的目的之一就是為了讓所有選項清晰呈現(xiàn)給用戶廊鸥，嵌套過多層級會導(dǎo)致整個結(jié)構(gòu)的混亂望浩。
▲?另外要明確的是，單選按鈕不應(yīng)該是唯一可點擊的熱區(qū)惰说，而是要將按鈕和標(biāo)簽一起作為熱區(qū)磨德，便于用戶準(zhǔn)確點擊操作。
▲?這個選擇模塊由單選按鈕吆视、文字標(biāo)簽和圖標(biāo)共同組成典挑，可操作的范圍很大，視覺層次也很清晰啦吧，設(shè)計得既整潔又實用您觉。
保證可讀性
單選框列表的布局要有邏輯性，盡量減輕用戶的認知負荷授滓。
▲?用戶習(xí)慣于上下瀏覽選項和列表琳水，如果將這些選項水平排布，可能會造成兩點問題：一個是瀏覽時視線移動的不習(xí)慣般堆，另一個就是如果選項位置過于緊湊在孝，用戶可能不知道每個標(biāo)簽到底對應(yīng)哪個按鈕。
除了列表要垂直布局淮摔，標(biāo)簽也需要很簡潔浑玛。標(biāo)簽越長，用戶需要花費更多的時間和精才能了解整個列表噩咪。
提供默認選擇
想象這樣一個使用場景顾彰，我們下載了一個新的設(shè)計軟件，第一次打開時跳出一個彈窗胃碾，提示我們是選擇經(jīng)典布局涨享，還是個性化布局，但是我們對這個軟件不是很了解仆百，可能并不清楚這兩個布局到底是什么樣子厕隧。
▲?在這種情況下，最好默認選中其中一個選項俄周，這樣做一方面可以減輕用戶對于選項的糾結(jié)吁讨，另一方面還能有目的地引導(dǎo)用戶使用。
精彩推薦：
