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 的三大支柱：

| 原则 | 含义 | 实践 |
|------|------|------|
| **Personal（个性化）** | 适应用户偏好 | Dynamic Color 从壁纸取色 |
| **Adaptive（自适应）** | 适应各种设备 | 响应式布局、折叠屏支持 |
| **Expressive（表达力）** | 丰富的视觉表达 | 大圆角、色彩层次、motion |

### 与 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）

| 角色 | Light | Dark | 用途 |
|------|-------|------|------|
| Primary | Tone 40 | Tone 80 | 主要交互元素（FAB、按钮） |
| On Primary | Tone 100 | Tone 20 | Primary 上的文字/图标 |
| Primary Container | Tone 90 | Tone 30 | 次要强调容器 |
| On Primary Container | Tone 10 | Tone 90 | 容器上的内容 |
| Secondary | Tone 40 | Tone 80 | 次要交互元素 |
| Tertiary | Tone 40 | Tone 80 | 对比/强调 |
| Surface | Tone 99 | Tone 6 | 页面主背景 |
| Surface Variant | Tone 90 | Tone 30 | 卡片/区块背景 |
| On Surface | Tone 10 | Tone 90 | 主文字 |
| On Surface Variant | Tone 30 | Tone 80 | 辅助文字 |
| Outline | Tone 50 | Tone 60 | 边框 |
| Outline Variant | Tone 80 | Tone 30 | 弱边框/分隔线 |
| Error | `#B3261E` | `#F2B8B5` | 错误...