本文同步自 2026 iThome 鐵人賽原文 ，發布日期為 2026-08-07。完整系列可見 iThome 系列頁 。
安安～我是ChiYu～
昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。
圖 1：和昨天結尾是同一個 AI 第一版。通知頻率的三個答案可以同時開啟，卻又看不出哪些設定已經生效。
Email、站內通知、通知頻率，連「邀請後立即啟用」都長得一樣。畫面很有設定頁的樣子，至於可以選幾個、現在是在改表單值還是系統狀態，畫面選擇保持沉默。
這個差別不能等到使用者點完才揭曉。假設我關掉「啟用登入通知」後直接離開頁面：如果產品把 Switch 設計成即時更新，我會認為設定已經寫入；如果 Checkbox 位在一份還沒送出的表單裡，我剛才只是修改暫存值。
先把話說準：Switch 本身只表示 on／off，不會自帶一條通往後端的專線。切換後立刻儲存，或等按下「儲存設定」才送出，都要由產品規格決定。外觀只能提示操作，不能替資料流程作證。
外觀只差一小塊，操作承諾差很多。
圖 2：比較頁先問資料能否同時成立，再判斷這是表單選擇、二元設定還是操作模式。儲存時機要另外寫，不能全推給 Switch。
先分清楚資料關係，再決定何時儲存
我會先把設定變更寫成一小段時間線。使用者做了什麼、資料在哪一刻成立，這兩件事比開關要圓還是要方更值得先決定。
| 使用者正在做什麼 | 元件表達的關係 | 適合的元件 |
|---|---|---|
| 勾選 Email 與站內通知 | 每一項可獨立成立，也可以同時選多項。 | Checkbox |
| 在即時、每日摘要、每週摘要中選一項 | 同一組互斥，只保留一個答案。 | Radio |
| 開啟或關閉「登入通知」 | 單一設定只有 on／off 兩種狀態。 | Switch |
| 在編輯器裡啟用粗體 | 立即改變目前工具或操作模式。 | Toggle Button |
| 在列表、看板與行事曆間切換 | 從少量且緊密相關的模式中選擇。 | Segmented Control |
所以我在選元件前先問兩題：這些值能不能同時成立？使用者是在填資料、切換系統設定，還是改變目前的工具或檢視？
第一題會把 Checkbox 和 Radio 分開，第二題則讓 Switch、Toggle Button 與 Segmented Control 各自回到正確工作。至於點完是否立即寫入後端，那是第三題，而且五種元件都不能替產品經理自動回答。
Checkbox 可以多選，2／3 時還要說出「只選了一部分」
Checkbox｜核取方塊 適合彼此獨立、可以同時成立的選項。LumenDesk 的 Email、站內通知與手機推播能各自勾選，最後再和整份設定一起儲存，所以我保留 Checkbox。
圖 3：Email 與手機推播已勾選、站內通知未勾選；上方「全選通知管道」顯示部分選取與已選 2／3。
我打開 Demo 時，三個子項目已經選了兩個。最上方的「全選通知管道」既不能顯示已全選，也不能假裝完全沒選；它需要中間狀態，旁邊的 2／3 則把目前資料說得更直接。
接著我按下全選，三個子項目全部勾選，計數更新成 3／3。
| 子項目狀態 | 全選控制 | 使用者看到的意思 |
|---|---|---|
| 0／3 | 未選取 | 目前沒有選擇任何通知管道。 |
| 2／3 | 部分選取 | 有些已選，有些尚未選。 |
| 3／3 | 已選取 | 所有通知管道都包含在這次設定裡。 |
部分選取不是 Checkbox 一時猶豫，它在表達父項與子項的資料關係。Vibe Coding 若只寫「做三個通知開關」，AI 很可能漏掉這層關係；我會明確補上能否多選、是否一起儲存，以及全選如何反映子項目。
Radio 讓同一組只留一個答案，圓形只是外觀
Radio｜單選按鈕 用在彼此互斥的選項。通知頻率只能是即時、每日摘要或每週摘要其中一種；選了新的答案，原本的答案就得取消。
圖 4：Radio Group 只保留一種通知頻率，群組名稱也持續說明這一題正在選什麼。
Radio 最容易被當成「圓形 Checkbox」。資料模型才不管它圓不圓：Checkbox 能留下多個布林值，Radio Group 在同一組裡只能留下單一答案。
付款方式、配送速度或通知頻率都很適合 Radio，只要選項數量不至於把整頁撐爆。群組要有可見名稱，選項文字也得能單獨理解。需求如果允許複選，就不要因為偏愛圓形硬塞 Radio，資料最後只會默默吃掉其他答案。
Switch 表達 on／off；若設計成即時儲存，失敗時要回復
Switch｜切換開關 適合表達單一設定的 on／off，例如「啟用登入通知」或「允許公開個人頁」。在 LumenDesk 這個情境裡，我選擇讓切換立即儲存，因此系統要回饋更新結果。
圖 5：Switch 表達目前設定是開或關。切換後還要處理儲存中、成功與失敗回復。
把圓點滑到右邊很簡單，網路失敗後怎麼回復才麻煩。畫面若顯示已開啟，後端卻沒有儲存成功，使用者下次回來看到原值，會以為系統偷偷改了設定。
我會要求切換期間禁止重複操作；儲存失敗時回復原值，並在控制附近說明原因。縮圖移動完成，不能直接當成資料已經寫入的收據。
圖 6：Checkbox 與 Radio 常在調整一組值後統一提交；Switch 則要把即時儲存與失敗回復一起設計。
畫面上出現「儲存」Button，不代表 Switch 一定用錯。問題仍然是規格：這個 Switch 是立即寫入，還是只修改表單裡的暫存值？兩種都能做，但畫面不能讓人猜。
Toggle Button 改變工具模式，不拿來代替表單選項
Toggle Button｜切換按鈕 處理目前工具或操作模式，例如編輯器是否啟用粗體、篩選面板是否展開。
圖 7：Toggle Button 顯示粗體工具目前是否啟用；這是操作模式，不是等待表單提交的資料。
Toggle Button 要清楚呈現目前是否啟用，也需要可辨識名稱。它很適合工具列，不適合「同意條款」或「接收 Email」這種表單資料。那些內容需要 Checkbox 的選取規則，不能只因為 Toggle Button 看起來比較俐落就請它兼差。
如果使用 aria-pressed 表達切換狀態，按鈕名稱應保持穩定。例如名稱一直是「粗體」，再另外回報目前是 pressed 或 not pressed；不要每按一次就讓元件連自己叫什麼都一起換掉。
Segmented Control 適合少量相關模式，不能只看它排得很整齊
Segmented Control｜分段控制 常用來切換少量且緊密相關的選項、狀態或檢視。LumenDesk 這裡用的是列表、看板與行事曆三種檢視，資料沒有改變，只是換一種看法。
圖 8：同一批資料在列表與看板間切換，目前所在模式要一眼看得出來。
不同平台與設計系統對 Segmented Control 的細節不完全一樣，有些只做單選，有些也能處理多選或一組動作。這篇先看 LumenDesk 的單選檢視切換。選項很多、文字很長，或每個答案需要額外說明時，Radio Group 會比較容易讀；硬塞進同一排，最後通常只剩縮字和猜圖示兩條路。
Checkbox、Radio 與 Switch 可以在 三種選擇控制的完整比較頁 一起核對；Toggle Button 與 Segmented Control 則回到各自的元件頁操作。先處理資料規則，再看個別 Demo，不用靠控制項長得像哪一套設計系統來選。
改寫 Prompt：元件語意與儲存時機要分開寫
原本那句「全部放成開關」沒有說資料規則。我把通知管道、通知頻率與立即生效拆開後，Prompt 會這樣寫：
為帳號設定頁建立五種控制：
- 「通知管道」使用 Checkbox 群組，可同時選 Email、站內通知與手機推播；提供「全選」控制，部分選取時要顯示中間狀態與已選數量。這一組按下「儲存設定」後才送出。
- 「通知頻率」使用 Radio 群組，只能在即時、每日摘要、每週摘要中選一個，保留可見群組名稱。
- 「啟用登入通知」使用 Switch 表達 on/off。這個設定切換後立即儲存；更新中禁止重複切換，失敗時回復原本值並顯示錯誤訊息。
- 編輯器的「粗體」使用 Toggle Button，按鈕名稱保持不變，另行表達目前 pressed 狀態。
- 成員資料的列表、看板與行事曆使用單選 Segmented Control；切換後只改變檢視，不修改原始資料。
不要用只有圖示的控制取代文字 Label；360px 寬度下，所有選項與訊息都必須可閱讀與操作。
我會用五個反向操作驗收：勾兩個 Checkbox 後取消其中一個；換一個 Radio 選項，確認舊值被取消；讓 Switch 的即時儲存失敗；關閉粗體 Toggle Button；再從列表切到看板，確認原始資料沒有被改掉。只測預設畫面太輕鬆，這些反向操作才看得出資料規則有沒有真的做進去。
通知設定分工完成，最後一個 Dropdown 又把規則攪在一起
修改後，Email、站內通知與手機推播可以同時成立，所以使用 Checkbox；通知頻率只能保留一個答案，交給 Radio；登入通知是單一 on／off 設定，使用 Switch，並由規格另外決定它要立即儲存。Toggle Button 留在工具模式，Segmented Control 則負責切換資料檢視。
這次畫面沒有多出什麼華麗效果，使用者卻能預測每一次點擊何時生效。對 AI 來說，資料規則也終於不必從開關造型裡通靈。
邀請流程剩下「所屬部門」和「協作者」兩個欄位。部門要能搜尋，但只能選一筆既有資料；協作者同樣要搜尋，卻可以保留多筆結果。AI 把它們都叫 Dropdown，前面好不容易拆清楚的規則又準備混成一鍋。
先看「所屬部門」的第一版。它能輸入，也真的會掉出一張清單；至於這段文字最後算搜尋條件、新部門名稱，還是已完成的選取，畫面沒有打算多說。
圖 9：輸入「研究」後出現「研究組」，但 Label、既有值限制、選取結果與鍵盤規則都沒有交代。
明天，我們就來拆這個什麼都能裝、也因此什麼都沒說清楚的「下拉選單」。
參考資料與查閱日期
- W3C WAI：Checkbox Pattern
- W3C WAI：Radio Group Pattern
- W3C WAI：Switch Pattern
- W3C WAI：Button Pattern（含 Toggle Button）
- Apple Human Interface Guidelines：Segmented controls
資料查閱：2026-08-07。