2018-8-27 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
本文介紹在設計表單體驗時，決定這兩個控件之間的指導性原則和案例分享。表單提供了幾個可以更輕松收集用戶輸入的控件。設計表單時，在正確的位置使用正確的控件是一項挑戰。
復選框控件有三種狀態：unselected（非勾選態）、selected（勾選態）和indeterminate（未確定態）。最后一個狀態代表子選項列表在父選項下分組且子選項處于勾選態和未勾選態之間的情況。
切換開關代表允許用戶打開或關閉物體的物理開關，如燈的開關。
點擊切換開關需要兩個操作步驟：選擇和執行，但復選框只有一個選項，其執行通常需要另一個控件。
在選中復選框和切換開關控件之間時，最好關注使用的環境而不是其功能。
下面是一些在設計表單體驗時決定這兩個控件之間的指導性原則和案例分享。
案例1：即時回復
使用切換開關時，
1. 應用設置的立即響應是無需明確操作的。
2. 設置需要打開/關閉或顯示/隱藏功能才能顯示結果。
3. 用戶需要執行不需要審核或確認的即時操作。
如果需要即時響應的選項最好選擇使用切換開關
案例2：設置確認
使用復選框時，
1. 應用設置需要在提交之前由用戶確認和審核。
2. 在顯示結果前，設置定義需要執行提交、確定、下一步、等應用操作。
3. 用戶必須執行其他步驟才能使更改生效。
如果需要顯式操作來應用設置，則首選復選框
案例3：多項選擇
使用復選框時，
1. 有多個選項可供使用，用戶必須從中選擇一個或多個選項。
2. 逐個單擊多個切換開關，每次單擊后等待查看結果是需要額外的時間。
在列表中選擇多個選項，復選框能提供更好的體驗
案例4：不確定狀態
使用復選框時，
1. 當多個子選項在父選項下分組時，需要中間選擇狀態。中間狀態表示在列表中選擇了多個子選項（但不是全部）。
使用復選框最好地顯示不確定狀態
案例5：清晰的視覺狀態
使用復選框時，
1. 有可能與切換開關的開/關狀態混淆。有時很難理解開關是顯示狀態還是動作。
2. 需要提供明確的勾選狀態或未勾選狀態。
有時切換開關不能清晰地顯示它是狀態還是動作
案例6：相關項目
使用復選框時，
1. 用戶必須從相關項目列表中選擇選項。
用復選框顯示要選擇列表中的相關項
使用時切換開關時，
1. 用戶切換獨立的功能或行為。
獨立項目可使用切換開關進行選擇
案例7：單選項
使用復選框時，
1. 提供單個二進制是/否選擇。
2. 只有選擇或取消選擇一個顯而易見的選項。
單個是/否選項更適用于復選框
使用切換開關時，
1. 需要單一選擇，并且您希望為開/關類型的決策提供兩個選項。
使用切換開關可以最好地理解單個開/關決定
結論
重要的是在表格中的正確位置提供正確的控件使其更加用戶友好。由于表單有很多很長的選項，若用戶必須進行額外點擊才能填寫信息，對用戶來說會變得枯燥乏味。提供的案例和指南會幫助你決定在表單中添加控件時選擇復選框還是切換開關。
參考文獻
1. Control and Patterns《控制和模式》
2. When to Use a Switch or Checkbox《何時使用開關或復選框》
3. Selection Controls《選擇控制》
4. UX Design: Checkbox and Toggle in Forms《UX設計：表單中的復選框和切換》
藍藍設計( www.z1277.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
