Material Design

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

与其他平台对比

Material Body Large = 16px → Apple Body = 13px (macOS) / 17px (iOS)
Material 偏大偏宽松，Apple 偏紧凑
Material 大量用 Medium 字重，Apple 偏 Regular

4. 组件规格

按钮

输入

容器

触控目标

最小触控目标：48×48dp
推荐触控目标：56×56dp（FAB）
间距：至少 8dp

5. Shape 系统

M3 的圆角规则（使用 dp）：

与其他平台对比

Material: 大圆角风格（Dialog 28dp, Button 20dp）
Apple:    中等圆角（Dialog ~12px, Button 5-7px）
Fluent:   小圆角（Dialog 8px, Button 4px）

Material 3 的圆角是三者中最大的，视觉上最柔和、最有表达力。

6. Elevation（海拔系统）

M3 使用 Surface Tint 而非纯阴影来表达层次：

Surface Tint 实现

/* 用 Primary 色做 overlay，opacity 按 level 递增 */
.elevation-1 {
  background: linear-gradient(
    rgba(var(--md-primary-rgb), 0.05),
    rgba(var(--md-primary-rgb), 0.05)
  ), var(--md-surface);
}

Dark 模式下 Surface Tint 更重要——阴影在深色背景上几乎不可见，用 tint 区分层次。

7. Motion（动效系统）

Duration

Easing

/* Standard — 不离开屏幕的移动 */
--md-standard: cubic-bezier(0.2, 0, 0, 1);
--md-standard-decelerate: cubic-bezier(0, 0, 0, 1);
--md-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);

/* Emphasized — 更有表达力的移动 */
--md-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--md-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

转场模式

8. 导航模式

按设备选择

Navigation Bar（底部导航）

┌───────────────────────────────────┐
│                                   │
│          Content Area             │
│                                   │
├─────┬─────┬─────┬─────┬─────────┤
│  🏠  │  🔍  │  ➕  │  💬  │  👤    │
│ Home │Search│ Add │ Chat │Profile │
└─────┴─────┴─────┴─────┴─────────┘

• 3-5 个目的地
• 选中项显示 label + 指示器（pill 形状）
• 高度：80dp
• 指示器：64×32dp，圆角 16dp

Navigation Rail（侧边窄导航）

┌──┬──────────────────────┐
│🏠│                      │
│──│                      │
│🔍│    Content Area      │
│──│                      │
│💬│                      │
│──│                      │
│⚙️│                      │
└──┴──────────────────────┘

• 宽度：80dp
• 可选 FAB 在顶部
• 选中项有 pill 指示器

9. Dark Theme

M3 Dark Theme 规则

Surface: 极深灰（#1C1B1F），不是纯黑 #000000
On Surface: 极浅灰（#E6E1E5），不是纯白 #FFFFFF

与 Apple Dark Mode 对比

Apple:    深灰 #1E1E1E，偏中性
Material: 极深灰 #1C1B1F，带紫色调（从 Neutral palette 来）
Apple:    不鼓励纯黑（但 OLED 用 #000000）
Material: 明确不推荐纯黑

10. 平台差异速查

11. Checklist

设计审计

• 使用 M3 Color Scheme（Primary/Secondary/Tertiary + Surface 系列）
• 按钮用全圆角（20dp radius）
• Card 用 12dp 圆角
• Dialog 用 28dp 圆角
• 触控目标 ≥ 48dp
• 排版使用 M3 Type Scale
• Elevation 用 Surface Tint 而非纯阴影
• 导航选对设备模式（Bar / Rail / Drawer）
• 动画使用 M3 标准 easing

Dark Theme

• Surface 不用纯黑（用 Neutral Tone 6）
• On Surface 不用纯白
• Primary 用 Tone 80（更亮）
• Surface Tint 可见
• 对比度 ≥ 4.5:1

Android 开发

• 支持 Dynamic Color（Android 12+）
• 低版本 fallback 到静态配色
• 使用 MaterialTheme（Compose）或 Theme.Material3（XML）

来源

Material Design 3 (m3.material.io) + Material Theme Builder + Jetpack Compose 官方组件参考。