1. 传统单层阴影的视觉缺陷与物理双光源光学模型

在现代数字产品界面设计中，阴影（Drop Shadow）并不仅仅是一种装饰性的视觉特效，更是界面空间层级（Spatial Depth & Z-index）、信息亲疏关系以及交互悬浮态（Hover / Active）的核心隐喻。

然而，在大量初中级设计稿中，常常能看到粗糙生硬的“单层阴影”配置——例如随手添加一个 Y: 4, Blur: 8, Spread: 0, #000000 25% 的投影。这种单层阴影在视觉上往往存在严重的致命缺陷：

1. 边缘生硬污浊（Hard & Muddy Edges）：纯黑色（#000000）的高透明度投影在浅色背景上容易形成一圈灰脏的污痕，破坏了界面的清透感与现代高级感；
2. 缺乏空间景深衰减：真实物理世界中的阴影永远由多个光源共同作用，单层算法无法模拟光线的漫反射与空气衰减；
3. 无法自适应暗黑模式：在深色背景下，黑色阴影几乎完全不可见，导致模态弹窗与浮动卡片彻底丧失空间层级感。

物理双光源投射模型 (Two-Light Optical Model):
                  ☀️ 主定向光源 (Key Light)
                    \
                     \
      ┌──────┐        ▼
      │ 卡片 │───────► [主光阴影 Key Shadow]: 清晰、偏移较大、界定光照方向
      └──────┘
                     ▲
                    /
                  ☁️ 环境漫反射光 (Ambient Light)
                     [环境光阴影 Ambient Shadow]: 柔和、大模糊、无明显偏移、贴近物体边缘

为了还原真实自然的物理质感，现代顶级设计系统（如 Apple iOS、Material Design 3 以及 Tailwind CSS）均采用了双层或多层阴影叠加模型（Layered Shadows）：

• 第一层：主光阴影（Key Light Shadow）：模拟上方主光源产生的定向直射投影。其特点是具备明确的 Y 轴垂直偏移，模糊半径适中，透明度较低，用于交代光源的物理方向与物体的离地高度；
• 第二层：环境光阴影（Ambient Light Shadow）：模拟四周漫反射光在物体底部产生的光线遮挡（Ambient Occlusion）。其特点是 Y 轴微小偏移甚至为 0，拥有极大的模糊半径（Blur），透明度极低，用于柔和地将物体与底层画板融合，消除生硬边界。

---

2. 企业级 Elevation 标高层级架构与参数矩阵

企业级设计系统通常将 UI 界面的空间深度划分为 6 个标准的标高等级（Elevation 0 ~ 5）。下表为生产级 Figma 双层阴影规范与参数对照矩阵：

标高等级 (Elevation)	业务应用场景	主光阴影 (Key Light) 参数	环境光阴影 (Ambient Light) 参数	视觉隐喻与感知效果
Elevation 0 (Flat)	页面主画布、纯平背景卡片、输入框基底	无投影（None）	无投影（None）	绝对贴合底层，无任何空间浮起
Elevation 1 (Raised)	基础商品卡片、文章列表项、数据胶囊 Badge	X:0, Y:1, Blur:2, #000000 5%	X:0, Y:0, Blur:1, #000000 4%	微妙微凸浮起，赋予卡片独立轮廓
Elevation 2 (Floating)	鼠标悬停卡片（Hover）、浮起按钮、下拉菜单 Dropdown	X:0, Y:4, Blur:6, #000000 7%	X:0, Y:2, Blur:4, #000000 4%	明晰的悬浮感，传达可交互或激活意图
Elevation 3 (Overlay)	气泡提示 Popover / Tooltip、浮动导航栏 Sticky Bar	X:0, Y:10, Blur:15, #000000 8%	X:0, Y:4, Blur:6, #000000 4%	明显高于常规内容，覆盖在主视口之上
Elevation 4 (Modal)	对话框 Dialog、模态弹窗 Modal、侧滑抽屉 Drawer	X:0, Y:20, Blur:25, #000000 10%	X:0, Y:8, Blur:10, #000000 5%	极高层级遮盖，强引导用户聚焦处理当前任务
Elevation 5 (Topmost)	全局通知 Toast、浮动操作按钮 FAB、全屏大图预览	X:0, Y:25, Blur:50, #000000 15%	X:0, Y:12, Blur:15, #000000 7%	最高空间层级，宛如悬浮在屏幕最上空的物理实体

---

3. 在 Figma 中落地深度系统的实操方案：Style 与 Variables 协同架构

目前很多设计师在构建 Figma 变量体系（Variables）时会产生困惑：“为什么在 Local Variables 面板中找不到 Effect（投影）类型的变量？”

这是因为在 Figma 当前的架构中，Variables 专精于原子标量（Color、Number、String、Boolean）。要在 Figma 中工业级落地深度系统，必须采用 Effect Styles 封装外壳 + Variables 驱动底层原子 的协同架构：

┌────────────────────────────────────────────────────────┐
│  Tier 1: Atomic Variables (基础变量层)                 │
│  - Color Variable: shadow-color-key, shadow-color-ambient
│  - Number Variable: elevation-1-y, elevation-1-blur    │
└──────────────────────────┬─────────────────────────────┘
                           │ 组合引用与多模式绑定
                           ▼
┌────────────────────────────────────────────────────────┐
│  Tier 2: Effect Styles (投影样式层)                    │
│  - Effect Style: Elevation / 01 - Raised (双层 Drop Shadow)
│  - Effect Style: Elevation / 02 - Floating (双层 Drop Shadow)
└──────────────────────────┬─────────────────────────────┘
                           │ 赋能下游组件
                           ▼
┌────────────────────────────────────────────────────────┐
│  Tier 3: Design System Components (组件层)             │
│  - Button, Card, Dropdown, Modal Dialog                │
└────────────────────────────────────────────────────────┘

详细实操创建流程

1. 配置语义色彩变量：
   • 打开 Local variables 面板，创建色彩变量 shadow/key 与 shadow/ambient；
   • 在 Light 模式下，将色值映射为深蓝灰或纯黑（例如 #0F172A），并保持透明度在 5%~15% 区间；
2. 在 Effect Styles 中构建双层阴影：
   • 选中任意测试矩形，在右侧属性面板找到 Effects，点击 + 两次，添加两个 Drop shadow；
   • 点击第一个投影图标，输入主光阴影参数（如 X:0, Y:4, Blur:6, Spread:-1），颜色选择绑定的 shadow/key 变量；
   • 点击第二个投影图标，输入环境光阴影参数（如 X:0, Y:2, Blur:4, Spread:-2），颜色选择绑定的 shadow/ambient 变量；
   • 点击 Effects 面板右上角四点图标，将其保存为全局团队库样式：Elevation/02 - Floating；
3. 利用负 Spread（外延扩张）收敛边缘脏迹：
   • 高阶技法：在主光阴影中将 Spread 设为 -1px 或 -2px。负外延能够在保持大模糊半径的同时，收缩阴影的实际几何扩散范围，彻底解决投影从卡片两侧漏出造成的“视觉发胖”问题。

---

4. 暗黑模式（Dark Mode）下的阴影物理失效与表面亮度补偿规范

在深色主题（Dark Theme）界面中，背景通常为 #0B0F19 或 #121212 等接近纯黑的色调。由于物理对比度规律，黑色的 Drop shadow 投射在黑色背景上完全被吞没，直接导致界面的空间层级失效。

为了在深色模式下完美呈现深度感知，工业界普遍采用 “表面提升加亮（Surface Elevation Overlay）+ 高光微边框（Subtle Border）” 的复合补偿策略：

1. 表面亮度提升（Surface Lightening）

根据 Material Design 3 深度规范，物体离地高度越高，其接收到的环境光越多，因此卡片本身的表面颜色应当越浅：

• Elevation 0 (背景)：#121212 (0% 叠加)
• Elevation 1 (基础卡片)：#1E1E1E (叠加 5% 白色高光)
• Elevation 2 (悬停卡片)：#232323 (叠加 7% 白色高光)
• Elevation 3 (弹窗浮层)：#282828 (叠加 11% 白色高光)
• Elevation 4 (抽屉通知)：#2E2E2E (叠加 14% 白色高光)

2. 1px 细微半透明高光边框（Subtle Translucent Stroke）

在 Figma 中为暗黑模式组件统一配置 1px Inside 描边：

• 颜色绑定至 border/subtle 变量，在 Dark Mode 模式下设定为 rgba(255, 255, 255, 0.08) 到 0.12；
• 微弱的半透明白色高光描边能精准勾勒出卡片的几何边界，结合卡片自身的表面亮度差，在暗黑模式下呈现出极度高级且细腻的物理雕刻感。详细暗黑模式与多主题变量模式切换方案，可参阅 Figma 暗黑模式与多主题设计系统深度实战。

---

5. 前端工程化代码交付：CSS box-shadow 与 Tailwind CSS 配置映射

在研发交付链路中，通过 Figma Dev Mode 深度指南 提取的多层阴影可直接转换为工业级前端代码。

1. 原生 CSS 变量与多层 box-shadow 规范

在 CSS 中，box-shadow 支持使用逗号 , 分隔多层阴影值，语法顺序与 Figma 从上至下的叠加完全一致：

:root {
  /* Elevation 1: 基础卡片微凸 */
  --shadow-elevation-1: 
    0 1px 2px 0 rgba(15, 23, 42, 0.05),
    0 0 1px 0 rgba(15, 23, 42, 0.04);

  /* Elevation 2: 悬停态与浮动下拉菜单 */
  --shadow-elevation-2: 
    0 4px 6px -1px rgba(15, 23, 42, 0.08),
    0 2px 4px -2px rgba(15, 23, 42, 0.04);

  /* Elevation 3: 模态对话框与抽屉 */
  --shadow-elevation-3: 
    0 10px 15px -3px rgba(15, 23, 42, 0.10),
    0 4px 6px -4px rgba(15, 23, 42, 0.05);

  /* Elevation 4: 全局通知与高浮层 */
  --shadow-elevation-4: 
    0 20px 25px -5px rgba(15, 23, 42, 0.12),
    0 8px 10px -6px rgba(15, 23, 42, 0.06);
}

2. Tailwind CSS 配置文件扩展实战

在前端项目的 tailwind.config.js 中，将 Figma 的 Elevation 标高层级映射为原子类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'elevation-1': '0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 0 1px 0 rgba(15, 23, 42, 0.04)',
        'elevation-2': '0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04)',
        'elevation-3': '0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05)',
        'elevation-4': '0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06)',
      }
    }
  }
}

在前端模板中，开发者只需书写 class="shadow-elevation-2 hover:shadow-elevation-3 transition-shadow duration-200"，即可实现设计稿与生产环境 1:1 的无缝像素级还原。

---

6. 深度系统设计走查与 QA 验证清单

在将阴影与深度系统发布至企业全局团队库前，建议遵循以下清单执行闭环检验：

1. [ ] 严禁裸值硬编码：画布中所有组件卡片必须绑定标准 Elevation 样式，禁止出现手动填写的独立 Effect 参数；
2. [ ] 负外延（Negative Spread）校验：检查中高标高阴影是否合理设置了负 Spread，避免出现左右两侧视觉溢出发胖；
3. [ ] 暗黑模式高光兼容：在深色主题下切换检查，确保卡片具有清晰的表面层级亮度梯度与半透明 1px 边框；
4. [ ] 前端渲染性能评估：避免在单页超长虚拟滚动列表中滥用超过 3 层的超大模糊阴影，必要时结合 CSS will-change: box-shadow 或硬件加速规避重绘掉帧。

更多设计系统架构与变量工程化实践，可阅读站内关联指南：

• Design Tokens 标准命名与结构对照手册
• Figma Variables 变量与 Design Tokens 体系落地指南
• Figma 样式转变量平滑迁移指南
• Figma Dev Mode 深度指南：属性检查、Box Model 盒模型、资产导出与标注
• Figma 设计走查（Design Lint & Design QA）自动化实战