拨下「暗色模式」,窗口立刻变深,角落出现「已同步」。无后果、可随时再拨、用户期望立刻看到效果——符合开关的语义。
物件即时变化 + 后台持久化反馈。界面与交互 · 操作与输入
开关Switch
开关用于拨下立即生效的开/关设置;需要先提交才生效的选择用复选框。
拨一下,设置立刻在物件上生效
开关用于只有开/关两态、且用户期望立即生效的偏好。拨动不是「打个勾」,而是当场改物件,再在后台保存。
场景:把左边的开关拨下,看预览窗口怎么立刻变;再勾右边 checkbox,发现窗口不动——直到点「保存设置」。可切「模拟失败」体验回滚。
我的工作台窗口随上方开关即时变化
暗色模式切换窗口深浅
消息通知切换红点提醒
勾选不会立刻改变窗口;只有点「保存设置」后,「周报已订阅」才会出现。
模拟开关保存:
对照:左侧开关拨下,窗口立刻变,不用点保存;右侧 checkbox 改完要点「保存设置」才会生效——这就是即时生效与提交生效的差别。
开关要管好的三件事
面板已经证明了核心,这里把它们命名成可检查的要点。
- 即时生效,物件为证拨下应立刻改变受影响的物件(窗口底色、通知红点),而不是只换开关外观;用户靠物件变化确认设置已生效。
- 进行中防连点,失败要回滚后台保存时禁用开关,避免一次拨动发出两次请求;保存失败必须把物件和开关回滚到原状态,并给出「已回滚」字样,不能假装成功。
- 语义控件与可访问名称用
role="switch"加aria-checked,键盘空格可切换;开关要有名称(如「暗色模式」)并说明打开后影响什么。
什么时候用开关,什么时候换 checkbox 或 radio
开关不是万能的「二态控件」。它只适合无即时后果、用户期望拨下就生效的偏好。
把「默认用信用卡」做成开关,拨一下立即生效,用户很容易误拨导致下次扣款走错渠道。这类有后果的设置应放进表单,需要确认或点保存。
换 checkbox + 提交,或 radio 互斥选择。- 适合:暗色模式、消息通知、省流模式、自动播放——二态、即时、无后果。
- 换 checkbox:需要多选、提交前预览、或在表单里一起保存的设置。
- 换 radio:多个选项互斥(如配送方式),且不是简单的开/关。
快速自测
做「付款默认用信用卡」这个设置,哪种最稳妥?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。