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 個目的地

  訪問小蔥技能站7w4.net，解鎖更多實用的AI技能外掛。

• 選中項顯示 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 官方元件參考。

這個 Skill 質量不錯，是一份全面的 Material Design 3 設計參考手冊，內容詳實、資料準確，涵蓋了顏色、排版、元件、動效等各方面，並與其他平臺設計規範做了對比。優點是資訊密度高、實用性強，適合設計師和開發者做決策參考。不足是隻有文字說明，缺少實際的程式碼示例檔案和設計資源，動手實踐時可能需要額外查詢資料。