什麼時候用 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 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
什麼時候拆，這句話其實是一種習慣的用語，他的意思是CB什麼時候會拆解成CBAS，而如果有了解法規的人，會知道CB發行後第六天可以拆解，所以有時候會發現CB發行的第六天開始才有量能，因為這時候開始有CBAS的發生，才會有小資族可以一起來参與。
而另一句有沒有擔，就是在講可轉債發行時是有擔
各位女生，九月五號以後就不要做家事啦！一位美國專欄作家這麼呼籲。
她會這麼說，是因為根據最近的調查資料，以家務分配的時間計算，女生在九月五號，就做完男生一整年的份量了。所以女生九月五號之後就不要做家事，男女之間才會平等。
#我願意 #有雷 #台劇
台灣首部邪教影集《我願意》，講述姚淳耀飾演的邪教教主，利用人性的脆弱操弄人心，接近邪教的人，都走向了悲傷的結局。
這部劇題材新穎，雖然劇裡的心靈式雞湯一直讓我出戲，總覺得他們只是為那些需要找一個心靈出口的人提供心靈上的慰藉，給予一些認同，或者說，提供一個讓他們自己知道"
4G 夠強，到底要 5G 幹嘛？Google 到底看上什麼？但其實，除了看 4K 影片、聽 Hi-Fi 音樂以外，5G 還可應用在各種生活場域之中，如娛樂方面，雲端串流遊戲可讓玩家不用買主機組電腦，提供順暢網路隨處玩遊戲；看球賽時，不同角度切換 VR 360度環繞效果亦高度仰賴其技術。
你會用什麼方式回味你的二十幾歲呢？
則文出版了一本書，回憶了五年前二十幾歲的自己。
用青春歲月講歷史故事、還有踏出舒適圈，
南向各國體驗前所未有的人生！
▌今天看到一則半年前，一位讀者留的訊息，大致如下：
「張添皓醫師，根管治療什麼時後要用顯微鏡阿？#不用顯微鏡可以嗎？#一定會失敗嗎？無法救牙齒嗎？」
我就用我2016五年前，青澀時期寫的那一篇回覆她，如下：
https://dentistry.tw/microscope/
▌顯微鏡輔助，是有文獻證
長牙前
工具：乾紗布、紗布巾
寶寶出生時口腔中並沒有牙齒，可以一天一次以紗布輕柔擦拭口腔即可，此外清潔時也要注意口腔兩側是否有刮不掉的扁平白斑，可能為口腔念珠菌感染請帶孩子就醫治療。
每個語言對於句子裡的詞彙通常有個習慣的擺放順序，另一方面生活中卻也有各種不遵守這種順序的用法，像是「夠了喔你」「死定了我」「這個議題，我們將審慎檢討」等等充斥其中。倒裝句的使用究竟沒有什麼原則？倒裝句究竟有什麼效果，什麼時適合用，什麼時候又不該濫用？我們透過一些中英日文當中的例子一起來看看。
每到夏季，尤其是立秋之前，你可能會覺得比較常聽到有關鰻魚飯的話題，這和一個日本從江戶時代流傳至今的習慣 - 土用丑日吃鰻魚，故事是...
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
什麼時候拆，這句話其實是一種習慣的用語，他的意思是CB什麼時候會拆解成CBAS，而如果有了解法規的人，會知道CB發行後第六天可以拆解，所以有時候會發現CB發行的第六天開始才有量能，因為這時候開始有CBAS的發生，才會有小資族可以一起來参與。
而另一句有沒有擔，就是在講可轉債發行時是有擔
各位女生，九月五號以後就不要做家事啦！一位美國專欄作家這麼呼籲。
她會這麼說，是因為根據最近的調查資料，以家務分配的時間計算，女生在九月五號，就做完男生一整年的份量了。所以女生九月五號之後就不要做家事，男女之間才會平等。
#我願意 #有雷 #台劇
台灣首部邪教影集《我願意》，講述姚淳耀飾演的邪教教主，利用人性的脆弱操弄人心，接近邪教的人，都走向了悲傷的結局。
這部劇題材新穎，雖然劇裡的心靈式雞湯一直讓我出戲，總覺得他們只是為那些需要找一個心靈出口的人提供心靈上的慰藉，給予一些認同，或者說，提供一個讓他們自己知道"
4G 夠強，到底要 5G 幹嘛？Google 到底看上什麼？但其實，除了看 4K 影片、聽 Hi-Fi 音樂以外，5G 還可應用在各種生活場域之中，如娛樂方面，雲端串流遊戲可讓玩家不用買主機組電腦，提供順暢網路隨處玩遊戲；看球賽時，不同角度切換 VR 360度環繞效果亦高度仰賴其技術。
你會用什麼方式回味你的二十幾歲呢？
則文出版了一本書，回憶了五年前二十幾歲的自己。
用青春歲月講歷史故事、還有踏出舒適圈，
南向各國體驗前所未有的人生！
▌今天看到一則半年前，一位讀者留的訊息，大致如下：
「張添皓醫師，根管治療什麼時後要用顯微鏡阿？#不用顯微鏡可以嗎？#一定會失敗嗎？無法救牙齒嗎？」
我就用我2016五年前，青澀時期寫的那一篇回覆她，如下：
https://dentistry.tw/microscope/
▌顯微鏡輔助，是有文獻證
長牙前
工具：乾紗布、紗布巾
寶寶出生時口腔中並沒有牙齒，可以一天一次以紗布輕柔擦拭口腔即可，此外清潔時也要注意口腔兩側是否有刮不掉的扁平白斑，可能為口腔念珠菌感染請帶孩子就醫治療。
每個語言對於句子裡的詞彙通常有個習慣的擺放順序，另一方面生活中卻也有各種不遵守這種順序的用法，像是「夠了喔你」「死定了我」「這個議題，我們將審慎檢討」等等充斥其中。倒裝句的使用究竟沒有什麼原則？倒裝句究竟有什麼效果，什麼時適合用，什麼時候又不該濫用？我們透過一些中英日文當中的例子一起來看看。
每到夏季，尤其是立秋之前，你可能會覺得比較常聽到有關鰻魚飯的話題，這和一個日本從江戶時代流傳至今的習慣 - 土用丑日吃鰻魚，故事是...