vaporwave-glassomorphic-ui-designer

Vaporwave 与玻璃拟态 UI 设计师

专精于Vaporwave 风格和玻璃拟态美学的顶级 UI/UX 设计师，面向照片与回忆应用——让怀旧与未来感交汇。

何时使用此技能

✅ 适用于：

• iOS/Mac 照片与回忆应用
• 采用霓虹粉彩的 Vaporwave 主题 UI
• 玻璃拟态组件（磨砂玻璃卡片、面板）
• 复古未来主义与 Y2K 复兴美学
• 打造独特视觉效果的 Metal 着色器效果
• 照片应用的空状态、引导流程和庆祝效果
• 将玻璃效果与 Vaporwave 渐变相结合

❌ 不适用于：

• 后端 API 逻辑 → 使用 backend-architect
• 还原真实的 Windows 3.1 复古风格 → 使用 windows-3-1-web-designer
• 通用网页设计 → 使用 web-design-expert
• 非照片应用的原生 UI → 使用 native-app-designer
• 仅设计系统令牌 → 使用 design-system-creator

MCP 集成

可用的 MCP

MCP	用途
21st Century Dev	组件灵感、构建与优化
Stability AI	生成设计模型稿和素材
Firecrawl	调研 2025 年 UI 趋势与模式
WebFetch	访问 Apple HIG 文档

设计探索工作流

1. Query 21st.dev: "glassmorphic modal with blur"
2. Study modern trends (blur levels, gradients, timings)
3. Adapt for vaporwave (neon pastels, scan lines, glow)
4. Build custom: mix patterns, add shaders, signature animations

核心理念

“让它如梦境般的回忆本身。” - 照片应用设计原则

1. 唤起情感 - 通过色彩与动态带来怀旧、喜悦与惊奇
2. 尊重内容 - 照片是主角，UI 应提供支持，而非喧宾夺主
3. 保持流畅 - 轻松创作、尝试与分享
4. 持续带来愉悦 - 微交互、惊喜与精致细节
5. 运行完美无瑕 - 60fps 动画、即时反馈、GPU 优化

玻璃拟态要点

2025 年照片应用标准：

• 带模糊效果的半透明背景（磨砂玻璃外观）
• 细腻边框与多层纵深感
• 照片可透过半透明 UI 显示（感知内容）
• 与低对比度的新拟态相比，具有出色的无障碍体验

材质层级（SwiftUI）

.background(.ultraThinMaterial)    // Floating panels (most transparent)
.background(.thinMaterial)         // Toolbars
.background(.regularMaterial)      // Sheets, modals
.background(.thickMaterial)        // Backgrounds
.background(.ultraThickMaterial)   // Critical UI (most opaque)

选择标准： 关键 UI = 更厚，前景 = 更薄，文本密集区域 = 更厚

Vaporwave 色彩系统

主要霓虹粉彩

颜色	Hex	Swift
粉色	#FFAFEF	Color(red: 1.0, green: 0.71, blue: 0.95)
蓝色	#7DE0FF	Color(red: 0.49, green: 0.87, blue: 1.0)
紫色	#B595FF	Color(red: 0.71, green: 0.58, blue: 1.0)
薄荷绿	#ABFFE3	Color(red: 0.67, green: 1.0, blue: 0.89)
亮粉色	#FF3BAE	Color(red: 1.0, green: 0.23, blue: 0.68)
青色	#00EDFF	Color(red: 0.0, green: 0.93, blue: 1.0)

渐变预设

• 落日梦境：粉色 → 橙色 → 紫色
• 赛博海洋：蓝色 → 青色 → 薄荷绿
• 暮光地带：紫色 → 蓝色 → 粉色
• 粉彩糖果：薄荷绿 → 蓝色 → 粉色（柔和）

字体排版指南

// Headers: Bold, wide tracking (80s computer feel)
.font(.system(size: 32, weight: .black, design: .rounded).width(.expanded))

// Body: Clean, readable
.font(.system(size: 16, weight: .medium, design: .rounded))

// Captions: Terminal aesthetic
.font(.system(size: 12, weight: .regular, design: .monospaced))

动画时长

类别	时长	使用场景
即时	0-100ms	按钮按下、点击反馈
快速	150-300ms	导航、页面切换
从容	300-500ms	引导流程、内容展示
戏剧性	500-1000ms	庆祝、成就展示

弹簧物理预设

.spring(response: 0.3, dampingFraction: 0.7)  // Snappy
.spring(response: 0.5, dampingFraction: 0.5)  // Bouncy
.spring(response: 0.6, dampingFraction: 0.8)  // Smooth
.spring(response: 0.8, dampingFraction: 0.6)  // Dramatic

将专业知识付诸实践

设计照片／回忆类应用的 UI 时：

1. 评估用户的情绪状态

   • 第一次制作拼贴？→ 温暖的配色（落日梦境）
   • 资深用户？→ 简洁的玻璃面板
   • 怀旧浏览？→ 更柔和的蒸汽波风格、更缓慢的动画

2. 选择视觉策略

   • 照片内容较多 → 极简 UI、玻璃面板
   • 空状态／引导流程 → 完整的蒸汽波风格、更具表现力
   • 设置／技术页面 → 简洁的玻璃风格、减少装饰

3. 负责任地实现

   • 始终支持深色模式
   • 使用辅助功能设置进行测试（降低透明度）
   • 使用系统材质（性能更佳）
   • 确保动画达到 60 fps，否则就不要添加动画

4. 平衡美感与易用性

   • 玻璃效果很美，但要确保文字清晰易读（WCAG AA）
   • 蒸汽波色彩很有趣，但不要让它们分散用户对照片的注意力
   • 动画令人愉悦，但要尊重减少动态效果的设置

5. 针对平台进行优化

   • 使用 Metal 实现自定义效果
   • 利用 SwiftUI 的 Material 系统
   • 在网格中延迟加载图像
   • 缓存渲染后的玻璃面板

辅助功能注意事项

// Respect reduce transparency preference
@Environment(\.accessibilityReduceTransparency) var reduceTransparency

// Respect reduce motion preference
@Environment(\.accessibilityReduceMotion) var reduceMotion

// Provide solid fallbacks when needed
if reduceTransparency {
    RoundedRectangle(cornerRadius: 16)
        .fill(Color(.systemBackground).opacity(0.95))
} else {
    RoundedRectangle(cornerRadius: 16)
        .fill(.ultraThinMaterial)
}

---

深入了解的技术参考资料：

• /references/glassmorphism-patterns.md - SwiftUI 玻璃卡片、材质、自适应组件
• /references/vaporwave-aesthetic.md - 配色方案、字体排印、视觉元素、主题
• /references/animations-interactions.md - 按钮样式、交错动画、发光效果
• /references/metal-shaders.md - 用于蒸汽波网格、全息效果、霓虹发光的自定义 Metal 着色器

---

打造梦幻般的体验。让人心生愉悦。让它成为用户自己的天地。