控制器选择：支票盒,卷轴,无线电灯

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）。

简短摘要

控制器的选择是关于意义和期望：支票盒是独立的标志和组，卷轴是瞬时打开/关闭功能，无线电恰好是集合的一个变体。支持可用性、考虑异步状态和文稿-用户可以自信地更改设置而不会出现错误和意外。

控制器选择：支票盒,卷轴,无线电灯

可用性

行为

可视化

移动

简短摘要

联系我们

快速联系

视频即将更新

我们目前正忙于各项项目