material-design-3

用途

本技能提供 Material Design 3（又称 Material You）的全面指导。Material Design 3 是 Google 最新的设计语言，强调个性化、无障碍与现代化 UI 模式，主要面向现代 Web 与 Angular 应用。

适用时机包括：

使用 Material Design 实现新的 Angular 应用
从 Material Design 2 迁移到 Material Design 3
使用 Material Design 3 令牌创建自定义主题
实现动态配色主题
构建无障碍的现代化 UI 组件
遵循 Material You 设计原则
使用 Material Design 3 的排版与间距系统

主要能力

颜色系统

Material Design 3 引入了一套精细的颜色系统。

颜色角色：

Primary：用于突出操作的主品牌色
Secondary：用于次要操作的辅助色
Tertiary：用于高亮与对比的点缀色
Error：用于错误状态的颜色
Surface：组件背景色
On-colors：对比文字/图标颜色（on-primary、on-secondary 等）

颜色变体：

容器色（如 primary-container）
容器上的颜色（如 on-primary-container）
Surface 变体（surface-dim、surface-bright、surface-container）

动态配色

Material Design 3 的标志性特性：

从源色生成配色方案
同时支持浅色与深色主题
自动对比度调整
系统级颜色提取（在支持的平台上从壁纸提取）

排版

五种排版尺度：

Display：最大文字（display-large、display-medium、display-small）
Headline：章节标题（headline-large 至 headline-small）
Title：子章节标题（title-large 至 title-small）
Body：正文内容（body-large、body-medium、body-small）
Label：UI 标签（label-large 至 label-small）

高度（Elevation）

三种高度策略：

Shadow：使用阴影的传统高度
Overlay：色调表面叠加
Combined：阴影 + 叠加，增强深度感知

形状

圆角系统包含四个尺度：

None：0dp（直角）
Extra Small：4dp
Small：8dp
Medium：12dp
Large：16dp
Extra Large：28dp

使用方式

在 Angular 中设置 Material Design 3 主题

// 使用 M3 令牌定义主题
@use '@angular/material' as mat;

// 引入核心 Material Design 3 样式
@include mat.core();

// 定义调色板
$my-primary: mat.define-palette(mat.$azure-palette);
$my-accent: mat.define-palette(mat.$blue-palette);
$my-warn: mat.define-palette(mat.$red-palette);

// 创建主题
$my-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $my-primary,
    tertiary: $my-accent,
  ),
  typography: (
    brand-family: 'Roboto',
    bold-weight: 700
  ),
  density: (
    scale: 0
  )
));

// 应用主题
@include mat.all-component-themes($my-theme);

// 深色主题变体
$my-dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $my-primary,
    tertiary: $my-accent,
  )
));

// 需要时应用深色主题
.dark-theme {
  @include mat.all-component-colors($my-dark-theme);
}

使用颜色令牌

// 在组件中访问主题颜色
.my-component {
  background-color: var(--mat-sys-primary);
  color: var(--mat-sys-on-primary);
  
  &:hover {
    background-color: var(--mat-sys-primary-container);
    color: var(--mat-sys-on-primary-container);
  }
}

// Surface 变体
.surface {
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}

.surface-container {
  background-color: var(--mat-sys-surface-container);
}

排版用法

// 使用排版令牌
.heading {
  font: var(--mat-sys-headline-large);
}

.body-text {
  font: var(--mat-sys-body-medium);
}

.label {
  font: var(--mat-sys-label-small);
}

高度与阴影

.elevated-card {
  // 1 级高度
  box-shadow: var(--mat-sys-level1);
  
  &:hover {
    // 悬停时 2 级高度
    box-shadow: var(--mat-sys-level2);
  }
}

动态主题切换示例

// 示例：Angular 中的动态主题切换
export class ThemeService {
  private isDark = signal(false);
  
  toggleTheme() {
    this.isDark.update(dark => !dark);
    document.body.classList.toggle('dark-theme', this.isDark());
  }
  
  applyCustomColors(sourceColor: string) {
    // 从源色生成 M3 调色板
    const palette = this.generateM3Palette(sourceColor);
    this.applyCSSVariables(palette);
  }
}

使用 M3 令牌的自定义组件

@Component({
  selector: 'app-custom-button',
  template: `
    <button class="m3-button" [class.filled]="variant === 'filled'">
      <ng-content></ng-content>
    </button>
  `,
  styles: [`
    .m3-button {
      padding: 10px 24px;
      border-radius: var(--mat-sys-corner-full);
      font: var(--mat-sys-label-large);
      border: none;
      cursor: pointer;
      
      &.filled {
        background-color: var(--mat-sys-primary);
        color: var(--mat-sys-on-primary);
        
        &:hover {
          background-color: var(--mat-sys-primary-container);
          color: var(--mat-sys-on-primary-container);
        }
      }
      
      &.outlined {
        background-color: transparent;
        border: 1px solid var(--mat-sys-outline);
        color: var(--mat-sys-primary);
      }
    }
  `]
})
export class CustomButtonComponent {
  @Input() variant: 'filled' | 'outlined' = 'filled';
}

最佳实践

主题一致性

使用设计令牌而非硬编码值
在组件间保持颜色用法一致
遵循 Material Design 3 颜色角色指南

无障碍

确保文字对比度至少为 4.5:1
使用语义化颜色角色（primary、secondary、error）
同时支持浅色与深色主题
提供足够的触摸目标尺寸（最小 48x48dp）

响应式设计

使用 Material Design 3 断点
针对不同屏幕尺寸调整布局
在移动端、平板与桌面视口测试

适用场景

新建 Angular 应用的 Material 主题搭建
从 Material Design 2 迁移到 Material Design 3
自定义主题与动态配色实现
无障碍现代化 UI 组件开发
排版、间距、形状与高度系统的落地

限制与排查

常见问题与解决方案：

颜色未生效：确保先调用 @include mat.core()
主题令牌未定义：检查 Angular Material 版本（需要 v15+）
深色主题不工作：确认 .dark-theme 类已应用到父元素
自定义颜色不工作：使用 define-palette() 并配合正确的 Material 调色板
排版未加载：在 index.html 中引入 Material Design 字体（Roboto）
无障碍对比度问题：使用 Material 内置颜色角色而非自定义颜色

从 Material Design 2 迁移

从 M2 迁移到 M3 的关键变化：

用 theme-type 方式替换调色板
更新组件样式以使用设计令牌
将自定义主题迁移到新的主题 API
将排版从 mat-typography-level 更新为 M3 令牌
用 CSS 自定义属性替换高度 mixin
按新的对比度要求测试无障碍

技能介绍

用途