編輯導讀：不管是硬件產(chǎn)品還是軟件，選擇控件都是非常常見的組件之一。如何讓這個細節(jié)更出眾呢？本文作者基于自身工作經(jīng)驗，對此展開了分析總結(jié)，希望對你有幫助。

單詞 “toggle” 指的是一個帶有手柄的撥動式開關(guān)，往不同的方向上撥動，可在不同的狀態(tài)之間切換。至于單選框（Radio Button）一詞，最早來自于汽車收音機，通常表盤下面有一組按鈕，可以機械地存儲電臺的預設(shè)，因此用戶可以更快地在不同的電臺之間切換。

多選框（Checkbox）：當有一個或多個獨立選項時，用戶可以選擇任意數(shù)量的選項，包括無、一個或多個選項

單選框（Radio Button）：當存在兩個或多個互斥項中且只能選擇一個選項時使用

撥動開關(guān)（Toggle-Switch）：表示兩種相互對立的狀態(tài)間的切換，多用于觸發(fā)「開/關(guān)」

選擇按鈕（Choice Chips）：是單選框的簡化樣式，通常備選項至少包含2個選項，用戶可以選擇其一

多選按鈕（Multi-select Chips）：是多選框的一種通用樣式，允許用戶選擇多個項，主要用于移動端設(shè)備上各類選擇控件已經(jīng)在UI中存在了很長時間，所以用戶對于它的認知、功能以及行為操作有明確的心理預期和感知。

下面列舉了絕大多數(shù)常見的選擇控件的類型和使用場景：

1. 控件的不同狀態(tài)

單選框、多選框有選中和取消選中兩種狀態(tài)，而撥動開關(guān)則具有開啟和關(guān)閉兩種狀態(tài)，它們都有：默認、選中、激活、禁用、懸停、按下等不同狀態(tài)，這些狀態(tài)覆蓋不同的交互需求和場景，是實現(xiàn)更優(yōu)用戶體驗的基礎(chǔ)。

2. 別忘了【未定狀態(tài)】

對于多選框，通常只存在選中和未選中兩種狀態(tài)。如果涉及到多層級、有父子結(jié)構(gòu)的多選框組時，可能會因為子多選框部分選中、部分未選中，而使得父多選框的狀態(tài)介乎全選和未選擇之間，這種「未定狀態(tài)」容易被忽略。

3. 不要錯用了撥動開關(guān)

不要在涉及多層級、父子級結(jié)構(gòu)的選擇項中使用撥動開關(guān)。它在視覺上不僅分散用戶的注意力，還會給用戶一種錯誤的認知，以為所有子選項都處于開/關(guān)的狀態(tài)。

4. 當功能觸發(fā)即生效時，使用撥動開關(guān)

撥動開關(guān)是標準的數(shù)字化開關(guān)功能，當你使用撥動開關(guān)這種控件時，確保它所觸發(fā)的功能能夠立刻開啟/關(guān)閉。如果不是，那最好使用單個多選框來替代撥動開關(guān)。

5. 避免使用非常規(guī)的控件樣式

避免過大的創(chuàng)新改變控件樣式，切記要符合行業(yè)規(guī)范和用戶的認知，避免帶來額外的學習成本和認知負擔。

6. 在列表中使用便于用戶掃視的排版

左對齊的多選框+標簽的樣式是效果最好的，這確保了用戶可以很快的掃視理解并完成操作，提升效率。將多選框右對齊在移動端上比較有優(yōu)勢 – 單手操作的時候更加容易被選中，也不會因為點擊勾選的時候手指會遮蓋到標簽內(nèi)容，不過標簽文本和多選框不能相隔太遠。

7. 如果垂直排版可用按鈕替代選框

使用多選框垂直排版的問題是視覺上信息的組合和分離，可使用標簽按鈕在視覺上更加清楚地分離選項。

8. 盡可能使用單選框而不是下拉菜單

使選項始終可見，以便于用戶直觀的比較和查看，從而減輕操作負荷，讓表單內(nèi)容更加清晰透明。

9. 使用下拉菜單承載大量/類似選項

如果選項的數(shù)量超過6個，最好還是考慮使用下拉菜單。因為用戶無論如何都無法快速記住并對比所有選項，這同樣適用于大量的、類似的或遞增/遞減的選項，比如：10%、20%、30%…

10. 最好提供一個默認項

通常情況下，一旦用戶選擇某一單選框，就無法取消選中態(tài)并恢復原始狀態(tài)。所以考慮到用戶不愿做出選擇時，應當提供一個【無】的選項，提供默認值并按照邏輯順序組織選項列表，這樣會更好。

11. 使用清晰的文本標簽

在文本標簽中，盡量不要使用否定的表達方式，這樣可以規(guī)避誤解，方便用戶正確理解內(nèi)容。

12. 突出顯示選中態(tài)以吸引用戶的注意

從視覺上區(qū)分所選選項和其他選項，對于數(shù)據(jù)表中顯得尤其重要。

13. 支持批量選擇和清除

對于用戶而言，一次選中和清除多個選項應該是一件簡單輕松的事情，因此需要支持批量選中和清除功能。

14. 確保操作熱區(qū)足夠大

多選框和單選框尺寸通常很小，單擊的時候不容易被【瞄準】，尤其在移動端屏幕上。所以相對較大的觸發(fā)區(qū)域，是確保用戶在移動端上可交互的重要基礎(chǔ)。觸發(fā)熱區(qū)可包含按鈕、文本標簽以及周圍一部分的留白區(qū)域，能讓交互更加輕松。根據(jù)菲茨定律，可點擊區(qū)域的大小和距離對于交互的影響是非常直接的。

本文由 @UX Talk 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議