SPT术语库

开关 Switch

用户在通知设置页决定是否接收每周摘要,开关旁边需要立刻说明当前状态。

前端与交互约 10 分钟 · 从真实需求理解

1一个偏好怎样清楚地表达开或关?

通知设置只调整你愿意接收的提醒
设置
每周摘要每周一上午汇总项目动态
关闭

Switch 用一个控件表达一个独立偏好的二态:开启或关闭。它旁边的标签和状态文字应该让用户知道切换影响什么,而不是只依赖轨道颜色或圆点位置。

2Switch、Checkbox 和 Radio,什么时候不能互换?

Switch ≠ CheckboxRadio:Switch 表达一个独立偏好的开/关,Checkbox 允许多个独立选项同时成立,Radio 则要求一组互斥答案只保留一个。

  • 不要把三个开关拼成一组来模拟单选;如果答案互斥,控件应该让替换关系变得明确。
  • 也不要用 Switch 承担“保存”本身;它先改变偏好,保存成功与否应由附近的反馈说明。

验收时检查真实 button 的 role=switch、aria-checked、键盘 Space 切换和禁用状态;状态文字不能只靠颜色传达。

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?

请选择一个最符合题意的答案

选择答案后自动进入下一题

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。