开关 Switch
用户在通知设置页决定是否接收每周摘要,开关旁边需要立刻说明当前状态。
前端与交互约 10 分钟 · 从真实需求理解
1一个偏好怎样清楚地表达开或关?
通知设置只调整你愿意接收的提醒
设置每周摘要每周一上午汇总项目动态
关闭
本周不会收到摘要
Switch 用一个控件表达一个独立偏好的二态:开启或关闭。它旁边的标签和状态文字应该让用户知道切换影响什么,而不是只依赖轨道颜色或圆点位置。
2Switch、Checkbox 和 Radio,什么时候不能互换?
3Switch 由哪些真实部分组成?
Switch 由哪些真实部分组成?
通知设置只调整你愿意接收的提醒
设置每周摘要每周一上午汇总项目动态
关闭
本周不会收到摘要
- 设置行标签:说明这个二态开关影响哪个独立偏好。
- 轨道和滑块钮:把关闭与开启的状态变化变成可操作的控件。
- 状态说明:在控件附近读出当前开/关以及用户将得到的结果。
4Switch 的关闭、开启和禁用
关闭
每周摘要偏好当前未开启,但用户仍可操作。
开启
每周摘要偏好当前已开启,状态文字需要同步说明影响。
禁用
每周摘要当前条件不允许修改,不能把禁用状态当成关闭值。
先区分值与可用性:关闭和开启都是用户可以改变的偏好,禁用则表示当前不能操作,不能被误读成“用户已经关闭”。
5设置页里,Switch 如何把偏好保存下来?
通知设置
settings通知设置
管理你愿意接收的摘要。
每周摘要已关闭
Switch 的切换只改变当前偏好;当产品需要保存到服务端时,还要让用户看到保存动作、处理中状态和最终结果都对应这一个设置行。
6什么时候该用 Switch?
只有一个独立二态时,Switch 直接表达开启与关闭。
项目提醒已开启
多个独立渠道要分别保留状态,改用 Checkbox。
互斥答案需要 Radio 让替换关系保持清楚。
什么时候用 Switch,关键看一个偏好是不是只有开和关;如果多个答案可以同时成立,或一组答案只能保留一个,就应如何换成 Checkbox 或 Radio。
7怎样把 Switch 需求告诉 Agent?
请在通知设置页实现 Switch:每周摘要是一个独立的开/关偏好,开关旁始终显示“已开启/已关闭”及其影响;点击保存后保留处理中和已保存反馈。请使用真实 role=switch、aria-checked、键盘 Space 和可见焦点,禁用时不能改变值;不要用 Switch 代替多项 Checkbox 或互斥 Radio。
8不用背,看看你能不能判断
1 / 3
什么情况最适合使用 Switch?
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。