空间界面（visionOS）Spatial UI (VisionOS)
悬浮的半透明窗口、深度阴影与视线悬停反馈，材质随环境光变化。布局从平面转向空间层级，注重舒适观看距离。
典型场景空间计算 · AR/VR · 沉浸式应用
编号55
年代2024 Spatial Era
复杂度High
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
悬浮的半透明窗口、深度阴影与视线悬停反馈，材质随环境光变化。布局从平面转向空间层级，注重舒适观看距离。
关键词
Glassdepthimmersionspatialtranslucentgazegestureapplevision-pro
别名
Spatial UI
效果与动效
Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus
设计系统变量
--glass-bgrgba(255,255,255,0.2)--glass-blur40px--glass-saturate180%--window-radius24px--depth-shadow0 8px 32px rgba(0,0,0,0.1)--focus-scale1.02配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Frosted Glass #FFFFFF (15-30% opacity), System White
辅色 / Secondary
Vibrant system colors for active states, deep shadows for depth
强调色在页面底色上的对比度约 2.9:1，仅适合装饰与大色块，不要用于文字。
适用场景
适合 / Best For
- Spatial computing apps
- VR/AR interfaces
- immersive media
- futuristic dashboards
避开 / Do Not Use For
- Text-heavy documents
- high-contrast requirements
- non-3D capable devices
框架兼容
swiftuicustom
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本中animation / blur
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Glass effect visible,
- Depth layers clear,
- Hover states defined,
- Colors vibrant on active,
- Floating feel achieved,
- Contrast maintained
CSS / 技术关键词
backdrop-filter: blur(40px) saturate(180%), background: rgba(255,255,255,0.2), border-radius: 24px, box-shadow: 0 8px 32px rgba(0,0,0,0.1), transform: scale on focus, depth via shadows
AI 提示词
Design a VisionOS-style spatial interface. Use: frosted glass panels, depth layers, translucent backgrounds (15-30% opacity), vibrant colors for active states, gaze-hover effects, floating windows, immersive feel.