先看看示例
作者提供的示例，实际效果取决于你的输入和使用工具。
输入
设计一个悬浮在房间背景图上的半透明玻璃信息面板，带细边缘高光和柔和阴影。
输出
预期交付：视觉原则、CSS与多端玻璃面板组件代码示例。（编辑说明，非实际运行结果）
方法说明
---
name: spatial-design
description: Web and App implementation guide for Spatial Design. Trigger when user wants environment-aware layouts, Apple Vision Pro inspiration, and mixed reality aesthetics.
date_added: "2026-06-17"
risk: safe
source: self
source_type: self
---
# Spatial Design
> "UI that belongs in the room with you. Transparent, glass-like panels that react to the lighting of the physical space."
## When to Use
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
## Core Principles
1. **Environmental Transparency**: The UI acts like a glass pane. It is deeply reliant on background blur, but specifically aims to let the environment (or a simulated environment image) dictate the mood.
2. **Dynamic Lighting**: Elements respond to cursor position as if a flashlight is shining on them.
3. **Subtle Volume**: Not flat, but not extremely 3D. Elements have a very thin rim of light around the edge (specular highlight).
## Visual DNA
- **Colors**: Almost exclusively uses `rgba()` white or black. The actual color comes entirely from the background environment.
- **Typography**: Extremely sharp, high legibility. Often uses varying font weights to establish hierarchy without relying on color. Apple's `SF Pro` is the gold standard here.
- **Icons**: Outlined, high-legibility glyphs.
## Web Implementation
- **CSS Example**:
```css
body {
/* Needs a complex background to look right */
background: #203040 url('room-environment.jpg') center / cover no-repeat;
}
.spatial-panel {
/* The core material */
background: rgba(255, 255, 255, 0.2); /* Very sheer */
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border-radius: 32px;
padding: 40px;
/* The specular rim light */
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.6),
inset 0 0 1px 1px rgba(255,255,255,0.2),
0 24px 48px rgba(0,0,0,0.1);
}
.spatial-btn {
background: rgba(0,0,0,0.1);
color: white;
border-radius: 20px;
padding: 12px 24px;
backdrop-filter: blur(10px);
transition: all 0.2s;
}
.spatial-btn:hover {
background: rgba(255,255,255,0.2);
/* Highlight effect */
box-shadow: inset 0 0 20px rgba(255,255,255,0.4);
}
```
## App Implementation
### SwiftUI
```swift
struct SpatialDesignView: View {
var body: some View {
ZStack {
// Environment background
Image("room-environment")
.resizable()
.aspectRatio(contentMode: .fill)
.ignoresSafeArea()
// Spatial Panel
VStack(spacing: 24) {
Text("Environmental UI")
.font(.title).fontWeight(.bold)
.foregroundColor(.white)
Button(action: {}) {
Text("Interact")
.foregroundColor(.white)
.padding(.horizontal, 32)
.padding(.vertical, 16)
}
.background(.ultraThinMaterial)
.clipShape(Capsule())
.overlay(Capsule().stroke(Color.white.opacity(0.3), lineWidth: 1))
}
.padding(40)
.background(.ultraThinMaterial) // The core spatial material
.cornerRadius(32)
// Specular rim light
.overlay(
RoundedRectangle(cornerRadius: 32)
.stroke(
LinearGradient(
colors: [.white.opacity(0.6), .white.opacity(0.1)],
startPoint: .topLeading, endPoint: .bottomTrailing
),
lineWidth: 1
)
)
// Very soft, diffuse shadow
.shadow(color: .black.opacity(0.1), radius: 40, y: 20)
}
}
}
```
- `.background(.ultraThinMaterial)` is exactly what Apple uses for this aesthetic.
- The specular highlight is critical. Use an `.overlay` with a `LinearGradient` stroke to simulate a light source hitting the top-left edge of the glass.
### Flutter
```dart
import 'dart:ui';
class SpatialDesignScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
Image.asset('assets/room-environment.jpg', fit: BoxFit.cover),
Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(32),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 30.0, sigmaY: 30.0),
child: Container(
width: 350,
padding: const EdgeInsets.all(40),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(32),
// Specular rim light
border: Border.all(color: Colors.white.withOpacity(0.4), width: 1),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text('Environmental UI', style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold)),
const SizedBox(height: 32),
// Spatial Button
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.1),
border: Border.all(color: Colors.white.withOpacity(0.2)),
borderRadius: BorderRadius.circular(50),
),
child: const Text('Interact', style: TextStyle(color: Colors.white)),
),
),
)
],
),
),
),
),
),
],
),
);
}
}
```
- `BackdropFilter` is required to blur the background.
- Notice the button *inside* the panel also has a `BackdropFilter`. This creates nested glass, which is a hallmark of Spatial Design.
### React Native
```jsx
// REQUIRES: @react-native-community/blur
import { BlurView } from '@react-native-community/blur';
const SpatialDesignScreen = () => {
return (
<ImageBackground source={{uri: 'room_bg'}} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ width: '85%', shadowColor: '#000', shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.1, shadowRadius: 40, elevation: 10 }}>
<BlurView
style={{ borderRadius: 32, borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', padding: 40, alignItems: 'center' }}
blurType="light"
blurAmount={20}
>
<Text style={{ color: '#FFF', fontSize: 28, fontWeight: 'bold', marginBottom: 32 }}>
Environmental UI
</Text>
<View style={{ borderRadius: 50, overflow: 'hidden' }}>
<BlurView blurType="dark" blurAmount={10} style={{ paddingVertical: 16, paddingHorizontal: 32, borderWidth: 1, borderColor: 'rgba(255,255,255,0.2)' }}>
<Text style={{ color: '#FFF', fontSize: 16 }}>Interact</Text>
</BlurView>
</View>
</BlurView>
</View>
</ImageBackground>
);
};
```
- `BlurView` from `@react-native-community/blur` is one backdrop-blur option; evaluate platform support and reduced-transparency fallback.
- Use `blurType="light"` for the main panel and `blurType="dark"` for the buttons to create contrast between the glass layers.
### Jetpack Compose
```kotlin
@Composable
fun SpatialDesignScreen() {
Box(modifier = Modifier.fillMaxSize()) {
Image(painterResource(R.drawable.room_environment), null, contentScale = ContentScale.Crop, modifier = Modifier.fillMaxSize())
Box(
modifier = Modifier
.align(Alignment.Center)
.width(350.dp)
// Shadow goes on the outside
.shadow(20.dp, RoundedCornerShape(32.dp), spotColor = Color.Black.copy(alpha = 0.1f))
// Android 12+ Blur
.graphicsLayer {
// No renderEffect here: it would blur this panel and its text, not the room.
clip = true
shape = RoundedCornerShape(32.dp)
}
.background(Color.White.copy(alpha = 0.1f))
.border(1.dp, Brush.linearGradient(listOf(Color.White.copy(alpha = 0.6f), Color.Transparent)), RoundedCornerShape(32.dp))
.padding(40.dp),
contentAlignment = Alignment.Center
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("Environmental UI", color = Color.White, fontSize = 28.sp, fontWeight = FontWeight.Bold)
Spacer(Modifier.height(32.dp))
// Button
Box(
modifier = Modifier
.background(Color.Black.copy(alpha = 0.1f), CircleShape)
.border(1.dp, Color.White.copy(alpha = 0.2f), CircleShape)
.padding(horizontal = 32.dp, vertical = 16.dp)
) {
Text("Interact", color = Color.White)
}
}
}
}
}
```
- The `Brush.linearGradient` applied to the `Modifier.border` perfectly simulates the top-down rim light hitting a thick pane of glass.
## Do's and Don'ts
- **DO**: Crank up the `saturate()` filter on the backdrop blur to make the background colors pop through the glass.
- **DON'T**: Use dark, opaque drop shadows. The UI should look like glass, which doesn't cast harsh shadows.
## Limitations
- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
- Ensure appropriate contrast ratios and responsive behaviors are verified separately.
These flat-screen examples simulate spatial styling; they do not implement eye tracking, AR anchoring, environmental lighting or 3D windows. Keep content contrast stable over every background and use actual labeled controls for interaction. Native visionOS windows should use the platform window/material APIs.