UI 上的表單往往帶有一些控制元件（如：復(fù)選框（Checkbox））來(lái)協(xié)助使用者更容易的輸入，相對(duì)的，如何在對(duì)的時(shí)機(jī)使用對(duì)的控制元件是一項(xiàng)挑戰(zhàn)。

復(fù)選框（Checkbox） 有三種狀態(tài)：unselected（非勾選態(tài)）、selected（勾選態(tài)）和indeterminate（未確定態(tài)）。前兩個(gè)很好理解，第三個(gè)狀態(tài)表示：該選項(xiàng)底下還有子選項(xiàng)，且其中包含未擇及已選。

切換開關(guān)（toggle switch）模擬實(shí)體開關(guān)的操作方式，讓使用者可以快速將某功能開啟或關(guān)閉，例如現(xiàn)實(shí)生活中的電燈開關(guān)。

點(diǎn)擊切換開關(guān)同時(shí)帶有兩個(gè)動(dòng)作：選擇并執(zhí)行; 而復(fù)選框（Checkbox）僅表示選擇了一個(gè)項(xiàng)目，若要執(zhí)行會(huì)需要另一個(gè)控制元件觸發(fā)。

那該怎么選擇這兩個(gè)控制元件呢？其實(shí)我們應(yīng)該更關(guān)注“使用情境”來(lái)判斷，而不是依造它們的功能。

以下有幾個(gè)情況可以協(xié)助設(shè)計(jì)師們來(lái)判斷，帶來(lái)更好的設(shè)計(jì)與體驗(yàn)。

狀況1：馬上反應(yīng)

當(dāng)以下情況時(shí)，我們應(yīng)該使用“切換開關(guān)”：

• 不需要還要進(jìn)行某些動(dòng)作，即可反應(yīng)出選擇后的結(jié)果時(shí)
• 馬上顯示某功能的“開啟/ 關(guān)閉”或“出現(xiàn)/ 隱藏”的結(jié)果或狀態(tài)時(shí)
• 使用者執(zhí)行一些不需要確認(rèn)或?qū)徍说膭?dòng)作時(shí)

狀況2：確認(rèn)設(shè)定的選項(xiàng)

當(dāng)以下情況時(shí)，我們應(yīng)該使用“復(fù)選框（Checkbox）”：

• 在送出調(diào)整或改變的需求前，使用者需要“再次確認(rèn)” 或“預(yù)覽結(jié)果” 時(shí)
• 在顯示結(jié)果前，送出需求的按鈕通常是“提交”、“好” 或“下一步” 時(shí)
• 使用者必須執(zhí)行額外的動(dòng)作來(lái)執(zhí)行這些選項(xiàng)時(shí)

狀況3：復(fù)選

當(dāng)以下情況時(shí)，我們應(yīng)該使用“復(fù)選框（Checkbox）”：

• 具有復(fù)數(shù)選項(xiàng)且使用者必須從中選擇一個(gè)或以上時(shí)
• 需要一一點(diǎn)選多個(gè)切換開關(guān)，且無(wú)法及時(shí)看到結(jié)果（還需等待一段時(shí)間，如系統(tǒng)處理中）。

狀況 4：不確定選項(xiàng)的狀態(tài)

當(dāng)以下情況時(shí)，我們應(yīng)該使用“復(fù)選框（Checkbox）”：

• 當(dāng)某選項(xiàng)底下還有子選項(xiàng)需要確認(rèn)時(shí)

狀況 5：顯示明確的狀態(tài)

當(dāng)以下情況時(shí)，我們應(yīng)該使用“復(fù)選框（Checkbox）”：

• 切換開關(guān)的“狀態(tài)” 容易被使用者混淆時(shí)，例如很難了解選項(xiàng)上的開關(guān)按鈕表明的是“狀態(tài)” 或“動(dòng)作”
• 需要提供明確的已擇或未選狀態(tài)時(shí)

狀況 6：選項(xiàng)的關(guān)聯(lián)性

當(dāng)以下情況時(shí)，我們應(yīng)該使用“復(fù)選框（Checkbox）”：

• 使用者必須從“具關(guān)聯(lián)性的選項(xiàng)”中選擇時(shí)

當(dāng)以下情況時(shí)，我們應(yīng)該使用“切換開關(guān)”：

• 選項(xiàng)間皆是“不同或獨(dú)立”的功能或行為時(shí)

狀況 7：?jiǎn)我贿x項(xiàng)

當(dāng)以下情況時(shí)，我們應(yīng)該使用“復(fù)選框（Checkbox）”：

• 選項(xiàng)僅是“是或否”的決定時(shí)
• 只有一個(gè)選項(xiàng)可“選擇或不選擇”，而且它所表示的意思明確時(shí)

當(dāng)以下情況時(shí)，我們應(yīng)該使用切換開關(guān)：

• 僅在“開或關(guān)”的選項(xiàng)上做選擇時(shí)

結(jié)論

提供正確合理的控制元件在對(duì)的地方相當(dāng)?shù)闹匾?，希望本文提供的案例及?zhǔn)則能協(xié)助判斷何時(shí)該使用復(fù)選框（Checkbox）或切換開關(guān)，來(lái)提升更好的表單體驗(yàn)。

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