起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識7個案例解析：復選框 vs 切換開關
本文是在一些設計表單體驗時，決定這兩個控件之間的指導性原則和案例分享。
7個表單設計案例：
用戶界面設計中的切換鍵和復選框
表單提供了幾個可以更輕松收集用戶輸入的控件，設計表格時，在正確的位置使用正確的控件是一項挑戰。
復選框控件有三種狀態：unselected（非勾選態）、selected（勾選態）和indeterminate（未確定態）。最后一個狀態代表子選項列表，在父選項下分組且子選項處于勾選態和未勾選態之間的情況。
切換開關代表允許用戶打開或關閉物體的物理開關，如燈的開關。點擊切換開關需要兩個操作步驟：選擇和執行，但復選框只有一個選項，其執行通常需要另一個控件。在選中復選框和切換開關控件之間時，最好關注使用的環境而不是其功能。
下面是一些在設計表單體驗時決定這兩個控件之間的指導性原則和案例分享。
案例1：即時回復
使用切換開關
- 應用設置的立即響應是無需明確操作的。
- 設置需要打開/關閉或顯示/隱藏功能才能顯示結果。
- 用戶需要執行不需要審核或確認的即時操作。
如果需要即時響應的選項最好選擇使用切換開關
案例2：設置確認
使用復選框時
- 應用設置需要在提交之前由用戶確認和審核。
- 在顯示結果前，設置定義需要執行提交、確定、下一步、等應用操作。
- 用戶必須執行其他步驟才能使更改生效。
如果需要顯式操作來應用設置，則首選復選框
案例3：多項選擇
使用復選框時
- 有多個選項可供使用，用戶必須從中選擇一個或多個選項。
- 逐個單擊多個切換開關，每次單擊后等待查看結果是需要額外的時間。
在列表中選擇多個選項，復選框能提供更好的體驗
案例4：不確定狀態
使用復選框時
- 當多個子選項在父選項下分組時，需要中間選擇狀態。中間狀態表示在列表中選擇了多個子選項（但不是全部）。
使用復選框最好地顯示不確定狀態
案例5：清晰的視覺狀態
使用復選框時
- 有可能與切換開關的開/關狀態混淆。有時很難理解開關是顯示狀態還是動作。
- 需要提供明確的勾選狀態或未勾選狀態。
有時切換開關不能清晰地顯示它是狀態還是動作
案例6：相關項目
使用復選框時
- 用戶必須從相關項目列表中選擇選項。
用復選框顯示要選擇列表中的相關項
使用時切換開關時
- 用戶切換獨立的功能或行為。
獨立項目可使用切換開關進行選擇
案例7：單選項
使用復選框時
- 提供單個二進制是/否選擇。
- 只有選擇或取消選擇一個顯而易見的選項。
單個是/否選項更適用于復選框
使用切換開關時
- 需要單一選擇，并且您希望為開/關類型的決策提供兩個選項。
使用切換開關可以最好地理解單個開/關決定
結論
重要的是在表格中的正確位置提供正確的控件使其更加用戶友好，由于表單有很多很長的選項，若用戶必須進行額外點擊才能填寫信息，對用戶來說會變得枯燥乏味。提供的案例和指南會幫助你決定在表單中添加控件時選擇復選框還是切換開關。
參考文獻
- Control and Patterns（控制和模式）
- When to Use a Switch or Checkbox（何時使用開關或復選框）
- Selection Controls（選擇控制）
- UX Design: Checkbox and Toggle in Forms（UX設計：表單中的復選框和切換）
原文作者：Saadia Minhas
原文地址：https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8
譯者：SKYUI
本文由 @SKYUI 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
謝謝分享 很清晰明了！
真是細節處見功力啊，謝謝分享