本文是在一些設(shè)計(jì)表單體驗(yàn)時(shí)，決定這兩個(gè)控件之間的指導(dǎo)性原則和案例分享。

7個(gè)表單設(shè)計(jì)案例：

用戶界面設(shè)計(jì)中的切換鍵和復(fù)選框

表單提供了幾個(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)

• 應(yīng)用設(shè)置的立即響應(yīng)是無(wú)需明確操作的。
• 設(shè)置需要打開(kāi)/關(guān)閉或顯示/隱藏功能才能顯示結(jié)果。
• 用戶需要執(zhí)行不需要審核或確認(rèn)的即時(shí)操作。

如果需要即時(shí)響應(yīng)的選項(xiàng)最好選擇使用切換開(kāi)關(guān)

案例2：設(shè)置確認(rèn)

使用復(fù)選框時(shí)

• 應(yīng)用設(shè)置需要在提交之前由用戶確認(rèn)和審核。
• 在顯示結(jié)果前，設(shè)置定義需要執(zhí)行提交、確定、下一步、等應(yīng)用操作。
• 用戶必須執(zhí)行其他步驟才能使更改生效。

如果需要顯式操作來(lái)應(yīng)用設(shè)置，則首選復(fù)選框

案例3：多項(xiàng)選擇

使用復(fù)選框時(shí)

• 有多個(gè)選項(xiàng)可供使用，用戶必須從中選擇一個(gè)或多個(gè)選項(xiàng)。
• 逐個(gè)單擊多個(gè)切換開(kāi)關(guān)，每次單擊后等待查看結(jié)果是需要額外的時(shí)間。

在列表中選擇多個(gè)選項(xiàng)，復(fù)選框能提供更好的體驗(yàn)

案例4：不確定狀態(tài)

使用復(fù)選框時(shí)

• 當(dāng)多個(gè)子選項(xiàng)在父選項(xiàng)下分組時(shí)，需要中間選擇狀態(tài)。中間狀態(tài)表示在列表中選擇了多個(gè)子選項(xiàng)（但不是全部）。

使用復(fù)選框最好地顯示不確定狀態(tài)

案例5：清晰的視覺(jué)狀態(tài)

使用復(fù)選框時(shí)

• 有可能與切換開(kāi)關(guān)的開(kāi)/關(guān)狀態(tài)混淆。有時(shí)很難理解開(kāi)關(guān)是顯示狀態(tài)還是動(dòng)作。
• 需要提供明確的勾選狀態(tài)或未勾選狀態(tài)。

有時(shí)切換開(kāi)關(guān)不能清晰地顯示它是狀態(tài)還是動(dòng)作

案例6：相關(guān)項(xiàng)目

使用復(fù)選框時(shí)

• 用戶必須從相關(guān)項(xiàng)目列表中選擇選項(xiàng)。

用復(fù)選框顯示要選擇列表中的相關(guān)項(xiàng)

使用時(shí)切換開(kāi)關(guān)時(shí)

• 用戶切換獨(dú)立的功能或行為。

獨(dú)立項(xiàng)目可使用切換開(kāi)關(guān)進(jìn)行選擇

案例7：?jiǎn)芜x項(xiàng)

使用復(fù)選框時(shí)

• 提供單個(gè)二進(jìn)制是/否選擇。
• 只有選擇或取消選擇一個(gè)顯而易見(jiàn)的選項(xiàng)。

單個(gè)是/否選項(xiàng)更適用于復(fù)選框

使用切換開(kāi)關(guān)時(shí)

• 需要單一選擇，并且您希望為開(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)擊才能填寫信息，對(duì)用戶來(lái)說(shuō)會(huì)變得枯燥乏味。提供的案例和指南會(huì)幫助你決定在表單中添加控件時(shí)選擇復(fù)選框還是切換開(kāi)關(guān)。

參考文獻(xiàn)

• Control and Patterns（控制和模式）
• When to Use a Switch or Checkbox（何時(shí)使用開(kāi)關(guān)或復(fù)選框）
• Selection Controls（選擇控制）
• UX Design: Checkbox and Toggle in Forms（UX設(shè)計(jì)：表單中的復(fù)選框和切換）

原文作者：Saadia Minhas

原文地址：https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8

譯者：SKYUI

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議