界面图鉴
开关Toggle
你可能会问
开关到底是什么？它和复选框是一回事吗？
简单来说
非开即关的两态控件，拨一下立即生效，不需要保存按钮。
01 · 拆开看看
这一块由什么组成
它是电灯开关的直译：非开即关，拨一下立即生效——不需要「保存」按钮，这是它和复选框最大的区别。组成：
轨道Track
胶囊形的底座，颜色表示开或关。
圆钮Knob
滑动的圆点，位置即状态。
状态色State
开是品牌色、关是灰色——位置差异也要保留，照顾色弱用户。
02 · 常见变体
同一个零件，几种摆法
一个开关管一件事。
旁边一行小字说明当前状态。
一列开关组成设置面板。
03 · 火眼金睛
这个设置面板里，哪一个是开关？
三个控件都在收集你的意思，只有一个拨了立即生效。
点一块试试，看看它叫什么
输入框Input
不是它。能敲字的是输入框。
下拉选择Select
不是它。点开有列表的是下拉。
开关Toggle
就是它！胶囊轨道加圆钮，非开即关，拨一下立即生效。
04 · 用与不用
什么时候该上它
适合
- 设置项的开与关：通知、深色模式
- 拨动后立即生效的场景
- 状态一目了然的二元选择
先别用
- 需要随表单提交——用复选框
- 有中间态或多个选项——用单选、下拉
- 「开」的含义说不清的时候
05 · 想一想
一道题，检查眼力
「同意服务条款」该用开关还是复选框？
对。开关的承诺是「拨动立即生效」，而同意条款要跟提交动作绑在一起。
手感不是标准。开关意味着立即生效，条款同意显然不是。
两者语义不同：立即生效用开关，随表单提交用复选框——这是有共识的。
06 · 说给 AI 听
让 AI 改它时，这样说
说清「拨动后立即生效还是随表单提交」——这决定了用开关还是复选框。
通知设置加一个开关，拨动立即保存
开关打开时用品牌橙色
深色模式开关放在导航栏右侧
开关旁边加一行小字，显示当前是开是关
最容易踩的坑
开关承诺「立即生效」。拨了还要点保存的开关是在撒谎——那种场合请用复选框。