Google 推出的跨平台设计语言，融合物理世界隐喻与数字交互美学。自 2014 年发布以来，Material Design 已从一套 Android 设计规范演变为覆盖全平台、具备动态配色能力的综合设计系统，影响数十亿用户。
Material Design 是 Google 于 2014 年 I/O 大会发布的一套视觉设计语言，由 Matías Duarte 主导设计。它从物理世界的纸张、墨水、光影中汲取灵感，为数字界面建立了一套统一的视觉层级和交互规范。
| 目标 | 说明 | 实现方式 |
|---|---|---|
| 统一体验 | 跨 Android、iOS、Web、Flutter 平台保持一致 | 组件规范 + 平台适配层 |
| 物理隐喻 | 用阴影、层级、动效模拟真实材质 | Z 轴海拔系统（elevation） |
| 清晰层级 | 通过 Z 轴高度建立信息优先级 | 阴影深度 + 动画过渡 |
| 响应式交互 | 触摸反馈即时、明确、有意义 | Ripple 动画 + 触觉反馈 |
| 版本 | 时间 | 核心变化 | 代表性特性 |
|---|---|---|---|
| Material Design 1 | 2014 | 首次发布，奠定基础 | 卡片、阴影（elevation 1-24dp）、FAB、Ripple |
| Material Design 2 | 2018 | Material Theming，可定制主题 | 自定义形状、排版缩放、深色主题 |
| Material You (3) | 2021 | 动态配色，个性化提取系统 | Monet 算法、动态颜色、更大圆角、Navigation Rail |
Material Design 被广泛应用于以下主要平台和框架：
| 平台 | 实现库 | 累计下载/使用量 |
|---|---|---|
| Android (原生) | Material Components for Android | 超过 100 万应用集成 |
| iOS | Material Components for iOS | 超过 10 万应用集成 |
| Web (React) | MUI (Material-UI) | npm 周下载量 800 万+ |
| Web (Vue) | Vuetify | npm 周下载量 50 万+ |
| Flutter | Flutter SDK 内置 | 所有 Flutter 应用 |
| Web (Web Components) | Material Web Components | Google 内部产品广泛使用 |
Material Design 适合以下场景：
界面元素像纸张一样分层堆叠，有厚度、有阴影、有边界。这一隐喻来自对物理世界的观察——现实中的纸张不会凭空悬浮或穿透彼此。
物理隐喻的数学表达：阴影的渲染基于多光源环境照明模型。一个 elevation 为 的物体的阴影强度 可近似为：
其中 是环境光阴影分量， 是主光源阴影分量， 和 是衰减常数。在 Material Design 中， 的单位是 dp，不同 值对应的阴影透明度如下：
| Elevation (dp) | 环境光阴影不透明度 | 主光源阴影不透明度 | 典型场景 |
|---|---|---|---|
| 0 | 0.00 | 0.00 | 扁平按钮、文本 |
| 1 | 0.12 | 0.08 | 卡片静止态 |
| 2 | 0.14 | 0.10 | 开关、复选框 |
| 4 | 0.16 | 0.12 | 卡片悬停态 |
| 6 | 0.18 | 0.14 | FAB 静止 |
| 8 | 0.20 | 0.16 | 底部菜单 |
| 12 | 0.22 | 0.18 | 对话框 |
| 16 | 0.24 | 0.20 | 导航抽屉 |
| 24 | 0.28 | 0.24 | 全屏模态 |
具体数据：一项 Google 内部 A/B 测试显示，采用 Material Design 的界面相比传统设计，用户任务完成时间平均减少 18%，误操作率下降 32%（数据来源：Google I/O 2015 设计演讲）。
Material Design 的动效设计遵循以下量化原则：
| 原则 | 量化指标 | 具体实现 |
|---|---|---|
| 即时反馈 | 触摸响应 ≤ 100ms | Ripple 立即触发，不等待手势确认 |
| 连续过渡 | 页面切换 200-500ms | Shared Element Transition 平滑变形 |
| 自然缓动 | 贝塞尔曲线控制 | 标准化 cubic-bezier 曲线族 |
| 层级感知 | Z 轴动画时间与距离成正比 | 4dp 变化 150ms，24dp 变化 375ms |
| 方向一致 | 进入/退出方向对称 | 左滑进 = 右滑出，不违反直觉 |
Material Design 使用 2014 色彩系统，包含主色、辅色、变体色：
Primary: #1976D2 (主色)
Primary Dark: #1565C0 (主色暗部)
Primary Light:#BBDEFB (主色亮部)
Accent: #FF4081 (强调色)
Material 3 扩展了色彩系统，引入更多语义化角色：
| 角色 | 用途 | 亮度要求 |
|---|---|---|
| Primary | 主要品牌色，大面积使用 | 按钮、FAB、选中态 |
| On Primary | 主色上的文字/图标 | 必须与 Primary 有 ≥ 4.5:1 对比度 |
| Primary Container | 主色容器，更浅版本 | 选中列表项背景 |
| On Primary Container | 容器上文字 | 与 Primary Container 对比 ≥ 4.5:1 |
| Secondary | 强调色，次要控件 | 轮廓按钮、开关 |
| Surface | 卡片、对话框背景 | 页面主要表面 |
| Surface Variant | 次要表面 | 菜单、表单区域 |
| Background | 页面底层背景 | 页面最底层 |
| Error | 错误状态 | #B3261E（默认） |
| On Error | 错误上的文字 | #FFFFFF |
Material You 引入的 Monet 系统从用户壁纸中提取颜色，生成 5 种关键颜色，每种衍生 13 个色调（Tonal Palette）：
壁纸 → ML 聚类提取 5 个主色 → 生成色调调色板 → 映射到色彩角色
色调调色板的生成基于 CIELAB 色彩空间。给定一个源色 ，色调 定义为：
其中 是色调索引 （0-12）对应的亮度偏移量：
| 色调索引 | 亮度偏移 | 典型用途 | 在浅色主题中的亮度 |
|---|---|---|---|
| 0 | +65 | 非常浅的容器背景 | 95% |
| 2 | +50 | Primary Container | 90% |
| 5 | +20 | 按钮背景色 | 80% |
| 8 | -10 | On Primary 文字 | 40% |
| 10 | -30 | 深色对比文字 | 20% |
| 12 | -50 | 最深色（深色主题主色） | 10% |
实际示例：从蓝色系壁纸提取源色 #1E88E5 (L=52, a=-3, b=-32) 后，生成的色调调色板：
| 色调 | 颜色 | 亮度 L | 用途映射 |
|---|---|---|---|
| 0 | #E3F2FD | 94 | 浅色主题 Surface |
| 2 | #BBDEFB | 86 | Primary Container |
| 5 | #1E88E5 | 52 | Primary（主色） |
| 8 | #0D47A1 | 30 | On Primary（深色文字） |
| 12 | #0A1929 | 10 | 深色主题背景 |
这个算法使得即使更换壁纸，系统生成的配色也具有一致的层次结构和可读性。
基于 Roboto（Android）/ San Francisco（iOS）字体家族：
| 样式 | 字号 | 字重 | 行高 | 用途 |
|---|---|---|---|---|
| Display Large | 57sp | Regular | 64dp | 超大展示（极少使用） |
| Headline 1 | 96sp (MD2) / 32sp (MD3) | Light (MD2) / Regular (MD3) | 40dp | 超大展示 |
| Headline 2 | 60sp (MD2) / 28sp (MD3) | Light | 36dp | 页面大标题 |
| Headline 6 | 20sp | Medium | 28dp | 页面标题 |
| Subtitle 1 | 16sp | Regular | 24dp | 卡片标题 |
| Body Large | 16sp | Regular | 24dp | 正文主内容 |
| Body Medium | 14sp | Regular | 20dp | 次要正文 |
| Body Small | 12sp | Regular | 16dp | 辅助文字 |
| Label Large | 14sp | Medium | 20dp | 按钮文字 |
| Label Small | 11sp | Medium | 16dp | 标签、caption |
| Overline | 10sp | Medium | 14dp | 标签性文字 |
排版缩放：Material 3 将类型尺度从 MD2 的 7 级扩展到 15 级，支持更精细的内容层级构建。字号之间的等比缩放比约为 （从 Label Small 到 Display Large）。
在响应式布局中，排版应随断点调整：
/* 响应式排版：移动端降一级 */
h1 {
font-size: clamp(2rem, 5vw, 3.5rem); /* Mobile 32px → Desktop 57px */
}
body {
font-size: clamp(14px, 2vw, 16px);
line-height: 1.5;
}
Material Design 用 elevation（海拔） 定义 Z 轴高度，对应不同阴影：
| Elevation | 阴影效果 | 典型组件 | 环境光阴影(X·Y) | 主光源阴影(Y) |
|---|---|---|---|---|
| 0dp | 无阴影 | 扁平按钮 | 无 | 无 |
| 1dp | 微弱阴影 | 卡片静止态 | (0,1) 0.12 | (0,1) 0.08 |
| 2dp | 轻微浮起 | 开关、复选框 | (0,2) 0.14 | (0,1) 0.10 |
| 4dp | 明显浮起 | 卡片悬停态 | (0,4) 0.16 | (0,2) 0.12 |
| 6dp | 突出 | FAB（浮动按钮） | (0,6) 0.18 | (0,3) 0.14 |
| 8dp | 强浮起 | 底部菜单、抽屉 | (0,8) 0.20 | (0,4) 0.16 |
| 12dp | 对话框 | 对话框 | (0,12) 0.22 | (0,6) 0.18 |
| 16dp | 导航切换 | 导航抽屉 | (0,16) 0.24 | (0,8) 0.20 |
| 24dp | 最高层级 | 全屏对话框 | (0,24) 0.28 | (0,12) 0.24 |
阴影的 CSS 实现：以 elevation=2dp 为例：
/* elevation 2dp */
.card {
box-shadow:
0px 2px 1px -1px rgba(0,0,0,0.2), /* 环境光 */
0px 1px 1px 0px rgba(0,0,0,0.14), /* 主光源 */
0px 1px 3px 0px rgba(0,0,0,0.12); /* 环境光补充 */
}
深色主题下的阴影调整：在深色主题中，阴影不再是黑色投影，而是使用带透明度的光源色叠加，模拟"发光"效果：
/* 深色主题 - elevation 4dp */
.dark-theme .card {
box-shadow: 0px 4px 4px 0px rgba(255,255,255,0.04);
}
为什么是 8dp：8px 在大多数屏幕密度下能整除（@2x=16px, @3x=24px），且视觉差异足够明显。相邻间距级别（8dp 和 16dp）的视觉差异约为：
这比 4dp 和 6dp 的 50% 差异更容易被肉眼分辨。
| 间距 | 对应密度 | 典型用途 |
|---|---|---|
| 4dp | 内容内部间距 | 图标内部边距 |
| 8dp | 元素间最小间距 | 按钮间距、列表项内边距 |
| 16dp | 标准内容边距 | 卡片边距、屏幕边距（移动） |
| 24dp | 分组间距 | 区块间间距、屏幕边距（桌面） |
| 32dp | 大区块间距 | 内容区块分隔 |
| 40dp+ | 页面级间距 | Section 分隔 |
顶部导航区域，包含标题、操作按钮、导航图标：
MD3 App Bar 尺寸规范：
| 变体 | 高度 | 标题位置 | 典型场景 |
|---|---|---|---|
| Small | 64dp | 左对齐 | 列表页 |
| Center | 64dp | 居中 | 首页/搜索 |
| Medium | 112dp | 左对齐，下方 | 内容详情 |
| Large | 152dp | 左对齐，下方大字 | 个人主页 |
圆形浮动按钮，代表页面最核心的单一操作：
FAB 变体对比：
| 类型 | 尺寸 | 是否含文字 | 使用场景 |
|---|---|---|---|
| FAB | 56dp | 否 | 最常用（添加、新建） |
| Mini FAB | 40dp | 否 | 次要操作（播放、收藏） |
| Extended FAB | 96dp+ | 是 | 操作需明确说明（"+ 创建笔记"） |
| Large FAB | 96dp | 否 | 核心单页操作 |
信息容器，包含图片、标题、操作：
卡片使用场景分类：
| 卡片类型 | 圆角 | 阴影 | 用途 |
|---|---|---|---|
| Elevated Card | 12dp | 1dp | 常规卡片，有轻微浮起感 |
| Filled Card | 12dp | 0dp | 扁平卡片，融入背景 |
| Outlined Card | 12dp | 0dp | 有边框无阴影，B 端常用 |
3-5 个顶级目的地的快速切换：
示例：典型的 4 标签底部导航：
[主页] [搜索] [发布] [个人]
🔴 🟢 🟡 🔵
选中态 未选中 未选中 未选中
侧滑菜单，从左侧滑出：
模态弹窗，阻断用户操作：
| 组件 | 说明 | MD3 变体 | 状态数量 |
|---|---|---|---|
| Text Field | 输入框，带浮动标签（Floating Label） | Filled / Outlined | 4（默认/聚焦/错误/禁用） |
| Button | 文本按钮、轮廓按钮、填充按钮 | Text/Outlined/Filled/Filled Tonal/Elevated | 4 |
| Checkbox | 复选框，勾选动画 | 无变体 | 3（选中/未选中/未定） |
| Radio Button | 单选按钮 | 无变体 | 3（选中/未选中/禁用） |
| Switch | 开关，滑动动画 | 无变体 | 3（开/关/禁用） |
| Slider | 滑块，连续或离散值 | Continuous/Discrete | 连续无级/有级 |
| Chip | 标签、选择、过滤、操作 | Assist/Filter/Input/Suggestion | 4 |
| Snackbar | 底部轻量提示，可带操作 | 单行/多行 | 1（自动消失） |
| Bottom Sheet | 底部弹出面板 | Standard/Modal | 2 |
| Tooltip | 悬停提示 | Plain/Rich | 1 |
Ripple（涟漪效果）：
Ripple 实现（Web CSS）：
.ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: '';
position: absolute;
border-radius: 50%;
background: currentColor;
opacity: 0.12;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease;
}
.ripple:active::after {
transform: scale(2.5);
opacity: 0;
}
触觉反馈（Haptic Feedback）：在 Android 上，Material 组件支持三种触觉反馈类型：
| 类型 | 强度 | 触发场景 |
|---|---|---|
| 轻按（Light Impact） | 低 | 按钮点击、开关切换 |
| 中按（Medium Impact） | 中 | 长按选中 |
| 沉重（Heavy Impact） | 高 | 错误提醒 |
Shared Element Transition（共享元素过渡）：
cubic-bezier(0.4, 0, 0.2, 1)Fade / Slide / Scale：
| 动画 | 用途 | 持续时间 | 缓动曲线 |
|---|---|---|---|
| Fade | 内容替换，淡入淡出 | 200ms | cubic-bezier(0.0, 0.0, 0.2, 1) |
| Slide | 页面堆叠，左右滑入 | 300ms | cubic-bezier(0.4, 0.0, 0.2, 1) |
| Scale | 元素展开/收缩 | 250ms | cubic-bezier(0.4, 0.0, 0.6, 1) |
缓动曲线：
cubic-bezier(0.4, 0.0, 0.2, 1) — 加速然后减速，适用大多数动画cubic-bezier(0.0, 0.0, 0.2, 1) — 一开始很快然后慢下来，元素进入场景cubic-bezier(0.4, 0.0, 1, 1) — 缓慢启动后迅速离开，元素离开场景cubic-bezier(0.4, 0.0, 0.6, 1) — 快速启动然后减速，大尺寸元素时长与距离对应关系：
| 移动距离 | 标准时长 | 大复杂元素时长 |
|---|---|---|
| ≤ 10dp | 150ms | 200ms |
| 10-20dp | 200ms | 300ms |
| 20-40dp | 250ms | 350ms |
| 40-100dp | 300ms | 400ms |
| > 100dp | 375ms | 500ms |
动效性能要求：Material Design 要求所有动画帧率不低于 60fps（即每帧渲染时间 ≤ 16.67ms）。触发动画到第一帧渲染的延迟不应超过 50ms。
// Gradle 依赖
implementation 'com.google.android.material:material:1.12.0'
// 主题继承（MD3）
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
<item name="colorPrimary">@color/purple_500</item>
<item name="colorSecondary">@color/teal_200</item>
<item name="colorTertiary">@color/orange_300</item>
</style>
// FAB 使用
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add"
app:backgroundTint="@color/primary" />
// Material 3 底部导航
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/nav_menu" />
// React + MUI 5
import { Button, Card, Fab, ThemeProvider, createTheme } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
// 自定义主题
const theme = createTheme({
palette: {
primary: { main: '#1976D2' },
secondary: { main: '#FF4081' },
mode: 'light',
},
shape: { borderRadius: 12 }, // MD3 更大圆角
typography: {
h1: { fontSize: '2rem', fontWeight: 500 },
body1: { fontSize: '1rem', lineHeight: 1.5 },
},
});
function App() {
return (
<ThemeProvider theme={theme}>
<Button variant="contained" color="primary">
确认
</Button>
<Card elevation={2} sx={{ borderRadius: 3 }}>
<CardContent>内容</CardContent>
</Card>
<Fab color="secondary" aria-label="add">
<AddIcon />
</Fab>
</ThemeProvider>
);
}
// Flutter Material 3
void main() {
runApp(MaterialApp(
// 启用 MD3
themeMode: ThemeMode.system,
theme: ThemeData(
useMaterial3: true, // 关键：启用 Material 3
colorSchemeSeed: Colors.blue, // 自动从种子色生成配色
brightness: Brightness.light,
),
darkTheme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.blue,
brightness: Brightness.dark,
),
home: MyHomePage(),
));
}
// 组件使用
Scaffold(
appBar: AppBar(title: Text('My App')),
body: Card(
elevation: 2,
child: ListTile(
leading: Icon(Icons.album),
title: Text('标题'),
subtitle: Text('副标题'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)
<template>
<v-app>
<v-app-bar color="primary">
<v-app-bar-title>My App</v-app-bar-title>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<v-card elevation="2" rounded="xl">
<v-card-title>卡片标题</v-card-title>
<v-card-text>Material 3 在 Vuetify 3 中默认开启</v-card-text>
<v-card-actions>
<v-btn color="primary" variant="tonal">操作</v-btn>
</v-card-actions>
</v-card>
</v-container>
</v-main>
<v-bottom-navigation>
<v-btn value="home">
<v-icon>mdi-home</v-icon>
<span>首页</span>
</v-btn>
<v-btn value="search">
<v-icon>mdi-magnify</v-icon>
<span>搜索</span>
</v-btn>
<v-btn value="profile">
<v-icon>mdi-account</v-icon>
<span>个人</span>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
| 平台 | 适配要点 | 特殊考虑 |
|---|---|---|
| Android | 完全遵循，使用系统组件 Material Components | 支持动态配色（WallpaperColors API） |
| iOS | 底部导航改为顶部标签，考虑 Human Interface | 使用 UIKit 包装 Material 组件，或混合使用原生导航 |
| Web | 响应式布局，桌面端侧边导航 | 支持键盘导航（Tab 键顺序）、屏幕阅读器 |
| 桌面应用 | 增加悬停态，支持键盘导航，右键菜单 | Flexible Space Bar、Navigation Rail |
| 平板 | 使用 Two-pane 布局，Navigation Rail | 横屏适配，多列网格 |
2021 年随 Android 12 发布，核心变化：
| 指标 | 数据 | 来源 |
|---|---|---|
| Android 应用中位 Material 采用率 | 78% | Google Play 2023 年度报告 |
| 使用 Material 组件的热门应用 | Gmail, YouTube, Google Photos, Drive, Maps | Google I/O 2023 |
| MUI 月活跃开发者 | 1500 万+ | MUI GitHub (54k 星) |
| Flutter 应用占比 | 15% 的新应用使用 Flutter（内置 Material） | 2024 年调查 |
| Material Web 组件使用 | 2000+ Google 内部产品使用 | Google 内部数据 |
| 批评点 | 说明 | 应对策略 |
|---|---|---|
| 过度同质化 | 大量应用看起来一样，缺乏品牌个性 | 使用 Material Theming 自定义颜色、形状、字体，或叠加品牌 UI 层 |
| Android 中心 | iOS 上显得格格不入 | iOS 应用可选择性使用 Material 组件，或在导航/原生交互上遵循 HIG |
| 性能开销 | 复杂阴影和动效影响低端设备 | 低端设备降级：边框代替阴影，减少动画帧数 |
| 学习成本 | 规范庞大，完整实现需要大量工作 | 渐进采用，先核心组件再扩展。参考 Material Design Kit 快速启动 |
| 灵活性不足 | 严格规范限制了创新设计 | MD3 引入了更多自定义入口：形状、颜色 Monochrome 模式 |
| 版本更替快 | MD1→MD2→MD3 每 3-4 年重大升级，遗留系统维护成本高 | 选择 LTS 版本，使用设计 token 解耦组件实现与设计规范 |
| 设计系统 | 所属 | 特点 | 适合场景 |
|---|---|---|---|
| Apple Human Interface Guidelines | Apple | iOS/macOS 原生体验，扁平设计 | iOS 原生应用 |
| Fluent Design | Microsoft | Acrylic（亚克力）、Reveal、Light 效果 | Windows 应用 |
| Ant Design | 蚂蚁集团 | 企业级，B 端，中文优化 | B 端管理系统 |
| Chakra UI | 社区 | React 原生，轻量，高可定制 | 快速 Web 开发 |
| Tailwind CSS + Headless UI | 社区 | 原子化 CSS，无预设样式 | 自定义设计系统 |
| Radix UI | 社区 | 无样式原语组件，WAI-ARIA 合规 | 高可访问性需求 |
| shadcn/ui | 社区 | Tailwind + Radix，复制即用 | 现代 Web 应用 |
| 维度 | Material Design 3 | Apple HIG | Fluent 2 | Ant Design |
|---|---|---|---|---|
| 发布年份 | 2014（MD3: 2021） | 2013 | 2017（Fluent 2: 2023） | 2015 |
| 核心平台 | Android | iOS/macOS | Windows | Web |
| 适配平台 | Android/iOS/Web/Flutter | iOS/macOS/watchOS/tvOS | Win/WinUI/Web | Web/RN |
| 色彩方案 | Tonal palette, 动态配色 | 语义化颜色 | Acrylic, Mica | 品牌色 + 中性色 |
| 组件数量 | 50+ | 40+ | 60+ | 60+ |
| 定制性 | 高（Theming） | 中（系统组件不可改） | 高 | 中（ConfigProvider） |
| 无障碍 | WCAG AA | WCAG AA | WCAG AA | WCAG AA |
| 开源 | 部分 | 否 | 部分 | 是（MIT） |
| 文档质量 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 中文支持 | 良好 | 良好 | 一般 | 优秀 |
以几个核心组件为例，比较 Material Design 3 与 Ant Design 的实现差异：
| 组件 | Material 3 | Ant Design | 关键差异 |
|---|---|---|---|
| Button | 5 变体（Text/Filled/Outlined/Tonal/Elevated） | 4 变体（Primary/Default/Dashed/Text） | MD3 多了层级感 |
| Input | Filled / Outlined，浮动标签 | 默认边框，上下标签均可 | MD3 浮动标签更节省空间 |
| Dialog | 4 级圆角，按钮右对齐 | 直角或小圆角，按钮右对齐 | MD3 更注重美观性 |
| Menu | 级联式，标准/紧凑 | 级联式，分组 | 功能基本一致 |
| Modal | 最小宽度 280dp，最大 560dp | 根据内容自适应 | MD3 有更严格的尺寸约束 |
Material Design 要求所有文本和背景之间的对比度满足 WCAG 标准：
| 类别 | WCAG AA (最低) | WCAG AAA (推荐) | Material 3 默认 |
|---|---|---|---|
| 小号正文文本 (<18pt) | 4.5:1 | 7:1 | 6.8:1 |
| 大号文本 (≥18pt 或 ≥14pt加粗) | 3:1 | 4.5:1 | 5.2:1 |
| 图标 | 3:1 | — | 4.0:1 |
| 禁用文字 | 3:1 | — | 3.2:1 |
对比度计算示例：使用 WCAG 相对亮度公式计算主色 #1976D2（蓝色）与白色文字（#FFFFFF）的对比度：
结论：5.83:1 满足 WCAG AA 标准（≥ 4.5:1），但不满足 AAA（≥ 7:1）。如需 AAA，可选择更深的主色（如 #0D47A1）。
Material 组件内置以下无障碍特性：
| 组件 | 自带无障碍 | 额外建议 |
|---|---|---|
| Button | aria-label 自动生成 |
图标按钮必须设置 aria-label |
| Image | 无 | 必须提供 alt 文本 |
| Icon | 自动设置 role="img" |
装饰性图标设 aria-hidden="true" |
| Dialog | role="dialog" + aria-modal="true" |
焦点陷阱实现 |
| Navigation | role="navigation" + aria-label |
多个导航区域需区分标签 |
阴影（Elevation）是 Material Design 的标志性特征，但也是性能消耗的来源：
| 优化策略 | 效果 | 适用组件 |
|---|---|---|
| 使用边框代替 2dp 以下阴影 | GPU 无额外 draw call | 扁平按钮、小卡片 |
| 减少阴影重叠层级 | 每层阴影约增加 0.5ms 绘制时间 | 避免超过 3 层阴影堆叠 |
| 深色主题用边框替代 | 降低 30% 绘制开销 | 所有组件 |
| 页面切换时关闭动画阴影 | 降低 50% 卡顿率 | FAB、Dialog 过渡时 |
CSS 中的阴影分层实现（高效写法）：
/* 高效 - 单层阴影替代多层实现 */
.card-elevated {
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
/* 避免：多个 box-shadow 叠加 */
}
/* 高效 - will-change 优化 */
.card-dynamic {
will-change: box-shadow, transform;
transition: box-shadow 0.3s, transform 0.3s;
}
Material 动效在低端设备上可降级：
// React 示例：检测低端设备并降级动画
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const isLowEndDevice = navigator.hardwareConcurrency <= 4;
const animationConfig = {
duration: (prefersReducedMotion || isLowEndDevice) ? 0 : 300,
easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
skipAnimation: prefersReducedMotion || isLowEndDevice,
};
// 使用该配置渲染 Material 组件
Material Icons 按需加载策略：
| 策略 | 加载大小 | 说明 |
|---|---|---|
| 全量 Material Icons 字体 | 1.2MB | 不推荐，首屏加载过大 |
| SVG 按需导入 | 每个图标约 1-3KB | 推荐：Tree-shaking 自动优化 |
| Icon 字体子集化 | 50-100KB | 中等方案：需手动配置 subset |
| 使用 @mui/icons-material | 按需 tree-shaken | 最低开销方式 |
Material Design 是数字设计史上的里程碑，它将物理世界的直觉引入数字界面，建立了现代 UI 设计的基准：
对于前端开发者，掌握 Material Design 不仅是学会一套组件库，更是理解现代界面设计的底层逻辑——层级、反馈、连续性、无障碍。在设计系统百花齐放的今天，Material Design 仍然是最完整、文档最完善、社区最活跃的跨平台设计系统之一。
参考资料：
最后更新：2026-05-28