用途:该技能聚焦开关(Toggle Switch)的交互与视觉设计,说明开关和复选框各自适合的场合。开关适用于立即生效、无需保存按钮的二元开/关场景,如设置和偏好项;复选框适用于需要提交表单、从多个选项中多选的情况,如表单和筛选器。
主要能力与设计规则:开关需有清晰的开/关视觉,通过颜色变化与位置变化共同表达;标签放在左侧,用于说明控制对象;按阅读方向,开在右、关在左;开启状态用品牌色或强调色,关闭状态用灰色;可选在开关内显示 On/Off 文字以增强清晰度;尺寸建议宽度 40–48px,触控高度最低 24px;过渡时长为 200ms ease。
无障碍要求:使用 role="switch" 与 aria-checked;键盘用 Space/Enter 切换;通过 for 属性关联标签;焦点环需可见。
适用场景与限制:适合设置面板、系统偏好、即时生效的开关项,以及需要区分单选开关与多选复选框的界面决策。资料未提供具体实现代码、框架示例、明确的价格或收费信息,也未给出除上述内容外的更多使用步骤。