什么是空间化设计？
空间化设计（Spatial Design）的核心概念来自 Apple visionOS：在界面中模拟真实空间中物体的物理特征——层次（z轴深度）、材质（透明度、反射、折射）、光照（高光、阴影、环境光）。当这些特征被有克制地运用在 2D 界面中，就产生了一种独特的"有深度感的平面"视觉效果。
在 visionOS 正式发布（2024年2月）后，这套设计语言的影响已经远远超出了 Vision Pro 用户群。iOS 17 的 Interactive Widget、macOS Sonoma 的桌面小组件、新版 iPhone 锁屏，都能看到空间化设计语言的清晰痕迹。更重要的是，独立设计师和 Web 开发者开始将这套语言移植到 2D 网页上，形成了 2025 年最前沿的界面视觉风格之一。
"Spatial design is not about adding depth for depth's sake. It's about using depth to communicate hierarchy, focus, and physicality — to make digital feel real without being skeuomorphic."
— Apple Human Interface Guidelines, visionOS材质系统：空间化的三种材料
visionOS 定义了三种基础材质，它们在 2D 设计中的对应用法同样适用：
"有克制"是空间化设计的关键词。同一页面内，不应超过 3 个层次。过多的层次叠加会让界面失去重心，用户无法判断"什么是最重要的"。
核心设计原则
用 box-shadow 的扩散半径和偏移量模拟 z 轴高度：Layer 0（底层）无阴影，Layer 1（卡片）0 2px 8px rgba(0,0,0,0.06)，Layer 2（浮层）0 8px 32px rgba(0,0,0,0.12)，Layer 3（Dialog）0 24px 64px rgba(0,0,0,0.2)。不同层次绝不混用阴影规格。
backdrop-filter: blur() 应该只用于浮在其他内容之上的元素：导航栏、侧边抽屉、Tooltip、下拉菜单。如果一个元素没有可以"透过来"的背景内容，使用毛玻璃就失去了意义，反而会显得空洞。
visionOS 的玻璃卡片顶部有细微的白色线性渐变（高光），模拟从上方来的环境光。在 2D 中复现这个细节：在卡片背景上叠加 linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 30%)，精致度会立即提升一个档次。
Hover 时卡片 translateY(-4px) + box-shadow 增大，模拟"从桌面被拾起"的物理感。这个细节传达了"这个元素可以被操作"的信息，比颜色变化更直觉、更符合空间物理规律。
代表设计案例
2D Web 场景下的代表案例：Stripe 的 3D 卡片（CSS 3D transform + 鼠标跟随倾斜）、Notion 新版浮层系统（材质层次清晰）、Linear 的 Command Palette（毛玻璃 + 景深的教科书级应用）。
如何将空间感引入你的设计
从阴影系统开始：删掉所有随意设置的 box-shadow，重新建立 3 档阴影规格（对应 3 个 z 层次），并在设计系统中将它们命名为 shadow/sm、shadow/md、shadow/lg。严格规则 = 自然层次感。
谨慎引入毛玻璃：只在导航栏、侧边栏、Tooltip 这类真正浮在其他内容上的元素中使用 backdrop-filter。不要在普通卡片或内容区域滥用。正确的玻璃 = 提升感，错误的玻璃 = 廉价感。
添加高光细节：在最重要的 Card 组件顶部添加 1px 的白色渐变高光，在 Dark Mode 下尤其明显。这一个细节能让 UI 精致度提升 10 倍，却只需要 2 行 CSS。
Z 轴交互反馈：把所有可点击卡片的 hover 状态改为 translateY(-4px) + shadow 加深，把按钮的 active 状态改为 translateY(1px)（向下压）。物理化的反馈比颜色变化更能传达"这里可以操作"。