色彩系统#

色彩角色#

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

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

动态配色（Material You）#

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

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

主题构建#

平台代码FlutterColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.light)ComposelightColorScheme(primary = ...)Android XMLTheme.Material3.DayNight.NoActionBarCSS--md-sys-color-primary: #...;

详细参考： color-system.md

---

Typography#

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

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

字体#

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

平台实现#

平台APIFlutterTextTheme(displayLarge: TextStyle(...), ...)ComposeTypography(displayLarge: TextStyle(...), ...)AndroidTextAppearance.Material3.DisplayLargeCSSfont-size: 57px; font-weight: 400;

详细参考： typography.md

---

Shape、Elevation、Icons#

Shape 系统#

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

级别SmallMediumLarge00dp0dp0dp12dp4dp0dp24dp8dp0dp36dp12dp0dp48dp16dp0dp512dp20dp0dp

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

Elevation#

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

Level用途叠加高度0平面0dp1表面1dp2导航3dp3FAB6dp4模态8dp5导航 + FAB12dp

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#

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

Spring Physics#

三个参数控制弹簧动画：

参数说明典型值Stiffness刚度，越高越快100-1000Damping阻尼，越高越少弹跳10-30Mass质量，越低响应越快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单列Medium600-840dp自适应列Expanded> 840dp多列+侧边导航

详细参考： foundations.md

---

组件库#

8 大组件类别#

类别组件平台可用性ButtonsButtons, FABs, Icon buttons, Button groupsFlutter ✅ Compose ✅ Android ✅ Web ✅Date & TimeDate pickers, Time pickersFlutter ✅ Compose ✅ Android ✅ Web ❌LoadingLoading indicators, Progress indicatorsFlutter ✅ Compose ✅ Android ✅ Web ❌NavigationNavigation bar, Navigation rail, Navigation drawerFlutter ✅ Compose ✅ Android ✅ Web ❌SheetsBottom sheets, Side sheetsFlutter ✅ Compose ✅ Android ✅ Web ❌SelectionCheckboxes, Chips, Radio buttons, SwitchesFlutter ✅ Compose ✅ Android ✅ Web ✅Text InputText fieldsFlutter ✅ Compose ✅ Android ✅ Web ✅ContainmentApp bars, Cards, Dialogs, ListsFlutter ✅ 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）DisplayDisplay Large (57sp)Display Medium (45sp)Display Small (36sp)HeadlineHeadline Large (32sp)Headline Medium (28sp)Headline Small (24sp)TitleTitle Large (22sp)Title Medium (16sp)Title Small (14sp)BodyBody Large (16sp)Body Medium (14sp)Body Small (12sp)LabelLabel Large (14sp)Label Medium (12sp)Label Small (11sp)

字体#

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

平台实现#

平台APIFlutterTextTheme(displayLarge: TextStyle(...), ...)ComposeTypography(displayLarge: TextStyle(...), ...)AndroidTextAppearance.Material3.DisplayLargeCSSfont-size: 57px; font-weight: 400;

详细参考： typography.md

---

Shape、Elevation、Icons#

Shape 系统#

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

级别SmallMediumLarge00dp0dp0dp12dp4dp0dp24dp8dp0dp36dp12dp0dp48dp16dp0dp512dp20dp0dp

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

Elevation#

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

Level用途叠加高度0平面0dp1表面1dp2导航3dp3FAB6dp4模态8dp5导航 + FAB12dp

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#

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

Spring Physics#

三个参数控制弹簧动画：

参数说明典型值Stiffness刚度，越高越快100-1000Damping阻尼，越高越少弹跳10-30Mass质量，越低响应越快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单列Medium600-840dp自适应列Expanded> 840dp多列+侧边导航

详细参考： foundations.md

---

组件库#

8 大组件类别#

类别组件平台可用性ButtonsButtons, FABs, Icon buttons, Button groupsFlutter ✅ Compose ✅ Android ✅ Web ✅Date & TimeDate pickers, Time pickersFlutter ✅ Compose ✅ Android ✅ Web ❌LoadingLoading indicators, Progress indicatorsFlutter ✅ Compose ✅ Android ✅ Web ❌NavigationNavigation bar, Navigation rail, Navigation drawerFlutter ✅ Compose ✅ Android ✅ Web ❌SheetsBottom sheets, Side sheetsFlutter ✅ Compose ✅ Android ✅ Web ❌SelectionCheckboxes, Chips, Radio buttons, SwitchesFlutter ✅ Compose ✅ Android ✅ Web ✅Text InputText fieldsFlutter ✅ Compose ✅ Android ✅ Web ✅ContainmentApp bars, Cards, Dialogs, ListsFlutter ✅ 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 → NavigationBarPlatformIconButton图标按钮iOS → CupertinoButton / Android → IconButtonPlatformTextButton文字按钮iOS → CupertinoButton / Android → TextButtonPlatformSwitch开关iOS → CupertinoSwitch / Android → Switchdart

// 最常用的 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 Large40057spHeadline Medium40028spTitle Medium50016spBody Large40016spLabel Small50011sp

Corner Radius 速查#

级别值Small4-8dpMedium8-16dpLarge12-20dpExtra Large32dp+

Elevation 速查#

Level叠加高度典型用途00dp平面11dp表面36dpFAB512dp模态

触摸目标#

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

平台支持矩阵#

功能FlutterComposeAndroidWebM3 基础✅✅✅✅M3 Expressive❌✅✅❌动态配色✅✅✅ 12+❌物理弹簧动效❌✅✅❌Web ComponentsN/AN/AN/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.md427色彩系统完整参考typography.md316Typography 完整参考shape-elevation-icons.md213Shape、Elevation、Iconsmotion.md507动效系统完整参考foundations.md231设计原则与自适应布局components-overview.md210组件库总览navigation-components.md137导航组件详解input-components.md252输入组件详解display-components.md221展示组件详解platform-implementation.md573跨平台实现color-scheme-roles.md293色彩角色详解components.md517组件完整参考components-quickref.md462组件速查m3-migration-guide.md520M2→M3 迁移指南md3-api-changes.md379API 变更motion-animation.md448动效动画layout-constraints.md103布局约束