Google Material Design 3 实战参考

Material Design 3（Material You）的实战速查，覆盖色彩、排版、组件和动效。

适用场景

• Android 应用 UI 设计（Jetpack Compose / XML Views）
• Flutter 跨平台应用
• Web 应用使用 Material 组件库（MUI / Angular Material）
• 审计现有 UI 是否符合 Material 3 规范

不适用

• macOS / iOS 原生应用（参考 apple-hig）
• Windows 原生应用（参考 fluent-design）

1. 核心设计原则

Material 3 的三大支柱：

与 Apple HIG / Fluent 的区别

Apple:   做减法，克制，内容优先
Fluent:  融入环境（Mica/Acrylic），层次丰富
Material: 做加法，表达力强，色彩大胆，圆角更大

2. 色彩系统（Dynamic Color）

Material 3 色彩方案

M3 使用 色调调色板（Tonal Palette） 生成完整配色：

Source Color（种子色）
  → Primary Palette（主色调 13 级）
  → Secondary Palette（辅色调 13 级）
  → Tertiary Palette（第三色调 13 级）
  → Neutral Palette（中性色 13 级）
  → Neutral Variant Palette（中性变体 13 级）
  → Error Palette（错误色 13 级）

关键色槽（Key Color Roles）

Dynamic Color（Material You）

Android 12+ 支持从壁纸自动提取 Source Color：

// Jetpack Compose
val colorScheme = if (dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    dynamicLightColorScheme(context) // 或 dynamicDarkColorScheme
} else {
    lightColorScheme(primary = Purple40, ...)
}

手动生成配色

使用 Google 官方工具：

• Material Theme Builder: https://m3.material.io/theme-builder
• 输入一个 Source Color → 自动生成完整 Light/Dark 方案
• 导出为 Compose / CSS / Figma Token

3. 排版

字体栈

Android: Roboto（系统默认）
Web:     'Roboto', system-ui, sans-serif
iOS:     SF Pro（Flutter 自动适配）

Type Scale