選擇控件:UX設計細節
編輯導讀:不管是硬件產品還是軟件,選擇控件都是非常常見的組件之一。如何讓這個細節更出眾呢?本文作者基于自身工作經驗,對此展開了分析總結,希望對你有幫助。
單詞 “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 協議
- 目前還沒評論,等你發揮!