开关用于在“开启 / 关闭”（选中 / 未选中）两种状态之间切换某个项目。
一. 概览（Overview）
1. 设计要求
- 当列表中的每一项都可以单独控制时，应使用开关（而不是单选按钮）。
- 开关是让用户调整设置的最佳方式。
- 要确保开关当前是开还是关，用户一眼就能看出来。
2. 与M2区别
- 无障碍：视觉呈现更加易于感知，更符合无障碍要求。
- 颜色：新的颜色映射在兼容动态色彩的同时，也满足 Material 对非文本元素对比度的要求。
- 图标：支持在开关的滑块中可选地加入图标。
- 布局：开关轨道的高度和宽度都比以前更大。
二. 规格（Specs）
1. 颜色
颜色数值是通过设计令牌（design tokens）来实现的。对设计师来说，这意味着你在使用的颜色，其实都是和某个令牌一一对应的颜色值。对开发实现来说，颜色是以“令牌”的形式存在，而令牌内部再去引用具体的颜色数值。
用于浅色和深色主题的开关颜色角色：①最高层级表面容器、② 描边、③ 描边、④ 主色、⑤ 主色上的前景色、⑥ 主色容器上的前景色
相邻文本标签颜色
紧挨着开关的文本标签，应使用表面前景色（on surface）这个颜色角色。即使用户与标签或组件交互，这个颜色也保持不变。靠近开关的主体大号文字使用 表面前景色（on surface）颜色角色，而普通正文文字则使用 表面前景辅助色（on surface variant）"。
主标签文字使用 “表面前景色（on surface）”，辅助说明文字可以使用 “表面前景辅助色（on surface variant）”。
2. 状态
状态是一种视觉呈现方式，用来表达组件或可交互元素当前所处的状态。
① 启用（Enabled）、② 悬停（Hover）、③ 聚焦（Focus）、④ 按下（Pressed）、⑤ 禁用（Disabled）
3. 尺寸 / 测量值
| 元素（Element） | 属性（Attribute） | 数值（Value） |
|---|---|---|
| 轨道（Track） | 高度（Height） | 32dp |
| 轨道（Track） | 宽度（Width） | 52dp |
| 轨道（Track） | 描边宽度（Outline width） | 2dp |
| 轨道（Track） | 形状（Shape） | md.sys.shape.corner.full |
| 滑块（Handle） | 高度（未选中 Height - unselected） | 16dp |
| 滑块（Handle） | 高度（带图标 Height - with icon） | 24dp |
| 滑块（Handle） | 高度（选中 Height - selected） | 24dp |
| 滑块（Handle） | 高度（按下 Height - pressed） | 28dp |
| 滑块（Handle） | 宽度（未选中 Width - unselected） | 16dp |
| 滑块（Handle） | 宽度（带图标 Width - with icon） | 24dp |
| 滑块（Handle） | 宽度（选中 Width - selected） | 24dp |
| 滑块（Handle） | 宽度（按下 Width - pressed） | 28dp |
| 滑块（Handle） | 形状（Shape） | md.sys.shape.corner.full |
| 状态层（State layer） | 尺寸（Size） | 40dp |
| 状态层（State layer） | 形状（Shape） | md.sys.shape.corner.full |
| 触摸目标（Target） | 尺寸（Size） | 48dp |
| 图标（Icon） | 尺寸（选中 Size - selected） | 16dp |
| 图标（Icon） | 尺寸（未选中 Size - unselected） | 16dp |
4. 配置
① 无图标（Without icons）、② 仅选中状态带图标（Icon on selected switch）、③ 选中与未选中状态均带图标（Icon on selected and unselected switch）
三. 指南（Guidelines）
1. 用法
开关最适合用来调节设置或控制一些相对独立的选项。
开关用来做二元选择，比如开 / 关、真 / 假这种两种状态。
开关的效果应当立刻生效，而不需要再点“保存”之类的操作。
用开关来控制某个选项的开启和关闭
使用开关来：
- 切换单个项目的开启或关闭
- 立即启用或停用某个功能
开关在移动端中常被用于控制各类设置的开启或关闭。
开关用来控制“二元选项”，而不是“对立选项”。二元选项指的是某一个东西只有开 / 关两种状态。
对立选项指的是在一组选项中，同一时间只能选中其中一个，比如“列表视图”和“地图视图”这种互斥选择。
替代型选择控件
复选框、单选按钮和开关是三种主要的选择控件，它们帮助用户做出选择，比如勾选某些选项，或者开启 / 关闭某项设置。
当需要在列表中选择多个彼此相关的选项时，使用复选框（Checkboxes）。当在一组选项中一次只能选择一个时，使用单选按钮（Radio buttons）。
当列表中的选项是相对独立的，或者描述比较完整、偏“设置项”性质时，使用开关（Switches）来控制其开启或关闭。
2. 结构
① 轨道（Track）、② 滑块（Handle）、③ 图标（可选）
2.1 图标（可选）
开关的滑块中可以放置一个可选图标。
滑块中的图标应始终清晰地表达开关当前的选中状态。
图标可以用来在视觉上强化开关当前的选中状态。图标的含义应当清晰、不含糊，帮助用户一眼分辨开关是开启还是关闭。
2.2 标签文本
开关应始终配有一条同一行的文字标签，用来说明当开关被打开时，它具体在控制什么。
3. 位置
开关常常以纵向堆叠的形式进行排列布局。
设置界面是最常使用开关的场景之一。
4. 行为
当用户完成一次交互后，滑块滑动到轨道的另一侧，就表示开关切换成功。
当开关被选中时，滑块会滑动到轨道的另一端。
当用户切换开关时，滑块的尺寸会发生变化，并且对应的动作会立刻生效。
开关处于开启状态时，会通过更大的滑块尺寸来进行提示。
四. 无障碍（Accessibility）
1. 用例
用户应当能够借助辅助技术完成以下操作：
- 使用键盘或开关输入设备导航到某个开关
- 将开关切换为开启或关闭状态
- 根据“交互与样式”部分所定义的输入类型，获得相应的反馈信息
2. 交互与样式
为了表明元素是可交互的，开关的滑块在触控和光标交互时都会放大。
触控（Touch）
当用户点按或拖动滑块时，滑块会变大，以此提供交互反馈。
光标（Cursor）
当光标悬停在滑块上时（无论开关是开还是关），悬停区域会变大，给出“可交互”的视觉提示；当被点击时，滑块本身会变大。
避免默认启用高密度布局
不要在默认情况下对开关应用更高的密度，否则其可点击目标会低于 48×48 CSS 像素这一推荐标准。相反，你应该给用户一个“自行选择更高密度”的方式，比如提供更紧凑的布局选项或允许切换到高密度主题。
为了确保在启用高密度设置后，用户仍然能轻松地把它改回去，用于“切换密度设置”的所有交互目标本身也至少要保持 48×48 CSS 像素大小。
3. 初始聚焦
初始聚焦应直接落在开关的滑块上，因为它是该组件的主要交互元素。
4. 键盘导航
| 键（Keys） | 操作（Actions） |
|---|---|
| Tab | 将焦点移动到开关的滑块上（Focus lands on the switch handle） |
| Space 或 Enter | 切换开关的开启和关闭（Toggles the handle on and off） |
5. 元素标注
在正确实现的情况下，开关的无障碍标签会复用它旁边的文本标签内容。诸如屏幕阅读器等辅助技术，会先读出这段界面文本，然后再读出该组件的角色类型。
开关的无障碍标签可以直接包含其相邻的界面文本内容。
当可见的界面文案比较模糊时，无障碍标签就需要更具体一些。比如，一个开关表面文字只是“照片相册（Photo album）”，就最好在无障碍标签里补充额外说明，以明确这个开关具体控制什么功能。
在可能的情况下，优先让紧挨开关的标签文字本身就足够清晰、具体，这样就不需要再为无障碍单独写一套不同的说明文本。
虽然界面上可见的标签文字是 “Photo album”，但这个开关的无障碍标签会更明确地说明其功能，例如：“Photo album access（照片相册访问权限）”。
有0人收藏了本文
