Material Design 是做什么的？
数字表面行为如同有厚度和阴影的纸张，深度和动效解释了界面的层级关系。
一个由平坦着色表面组成的系统，表面位于定义好的高度上，并由左上角的主光源投射阴影，搭配大胆的颜色、8dp 网格和有目的的动效。Google 在 2014 年 6 月的 I/O 大会上宣布了它。
时期： 2014–至今 · 时代： 触摸屏 · 领域： 图形与 UI 设计 · 别称： Material、Google Material、Material 2
何时加载此技能
当用户要求："material design"、"material ui"、"google material"、"elevation"、"floating action button"、"fab"、"android style"、"ripple effect"、"app bar"、"paper and ink"、"md2" 时加载。
适用于：Android 应用程序、管理仪表板、包含许多组件的 Web 应用、设计系统、生产力工具。
在以下情况不要使用：
- 品牌需要独特的声音，因为默认外观的 Google 辨识度很高。
- 页面是编辑性质的且交互组件很少。
- 设计需要完全没有阴影的纯 2D 外观。
系统指令
在以 Material Design 生成 UI 或图形布局时，你必须：
- 将每个表面视为厚度为 1dp 的纸张，纸张永不弯曲、永不拉伸改变大小、也永不穿过另一个表面。
- 用 dp 值表示层级深度：页面 0、卡片 1、应用栏 4、浮动按钮静止时 6、菜单 8、导航抽屉 16、对话框 24。
- 在 8dp 网格上构建每个布局，小字和图标对齐使用 4dp，触摸目标使用 48dp。
- 使用主色和强调色的醒目颜色，状态栏使用主色的 700 色号，应用栏使用 500 色号。
- 使用大型字体，并遵循 12、14、16、20、34、45 和 56sp 的 Roboto 字体比例尺。
- 对每次触摸都要有响应：一个从触摸点扩散、持续 300ms 的圆形涟漪。
- 使元素沿曲线路径移动，缓动曲线开始时快、结束时慢，并且让每次动效解释元素从何而来。
护栏
以下每行都违反了此风格。在返回输出前，对照此列表检查你的输出。
- 千万不要： 在表面上使用渐变和纹理。
- 千万不要： 阴影没有一致的高度级别或来自不同的光照方向。
- 千万不要： 同一高度级别的表面相互重叠。
- 千万不要： 触摸目标小于 48dp。
- 千万不要： 彩色背景上的彩色文本对比度低于 4.5:1。
- 千万不要： 无动效或涟漪反馈的即时状态变化。
- 千万不要： 屏幕上超过一个浮动操作按钮。
向量特征
| 轴 | 分数 | 1 分代表 | 5 分代表 |
|---|---|---|---|
| 装饰性 | ■■□□□ 2/5 | 纯粹极简 | 极繁主义 |
| 维度感 | ■■■□□ 3/5 | 严格 2D | 完全 3D / 空间化 |
| 网格刚性 | ■■■■□ 4/5 | 混乱 / 有机 | 严格的数学网格 |
| 拟物写实主义 | ■■□□□ 2/5 | 抽象数字化 | 照片级写实的材质 |
| 排版表现力 | ■■□□□ 2/5 | 中性 / 隐形 | 实验性 / 说明性 |
保持这些分数。如果某个请求使某个轴移动了 2 分或更多，则说明你已经脱离了此风格：请转到“风格退化路径”。
空间与网格逻辑
- 网格机制： 8dp 基线网格，图标和字体使用 4dp，手机网格 4 列带 16dp 边距，平板电脑网格 8 列带 24dp 边距，桌面网格 12 列；应用栏在手机上为 56dp，在桌面上为 64dp。
- 留白比例： 表面的 25–40% 保持空白；间距比例为 4、8、16、24、32、48、56dp，卡片内边距为 16dp。
- 对齐规则： 在包含头像的列表中，内容从左侧边缘的 72dp 对齐线对齐；否则从 16dp 对齐线对齐；浮动操作按钮距离右侧和底部各 16dp。
- 容器几何： 卡片和按钮使用 2dp 圆角；浮动操作按钮为 56dp 圆形，迷你按钮为 40dp；对话框最小宽度为 280dp。
排版
- 分类： 新怪诞无衬线体 · 人文主义无衬线体
- 字距： 34sp 及更大的显示尺寸使用 0em 到 -0.01em；正文使用 +0.01em；按钮使用大写字母并带 +0.09em 字距。
- 行高： 标题 1.2；正文 1.4 到 1.5（14sp 行高 20dp）；列表文本（16sp）行高 24dp。
- 层级规则：
- 使用 12、14、16、20、34、45 和 56sp 的比例尺，不得使用这些值之间的任何尺寸。
- 标题和按钮使用中等字重 (500)，正文使用常规字重 (400)，45sp 及以上的显示尺寸使用细体 (300)。
- 表面上的文本，主要文本使用 87% 黑色，次要文本使用 54% 黑色，禁用文本使用 38% 黑色。
- 按钮标签使用大写字母、14sp、字重 500。
字体搭配
| 显示字体 | 正文字体 | 说明 |
|---|---|---|
| Roboto | Roboto | Material 1 和 2 的系统字体，从 300 到 900 字重的单一字体族。 |
| Roboto Condensed | Roboto | 用于密集标题的紧凑显示字体，搭配标准文本字体。 |
| Noto Sans | Noto Sans | 非拉丁文字的后备字体族，字重和度量相同。 |
色彩与光照
- 调色板结构： 一种主色及其 500 和 700 色号，一种来自 A200 到 A400 范围的强调色，以及中性灰色；主色覆盖应用栏和 10% 到 20% 的表面。
- 对比度规则： 正文文本至少保持 4.5:1，大号文本至少保持 3:1；Indigo 500 上的白色文本达到 7.5:1，Pink A200 上的白色文本达到 3.4:1，仅适用于 18sp 及以上文本。
- 表面处理： 纯色、不透明、平坦填充，无渐变无纹理；对话框背后的遮罩使用 32% 不透明度的黑色。
- 光影： 来自顶部的主光源和柔和的漫射环境光；每个阴影包含半影、本影和环境光层，其模糊和偏移随着高度增加而增长。
调色板
| 名称 | 十六进制 | 作用 |
|---|---|---|
| Surface | #FFFFFF | 卡片和纸张表面 |
| Background | #FAFAFA | 页面背景 |
| Indigo 500 | #3F51B5 | 主色和应用栏 |
| Indigo 700 | #303F9F | 状态栏 |
| Pink A200 | #FF4081 | 强调色和浮动操作按钮 |
| Grey 900 | #212121 | 文本（87% 不透明度） |
材质感与纹理
- 表面模拟： 数字纸张：厚度为 1dp 的平坦纸张，投射阴影，但没有纹理、没有斜面、没有颗粒感。
- 边框规则： 表面没有轮廓线；分割线为 1px 黑色、12% 不透明度，从边缘缩进 72dp 或 16dp；文本字段底部有 1px 线条，获得焦点时增长到 2px。
- 模糊与高度： 1dp 高度阴影为 0 1px 3px 20% 加 0 1px 1px 14%；4dp 为 0 4px 5px 14% 和 0 1px 10px 12%；12dp 为 0 9px 12px 14%；系统有从 0 到 24dp 共 25 个级别。
装饰与图标设计
- 图标设计： 24dp 系统图标，20dp 有效区域，2dp 笔画粗细，方形端点带 2dp 圆角，实心填充，一种颜色，54% 黑色。
- 插画： 使用调色板的扁平矢量形状和全出血摄影，下方叠加 20% 到 40% 的黑色遮罩；没有轮廓线，没有透视。
- 装饰元素： 浮动操作按钮 · 涟漪 · 高度阴影 · 色块应用栏 · 全出血英雄图 · 卡片
动效与交互性
- 天生数字化： 是
- 过渡物理： 表面沿 Z 轴和屏幕平面沿曲线路径移动；元素加速快、减速慢；共享元素从其起点移动到终点。
- 缓动函数： cubic-bezier(0.4, 0, 0.2, 1)
- 持续时间（毫秒）： 300
- 悬停与激活： 悬停时叠加 4% 黑色；按下时显示 12% 黑色涟漪，从触摸点扩散，持续 300ms；凸起按钮按下时从 2dp 升高到 8dp。
代码与令牌入门
在根元素上设置 data-style="material-design" 并粘贴令牌。文件 tokens.css 包含相同的令牌和一组参考规则。
[data-style="material-design"] {
--color-bg: #FAFAFA;
--color-surface: #FFFFFF;
--color-text: rgba(0, 0, 0, 0.87);
--color-muted: rgba(0, 0, 0, 0.54);
--color-primary: #3F51B5;
--color-accent: #FF4081;
--color-border: rgba(0, 0, 0, 0.12);
--font-sans: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--font-display: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--border-radius: 2px;
--border-width: 1px;
--shadow-elevation: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
--backdrop-filter: none;
--space-unit: 8px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 300ms;
--color-primary-dark: #303F9F;
--shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
--shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
--touch-target: 48px;
--color-on-bg: #212121;
--color-on-surface: #212121;
--color-on-primary: #FAFAFA;
--color-on-accent: #212121;
--color-muted-on-bg: #737373;
--color-muted-on-surface: #757575;
--color-link: #3F51B5;
--color-link-on-surface: #3F51B5;
--display-weight: 300;
--subhead-weight: 500;
--body-weight: 400;
--strong-weight: 500;
--label-weight: 500;
--display-tracking: 0em;
--display-leading: 1.15;
--display-case: none;
--body-leading: 1.5;
--body-size: 16px;
--icon-stroke: 2;
}
Tailwind 模式：
| 元素 | 类 |
|---|---|
| 页面 | min-h-screen bg-[#FAFAFA] font-sans text-black/[0.87] antialiased |
| 应用栏 | flex h-14 md:h-16 items-center bg-[#3F51B5] px-4 text-xl font-medium text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)] |
| 卡片 | rounded-sm bg-white p-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.2),0_1px_1px_0_rgba(0,0,0,0.14),0_2px_1px_-1px_rgba(0,0,0,0.12)] |
| 按钮 | h-9 min-w-[64px] rounded-sm bg-[#3F51B5] px-4 text-sm font-medium uppercase tracking-[0.09em] text-white shadow-md transition-shadow duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-lg active:shadow-xl |
| 浮动操作按钮 | h-14 w-14 rounded-full bg-[#FF4081] text-white shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),0_6px_10px_0_rgba(0,0,0,0.14),0_1px_18px_0_rgba(0,0,0,0.12)] |
视觉资源包
此风格的图片和图标是文件。直接使用它们，或者将其作为规范并自行用相同的视觉语言绘制。
| 文件 | 内容 |
|---|---|
pack/hero.svg | 英雄图版，800×600。一幅以该风格视觉语言绘制的抽象图片。 |
pack/pattern.svg | 图案平铺，80×80。可向两个方向重复。 |
pack/icons.svg | 图标精灵：home、search、heart、star、bell、user、mail、calendar、image、bolt、play、check、close、sliders。 |
- 图标： 实心，24px 字段上笔画为 2，平头端点，圆形连接，无容器。使用：
<svg class="icon"><use href="pack/icons.svg#home"/></svg>。图标接受currentColor。 - 图标家族： 精灵图来自 Material Symbols（Baseline, filled），Google 出品，Apache 2.0 许可证。原因：该风格自身的实心系统集，位于其 24dp 网格上。这是一个开源替代品，用于演示。对于产品，请使用品牌的图标库并按以下规则选择家族。
- 显示字体： 字重 300，字距 0em，行高 1.15，无大小写转换。
- 字重： 显示 300，副标题 500，正文 400，粗体文本 500，标签和按钮 500。该风格只使用 3 个字重（300、400、500），不使用其他。显示字体比正文字体轻 100，因此字号承载了层级。重点在于字重：更重的字是重点，因此各字重之间的步骤是清晰的。
- 正文字体： 16px，行高 1.5。
- 页面： 英雄图分割，左对齐，常规密度，强调色倾斜 0°。
- 文本颜色：
--color-text仅用于主要阅读区域。在每个区域，使用其对应的令牌：--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent。
如何选择图标包
图标包是用于图片的字体。应以选择正文字体同样的谨慎态度来选择它。以下规则适用于开源集和授权库。
- 笔画与字干匹配。 在文本尺寸下将图标与正文文本并排放置。图标的线条与字母的竖干具有相同的粗细。
- 端点和角遵循圆角令牌。 平头端点和斜接连接对应于零圆角。圆形端点和圆形连接对应于柔和圆角。
- 填充模式遵循时代技术。 印刷时代使用实体切割形态。屏幕时代具有深度的填充和着色形态。当前产品界面则绘制轮廓。
- 隐喻不早于风格。 每个图片都是该时代已知的对象。带有较晚隐喻的图标会打破时代背景。
- 一个家族，一个网格。 所有图标都来自一个家族和一个变体，绘制在一个字段上。不要在一个表面上混合使用不同的家族。
- 家族覆盖产品需求。 在确定使用前，列出产品需要的每个概念。如果某个家族缺少其中任何一个图标，那就是错误的家族。
- 颜色是令牌。 图标接受 currentColor。第二种色调来自令牌，而不是来自文件。
- 许可证允许使用。 阅读该图集的许可证。在许可证要求的地方注明出处。有品牌的产品应使用其授权的库，并应用相同的规则来选择家族。
风格退化路径
当用户要求变体时，不要即兴创作。向此处命名的相邻风格靠拢，并加载其技能。
- 如果用户要求更扁平：向
flat-design（扁平设计）靠拢。移除所有高度阴影，仅通过颜色区分表面，保留调色板和 8dp 网格。 - 如果用户要求更具触感：向
skeuomorphism（拟物化设计）靠拢。添加 5% 到 10% 的渐变、1px 内部高光和 5% 不透明度的表面纹理；保留高度和布局。