ClawHub

Material Design Skill

Creative
#material-design#android#flutter#animation

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 时触发。

Install

openclaw skills install @yhongm/material-design-skill

色彩系统

色彩角色

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.NoActionBar
CSS--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 样式）

平台实现

平台API
FlutterTextTheme(displayLarge: TextStyle(...), ...)
ComposeTypography(displayLarge: TextStyle(...), ...)
AndroidTextAppearance.Material3.DisplayLarge
CSSfont-size: 57px; font-weight: 400;

详细参考：typography.md

Shape、Elevation、Icons

Shape 系统

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

级别SmallMediumLarge
00dp0dp0dp
12dp4dp0dp
24dp8dp0dp
36dp12dp0dp
48dp16dp0dp
512dp20dp0dp

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
3FAB6dp
4模态8dp
5导航 + 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-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单列
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 ✅

详细参考：

跨平台实现

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

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

平台实现

平台API
FlutterTextTheme(displayLarge: TextStyle(...), ...)
ComposeTypography(displayLarge: TextStyle(...), ...)
AndroidTextAppearance.Material3.DisplayLarge
CSSfont-size: 57px; font-weight: 400;

详细参考：typography.md

Shape、Elevation、Icons

Shape 系统

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

级别SmallMediumLarge
00dp0dp0dp
12dp4dp0dp
24dp8dp0dp
36dp12dp0dp
48dp16dp0dp
512dp20dp0dp

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
3FAB6dp
4模态8dp
5导航 + 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-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单列
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 ✅

详细参考：

跨平台实现

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

<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
// 最常用的 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 Large40057sp
Headline Medium40028sp
Title Medium50016sp
Body Large40016sp
Label Small50011sp

Corner Radius 速查

级别值
Small4-8dp
Medium8-16dp
Large12-20dp
Extra Large32dp+

Elevation 速查

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

触摸目标

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

平台支持矩阵

功能FlutterComposeAndroidWeb
M3 基础✅✅✅✅
M3 Expressive❌✅✅❌
动态配色✅✅✅ 12+❌
物理弹簧动效❌✅✅❌
Web ComponentsN/AN/AN/A✅ 维护中

输出格式规范

回复结构

  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

参考文档

文件行数覆盖内容
color-system.md427色彩系统完整参考
typography.md316Typography 完整参考
shape-elevation-icons.md213Shape、Elevation、Icons
motion.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布局约束
More in Creative