---
title: 开关
slug: 开关
category: 组件
figma_node_id: 1:23
figma_page_name: ＞开关
aliases: [Switch, Toggle, 切换开关, 开关按钮]
last_extracted: 2026-05-19
status: ok
---

# 开关

> 用于在「开启 / 关闭」两个互斥状态之间快速切换的二态控件，结果即时生效，无需提交。如流开关按平台分桌面端 / 移动端两套，桌面端按号型分小号（S）/ 中号（M），覆盖开启 / 关闭 / 开启禁用 / 关闭禁用四种状态。

## 类型与号型

### 按平台

| 平台 | 容器 | 特点 |
|---|---|---|
| 桌面端 | `编组 / GROUP` | 在表单 / 设置面板内联使用，号型紧凑 |
| 移动端 | `列表/移动端/基础样式*/开启 \| 关闭` | 内嵌列表项中使用，行高 55 / 83px |

### 桌面端号型

| 号型 | 主体宽 × 高 | 圆点宽 × 高 | 来源 layout token |
|---|---|---|---|
| 小号（S） | 30 × 16px | （主体内圆点）| `layout_YBK6S3 / 8X2XVI / GYZIS7 / 1C5FKY` |
| 中号（M） | 40 × 20px（开启 / 关闭背景）+ 16×16px 圆点 | 圆点 16 × 16px | `layout_5KQRK4 / SUYLBI / 3E3WDK / 9JFPZ5` + `layout_C736FI` |

### 移动端

- 标准 iOS / Android 默认样式开关，宽 51 × 31px（`layout_KLKYT9 / KZS8QX / VVJWQT / PAW4IB`）
- 嵌入列表项中（基础样式 1 / 基础样式 3），列表项宽 375px，行高 83px / 55px

### 来源 Component

| componentId | 名称 |
|---|---|
| `35:13990` | 列表/移动端/基础样式1/关闭 |
| `35:14010` | 列表/移动端/基础样式1/开启 |
| `35:14027` | 列表/移动端/基础样式3/开启 |
| `35:14038` | 列表/移动端/基础样式3/关闭 |

## 尺寸规格

整页画板：1280 × 3308px（桌面端与移动端共用尺寸）。

| 元素 | 规格 |
|---|---|
| 桌面端中号背景 | 40 × 20px |
| 桌面端中号圆点 | 16 × 16px，圆角 100%（椭圆） |
| 桌面端中号背景圆角 | 10px（`borderRadius: 10px`，等于半高） |
| 桌面端小号背景 | 30 × 16px |
| 移动端开关 | 51 × 31px |
| 圆点投影 | `0px 1px 2px 0px rgba(0, 0, 0, 0.12)` |
| 文字大小 | 12px Regular | 行高 12px |

## 状态

完整状态枚举（来自 Figma 文字标签）：

| 状态 | 含义 |
|---|---|
| 开启 | 圆点滑至右侧，背景为强调色（主色） |
| 关闭 | 圆点滑至左侧，背景为浅灰 `#D0D3D9` |
| 开启禁用 | 视觉上保持开启态，但降饱和或半透明，不可点击 |
| 关闭禁用 | 视觉上保持关闭态，但降饱和或半透明，不可点击 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 容器背景（页面底） | `#FFFFFF` | 默认底色 |
| 关闭态背景 | `#D0D3D9` = `fill_YI9QLY`（带 40% opacity） | 关闭态灰底 |
| 圆点底色 | `#F7F8FA` = `fill_F3CHJV` = `C-Coolgray20` | 圆点淡灰白 |
| 圆点投影 | `0px 1px 2px 0px rgba(0,0,0,0.12)` | `effect_3LOOLK` |
| 状态标签文字 | `#5C6473` = `fill_OUCNID` | 12px Regular，状态标签 |
| 章节标题文字 | `#11141A` = `fill_84V1CN` | 24px Medium |
| 渐变 Union 装饰 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 设计说明区背景 |
| 开启态背景（强调色） | 由具体 component 实例承载，通常为主色（`Brandblue60` / `#3377FF` 类） | 本页 frame 未直出 token，色值随 Component 实例 |

> 关联 token 见 [色彩](../基础/色彩.md)。开关开启态的强调色随各 ComponentSet 实例。

## 间距与排布

- 移动端：开关嵌入列表项中，列表项行高 55 / 83px，开关位于右侧
- 桌面端尺寸示例区：每个号型水平排列开启 / 关闭 / 开启禁用 / 关闭禁用，间隔 112px（来自 `x` 坐标 264 / 376 / 488 / 600 的步进）
- 状态标签文字位于对应开关上方 / 下方 36px 处

## 文案规则

- 开关本体不带文字（仅圆点 + 背景）
- 标签文字（说明开关含义）放在开关**左侧或上方**，使用名词或动名词短语（如「桌面通知」、「自动签到」）
- 状态标签（"开启 / 关闭 / 开启禁用 / 关闭禁用"）仅在规范说明 / 测试场景出现，业务页面不显式打印

## 交互行为

- **点击 / 触摸**：状态立即切换并触发对应业务行为（无需"确认"按钮）
- **滑动**（移动端）：用户可拖动圆点切换，松手后吸附到最近的端点
- **禁用态**：不响应点击 / 滑动；视觉上保持当前状态但降饱和
- **加载态**：本页未明确定义；业务可叠加加载指示（如圆点显示 spinner）
- **危险操作不用开关**：开关结果即时生效，不适合不可逆操作（删除、解散等需用 [按钮](按钮.md) + 二次确认）

## 示例

![移动端开关-列表内嵌](../图片/组件/开关/mobileswitch.png)
![移动端开关-开启关闭对照](../图片/组件/开关/mobileswitch.png)
![桌面端开关-小号-全状态](../图片/组件/开关/desktopsmallquanstate.png)
![桌面端开关-中号-全状态](../图片/组件/开关/desktopsmallquanstate.png)
![桌面端开关-开启](../图片/组件/开关/desktopkai-qi.png)
![桌面端开关-关闭](../图片/组件/开关/desktopguan-bi.png)
![桌面端开关-开启禁用](../图片/组件/开关/desktopkai-qidisabled.png)
![桌面端开关-关闭禁用](../图片/组件/开关/desktopguan-bidisabled.png)

## 设计考量 / 原文摘录

（本页主要以视觉示例 + 状态标签呈现，未给出长段文字设计原则。）

- **结果即时生效**：开关与按钮的根本区别——开关切换后立刻生效，不需要"保存"
- **二态控件**：仅承担开 / 关两个状态，三态以上请改用 [单复选](单复选.md) 或 [下拉选择](下拉选择.md)
- **桌面端紧凑**：S / M 两档号型让设置面板在密集排版中保持视觉一致
- **移动端外露**：嵌入列表项后，整行可点击（列表行 click → 开关切换），命中区域更友好

## 不推荐用法

- 用开关替代「勾选」语义（多选请用 [单复选](单复选.md) 的 Checkbox）
- 用开关承担不可逆 / 高风险操作（如「删除账号」），改用 [按钮](按钮.md) + 二次确认弹窗
- 同一行放多个开关而不带标签，让用户无法理解每个开关控制什么
- 开关切换后需要二次"保存"才生效（违反开关的即时生效语义；该场景应用 [单复选](单复选.md)）
- 把开关做成"加载中"无视觉反馈，让用户重复点击

## 关联

- 二态切换的对照对象 [单复选](单复选.md)
- 单选场景 [单复选](单复选.md)（Radio）
- 表单内排布 [表单](表单.md)
- 列表内嵌排布 [列表](列表.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
