# 材料设计（Material Design）

镜语 · 版式与界面 / 年代风格

- 别名：质感设计、MD 风格、安卓风格、Material You、Material 3
- 口语：「安卓那种点一下有水波纹」「右下角圆形加号按钮」「一张张纸片叠起来的阴影」
- 一句话：Google 的设计体系：纸片层级阴影、悬浮按钮和点击水波纹
- 是什么：Material Design 是 Google 2014 年发布的设计体系，把界面想象成有厚度的数字纸片：不同层级用投影高度区分，触摸后从触点扩散出水波纹，重要操作放在悬浮圆形按钮（FAB）上。2021 年的 Material 3（Material You）改为更圆的形状和从壁纸取色的色调
- 缺了就不像：触点扩散的水波纹；按高度区分的投影；悬浮操作按钮 FAB
- 加了更像：彩色应用栏；Roboto 字体；标准化卡片与列表
- 适合用在：安卓应用、后台管理和工具类网页，需要现成、一致的组件规范；视频或演示里需要「标准安卓界面」时；团队协作时用官方组件库保证一致性
- 看哪里：点任何按钮或列表项，看水波纹从你点下的位置扩散；顶部应用栏、卡片和右下角加号按钮的阴影深浅不同，代表离纸面的高度不同。点加号按钮，它会升高、阴影变大
- 注意：阴影高度要有含义，不要每张卡片随意加大阴影；只用 Google 配色和加号按钮不等于 Material；重点是层级、动效与组件规则
- 描述示例：做一个 Material Design 风格的个人主页：顶部靛蓝 #3f51b5 应用栏带 4dp 阴影，正文是浅灰背景上的白色卡片（2dp 阴影、4px 圆角），强调色粉红 #ff4081；右下角一个 56px 圆形悬浮按钮（FAB）带 6dp 阴影；所有按钮和列表项点击时从触点扩散灰色水波纹；Roboto 无衬线字体，按钮文字大写或中等字重；层级由阴影高度表达
- 易混：
  - [扁平化](https://idea.ameng.dev/terms/flat-design.md)：扁平化没有层级阴影；Material 用有规则的阴影高度表达层级
  - [拟物化](https://idea.ameng.dev/terms/skeuomorphism.md)：Material 的「纸」只取厚度和光影，不模仿纸张纹理
- 相关：[投影](https://idea.ameng.dev/terms/drop-shadow.md)、[暗色界面](https://idea.ameng.dev/terms/dark-ui.md)、[Bento 网格](https://idea.ameng.dev/terms/bento-grid.md)

## 来源与延伸阅读

- [Material Design 3 官网](https://m3.material.io/)
- [Material Design 2 · Elevation 层级与阴影](https://m2.material.io/design/environment/elevation.html)
- [Material Design 3 · Elevation](https://m3.material.io/styles/elevation/overview)

网页版（含演示）：https://idea.ameng.dev/terms/material-design