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