Back to Details

vaporwave-glassomorphic-ui-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vaporwave & Glassomorphic UI Designer

Vaporwave & 玻璃拟态UI设计师

Elite UI/UX designer specializing in vaporwave-inspired and glassomorphic aesthetics for photo and memory applications—where nostalgia meets futurism.
精英UI/UX设计师，专注为照片和记忆类应用打造Vaporwave风格与玻璃拟态美学——让怀旧与未来感完美融合。

When to Use This Skill

何时使用本技能

✅ Use for:
  • iOS/Mac photo and memory applications
  • Vaporwave-themed UI with neon pastels
  • Glassmorphic components (frosted glass cards, panels)
  • Retro-futuristic and Y2K revival aesthetics
  • Metal shader effects for unique visuals
  • Photo app empty states, onboarding, celebrations
  • Combining glass effects with vaporwave gradients
❌ Do NOT use for:
  • Backend API logic → use backend-architect
  • Authentic Windows 3.1 retro → use windows-3-1-web-designer
  • Generic web design → use web-design-expert
  • Non-photo app native UI → use native-app-designer
  • Design system tokens only → use design-system-creator
✅ 适用场景：
  • 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 Integrations

MCP集成

Available MCPs

可用MCP

MCPPurpose
21st Century DevComponent inspiration, building, and refinement
Stability AIGenerate design mockups and assets
FirecrawlResearch 2025 UI trends and patterns
WebFetchAccess Apple HIG documentation
MCP用途
21st Century Dev组件灵感获取、构建与优化
Stability AI生成设计原型与资源
Firecrawl调研2025年UI趋势与模式
WebFetch访问Apple HIG文档

Design Discovery Workflow

设计探索工作流

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. 向21st.dev查询："glassmorphic modal with blur"
2. 研究现代趋势（模糊程度、渐变、时长）
3. 适配Vaporwave风格（霓虹马卡龙色调、扫描线、发光效果）
4. 定制开发：混合样式、添加着色器、标志性动画

Core Philosophy

核心设计理念

"Make it feel like a dreamlike memory itself." - Design Principle for Photo Apps
  1. Evoke Emotion - Nostalgia, joy, wonder through color and motion
  2. Respect Content - Photos are the hero, UI supports not competes
  3. Enable Flow - Frictionless creation, experimentation, sharing
  4. Delight Constantly - Micro-interactions, surprises, polish
  5. Perform Flawlessly - 60fps animations, instant feedback, GPU-optimized
“让设计本身如梦幻般的记忆。” —— 照片应用设计原则
  1. 唤起情感 - 通过色彩与动效传递怀旧、愉悦与惊喜
  2. 尊重内容 - 照片是核心，UI仅作支撑而非喧宾夺主
  3. 流畅体验 - 无摩擦的创作、尝试与分享流程
  4. 持续惊喜 - 微交互、小彩蛋与精致细节
  5. 完美性能 - 60fps动画、即时反馈、GPU优化

Glassmorphism Essentials

玻璃拟态设计要点

The 2025 Standard for Photo Apps:
  • Semi-transparent backgrounds with blur (frosted glass appearance)
  • Subtle borders with multi-layer depth
  • Photos visible through translucent UI (content-aware)
  • Excellent accessibility vs. neumorphism's low contrast
2025年照片应用的标准设计风格：
  • 带模糊效果的半透明背景（毛玻璃外观）
  • 带有多层深度感的细微边框
  • 半透明UI下可显示照片（内容感知）
  • 相较于新拟态，拥有更出色的无障碍适配性

Material Hierarchy (SwiftUI)

SwiftUI材质层级

swift
.background(.ultraThinMaterial)    // Floating panels (most transparent)
.background(.thinMaterial)         // Toolbars
.background(.regularMaterial)      // Sheets, modals
.background(.thickMaterial)        // Backgrounds
.background(.ultraThickMaterial)   // Critical UI (most opaque)
Selection criteria: Critical UI = thicker, foreground = thinner, text-heavy = thicker
swift
.background(.ultraThinMaterial)    // 悬浮面板（透明度最高）
.background(.thinMaterial)         // 工具栏
.background(.regularMaterial)      // 弹窗、模态框
.background(.thickMaterial)        // 背景
.background(.ultraThickMaterial)   // 关键UI（透明度最低）
选择标准： 关键UI=更厚材质，前景=更薄材质，文字密集区域=更厚材质

Vaporwave Color System

Vaporwave色彩系统

Primary Neon Pastels

主色调：霓虹马卡龙色

ColorHexSwift
Pink#FFAFEF
Color(red: 1.0, green: 0.71, blue: 0.95)
Blue#7DE0FF
Color(red: 0.49, green: 0.87, blue: 1.0)
Purple#B595FF
Color(red: 0.71, green: 0.58, blue: 1.0)
Mint#ABFFE3
Color(red: 0.67, green: 1.0, blue: 0.89)
Hot Pink#FF3BAE
Color(red: 1.0, green: 0.23, blue: 0.68)
Cyan#00EDFF
Color(red: 0.0, green: 0.93, blue: 1.0)
颜色十六进制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)

Gradient Presets

渐变预设

  • Sunset Dream: Pink → Orange → Purple
  • Cyber Ocean: Blue → Cyan → Mint
  • Twilight Zone: Purple → Blue → Pink
  • Pastel Candy: Mint → Blue → Pink (soft)
  • 日落梦境：粉色 → 橙色 → 紫色
  • 赛博海洋：蓝色 → 青色 → 薄荷绿
  • 暮光地带：紫色 → 蓝色 → 粉色
  • 马卡龙糖果：薄荷绿 → 蓝色 → 粉色（柔和版）

Typography Guidelines

排版指南

swift
// 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))
swift
// 标题：粗体、宽字距（80年代电脑风格）
.font(.system(size: 32, weight: .black, design: .rounded).width(.expanded))

// 正文：清晰、易读
.font(.system(size: 16, weight: .medium, design: .rounded))

// 说明文字：终端风格
.font(.system(size: 12, weight: .regular, design: .monospaced))

Animation Timing

动画时长

CategoryDurationUse Case
Immediate0-100msButton press, tap feedback
Quick150-300msNavigation, page changes
Deliberate300-500msOnboarding, reveals
Dramatic500-1000msCelebrations, achievements
类别时长使用场景
即时0-100ms按钮按压、点击反馈
快速150-300ms导航、页面切换
从容300-500ms引导页、内容展示
戏剧性500-1000ms庆祝场景、成就解锁

Spring Physics Presets

弹簧物理预设

swift
.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
swift
.spring(response: 0.3, dampingFraction: 0.7)  // 干脆利落
.spring(response: 0.5, dampingFraction: 0.5)  // 弹性十足
.spring(response: 0.6, dampingFraction: 0.8)  // 流畅顺滑
.spring(response: 0.8, dampingFraction: 0.6)  // 富有戏剧性

Expertise in Action

实战应用

When designing UI for photo/memory apps:
  1. Assess User Emotional State
    • First collage? → Warm palette (sunset dream)
    • Power user? → Clean glass panels
    • Nostalgic browsing? → Softer vaporwave, slower animations
  2. Choose Visual Strategy
    • Heavy photo content → Minimal UI, glass panels
    • Empty states / onboarding → Full vaporwave, expressive
    • Settings / technical → Clean glass, less decoration
  3. Implement Responsibly
    • Always support dark mode
    • Test with accessibility settings (reduce transparency)
    • Use system materials (better performance)
    • Animate at 60fps or don't animate
  4. Balance Aesthetics with Usability
    • Glass is beautiful but ensure text is readable (WCAG AA)
    • Vaporwave colors are fun but don't distract from photos
    • Animations delight but respect reduced motion
  5. Optimize for Platform
    • Use Metal for custom effects
    • Leverage SwiftUI's Material system
    • Lazy load images in grids
    • Cache rendered glass panels
为照片/记忆类应用设计UI时：
  1. 评估用户情绪状态
    • 首次制作拼贴？→ 温暖色调（日落梦境）
    • 资深用户？→ 简洁玻璃面板
    • 怀旧浏览？→ 柔和Vaporwave风格、慢速动画
  2. 选择视觉策略
    • 照片内容密集 → 极简UI、玻璃面板
    • 空状态/引导页 → 完整Vaporwave风格、表现力强
    • 设置/技术页面 → 简洁玻璃效果、减少装饰
  3. 负责任地实现
    • 始终支持深色模式
    • 结合无障碍设置测试（降低透明度）
    • 使用系统材质（性能更优）
    • 要么实现60fps动画，要么不做动画
  4. 平衡美学与可用性
    • 玻璃效果虽美，但要确保文字可读性（符合WCAG AA标准）
    • Vaporwave色彩有趣，但不要分散对照片的注意力
    • 动画虽能带来愉悦，但要尊重“减少动画”的设置
  5. 针对平台优化
    • 使用Metal实现自定义效果
    • 充分利用SwiftUI的Material系统
    • 网格中图片懒加载
    • 缓存渲染后的玻璃面板

Accessibility Considerations

无障碍设计考量

swift
// 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)
}
Technical references for deep dives:
  • /references/glassmorphism-patterns.md
    - SwiftUI glass cards, materials, adaptive components
  • /references/vaporwave-aesthetic.md
    - Color palettes, typography, visual elements, themes
  • /references/animations-interactions.md
    - Button styles, staggered animations, glow effects
  • /references/metal-shaders.md
    - Custom Metal shaders for vaporwave grid, holographic, neon glow
Make it dreamlike. Make it delightful. Make it theirs.
swift
// 尊重降低透明度的偏好
@Environment(\.accessibilityReduceTransparency) var reduceTransparency

// 尊重减少动画的偏好
@Environment(\.accessibilityReduceMotion) var reduceMotion

// 必要时提供纯色替代方案
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
    - 用于Vaporwave网格、全息、霓虹发光效果的自定义Metal着色器
让设计如梦幻般。让设计充满愉悦。让设计属于用户。