Material DesignMaterial Design

核心特征

• 按 elevation 层级使用统一规格的投影
• 主色鲜明，配套浅色底与容器色
• 圆角偏大，MD3 常见 12–28px，按钮多为胶囊形
• 按钮分填充、描边与文字三种强调等级
• 点击有波纹反馈，强调动效与状态层

色板与字体

英文

Roboto（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

Material 的默认字体是 Roboto，MD3 也允许换成 Google Sans 或自定义品牌字体；中文通常回退到系统黑体。

起源与代表作

年代：2014 年 Google I/O 提出，2021 年推出 Material You

Material Design 由 Google 在 2014 年 I/O 大会上与 Android 5.0 一同发布，核心隐喻是「纸与墨」：界面由有厚度的纸层叠而成，层级用统一的投影表达，动效用来解释元素之间的关系。2018 年推出第二版，2021 年随 Android 12 发布 Material You（即 Material Design 3），加入动态取色、更大的圆角与更柔和的形状，网页端有官方组件库 Material Web 可用。

AI 设计提示词 · Prompt

Material Design（Material Design 3）风格界面：页面背景为表面白 #FEF7FF，卡片使用容器紫灰 #F3EDF7，文字 #1D1B20，次要文字 #49454F，主色紫 #6750A4 配白字。卡片圆角 12px、按钮圆角 20px 的胶囊形，输入框为 4px 上圆角的填充式，底部 2px 主色线。层级用 elevation 表达：卡片 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15)，高层级再叠加更大模糊的投影。按钮分三级：填充（主色）、描边（1px #79747E）、文字按钮。标题与按钮使用 Roboto 500，正文 400。间距以 8px 为基数。点击反馈使用以主色 12% 透明度铺满的状态层。所有文字对比度不低于 4.5:1，触控目标不小于 48px。

A Material Design (Material Design 3) interface: surface-white page background #FEF7FF, cards in container lavender-gray #F3EDF7, text #1D1B20, secondary text #49454F and primary purple #6750A4 with white text. Cards have a 12px radius, buttons are 20px pill shapes, and inputs are filled style with 4px top corners and a 2px primary-color bottom line. Depth follows elevation: cards use 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15), and higher levels add larger blurred shadows. Buttons have three emphasis levels: filled (primary), outlined (1px #79747E) and text buttons. Headings and buttons use Roboto 500, body text 400. Spacing follows an 8px base. Press feedback uses a state layer at 12% of the primary color. Keep text contrast at least 4.5:1 and touch targets at least 48px.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-surface: #fef7ff;
  --ds-container: #f3edf7;
  --ds-text: #1d1b20;
  --ds-primary: #6750a4;
  --ds-outline: #79747e;
  --ds-radius-card: 12px;
  --ds-radius-button: 20px;
  --ds-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --ds-elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

适合与不适合

和相近风格的区别

• 扁平化：Material Design 在扁平的纯色基础上加入统一的 elevation 投影与动效规范，明确表达层级；扁平化则完全不用阴影，只靠色块与留白区分。

常见踩坑

• 直接套用默认的紫色主题会让所有产品长得一样，真实项目应换成自己的主色并用官方工具生成配套色阶
• elevation 投影要按层级使用，不要给所有卡片随意加不同阴影，否则层级关系会混乱
• 触控目标至少 48×48dp，按钮圆角变大后容易把可点区域做小，需要在移动端实机检查
• 波纹与状态层动效需要尊重 prefers-reduced-motion，对前庭敏感的用户关闭位移类动画

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题