如果您想訂閱本博客內(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)類型的決策提供兩個(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ì)( www.0391cbd.com )是一家專注而深入的界面設(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ù)。