Material Design 质感设计（Material Design）

If you called it…如果你管它叫……

Full style DNA完整风格 DNA

1. Stepped z-axis elevation分级的 z 轴 elevation depth defining定义特征

   Every surface rests at a measured height — 2dp cards, 4dp app bars, 6dp FABs, 8dp raised menus, 16dp drawers — and the soft shadow beneath it encodes exactly that height; press, and the shadow grows as the surface lifts toward you.

   每个表面停在一个可测量的高度上 —— 2dp 卡片、4dp 应用栏、6dp FAB、8dp 弹出菜单、16dp 抽屉 —— 底下的柔和阴影精确编码了这个高度；按下时表面抬起，阴影随之变大。

2. Layered digital paper叠放的数字纸张 surface defining定义特征

   The UI is sheets of paper sliding over each other: white cards with crisp 2–4px corners floating on a light gray ground, their edges cut by shadow rather than by borders.

   界面就是互相滑过的纸张：白色卡片带着利落的 2–4px 圆角浮在浅灰底上，边缘靠阴影「裁」出来，而不是靠描边。

3. Floating action button悬浮操作按钮（FAB） geometry defining定义特征

   One circular button (56dp diameter, 6dp elevation) in the accent color hovers above the content — the screen's single promoted action, often straddling the seam between header and content.

   一枚圆形按钮（直径 56dp、6dp elevation）用强调色悬浮在内容之上 —— 它是全屏唯一被主推的操作，常常骑在头部与内容的接缝上。

4. Ink ripple touch feedback墨涟漪触控反馈 motion defining定义特征

   Touch answers with a ripple of ink spreading from the exact contact point across the surface — feedback is rendered as a physical event, not a hover-color swap.

   点按的回应是一滴墨从接触点向整个表面荡开的涟漪 —— 反馈被渲染成一次物理事件，而不是换个 hover 颜色。

5. Bold primary, hot accent大胆主色 + 高亮强调色 color defining定义特征

   A saturated primary (Indigo 500 #3F51B5 class) owns bars and large areas; a contrasting accent (Pink A200 #FF4081 class) is reserved for the FAB and key controls against white cards.

   饱和主色（Indigo 500 #3F51B5 这一档）占据应用栏和大面积区域；对比强烈的强调色（Pink A200 #FF4081 这一档）只留给 FAB 和关键控件，衬在白色卡片上。

6. Motion explains hierarchy表达层级的动效 motion supporting辅助特征

   Transitions run 200–300ms on the standard curve cubic-bezier(0.4, 0, 0.2, 1); new surfaces grow out of the element that spawned them, so animation shows cause, not decoration.

   过渡跑 200–300ms 的标准曲线 cubic-bezier(0.4, 0, 0.2, 1)；新表面从催生它的那个元素里长出来，动效表达的是因果，不是装饰。

7. 8dp square grid8dp 方形网格 layout supporting辅助特征

   Components align to an 8dp baseline grid — spacing in 8/16/24px multiples, 16px screen margins — so unrelated screens share the same rhythm.

   组件对齐到 8dp 基线网格 —— 间距取 8/16/24px 的倍数，屏幕边距 16px —— 互不相干的页面也共享同一套节奏。

8. Shadowless color blocks无阴影色块 depth avoid避免

   Pure 2D fills where hierarchy comes from color alone — zero elevation, zero ripple physics — is Flat Design; Material's entire point is the restored, measurable z-axis.

   纯 2D 填充、层级只靠颜色 —— 零 elevation、零涟漪物理 —— 那是扁平设计；质感设计的全部意义就在于那条被恢复、可测量的 z 轴。

Often confused with: Flat Design最容易混淆：扁平设计

Compare: Material Design vs Flat Design →对比页 →

In code — optional starting points代码写法 —— 可选起点

border-radius: 2px; background: #fff; box-shadow: 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px rgba(0,0,0,.12);

border-radius: 50%; background: #FF4081; box-shadow: 0 6px 10px rgba(0,0,0,.14), 0 1px 18px rgba(0,0,0,.12), 0 3px 5px -1px rgba(0,0,0,.2); transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);

bg-white rounded-sm shadow-[0_2px_2px_rgba(0,0,0,.14),0_3px_1px_-2px_rgba(0,0,0,.2),0_1px_5px_rgba(0,0,0,.12)] /* card */ + rounded-full bg-[#FF4081] w-14 h-14 shadow-[0_6px_10px_rgba(0,0,0,.14),0_1px_18px_rgba(0,0,0,.12),0_3px_5px_-1px_rgba(0,0,0,.2)] /* fab */

Style brief — paste into your agent风格 Brief —— 粘贴给你的代理

Accessibility & misuse可访问性与误用

Elevation alone is a weak affordance: a white card on a #FAFAFA ground can fail the 3:1 boundary ratio for controls, and shadows vanish entirely in forced-colors mode — interactive elements must read as interactive by color, label, and shape, not by lift alone.

只靠 elevation 是微弱的可供性：#FAFAFA 底上的白色卡片可能过不了控件边界的 3:1 对比，而且在 forced-colors 模式下阴影会整个消失 —— 可交互元素必须靠颜色、文字和形状认出「能点」，不能只靠浮起。

White ink on hot accent colors is the classic trap: white on Pink A200 #FF4081 measures roughly 3.3:1 — acceptable for the FAB's icon, too weak for text; white on Indigo 500 #3F51B5 passes at about 6.9:1. Check every pair against 4.5:1, or step down to a 700 shade.

强调色上压白字是经典翻车点：白字配 Pink A200 #FF4081 实测约 3.3:1 —— 给 FAB 图标可以，给正文太弱；白字配 Indigo 500 #3F51B5 约 6.9:1 能过。每一对颜色都按 4.5:1 检查，不行就降一档用 700 色号。

Motion is load-bearing here — surfaces grow and travel to explain where things came from — so prefers-reduced-motion needs a real fallback: replace growing and traveling transitions with instant cuts or simple crossfades, and drop the ripple animation.

动效在这个风格里是承重墙 —— 表面靠生长和移动解释自己从哪来 —— 所以 prefers-reduced-motion 需要真正的降级方案：把生长、位移的过渡换成瞬切或简单淡入淡出，并关掉涟漪动画。

Origin起源

Unveiled by Google at its I/O conference in June 2014 — led by design VP Matías Duarte and developed under the internal codename Quantum Paper — and shipped that year with Android 5.0 Lollipop as the company's first unified cross-platform design language. Its paper-and-ink metaphor and the Roboto typeface (designed by Christian Robertson) became the visual identity of Android; Google extended the system with Material Theming at I/O 2018 and with the wallpaper-tinted, personalized Material You alongside Android 12 in 2021.

2014 年 6 月由 Google 在 I/O 大会上发布 —— 由设计副总裁 Matías Duarte 主导，内部代号 Quantum Paper —— 同年随 Android 5.0 Lollipop 出厂，成为该公司首个跨平台统一设计语言。纸墨隐喻和 Roboto 字体（Christian Robertson 设计）从此成为 Android 的视觉身份；Google 在 I/O 2018 扩展出 Material Theming，2021 年又随 Android 12 带来能从壁纸取色的个性化 Material You。

See also相关词条