Token 体系中的 Elevation 阴影系统：自动化阶梯计算与适配- 惊觉

Token 体系中的 Elevation 阴影系统：自动化阶梯计算与适配

封面信息图

在界面设计与前端工程中，阴影（Box Shadow）是构建三维空间层级（Elevation / Z-Index Depth）最重要的视觉线索。一个设计精良的阴影系统，能够让用户一眼分辨出什么是平铺在底板上的卡片、什么是悬浮在半空的浮动菜单、什么是最顶层的模态对话框。

然而，在许多设计系统的实现中，阴影往往是设计师凭肉眼随手填写的“魔术数字”——Level 1 写了 0 2px 4px rgba(0,0,0,0.1)，Level 2 写了 0 8px 16px rgba(0,0,0,0.15)，Level 3 突然跳跃到 0 24px 48px rgba(0,0,0,0.2)。

这种缺乏数学连续性的混乱配置，会导致元素在做升起动效（Hover Lift）时，阴影出现突兀的跳跃与生硬变黑。

本文将深入拆解物理光学双层阴影数学模型，并给出一套基于纯数学公式自动化计算与派生 0 到 5 级完整 Elevation Token 阶梯的工程化实现方案。

真实光学的双层阴影物理模型

在真实物理世界中，一个悬浮在平面上方的物体，所产生的阴影由两部分光源共同塑造：

定向主光源阴影（Key Light / Direct Shadow）：
来自上方的直射聚光灯。其特征是：垂直位移显著（Y 轴偏移大）、扩散半径适中、边缘相对清晰。它决定了物体的真实空间高度与立体投射方向。
环境漫反射阴影（Ambient Light / Ambient Shadow）：
来自天花板与四周墙壁反复折射的均匀环境光。其特征是：垂直位移极小（接近 0）、扩散半径极大、透明度极淡且均匀弥散。它负责消除硬边缘，为物体赋予温润的空气感。

工业级阴影铁律：任何一个高级 Elevation Token，必须且只能由这两层阴影叠加而成！

/* 纯双层物理阴影结构公式 */
box-shadow: 
  /* 1. 主光阴影 (Key Shadow) */
  0 calc(var(--elevation-y) * 1px) calc(var(--elevation-blur-key) * 1px) calc(var(--elevation-spread-key) * 1px) rgba(15, 23, 42, var(--alpha-key)),
  /* 2. 环境漫反射阴影 (Ambient Shadow) */
  0 calc(var(--elevation-y-amb) * 1px) calc(var(--elevation-blur-amb) * 1px) 0px rgba(15, 23, 42, var(--alpha-amb));

自动化阶梯数学公式与 Token 计算器

为了实现平滑的动效插值，我们可以将阴影的各个几何参数定义为层级高度 $z \in [0, 5]$ 的连续幂函数：

$$Y_{key}(z) = \lfloor 1.8 \cdot z^{1.35} \rfloor$$
$$\text{Blur}{key}(z) = \lfloor 3.2 \cdot z^{1.4} \rfloor$$
$$\text{Blur}{amb}(z) = \lfloor 6.0 \cdot z^{1.25} \rfloor$$
$$\alpha_{key}(z) = 0.04 + 0.015 \cdot z$$
$$\alpha_{amb}(z) = 0.03 + 0.01 \cdot z$$

// elevation-token-generator.ts 阴影 Token 自动推导引擎
export interface ElevationToken {
  level: number;
  cssValue: string;
  description: string;
}

export function generateElevationScale(): Record<string, ElevationToken> {
  const levels = [
    { z: 0, desc: '平铺底板 (Flat Surface)' },
    { z: 1, desc: '轻微凸起卡片 (Hoverable Card / Tile)' },
    { z: 2, desc: '浮动下拉框与 Popover (Dropdown / Menu)' },
    { z: 3, desc: '抽屉与悬浮操作栏 (Sticky Bar / Drawer)' },
    { z: 4, desc: '核心模态对话框 (Modal Dialog)' },
    { z: 5, desc: '最高级紧急告警与 Toast (Alert Notification)' },
  ];

  const result: Record<string, ElevationToken> = {};

  for (const { z, desc } of levels) {
    if (z === 0) {
      result[`elevation-${z}`] = { level: 0, cssValue: 'none', description: desc };
      continue;
    }

    // 连续幂函数计算几何尺寸
    const yKey = Math.max(1, Math.round(1.8 * Math.pow(z, 1.35)));
    const blurKey = Math.round(3.2 * Math.pow(z, 1.4));
    const spreadKey = -Math.round(z * 0.8); // 负扩张，让阴影更紧凑精致

    const yAmb = Math.max(1, Math.round(z * 0.8));
    const blurAmb = Math.round(6.0 * Math.pow(z, 1.25));

    // 计算透明度 (采用深 Slate 蓝底色而非死黑)
    const alphaKey = (0.04 + 0.018 * z).toFixed(3);
    const alphaAmb = (0.03 + 0.012 * z).toFixed(3);

    const shadowString = [
      `0 ${yKey}px ${blurKey}px ${spreadKey}px rgba(15, 23, 42, ${alphaKey})`,
      `0 ${yAmb}px ${blurAmb}px 0px rgba(15, 23, 42, ${alphaAmb})`,
    ].join(', ');

    result[`elevation-${z}`] = {
      level: z,
      cssValue: shadowString,
      description: desc,
    };
  }

  return result;
}

自动生成的 CSS Elevation Token 产物

运行生成器后，设计系统得到一套极具物理自洽性与美感连续性的阴影 Token：

/* 自动编译生成的标准 Elevation 阴影设计变量表 */
:root {
  /* Level 0: 零阴影 */
  --elevation-0: none;

  /* Level 1: 细腻温润微距阴影 */
  --elevation-1: 0 2px 3px -1px rgba(15, 23, 42, 0.058), 
                 0 1px 6px 0px rgba(15, 23, 42, 0.042);

  /* Level 2: 下拉浮层 */
  --elevation-2: 0 5px 8px -2px rgba(15, 23, 42, 0.076), 
                 0 2px 14px 0px rgba(15, 23, 42, 0.054);

  /* Level 3: 侧边抽屉 */
  --elevation-3: 0 8px 15px -2px rgba(15, 23, 42, 0.094), 
                 0 2px 24px 0px rgba(15, 23, 42, 0.066);

  /* Level 4: 模态弹窗 */
  --elevation-4: 0 12px 22px -3px rgba(15, 23, 42, 0.112), 
                 0 3px 34px 0px rgba(15, 23, 42, 0.078);

  /* Level 5: 顶层全屏告警 */
  --elevation-5: 0 16px 30px -4px rgba(15, 23, 42, 0.130), 
                 0 4px 45px 0px rgba(15, 23, 42, 0.090);
}

悬浮升起（Hover Lift）动效的丝滑插值

因为所有阶梯的参数都来自同一套连续幂函数方程，当卡片在 Hover 状态下从 Level 1 升至 Level 3 时，阴影的漫射扩散在 GPU 合成器中呈现出绝对线性的光学平滑感：

.interactive-elevation-card {
  box-shadow: var(--elevation-1);
  transform: translateY(0);
  transition: 
    box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.interactive-elevation-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-3);
}

总结

阴影系统是数字界面三维深度的灵魂骨架。告别凭感觉拼凑的魔术参数，将直射光与漫反射的双层物理光学模型转化为严密的数学函数，你的设计系统就能在每一次高度升降与模态弹出中，展现出如真实器物般从容、温润而坚固的空间秩序感。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/leopold_man/article/details/164829848

Token 体系中的 Elevation 阴影系统：自动化阶梯计算与适配