什麼時候用 Toggle Switch 或是Checkbox？-設計正確的使用時機
更新於 發佈於 閱讀時間約 3 分鐘
在設計表單的時候有幾種不同的元件，可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像，在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現，真的有人將這兩個元件做了一些詳細的說明，所以決定整理一下蒐集到的相關資料，作為我在設計上的學習筆記。
Toggle Switch
Toggle Switch 代表一個物理開關，允許用戶打開或關閉事物，如電燈開關。以下說明 Toggle Switch 的使用情境，都可以帶入情境為，開 或 關的動作會比較好懂
1.即時的反應
在以下情況下使用我們可以使用Toggle Switch
- 可以立即給予操作反應的設定。
- 需要透過 開/關 或 顯示/隱藏功能 來顯示結果。
- 使用者操作時，不需要再次審查或確認的動作。
在這邊如果帶入飛航模式開啟;Wi-Fi跟藍牙關閉就會很直覺選擇Toggle Switch。
2.用戶正在切換獨立的功能或行為
在這邊我們思考的是，使用Toggle Switch的都是具有獨立功能的設定。所以這邊選擇使用Toggle Switch。
3.只需要思考開或是關的情境時
使用Toggle Switch可以最好了解 開/關 的運用情境。
Checkbox
Checkbox 具有三種狀態：未選（unselected）、已選（selected）及未知（indeterminate）。前兩個很好理解，第三個狀態表示：該選項底下還有子選項，且其中包含未選擇及已選擇。
1.提交後需要確認與審核
使用 Checkbox 時
- 表單在提交前需要使用者確認和審核。
- 在這邊 Checkbox 最常使用的情境會是在畫面中需要進行、確定、下一步、應用等操作的時候。
- 使用者必須執行額外的步驟才能使功能執行。
當畫面中需要進行確定與下一步的應用時通常使用Checkbox。
2.複選情境
- 有多個選項可用，用戶必須從中選擇一個或多個選項。
- 如果像是右邊一個一個點擊開關，每次點擊後可能都會需要等待系統回應才能知道結果。
如果在列表中有多個選項，通常會使用 Checkbox 作為表單填寫的元件，在快速作答後一次在儲存按鈕將資料送到資料庫。
3.中間選擇狀態
當多個子選項分組在一個父選項下時，需要中間選擇狀態。中間狀態將代表選項中同時具有『已選擇』及『尚未選擇』的狀態。
4.清晰的視覺狀態
使用 Checkbox 時
- 有時很難理解這邊的是顯示狀態還是動作。這邊可以想像如果有勾選時代表『要』自動填寫表單;如果使用『打開』自動填寫表單會有點字面意義上面的混淆，因為字句中有自動填寫可能會跟開關互相抵觸。
- 需要提供明確的選擇或未選擇狀態。
有時使用Toggle Switch並不能清楚地表明它是狀態還是動作。
5.相關項目
在同樣類型的選項中，有多個選擇通常會使用Checkbox。
要選擇列表中的相關項目，請使用Checkbox。
6.單一選項
使用 Checkbox 時，可以帶入當下的情境是 『是』 或是『 否』;如果這邊使用『開』或是『關』就會有點不太合適。
- 選項為只有『是』或是『否』的情境時。
是/否 選項更適用於Checkbox。
參考資料來源
https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/
https://designtongue.me/checkbox-_vs_toggle_switch/
重點總結
其實上述說的都是在設計時可以參考的使用方式，但我覺得產品設計其實是很靈活的，我們可能會根據實際狀況的不同而轉換設計的方式，這部分就需要大量的累積實戰的經歷 🥸
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是「switch」，以及與「switch」相關的知識。包括switch的簡介、switch、break。
什麼是最近火紅的Actions & Blinks? 他的優點是什麼？目前存在什麼問題？本篇文章將會以圖文介紹Actions & Blinks的原理並講講我對此技術的看法
本章節提供了關於Typescript中流程控制元素的詳細介紹，包括if, else if, else語句，三元運算子，switch語句，各種for迴圈，while迴圈，循環嵌套和控制迴圈語句（break，continue和標籤）的使用。
setter和getter能把狀態改變時需做的事情包裝起來，讓外部只需簡單修改參數就能達到預想的效果
※ switch用法：
switch是 JavaScript 中的一個控制結構，是一種更結構化的方法來替代多個 if...else 語句，特別是當需要根據同一變數的多個值進行不同操作時非常有用。
※ switch語法：
switch 語句首先評估括號內的表達式 (expression)。
Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
IF，Switch，三元運算子語法說明
IF條件選擇結構說明
IF為布林條件，當()內條件式滿足True執行if區塊的程式碼，不滿足則執行else區塊的程式碼，若無else也行。
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是「switch」，以及與「switch」相關的知識。包括switch的簡介、switch、break。
什麼是最近火紅的Actions & Blinks? 他的優點是什麼？目前存在什麼問題？本篇文章將會以圖文介紹Actions & Blinks的原理並講講我對此技術的看法
本章節提供了關於Typescript中流程控制元素的詳細介紹，包括if, else if, else語句，三元運算子，switch語句，各種for迴圈，while迴圈，循環嵌套和控制迴圈語句（break，continue和標籤）的使用。
setter和getter能把狀態改變時需做的事情包裝起來，讓外部只需簡單修改參數就能達到預想的效果
※ switch用法：
switch是 JavaScript 中的一個控制結構，是一種更結構化的方法來替代多個 if...else 語句，特別是當需要根據同一變數的多個值進行不同操作時非常有用。
※ switch語法：
switch 語句首先評估括號內的表達式 (expression)。
Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
IF，Switch，三元運算子語法說明
IF條件選擇結構說明
IF為布林條件，當()內條件式滿足True執行if區塊的程式碼，不滿足則執行else區塊的程式碼，若無else也行。