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