沒人帶，自學(xué)慢，不在BAT怎么學(xué)產(chǎn)品？人人都是產(chǎn)品經(jīng)理聯(lián)合200+BAT資深產(chǎn)品經(jīng)理帶你學(xué)點此查看詳情

單選框是表單組成的重要元素之一，看似簡單，想做好用戶體驗還有很多細(xì)節(jié)值得推敲。今天這篇譯文總結(jié)了10個幫你做出優(yōu)秀體驗單選框的技巧，一起來收。

它往往應(yīng)用于列表中兩個或兩個以上互斥的選項，用戶必須從中至少選定一個。換句話說，如果你選中一個選項，另一個先前被選中的選項會自動變成未選中的狀態(tài)。

通用的單選框控件

當(dāng)我們正確使用單選框時，它往往有杰出的表現(xiàn)—它可以防止用戶輸入錯誤的信息，因為它只展示合乎邏輯的選項，并且可以通過鍵盤切換不同選項。本文我們將重點討論單選框在可用性測試中的實踐規(guī)范。

單選框的名字由來

單選框的名字來源于老式汽車上用于切換廣播電臺頻道的物理按鈕－－當(dāng)按下其中一個按鈕，其他按鈕會彈起，被按下的按鈕被置于“推進去”的狀態(tài)。軟件中的單選框正是對這些物理電臺按鈕的模仿。

　單選框的好實踐

將單選框只用于設(shè)置

我們應(yīng)使用單選框更改設(shè)置，而不是像使用行動按鈕那樣來執(zhí)行命令。另外，直到用戶點擊行動按鈕（例如“繼續(xù)”或“保存”等）被更改的設(shè)置才可生效。如果用戶點擊“返回”或“取消”按鈕，該頁面應(yīng)恢復(fù)初始狀態(tài)，此時任何應(yīng)用了單選框的設(shè)置都會被清空。

如果單選框用于行動決策，最好的處理方式是提前設(shè)計好不同的命令選項，這樣用戶可只需要一次簡單的交互即可完成正確的選擇。

單擊一下相應(yīng)的輸入選項即可完成

設(shè)計合理的選項順序

我們應(yīng)按一定邏輯給選項設(shè)計合理的排列順序，比如，根據(jù)發(fā)生的可能性、難易程度、風(fēng)險大小來排序。需要注意的是，一般不推薦根據(jù)首字母排序的方法，因為這種方法太依賴語言且不合邏輯。

選項應(yīng)該易于理解且容易區(qū)分

單選框存在的一個大可用性問題是選項中包含模糊、誤導(dǎo)、難懂的內(nèi)容，用戶一般很難理解。幫助文本可以減輕這個問題，但最好還是可以使用戶可以任意嘗試任一交互控件。

始終提供一個默認(rèn)的選項

UI設(shè)計中的10項啟發(fā)式評估原則認(rèn)為，用戶可隨時撤銷他們的行為，這意味著應(yīng)該讓他們易于把UI控件恢復(fù)到原始狀態(tài)。這條準(zhǔn)則反映在單選框上，體現(xiàn)在至少有一個風(fēng)險最小的選項要預(yù)先被選中（為防止數(shù)據(jù)丟失）。如果不考慮安全性這個主要因素，也可以把最易發(fā)生或最便捷的選項作為默認(rèn)選項。

如果用戶并不想做出明確的選擇，我們應(yīng)該為此提供選項，比如“none”。為用戶預(yù)先選定一個清楚中立的選項好過讓他們從列表中尋找含義不明的選項做出選擇。

垂直展示列表

水平排列的單選框選項不易于用戶快速瀏覽定位。而且水平排列的形式使用戶難以對應(yīng)各選項的內(nèi)容，無法區(qū)分選中的是前一個還是后一個。所以垂直排列的設(shè)計方法是最安全的。

盡量保持垂直排列列表項，并且每行只有一個選項。如果你仍需要在一行內(nèi)水平放置多個選項，請確保利用空間分隔按鈕和標(biāo)簽，這樣每個選擇按鈕所對應(yīng)的標(biāo)簽就清晰了。比如，你應(yīng)該避免以下情況：這個例子很難分辨選擇選項4應(yīng)該單擊那個按鈕。

反例：水平的單選框

將整個標(biāo)簽選項作為點擊區(qū)域

單選框所占空間很小，所以，根據(jù)菲茨定律，它們很難被點擊。為了擴大點擊區(qū)域，我們應(yīng)讓用戶不僅能點擊那個圓點，還可以點擊整個選項。用戶可以通過點擊圓點和跟隨其后的選項完成選擇。

左邊：僅有紅色虛線的部分可點 右邊：點擊區(qū)域更大

在多鄰國app中，水平排列的單選框得到了很好的應(yīng)用：設(shè)計師采用了傳統(tǒng)的水平對齊方式，通過視覺手法把選項設(shè)計的清楚分明，又?jǐn)U大了點擊區(qū)域，更適用于在觸控設(shè)備上操作。

水平單選框的優(yōu)秀范例

使用單選框代替下拉列表

如果可能的話，使用單選框代替下拉列表菜單。單選框的認(rèn)知負(fù)荷很低，因為它的每個選項是可視的，所以用戶可以容易比較。

如果選項少于7個，應(yīng)考慮使用單選框。用戶可以不需要任何點擊或輸入操作即可快速瀏覽選項的數(shù)量以及每個選項的內(nèi)容。

左邊：下拉列表中的性別 右邊：單選框中的性別

避免嵌套

使用單選框時應(yīng)盡量避免與其他單選框或checkbox嵌套。應(yīng)使所有選項保持平級以避免用戶混淆。

使用嵌套的單選框增加了復(fù)雜度

使用動效和視覺反饋

良好的動效設(shè)計使ux體驗更加精致。例如在用戶界面中像單選框這種元素的動效應(yīng)該更吸引眼球。視覺和動效的應(yīng)用－例如增加清晰度，可以使用戶對界面的輸入效果立竿見影。

使用復(fù)選框的效果更好？

如果只有兩個選項，我們可以使用復(fù)選框。但是，復(fù)選框只適用于打開或關(guān)閉一個選項，而單選框可以用于完全不同的選擇。

復(fù)選框控件

如果兩種設(shè)計方案都可用，你應(yīng)該牢記以下不同的情況：

選擇：

當(dāng)清晰的checkbox表達的含義不夠明確時，可以使用單選框。在下面的例子里，兩個選項意思相反，所以使用單選框的效果更好。

給文件選擇排列方式（橫向或縱向）

向?qū)В?/p>

在一個向?qū)ы撁嫔希词箯?fù)選框是可用的，我們?nèi)匀恍枰褂脝芜x框來區(qū)分兩個不同的選項。默認(rèn)被選中的單選框設(shè)計可以為用戶提供明確的建議。默認(rèn)的選項可以引導(dǎo)用戶做出好選擇，并增強他們繼續(xù)完成任務(wù)的信心。

如果系統(tǒng)強推某個選項，可以在選項旁增加“推薦”的標(biāo)簽 范例：DROPBOX

簡單的回答“是”或“否”：

當(dāng)用戶面對一個簡單的問題，例如只需回答“是”還是“否”，此時使用復(fù)選框是正確的選擇。

結(jié)語

當(dāng)我們設(shè)計單選框時，遵循設(shè)計標(biāo)準(zhǔn)很重要，因為這會培養(yǎng)用戶預(yù)知一個控件會起到什么作用、并且如何操作的能力。相反，違反設(shè)計標(biāo)準(zhǔn)會影響用戶界面的可信度－－好比如果沒有警示信息，任何可怕的事都會發(fā)生。

設(shè)計時需用點心。單選框很容易通過紙面原型測試，如果用戶可以理解這個控件并能正確使用，你幾乎不需要費多大力就可知道效果。

文章名稱：想做好單選框的用戶體驗,這兒有10個技巧可以幫你
標(biāo)題來源：http://jinyejixie.com/news23/46223.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站維護、用戶體驗等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)