Material Design Skill

Google Material Design 3 (M3) 跨平台设计系统技能。覆盖色彩系统、Typography、Shape、 Elevation、Icons、Animation、组件规范（Buttons、Cards、Navigation 等）及 Flutter/Compose/Android/Web 四平台实现。当用户提到 Material Design、MD3、M3、 Material You、动态配色、Material Icon、设计系统、Android UI、Flutter Material 时触发。

色彩系统

色彩角色

M3 定义了 26+ 色彩角色，分为五大类：

类别	角色	说明
Primary	Primary, Primary Container, On Primary, On Primary Container	主品牌色
Secondary	Secondary, Secondary Container, On Secondary, On Secondary Container	辅助色
Tertiary	Tertiary, Tertiary Container, On Tertiary, On Tertiary Container	强调色
Error	Error, Error Container, On Error, On Error Container	错误/警告
Neutral	Surface, On Surface, Surface Variant, Outline, Outline Variant	中性色
Neutral Special	Inverse Surface, Inverse On Surface, Inverse Primary, Surface Tint	特殊中性
Scrim	Scrim	遮罩层

动态配色（Material You）

用户可通过壁纸生成主题色（User-generated color scheme）：

• Android 12+：从壁纸提取主色，自动应用到整个系统
• Flutter：ColorScheme.fromSeed(seedColor: color, brightness: Brightness.light)
• Compose：dynamicColor = DynamicColor.getOrCreate(context)

主题构建

平台	代码
Flutter	ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.light)
Compose	lightColorScheme(primary = ...)
Android XML	Theme.Material3.DayNight.NoActionBar
CSS	--md-sys-color-primary: #...;

详细参考：color-system.md

---

Typography

Type Scale（5 角色 × 3 尺寸 = 15 种样式）

角色	大（Large）	中（Medium）	小（Small）
Display	Display Large (57sp)	Display Medium (45sp)	Display Small (36sp)
Headline	Headline Large (32sp)	Headline Medium (28sp)	Headline Small (24sp)
Title	Title Large (22sp)	Title Medium (16sp)	Title Small (14sp)
Body	Body Large (16sp)	Body Medium (14sp)	Body Small (12sp)
Label	Label Large (14sp)	Label Medium (12sp)	Label Small (11sp)

字体

• 默认字体：Roboto
• 等宽字体：Roboto Mono
• 表达性字体：Roboto Serif、Bagel Fat One、Anton（用于 Display 样式）

平台实现

平台	API
Flutter	TextTheme(displayLarge: TextStyle(...), ...)
Compose	Typography(displayLarge: TextStyle(...), ...)
Android	TextAppearance.Material3.DisplayLarge
CSS	font-size: 57px; font-weight: 400;

详细参考：typography.md

---

Shape、Elevation、Icons

Shape 系统

35 种形状，corner radius 分为 10 级：

级别	Small	Medium	Large
0	0dp	0dp	0dp
1	2dp	4dp	0dp
2	4dp	8dp	0dp
3	6dp	12dp	0dp
4	8dp	16dp	0dp
5	12dp	20dp	0dp

M3 Expressive 新增：Large Increased (20dp)、Extra Large Increased (32dp)、Extra Extra Large (48dp)

Elevation

6 级（Level 0-5），通过 tonal surface color 或 shadow 显示高度：

Level	用途	叠加高度
0	平面	0dp
1	表面	1dp
2	导航	3dp
3	FAB	6dp
4	模态	8dp
5	导航 + FAB	12dp

Icons

Material Symbols variable font，支持 4 个可变轴：

• Weight：100-700
• Fill：0（Outlined）到 1（Filled）
• Optical size：20px-48px
• Grade：0（Regular）到 -25（more visible on small sizes）

样式：Outlined、Rounded、Sharp

详细参考：shape-elevation-icons.md

---

Motion（动效系统）

Motion Scheme

方案	特点	适用场景
Expressive	overshoot（弹性超出）	英雄时刻、关键交互
Standard	ease into（缓入到达）	功能性产品

Spring Physics

三个参数控制弹簧动画：

参数	说明	典型值
Stiffness	刚度，越高越快	100-1000
Damping	阻尼，越高越少弹跳	10-30
Mass	质量，越低响应越快	0.5-2

过渡动画

模式	说明	平台可用性
Container Transform	共享元素变换	Flutter 需自定义实现（Hero + flightShuttleBuilder）
Fade Through	淡入淡出	全平台
Shared Axis	共享轴位移	全平台

注意：Flutter 有物理弹簧动画（SpringSimulation）和 Hero/Staggered 动画，可实现类似 Expressive 效果，但官方 M3 Motion 库封装暂不可用。

详细参考：motion.md

---

Foundations（设计基础）

自适应布局

Window Size Classes：

Class	宽度	布局
Compact	< 600dp	单列
Medium	600-840dp	自适应列
Expanded	> 840dp	多列+侧边导航

详细参考：foundations.md

---

组件库

8 大组件类别

类别	组件	平台可用性
Buttons	Buttons, FABs, Icon buttons, Button groups	Flutter ✅ Compose ✅ Android ✅ Web ✅
Date & Time	Date pickers, Time pickers	Flutter ✅ Compose ✅ Android ✅ Web ❌
Loading	Loading indicators, Progress indicators	Flutter ✅ Compose ✅ Android ✅ Web ❌
Navigation	Navigation bar, Navigation rail, Navigation drawer	Flutter ✅ Compose ✅ Android ✅ Web ❌
Sheets	Bottom sheets, Side sheets	Flutter ✅ Compose ✅ Android ✅ Web ❌
Selection	Checkboxes, Chips, Radio buttons, Switches	Flutter ✅ Compose ✅ Android ✅ Web ✅
Text Input	Text fields	Flutter ✅ Compose ✅ Android ✅ Web ✅
Containment	App bars, Cards, Dialogs, Lists	Flutter ✅ Compose ✅ Android ✅ Web ✅

详细参考：

• components-overview.md
• navigation-components.md
• input-components.md
• display-components.md

---

跨平台实现

Flutter

dart

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  ),
);

Flutter 有物理弹簧动画（SpringSimulation）和 Hero/Staggered 动画，可部分实现 Expressive 效果，但官方 M3 Motion 库封装暂不可用。

Jetpack Compose

kotlin

MaterialTheme(
    colorScheme = lightColorScheme(
        primary = Color(0xFF6750A4),
        // ...
    )
) { /* content */ }

Compose 支持完整的 M3 Expressive。

Android View

xml

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/...</item>
</style>

Web

Material Web Components 处于维护模式，不再开发新功能。

详细参考：platform-implementation.md

---

Material Design 3 (M3) 跨平台设计系统

来源：Google Material Design 3 官方文档 URL: https://m3.material.io/ 版本：M3 Expressive（2025 年 5 月更新） 更新日期：2026-04-24

Material Design 3（MD3/M3）是 Google 发布的最新设计系统，通过 Material You（动态配色）实现跨平台一致的视觉体验。支持 Flutter、Jetpack Compose、Android View、Web 四平台。

---

设计原则

核心三原则

原则	说明	应用场景
Material Expressive	表达品牌个性，通过颜色、形状、动画体现	自定义主题色、圆角半径
Responsive	适配不同屏幕尺寸和输入方式	断点布局、触摸/鼠标适配
Accessible	为所有用户设计，包含视觉/运动/认知障碍	对比度要求、最小触摸区域

M3 Expressive 更新（2025 年 5 月）

| M3 Expressive 是 M3 的重大升级，引入了更丰富的动画系统、物理弹簧动效和组件变体。以下组件已在 M3 Expressive（May 2025）中被标记为不再推荐： |

• Navigation Drawer → 推荐使用 Expanded Navigation Rail
• Segmented Buttons → 推荐使用 Connected Button Group
• Neutral text button → 不再推荐，使用 Filled/Outlined/Text 变体之一
• Baseline Navigation Bar/Rail → 推荐使用 Flexible/Collapsed/Expanded 变体
• Baseline Extended FAB → 推荐使用 Surface FAB

---

📌 色彩系统完整内容见上方 #色彩系统 章节。

详细参考：color-system.md

---

Typography

Type Scale（5 角色 × 3 尺寸 = 15 种样式）

角色	大（Large）	中（Medium）	小（Small）
Display	Display Large (57sp)	Display Medium (45sp)	Display Small (36sp)
Headline	Headline Large (32sp)	Headline Medium (28sp)	Headline Small (24sp)
Title	Title Large (22sp)	Title Medium (16sp)	Title Small (14sp)
Body	Body Large (16sp)	Body Medium (14sp)	Body Small (12sp)
Label	Label Large (14sp)	Label Medium (12sp)	Label Small (11sp)

字体

• 默认字体：Roboto
• 等宽字体：Roboto Mono
• 表达性字体：Roboto Serif、Bagel Fat One、Anton（用于 Display 样式）

平台实现

平台	API
Flutter	TextTheme(displayLarge: TextStyle(...), ...)
Compose	Typography(displayLarge: TextStyle(...), ...)
Android	TextAppearance.Material3.DisplayLarge
CSS	font-size: 57px; font-weight: 400;

详细参考：typography.md

---

Shape、Elevation、Icons

Shape 系统

35 种形状，corner radius 分为 10 级：

级别	Small	Medium	Large
0	0dp	0dp	0dp
1	2dp	4dp	0dp
2	4dp	8dp	0dp
3	6dp	12dp	0dp
4	8dp	16dp	0dp
5	12dp	20dp	0dp

M3 Expressive 新增：Large Increased (20dp)、Extra Large Increased (32dp)、Extra Extra Large (48dp)

Elevation

6 级（Level 0-5），通过 tonal surface color 或 shadow 显示高度：

Level	用途	叠加高度
0	平面	0dp
1	表面	1dp
2	导航	3dp
3	FAB	6dp
4	模态	8dp
5	导航 + FAB	12dp

Icons

Material Symbols variable font，支持 4 个可变轴：

• Weight：100-700
• Fill：0（Outlined）到 1（Filled）
• Optical size：20px-48px
• Grade：0（Regular）到 -25（more visible on small sizes）

样式：Outlined、Rounded、Sharp

详细参考：shape-elevation-icons.md

---

Motion（动效系统）

Motion Scheme

方案	特点	适用场景
Expressive	overshoot（弹性超出）	英雄时刻、关键交互
Standard	ease into（缓入到达）	功能性产品

Spring Physics

三个参数控制弹簧动画：

参数	说明	典型值
Stiffness	刚度，越高越快	100-1000
Damping	阻尼，越高越少弹跳	10-30
Mass	质量，越低响应越快	0.5-2

过渡动画

模式	说明	平台可用性
Container Transform	共享元素变换	Flutter 需自定义实现（Hero + flightShuttleBuilder）
Fade Through	淡入淡出	全平台
Shared Axis	共享轴位移	全平台

注意：Flutter 有物理弹簧动画（SpringSimulation）和 Hero/Staggered 动画，可实现类似 Expressive 效果，但官方 M3 Motion 库封装暂不可用。

详细参考：motion.md

---

Foundations（设计基础）

自适应布局

Window Size Classes：

Class	宽度	布局
Compact	< 600dp	单列
Medium	600-840dp	自适应列
Expanded	> 840dp	多列+侧边导航

详细参考：foundations.md

---

组件库

8 大组件类别

类别	组件	平台可用性
Buttons	Buttons, FABs, Icon buttons, Button groups	Flutter ✅ Compose ✅ Android ✅ Web ✅
Date & Time	Date pickers, Time pickers	Flutter ✅ Compose ✅ Android ✅ Web ❌
Loading	Loading indicators, Progress indicators	Flutter ✅ Compose ✅ Android ✅ Web ❌
Navigation	Navigation bar, Navigation rail, Navigation drawer	Flutter ✅ Compose ✅ Android ✅ Web ❌
Sheets	Bottom sheets, Side sheets	Flutter ✅ Compose ✅ Android ✅ Web ❌
Selection	Checkboxes, Chips, Radio buttons, Switches	Flutter ✅ Compose ✅ Android ✅ Web ✅
Text Input	Text fields	Flutter ✅ Compose ✅ Android ✅ Web ✅
Containment	App bars, Cards, Dialogs, Lists	Flutter ✅ Compose ✅ Android ✅ Web ✅

详细参考：

• components-overview.md
• navigation-components.md
• input-components.md
• display-components.md

---

跨平台实现

Flutter

dart

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  ),
);

Flutter 有物理弹簧动画（SpringSimulation）和 Hero/Staggered 动画，可部分实现 Expressive 效果，但官方 M3 Motion 库封装暂不可用。

Jetpack Compose

kotlin

MaterialTheme(
    colorScheme = lightColorScheme(
        primary = Color(0xFF6750A4),
        // ...
    )
) { /* content */ }

Compose 支持完整的 M3 Expressive。

Android View

xml

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/...</item>
</style>

Web

Material Web Components 处于维护模式，不再开发新功能。

详细参考：platform-implementation.md

---

避坑指南

M3 Expressive 兼容性

平台	M3 Expressive 支持
Jetpack Compose	✅ 完整支持
Android View	✅ 完整支持
Flutter	⚠️ 官方库不可用，可通过 Hero/Staggered/SpringSimulation 自定义实现
Web	❌ 不可用

动态配色

• Android 12+ 设备自动支持
• 旧版 Android 需回退到 baseline color scheme
• Web 端不支持动态配色

组件废弃

以下组件在 M3 Expressive（May 2025）中不再推荐：

• Navigation Drawer → 使用 Navigation Rail
• Segmented Buttons → 使用 Connected Button Group
• Neutral text button → 不再推荐，使用 Filled/Outlined/Text 变体之一

Flutter Platform.adaptive

Flutter 3.22+ 引入了 Platform.adaptive 系列组件，自动在 iOS（Cupertino）和 Android（Material）间切换：

组件	说明	自动适配
PlatformNavigationBar	底部导航栏	iOS → CupertinoTabBar / Android → NavigationBar
PlatformIconButton	图标按钮	iOS → CupertinoButton / Android → IconButton
PlatformTextButton	文字按钮	iOS → CupertinoButton / Android → TextButton
PlatformSwitch	开关	iOS → CupertinoSwitch / Android → Switch

dart

// 最常用的 PlatformNavigationBar
PlatformNavigationBar(
  selectedIndex: currentIndex,
  onDestinationSelected: (i) => setState(() => currentIndex = i),
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.explore_outlined),
      selectedIcon: Icon(Icons.explore),
      label: 'Explore',
    ),
    NavigationDestination(
      icon: Icon(Icons.bookmark_border),
      selectedIcon: Icon(Icons.bookmark),
      label: 'Saved',
    ),
  ],
)

// PlatformIconButton 示例
PlatformIconButton(
  icon: Icon(Icons.settings),
  onPressed: () => openSettings(),
)

---

快速参考

色彩角色速查

Token	说明
primary	主品牌色
onPrimary	主色上的文字色
primaryContainer	主色容器
surface	表面色
surfaceVariant	表面变体
outline	边框色
error	错误色

Type Scale 速查

角色-尺寸	字重	大小
Display Large	400	57sp
Headline Medium	400	28sp
Title Medium	500	16sp
Body Large	400	16sp
Label Small	500	11sp

Corner Radius 速查

级别	值
Small	4-8dp
Medium	8-16dp
Large	12-20dp
Extra Large	32dp+

Elevation 速查

Level	叠加高度	典型用途
0	0dp	平面
1	1dp	表面
3	6dp	FAB
5	12dp	模态

触摸目标

元素	最小尺寸
触摸目标	48dp × 48dp
按钮内图标	24dp
List item	48dp 高

平台支持矩阵

功能	Flutter	Compose	Android	Web
M3 基础	✅	✅	✅	✅
M3 Expressive	❌	✅	✅	❌
动态配色	✅	✅	✅ 12+	❌
物理弹簧动效	❌	✅	✅	❌
Web Components	N/A	N/A	N/A	✅ 维护中

---

输出格式规范

回复结构

1. 直接回答 — 一段简洁的话给出核心答案
2. 代码示例 — 提供完整的平台代码（如需）
3. 实现要点 — 关键步骤和注意事项
4. 避坑提醒 — 常见错误 + 正确做法

示例回复

M3 的动态配色通过 ColorScheme.fromSeed() 实现。Flutter 中只需传入一个种子色，系统会自动生成完整的 26 色色板，支持亮色/暗色自动切换。 M3 Expressive 更新后，Compose 已支持物理弹簧动效，但 Flutter 仍不原生支持。

dart

// Flutter 动态配色
MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  ),
);

禁用格式

• ❌ 不要显式分层（避免"第一层/第二层/框架分析"等字眼）
• ❌ 不要长篇解释概念，要直接给出实现
• ❌ 不要只给代码片段，要给完整可运行的示例
• ✅ 输出应是一段干净的话 + 完整代码

---

来源

文档版本：Material Design 3 M3 Expressive（2025 年 5月更新） URL: https://m3.material.io/ 抓取时间：2026-04-24 官方文档涵盖：Color, Typography, Shape, Elevation, Icons, Motion, Foundations, Components, Develop

---

参考文档

文件	行数	覆盖内容
color-system.md	427	色彩系统完整参考
typography.md	316	Typography 完整参考
shape-elevation-icons.md	213	Shape、Elevation、Icons
motion.md	507	动效系统完整参考
foundations.md	231	设计原则与自适应布局
components-overview.md	210	组件库总览
navigation-components.md	137	导航组件详解
input-components.md	252	输入组件详解
display-components.md	221	展示组件详解
platform-implementation.md	573	跨平台实现
color-scheme-roles.md	293	色彩角色详解
components.md	517	组件完整参考
components-quickref.md	462	组件速查
m3-migration-guide.md	520	M2→M3 迁移指南
md3-api-changes.md	379	API 变更
motion-animation.md	448	动效动画
layout-constraints.md	103	布局约束