美叶研学
美叶研学
最新主题
美叶研学美叶研学

2026 启航,以原理、方法、规范为基,构建一套面向未来、可持续升级的知识体系

美叶 © 2026京ICP备18053775号-2    京公网安备 11010502047597号
一. 概览(Overview)1. 设计要求2. 与M2区别二. 规格(Specs)1. 颜色2. 状态3. 尺寸 / 测量值4. 配置三. 指南(Guidelines)1. 用法2. 结构3. 位置4. 行为四. 无障碍(Accessibility)1. 用例2. 交互与样式3. 初始聚焦4. 键盘导航5. 元素标注
控件规范指南

Material3设计规范:开关(Switch)

2026年6月5日
Material Design
Material Design
谷歌的开源设计系统,用于构建美观、易用的产品
已累计原创 13 篇文章查看全部

开关用于在“开启 / 关闭”(选中 / 未选中)两种状态之间切换某个项目。


一. 概览(Overview)

1. 设计要求

  • 当列表中的每一项都可以单独控制时,应使用开关(而不是单选按钮)。
  • 开关是让用户调整设置的最佳方式。
  • 要确保开关当前是开还是关,用户一眼就能看出来。


2. 与M2区别

  • 无障碍:视觉呈现更加易于感知,更符合无障碍要求。
  • 颜色:新的颜色映射在兼容动态色彩的同时,也满足 Material 对非文本元素对比度的要求。
  • 图标:支持在开关的滑块中可选地加入图标。
  • 布局:开关轨道的高度和宽度都比以前更大。


二. 规格(Specs)

1. 颜色

颜色数值是通过设计令牌(design tokens)来实现的。对设计师来说,这意味着你在使用的颜色,其实都是和某个令牌一一对应的颜色值。对开发实现来说,颜色是以“令牌”的形式存在,而令牌内部再去引用具体的颜色数值。

6 color roles of a switch in light and dark themes.
用于浅色和深色主题的开关颜色角色:①最高层级表面容器、② 描边、③ 描边、④ 主色、⑤ 主色上的前景色、⑥ 主色容器上的前景色

相邻文本标签颜色

紧挨着开关的文本标签,应使用表面前景色(on surface)这个颜色角色。即使用户与标签或组件交互,这个颜色也保持不变。靠近开关的主体大号文字使用 表面前景色(on surface)颜色角色,而普通正文文字则使用 表面前景辅助色(on surface variant)"。

主标签文字使用 “表面前景色(on surface)”,辅助说明文字可以使用 “表面前景辅助色(on surface variant)”。


2. 状态

状态是一种视觉呈现方式,用来表达组件或可交互元素当前所处的状态。

① 启用(Enabled)、② 悬停(Hover)、③ 聚焦(Focus)、④ 按下(Pressed)、⑤ 禁用(Disabled)


3. 尺寸 / 测量值

Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

有 0 人收藏了本文

为 Gemini 应用绘制插画体系
规范指南
为 Gemini 应用绘制插画体系
2026/6/15会员阅读
Material3设计规范:轮播(Carousel)
规范指南
Material3设计规范:轮播(Carousel)
2026/6/13会员阅读
Apple HIG:页面控制(Page controls)
规范指南
Apple HIG:页面控制(Page controls)
2026/6/11会员阅读
Apple HIG:提醒(Alerts)
规范指南
Apple HIG:提醒(Alerts)
2026/6/9会员阅读
Apple HIG:操作表单(Action sheets)
规范指南
Apple HIG:操作表单(Action sheets)
2026/6/8会员阅读
Apple HIG:进度指示符(Progress indicators)
规范指南
Apple HIG:进度指示符(Progress indicators)
2026/6/5会员阅读
Apple HIG:材质(Materials)
规范指南
Apple HIG:材质(Materials)
2026/6/2会员阅读
Material3设计规范:标签页(Tabs)
控件规范指南
Material3设计规范:标签页(Tabs)
2026/6/1会员阅读