1
| 本文作者： 人人都是產品經理 | 2016-06-07 08:04 |
雷鋒網按：本文譯者@三達不留點gpj，來源@簡書。
當設計單選按鈕時，最重要的是遵循設計標準，因為這能增強用戶預測哪個選項能做什么和如何操作它。相反地，違反了標準的設計會讓用戶感覺到設計界面脆弱，仿佛什么事都有可能沒有警告而發生。
單選按鈕是表單系統的一個基本元素。它們被使用在當存在互斥的兩個或多個選項列表而用戶必須選擇其中一個時。換句話說，點選某個尚未選中的單選按鈕，之前的選擇就會恢復成未選中。
正確的使用單選按鈕——它們能夠阻止用戶輸入錯誤的數據，因為它們僅顯示合法的選項。
單選按鈕的命名源自于舊式汽車中收音機用來切換頻道的物理按鍵——當一個按鈕被按下，其他的就會被彈出，留下唯一的按鈕處于被選中的狀態。現代軟件中的單選按鈕正是仿照的這些物理按鈕。
使用單選按鈕來更改設置，而不是作為操作按鈕來執行命令。同時，改變的設置不應該在用戶點擊命令按鈕(標記為“前進”或“保存”為例)前生效。如果用戶點擊返回或取消按鈕，任何在該單選按鈕組所做的更改都應該被丟棄而且回到初始狀態。
如果單選按鈕只被用來影響一個命令的執行，那最好還是用顯示命令的變化來取代。這樣做允許用戶選擇單個交互的正確命令。
2、選項的邏輯順序
你應該將所有選項按邏輯順序擺放，比如按被選中可能性由大到小，按操作難易度由簡單到復雜，按風險由小到大。字母順序不應該受到推崇，因為它是建立在語言的基礎之上不能本地化。
單選鈕的最大可用性問題來自于標簽模糊，有誤導性，或描述的選項令普通用戶無法理解。雖然上下文幫助說明可以減少后者的問題，但讓用戶測試任何重要的交互控制仍然是最好的選擇。
UI設計的十原則之一告訴我們用戶應該能夠取消或重做他們的行為。這意味著通過UI控制應該能夠讓用戶回到初始狀態。在單選按鈕的情況下，這意味著單選按鈕應該預先選擇一個選項。選擇最安全(防止數據丟失或系統訪問)、最穩當和私有的選項。如果不必考慮安全性，那就選擇最有可能或方便的選項。
如果用戶可能需要避免作出選擇，你應該提供一個選項，比如“沒有”。為用戶提供一個明確的，中立的默認選項比要求的內隱行為不是從列表中選擇要好。
5、設法讓你的選項列表垂直排列
橫向單選按鈕有時很難瀏覽和布局。單選按鈕的水平安排使它不容易告訴用戶按鈕對應的標簽：是按鈕前面的還是后面的。垂直排列的按鈕則更佳安全些。
設法讓你的選項列表垂直排列，每行一個選項足以。如果你還是需要在一行水平排列多個選項，請確保按鈕和標簽的間距設計以清晰地傳達哪個選項對應哪個標簽。例如，應該避免下圖中出現的很難理解第四個選項對應哪個按鈕的情況：
6、使用標簽作為點擊區域
單選按鈕本身很小，按照菲茲法則，它們很難被點擊或輕拍到。為了擴大點擊區域，不要讓僅僅點擊按鈕本身才有效，點擊標簽或相關詞組同樣有效才對。
好的水平排布的單選按鈕組案例可以在Duolingo app中看到：它們使用一組經典的橫向按鈕，在視覺上凸顯出目標區域并且對于觸摸設備來說足夠大。
7、使用單選按鈕而不是下拉列表
如果可能，就使用單選按鈕而不是下拉列表。單選按鈕認知成本低因為它把所有選項可見從而讓用戶很容易比較選擇。
如果你的選擇項少于7個，你應該考慮使用單選按鈕。用戶能夠很快看到有幾個選項以及每個選項是什么，而不用點擊或其他操作再去發現這些信息。
8、避免嵌套
避免嵌套單選按鈕和其他單選按鈕或復選框。應該把所有選項置于同一層級避免用戶困惑。
9、使用動畫和視覺反饋
好的動畫讓操作體驗感覺到是精心設計過的。通過視覺和動畫反饋能夠讓人最快的理解輸入信息。
如果只有兩個選項，你應該使用單獨一個復選框取而代之。然而，復選框只適合針對一個選項是開啟還是關閉，單選按鈕則可以被用到完全不同的選項中。
你應該記住如下兩種情況，如果兩個解決方案都有可能：
如果復選框無法完全清晰的表明意義，則使用單選按鈕。在例子中，選項是對立的因此使用單選按鈕是更好的方案。
設置向導
你應該在向導頁面上使用單選按鈕使選項明確，即使一個復選框也是可以接受的。一個有默認值的單選設計能給用戶一個很好的建議。默認選項可能引導用戶做出最好的決定，并提升它們在操作過程中的信心。
簡單的是或否的答案
當你有一個簡單的問題而用戶只需回答是或否的時候，使用復選框是正確無誤的。
當設計單選按鈕時，最重要的是遵循設計標準，因為這能增強用戶預測哪個選項能做什么和如何操作它。相反地，違反了標準的設計會讓用戶感覺到設計界面脆弱，仿佛什么事都有可能沒有警告而發生。
單選按鈕很容易使用紙上原型測試，所以你不需要實現任何產出來檢測用戶是否理解該設計并正確地使用它。
本文由人人都是產品經理授權雷鋒網發布，未經許可，禁止轉載。
雷峰網原創文章，未經授權禁止轉載。詳情見轉載須知。
