品牌行銷策略，產品行銷與設計，各類型行銷推廣案例分享-品牌行銷點點讚
編輯導讀：不管是硬件產品還是軟件，選擇控件都是非常常見的組件之一。如何讓這個細節更出眾呢？本文作者基于自身工作經驗，對此展開了分析總結，希望對你有幫助。
單詞 “toggle” 指的是一個帶有手柄的撥動式開關，往不同的方向上撥動，可在不同的狀態之間切換。至于單選框（Radio Button）一詞，最早來自于汽車收音機，通常表盤下面有一組按鈕，可以機械地存儲電臺的預設，因此用戶可以更快地在不同的電臺之間切換。
多選框（Checkbox）：當有一個或多個獨立選項時，用戶可以選擇任意數量的選項，包括無、一個或多個選項
單選框（Radio Button）：當存在兩個或多個互斥項中且只能選擇一個選項時使用
撥動開關（Toggle-Switch）：表示兩種相互對立的狀態間的切換，多用于觸發「開/關」
選擇按鈕（Choice Chips）：是單選框的簡化樣式，通常備選項至少包含2個選項，用戶可以選擇其一
多選按鈕（Multi-select Chips）：是多選框的一種通用樣式，允許用戶選擇多個項，主要用于移動端設備上各類選擇控件已經在UI中存在了很長時間，所以用戶對于它的認知、功能以及行為操作有明確的心理預期和感知。
下面列舉了絕大多數常見的選擇控件的類型和使用場景：
1. 控件的不同狀態
單選框、多選框有選中和取消選中兩種狀態，而撥動開關則具有開啟和關閉兩種狀態，它們都有：默認、選中、激活、禁用、懸停、按下等不同狀態，這些狀態覆蓋不同的交互需求和場景，是實現更優用戶體驗的基礎。
2. 別忘了【未定狀態】
對于多選框，通常只存在選中和未選中兩種狀態。如果涉及到多層級、有父子結構的多選框組時，可能會因為子多選框部分選中、部分未選中，而使得父多選框的狀態介乎全選和未選擇之間，這種「未定狀態」容易被忽略。
3. 不要錯用了撥動開關
不要在涉及多層級、父子級結構的選擇項中使用撥動開關。它在視覺上不僅分散用戶的注意力，還會給用戶一種錯誤的認知，以為所有子選項都處于開/關的狀態。
4. 當功能觸發即生效時，使用撥動開關
撥動開關是標準的數字化開關功能，當你使用撥動開關這種控件時，確保它所觸發的功能能夠立刻開啟/關閉。如果不是，那最好使用單個多選框來替代撥動開關。
5. 避免使用非常規的控件樣式
避免過大的創新改變控件樣式，切記要符合行業規范和用戶的認知，避免帶來額外的學習成本和認知負擔。
6. 在列表中使用便于用戶掃視的排版
左對齊的多選框+標簽的樣式是效果最好的，這確保了用戶可以很快的掃視理解并完成操作，提升效率。將多選框右對齊在移動端上比較有優勢 – 單手操作的時候更加容易被選中，也不會因為點擊勾選的時候手指會遮蓋到標簽內容，不過標簽文本和多選框不能相隔太遠。
7. 如果垂直排版可用按鈕替代選框
使用多選框垂直排版的問題是視覺上信息的組合和分離，可使用標簽按鈕在視覺上更加清楚地分離選項。
8. 盡可能使用單選框而不是下拉菜單
使選項始終可見，以便于用戶直觀的比較和查看，從而減輕操作負荷，讓表單內容更加清晰透明。
9. 使用下拉菜單承載大量/類似選項
如果選項的數量超過6個，最好還是考慮使用下拉菜單。因為用戶無論如何都無法快速記住并對比所有選項，這同樣適用于大量的、類似的或遞增/遞減的選項，比如：10%、20%、30%…
10. 最好提供一個默認項
通常情況下，一旦用戶選擇某一單選框，就無法取消選中態并恢復原始狀態。所以考慮到用戶不愿做出選擇時，應當提供一個【無】的選項，提供默認值并按照邏輯順序組織選項列表，這樣會更好。
11. 使用清晰的文本標簽
在文本標簽中，盡量不要使用否定的表達方式，這樣可以規避誤解，方便用戶正確理解內容。
12. 突出顯示選中態以吸引用戶的注意
從視覺上區分所選選項和其他選項，對于數據表中顯得尤其重要。
13. 支持批量選擇和清除
對于用戶而言，一次選中和清除多個選項應該是一件簡單輕松的事情，因此需要支持批量選中和清除功能。
14. 確保操作熱區足夠大
多選框和單選框尺寸通常很小，單擊的時候不容易被【瞄準】，尤其在移動端屏幕上。所以相對較大的觸發區域，是確保用戶在移動端上可交互的重要基礎。觸發熱區可包含按鈕、文本標簽以及周圍一部分的留白區域，能讓交互更加輕松。根據菲茨定律，可點擊區域的大小和距離對于交互的影響是非常直接的。
本文由 @UX Talk 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議