艺术风格 · 美学百科全书

质感设计

Material Design

界面是一叠有高度的"纸片"——海拔阴影定层级，涟漪动效回应触摸。

2014 年—（Material 3 / Material You 2021 年—） · 谷歌

向下看看 ↓

简介

2014 年，谷歌在 Google I/O 上发布质感设计，把界面视为有高度的"纸片"，用海拔阴影、涟漪动效与大胆色彩建立层级——深度第一次有了完整的规则。它不是一种装饰，而是一套系统：网格、纸片、海拔、动效、色彩、字体，每一层都有章可循。扁平化（2013）把深度拿走之后，质感设计把深度带回了规则里。

质感设计的演变是一条从统一到个性的路。2014 年的第一代以纸片与海拔立规矩；2018 年的 Material Theming（媒体俗称"Material Design 2"，并非谷歌官方名称）放开定制，允许每个产品用自己的色彩、字体与形状做主题；2021 年的 Material 3 / Material You 更进一步，用动态取色让系统从壁纸里取色，整部手机随一张图换装。规则最全的子风格，做产品用它——这是它在关联数字风格里的位置。

英文定义：The interface is a stack of paper sheets with real elevation — shadows set the hierarchy, ripples answer the touch.

第一个 prompt

要跟 AI 说这个风格，第一句话就这么说。直接复制就能用。

中文

用质感设计风格做一个待办 App：纸片分层、海拔阴影定层级、圆形悬浮操作按钮、涟漪点击动效，干净、系统、有秩序。

English

Build a to-do app in Material Design style: layered paper surfaces, elevation shadows for hierarchy, a round floating action button, ripple tap effects — clean, systematic, orderly.

变体

产品

用质感设计风格做一个新闻 App 的首页：卡片式信息流、纸片分层、海拔阴影区分头条与列表、圆形悬浮操作按钮，清晰、有层级、易扫读。

Design a news app home screen in Material Design style: a card-based feed, layered paper surfaces, elevation shadows separating headlines from the list, a round floating action button — clear, layered, easy to scan.
品牌

用质感设计风格做一个品牌官网的首页：白色纸面底、大号 Roboto 标题、圆角矩形卡片分层排列、海拔阴影定主次，克制、系统、可信。

Design a brand website homepage in Material Design style: a white paper ground, large Roboto headlines, rounded-rectangle cards in layered rows, elevation shadows setting priority — restrained, systematic, trustworthy.
仪表盘

用质感设计风格做一个数据仪表盘：指标卡片按海拔分层、关键数字用质感紫强调、涟漪动效回应每一次点击，秩序感强、一眼见重点。

Design a data dashboard in Material Design style: metric cards layered by elevation, key numbers highlighted in Material purple, ripple effects answering every tap — strongly ordered, priorities visible at a glance.

风格卡

给机器用的规格。工作台拼装时，真正调用的就是这张卡。

配色

#6750A4

质感紫 · Material 3 基准种子色

#FFFFFF

纸面白 · 纸片底色

#212121

墨色 · 正文与标题

#4285F4

谷歌蓝 · 点缀

#34A853

谷歌绿 · 点缀

#EA4335

谷歌红 · 点缀

#FBBC04

谷歌黄 · 点缀

字体: Roboto（Apache 2.0，谷歌官方字体）。谷歌自家应用另用 Google Sans（专有字体，只作参考，不直接用；来源：9to5Google I/O 2018 报道）。
构图: 4/8dp 网格；纸片分层；海拔阴影定层级。
形态: 纸片、圆角矩形、FAB 圆形按钮。
质感与母题: 纸面、海拔阴影、涟漪动效。
禁忌: 纸片不用在无层级可分的单页上（海拔无物可定）；阴影不乱加——海拔即层级，同一层级用同一海拔；涟漪动效只回应真实可点的元素，不可点的地方不给涟漪；大胆色彩作点缀，不铺满全屏抢内容；不与玻璃拟态、黏土拟态等子风格同时混用（先选一个主风格）。

画廊

几幅代表作。每幅只看一点：它最能说明这个风格的那一点。

质感设计 Material Design

谷歌 · 2014— · 版权期

看：界面是一叠有高度的"纸片"——海拔阴影、涟漪动效、FAB 悬浮按钮；规则最全的子风格。开源设计系统。

查看官网（Material 3）↗

Android 5.0 Lollipop

谷歌 · 2014 · 版权期

看：质感设计第一次落地——通知变成卡片、最近任务变成一叠 3D 纸片；纸片隐喻从发布会走进每一部手机。

查看介绍（Wikipedia）↗

Material Theming（俗称 Material Design 2）

谷歌 · 2018 · 版权期

看：质感设计从统一制服变成"做设计系统的系统"——色彩、字体、形状都可按品牌定制；白色底面 + 谷歌四色点缀成为谷歌自家的主题。

查看报道（9to5Google）↗

Material You / Material 3

谷歌 · 2021 · 版权期

看：动态取色——系统从壁纸里取一个种子色，展开成整套配色，锁屏、通知、设置、小部件随壁纸换装；质感设计从统一走向个人。

查看文章（Android Developers Blog）↗

Google I/O 2014 发布

马蒂亚斯·杜阿尔特 · 2014 · 版权期

看：杜阿尔特登台揭开质感设计——"一个一致的愿景，横跨手机、桌面与更远"；纸片、海拔与涟漪第一次被讲成一套语言。

查看回顾（Android Central）↗

历史流变

2014 年 6 月谷歌在 Google I/O 2014 发布质感设计（杜阿尔特主讲），"纸片海拔"把深度带回规则。
2014 年 11 月 Android 5.0 Lollipop 正式推送（11 月 12 日），质感设计第一次落地到系统与应用；通知变卡片、最近任务变 3D 纸片叠。
2018 年 5 月 Google I/O 2018 推出 Material Theming（媒体俗称"Material Design 2"，谷歌从未用此作官方名）——色彩、字体、形状全面可定制，谷歌自家主题定为白色底面 + 四色点缀。
2021 年 Material 3 / Material You 发布（动态取色），随 Android 12（2021 年 10 月）上线；系统从壁纸取色，整机配色随壁纸而变。
2022 年 2 月谷歌宣布 Material You 的动态取色扩展到更多 Android 12 手机，包括三星、一加、OPPO、vivo、realme、小米等厂商的设备。

关键人物

马蒂亚斯·杜阿尔特——谷歌设计负责人，质感设计的主导者；2014 年在 Google I/O 上登台发布质感设计，2021 年又登台展示 Material You。

演变与影响

从拟物化与扁平化的摆动中来。扁平化（2013）把深度拿走，质感设计（2014）把深度规则化——纸片、海拔、涟漪，一套可复制的语言。此后它的演变是"规则不减，个性渐增"：2018 年放开主题定制，2021 年用动态取色把个性交给每位用户。今天几乎所有主流设计系统都在"扁平骨架 + 材质深度"的混合态里，而质感设计是其中规则最全、落地最广的一套。