控制器選擇：支票盒,卷軸,無線電燈

1）關鍵差異（含義，不是「圖紙」）

主計長	什麼意思是	何時應用	效果的應用
Checkbox	啟用/排除設置或選項。可以是獨立或多次選擇。支持tri-state。選項列表，過濾器，同意。您可以選擇多個。通常是延遲的（通過「保存」），但是如果效果是局部且可逆的，則可以立即進行。
Switch（開關）	更改系統/功能的當前狀態，該狀態必須立即更改並在視覺上可見。適應/關閉功能，狀態，通知，現場模式。瞬間顯而易見；沒有額外的「保存」。
無線電燈	單組互斥變體。恰好是始終選擇（或選擇之後）。模式，格式，單位，排序。通常立即應用；對於復雜的更改-通過「應用」。

規則：

需要一個N-拿收音機。
我們需要任何一組旗幟-支票箱。
我們需要一個立即改變行為的二進制撥號器-卷軸。

2）決策樹（簡稱）

1.幾次獨立選舉？→ Checkboxs。
2.正好是一組變體？→無線電燈（或片段控制/標記）。
3.一個二進制標誌，效果瞬間而引人註目？→ Switch。
4.需要「部分」標記（子集）?→帶有tri-state的Checkbox。
5.風險/成本很高（付款、審核）?→ Radio/Checkbox+確認（不是Switch）。

3）用戶行為和期望

Switch=即時結果。切換後,用戶期望在沒有單獨的「保存」的情況下立即產生效果和可逆性。
Checkbox=選擇選項。可以立即應用,也可以通過按鈕應用-顯式顯示模型很重要（「Save Settings」/「Click Save」）。
Radio=模式選擇。過渡可以重建接口。表示更改（微動畫/文本）。

4）狀態和視覺語義

Normal / Hover / Focus / Active / Disabled / Error.AA ≥文本和指標的對比。
Tri-state （checkbox）：空白/部分/選擇。部分狀態本身是非循環的-點擊更改為「選擇」而不是「空白」。
Sweetch：在「跑步者」的顏色和位置上具有「開出」的明顯區別。顏色不是唯一的意義載體（圖標/標簽附近）。

5）文案寫作和簽名

動詞+賓語或語句，在選擇時變為真實。

Checkbox：「接收電子郵件通知」。
Switch：「通知：打開/關閉」（左邊的標簽，狀態-右邊或滾動本身）。
廣播：「系數格式：十進制/分數/美國」。
避免雙重否認：「不要斷開連接……」-令人困惑。

對於冒險活動，請添加次要描述： "打開。快速投註（未經確認）-可以在5秒內取消"

6）可用性（A11y）和鍵盤

Checkbox：'role='checkbox'，'aria-checked='true' false'mixed'，Space-切換。
Switch：本機的"<input type="checkbox">帶有switch視覺或'role="switch"與'aria-checked'。像Checkbox（太空）一樣的行為。
收音機：「role=」radiogroup「在容器上，」role=「radio」在元素，箭頭↑/↓或←/→上-移動選擇，Space/Enter-確認。
組：使用「fieldset」/「legend」作為一般上下文。
焦環保持可見；點擊面積≥ 44 × 44 px每個tach。

Snippets：

html
<! -- Radio Group -->
<fieldset role="radiogroup" aria-labelledby="odds-format">
<legend id = "odds-format "> Odds format </legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичный</label>
<label><input type="radio" name="odds" value="fractional"> Дробный</label>
<label> <input type = "radio" name = "odds" value = "american"> American </label>
</fieldset>

<! -- Checkbox (tri-state via aria) -->
<div role = "checkbox" aria-checked =" mixed" tabindex =" 0" id = "cb "> Notify about tournaments </div>

<! -- Switch (role = "switch") -->
<button role="switch" aria-checked="false" aria-labelledby="live-title" class="switch" id="live">
<span class="switch__knob"></span>
</button>
<span id = "live-title "> Live updates </span>

7）異步更改和錯誤

Switch+網絡：切換→立即樂觀的UI →確認服務器→在失敗時輕輕回滾並顯示原因。
Checkbox/radio by Save：直到沒有確認-不要改變全球行為。
風險行為：5-10秒的確認（調制解調器）或undo面板（如果法規允許）。

js
//Optimistic for switch const sw = document. getElementById('live');
sw. addEventListener('click', async ()=>{
const prev = sw. getAttribute('aria-checked') === 'true';
sw. setAttribute ('aria-checked', String (! prev)) ;//instantly try {
const r = await fetch('/api/live', { method:'POST', body: JSON. stringify({ enabled:!prev })});
if(!r.ok) throw new Error();
} catch {
sw. setAttribute('aria-checked', String(prev));     // откат
//show the toast "Failed to enable live"
}
});

8）移動模式

Switch是移動設置中的主要二進制控制。
可以將收音機替換為2-4選項（最好用手指擊中）。
列表中的Checkboxs具有主要的點擊區域並支持快速的多重選擇。

9）分組和布局模式

收音機：垂直列表（掃描更好），對於2-3個選項-單行段。
Checkboxs：一列對齊；對於長列表-組中的「選擇全部」+tri-state。
Sweetch：左邊的標簽，右邊控制一條線；如有必要，請以文字顯示目前的狀態（「開啟」/「關閉」）。

10）反模式

不立即應用更改的Switch（需要「保存」）。
可以進行多次選擇的無線電頻譜。
互斥變體的Checkbox（「男性/女性」為兩個Checkbox）。
用於危險不可逆作用的二元卷軸（刪除數據）。
文本中的雙重否定。
錯誤時更改布局以使焦點丟失。

11） iGaming特點（示例）

系數格式：十進制/分數/美國無線電組-立即應用並存儲在配置文件中。
快速投註：帶有明確描述的「快速投註（未確認）」卷軸，每次手術後為5-10秒。
訂閱/通知：按活動類型（獲勝、錦標賽、存款）分列的checkbox。「選擇全部」群組檢查框是三州。
實時系數更新：網絡錯誤時帶有樂觀和回滾的「實時模式」卷軸。
負責任的遊戲限制：時期（每天/每周/每月）的無線電線+總和字段；「從明天起」確認修改後的限制。

12）設計系統令牌（示例）

json
{
"checkbox": { "size": 20, "radius": 4, "gap": 8 },
"radio": { "size": 20, "dot": 10, "gap": 8 },
"switch": { "width": 44, "height": 24, "knob": 20, "padding": 2 },
"focusRing": { "width": 2, "offset": 2 },
"motion": { "toggleMs": 140, "ease": "cubic-bezier(0. 2,0,0. 2,1)" },
"a11y": { "contrastAA": true }
}

CSS預設（概念）：

css
.control { display:flex; align-items:center; gap:8px; min-height:36px; }
.switch { width:44px; height:24px; padding:2px; border-radius:999px; background:var(--bg-muted); position:relative; }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch__knob{ position:absolute; width:20px; height:20px; border-radius:50%; left:2px; top:2px; transition: transform. 14s cubic-bezier(.2,0,.2,1); background:#fff; }
.switch[aria-checked="true"].switch__knob{ transform: translateX(20px); }
.control:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

13）Snippets UX邏輯

Tri-state「選擇全部」：

js function updateMaster(master, items){
const total = items. length, checked = items. filter(i=>i. checked). length;
master. indeterminate = checked>0 && checked<total;
master. checked = checked===total;
}

帶有鍵盤的無線電組（箭頭）：

js const radios = [...document. querySelectorAll('[role="radio"]')];
let i = radios. findIndex(r => r. getAttribute('aria-checked')==='true');
document. addEventListener('keydown', e => {
if(!['ArrowRight','ArrowDown','ArrowLeft','ArrowUp'].includes(e. key)) return;
e. preventDefault();
const dir = (e. key==='ArrowRight'          e. key==='ArrowDown')? 1: -1;
i = (i + dir + radios. length) % radios. length;
radios. forEach(r => r. setAttribute('aria-checked','false'));
radios[i].setAttribute('aria-checked','true');
radios[i].focus();
});

14）度量與實驗

按卷軸分列的misclick rate和undo頻率。
選擇的時間和無線電組的驗證錯誤。
「全部選擇」分數以及與手動選擇（速度，精度）的比較。
A/B：抄寫標簽，選項順序，segmented vs radio，"通過按鈕立即應用"vs"。

15） QA支票清單

含義和選擇

Controller對應於任務（復數→ checkbox；N →收音機之一；即時二進制→卷軸）。
對於風險行為，有確認/undo。

可用性

正確的角色（「checkbox」/「switch」/「radiogroup」/「radio」），「aria-checked」/「indeterminate」。
焦環是可見的，箭頭在無線電組中工作，Space切換支架/卷軸。

行為

Switch立即應用更改；錯誤時-回滾和消息。
「選擇全部」中的Tri-state是正確的；標簽點擊工作。

可視化

AA ≥對比；狀態不會僅以顏色傳遞。
點擊區≥ 44 × 44 px；順序和均衡是穩定的。

移動

Segmented Control for 2-4無線電變體已測試為tach。
用手指擊打和滾動不會發生沖突。

16）設計系統中的文檔

組件：「Checkbox」，「Switch」，「RadioGroup」/「SegmentedControl」。
尺寸/動畫/焦點令牌，文案寫作示例。
模式：「選擇全部」（tri-state），「即時應用」，「風險後的Undo」。
Do/Do n't畫廊：延遲保存的卷軸（do n't），收音機而不是checkbox（do n't），短集的片段（do）。

簡短摘要

控制器的選擇是關於意義和期望：支票盒是獨立的標誌和組，卷軸是瞬時打開/關閉功能，無線電恰好是集合的一個變體。支持可用性、考慮異步狀態和文稿-用戶可以自信地更改設置而不會出現錯誤和意外。

控制器選擇：支票盒,卷軸,無線電燈

可用性

行為

可視化

移動

簡短摘要

與我們聯繫

快速聯繫

影片即將更新

我們目前正忙於各項專案