選擇控件:UX設計細節

0 評論 12101 瀏覽 98 收藏 9 分鐘

編輯導讀:不管是硬件產品還是軟件,選擇控件都是非常常見的組件之一。如何讓這個細節更出眾呢?本文作者基于自身工作經驗,對此展開了分析總結,希望對你有幫助。

單詞 “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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!