色彩系统

色彩角色

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

动态配色（Material You）

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

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

主题构建

详细参考：color-system.md

Typography

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

字体

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

平台实现

详细参考：typography.md

Shape、Elevation、Icons

Shape 系统

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

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

Elevation

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

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

Spring Physics

三个参数控制弹簧动画：

过渡动画

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

详细参考：motion.md

Foundations（设计基础）

自适应布局

Window Size Classes：

详细参考：foundations.md

组件库

8 大组件类别

详细参考：

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

跨平台实现

Flutter

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

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

Jetpack Compose

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

Compose 支持完整的 M3 Expressive。

Android View

\x3Cstyle name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    \x3Citem name="colorPrimary">@color/...\x3C/item>
\x3C/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 四平台。

设计原则

核心三原则

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 种样式）

字体

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

平台实现

详细参考：typography.md

Shape、Elevation、Icons

Shape 系统

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

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

Elevation

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

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

Spring Physics

三个参数控制弹簧动画：

过渡动画

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

详细参考：motion.md

Foundations（设计基础）

自适应布局

Window Size Classes：

详细参考：foundations.md

组件库

8 大组件类别

详细参考：

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

跨平台实现

Flutter

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

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

Jetpack Compose

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

Compose 支持完整的 M3 Expressive。

Android View

\x3Cstyle name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    \x3Citem name="colorPrimary">@color/...\x3C/item>
\x3C/style>

Web

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

详细参考：platform-implementation.md

避坑指南

M3 Expressive 兼容性

动态配色

• 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
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(),
)

快速参考

色彩角色速查

Type Scale 速查

Corner Radius 速查

Elevation 速查

触摸目标

平台支持矩阵

输出格式规范

回复结构

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

示例回复

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

// 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

参考文档