ios-liquid-glass

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

iOS Liquid Glass Design

iOS Liquid Glass 设计

Create distinctive, Apple Design Award-worthy iOS applications using the Liquid Glass design system. This skill pushes beyond generic implementations toward memorable, polished interfaces that feel genuinely designed—not AI-generated.

使用Liquid Glass设计系统打造独具特色、足以获得苹果设计奖的iOS应用。本技能不再局限于通用实现，而是致力于打造令人印象深刻、打磨精细的界面，看起来是经过精心设计的，而非AI生成的产物。

When to Use

适用场景

Building new iOS screens, views, or components
Implementing navigation (tabs, toolbars, sheets)
Designing with Liquid Glass materials
Creating app icons with Icon Composer
Any SwiftUI/UIKit work targeting iOS 26+

构建新的iOS屏幕、视图或组件
实现导航（标签栏、工具栏、sheets）
使用Liquid Glass材质进行设计
用Icon Composer创建应用图标
所有面向iOS 26+的SwiftUI/UIKit开发工作

Design Philosophy: Elevated, Not Average

设计理念：追求卓越，拒绝平庸

Before writing code, commit to a distinctive aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: What feeling should it evoke? (calm, playful, premium, editorial, utilitarian, bold)
Inspiration: Which Apple apps set the bar? (Notes, Weather, Health, Fitness, Apple TV)
Differentiation: What makes this memorable? What's the "one thing" users will notice?
Glass Philosophy: Is glass framing content or competing with it?

编写代码前，先确定明确的美学方向：

目的：这个界面要解决什么问题？面向哪些用户？
调性：它应该传递什么感觉？（冷静、活泼、高端、编辑风、实用、大胆）
灵感参考：哪些苹果应用是标杆？（备忘录、天气、健康、健身、Apple TV）
差异化：什么能让它让人印象深刻？用户会注意到的「唯一亮点」是什么？
玻璃设计理念：玻璃效果是用来衬托内容还是和内容抢注意力？

The Three Principles

三大原则

Principle	Description
Hierarchy	Controls float above content. Glass frames, never obscures. Content is king.
Harmony	Software design aligns with hardware. Concentric corners. Fluid gestures.
Consistency	Adapt fluidly across iPhone, iPad, Mac. Same identity, contextual expression.

原则	说明
层级	控件悬浮在内容之上。玻璃效果只做边框，永远不遮挡内容。内容为王。
和谐	软件设计和硬件设计保持一致。同心圆角。流畅手势。
一致性	在iPhone、iPad、Mac上自适应适配。保持相同的设计标识，结合场景做适配表达。

Anti-Patterns: What to Avoid

反模式：需要避免的问题

These are hallmarks of generic AI-generated iOS design:

Boring solid backgrounds with no depth or atmosphere
System fonts everywhere without typographic intention
Cookie-cutter tab bars with no personality or purpose
Purple/indigo gradients on white—the quintessential AI slop
Flat, lifeless interactions without haptics or animation
Glass on everything instead of intentional placement
Ignoring the content layer by applying glass where it doesn't belong
Generic card layouts without context-specific design
Accessibility as afterthought instead of built-in from day one

这些是通用AI生成的iOS设计的典型特征：

单调的纯色背景，没有深度和氛围感
全界面使用系统字体，没有排版设计考量
千篇一律的标签栏，没有个性和设计目的
白色背景上加紫色/靛蓝色渐变——典型的AI垃圾设计
扁平、无生气的交互，没有触感反馈或动画
所有元素都加玻璃效果，而不是有针对性地使用
忽略内容层级，在不合适的位置滥用玻璃效果
通用卡片布局，没有针对场景做定制设计
无障碍适配事后才考虑，而不是从第一天就内置支持

Liquid Glass Core API

Liquid Glass核心API

Basic Glass Effect

基础玻璃效果

swift

import SwiftUI

// Simple glass application
Text("Action")
    .padding()
    .glassEffect() // .regular variant, .capsule shape

// With explicit parameters
Button("Confirm") { }
    .padding()
    .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 12), isEnabled: true)

swift

import SwiftUI

// 简单玻璃效果应用
Text("Action")
    .padding()
    .glassEffect() // .regular 变体，.capsule 形状

// 显式传参
Button("Confirm") { }
    .padding()
    .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 12), isEnabled: true)

Glass Variants

玻璃效果变体

Variant	Use Case
`.regular`	Toolbars, nav bars, tab bars, standard controls
`.clear`	Floating controls over media (photos, maps, video)
`.identity`	Conditional disable: `glassEffect(isActive ? .regular : .identity)`

变体	适用场景
`.regular`	工具栏、导航栏、标签栏、标准控件
`.clear`	媒体（照片、地图、视频）上方的悬浮控件
`.identity`	条件禁用： `glassEffect(isActive ? .regular : .identity)`

Glass Modifiers

玻璃效果修饰符

swift

// Semantic tinting (for primary actions only)
.glassEffect(.regular.tint(.accentColor))

// Interactive behaviors (scaling, shimmer, touch illumination)
.glassEffect(.regular.interactive())

// Combined
.glassEffect(.regular.tint(.blue).interactive())

swift

// 语义化着色（仅用于主要操作）
.glassEffect(.regular.tint(.accentColor))

// 交互行为（缩放、微光、触摸点亮）
.glassEffect(.regular.interactive())

// 组合使用
.glassEffect(.regular.tint(.blue).interactive())

Custom Shapes

自定义形状

swift

// Standard shapes
.glassEffect(.regular, in: .capsule)
.glassEffect(.regular, in: .circle)
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))

// Container-concentric (matches device/container corners)
.glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

swift

// 标准形状
.glassEffect(.regular, in: .capsule)
.glassEffect(.regular, in: .circle)
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))

// 容器同心圆角（匹配设备/容器圆角）
.glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

GlassEffectContainer & Morphing

GlassEffectContainer与形变动画

Container Setup

容器设置

Glass cannot sample other glass. Use containers for multiple glass elements:

swift

GlassEffectContainer(spacing: 30) {
    HStack(spacing: 20) {
        ForEach(actions) { action in
            Button(action.title, systemImage: action.icon) { }
                .frame(width: 44, height: 44)
                .glassEffect(.regular.interactive())
        }
    }
}

玻璃效果无法采样其他玻璃元素。多个玻璃元素需要使用容器包裹：

swift

GlassEffectContainer(spacing: 30) {
    HStack(spacing: 20) {
        ForEach(actions) { action in
            Button(action.title, systemImage: action.icon) { }
                .frame(width: 44, height: 44)
                .glassEffect(.regular.interactive())
        }
    }
}

Morphing Transitions

形变过渡

swift

struct ExpandableActions: View {
    @State private var isExpanded = false
    @Namespace private var namespace

    var body: some View {
        GlassEffectContainer(spacing: 30) {
            VStack(spacing: 30) {
                if isExpanded {
                    ActionButton(icon: "rotate.right")
                        .glassEffectID("rotate", in: namespace)
                }

                HStack(spacing: 30) {
                    if isExpanded {
                        ActionButton(icon: "slider.horizontal.3")
                            .glassEffectID("adjust", in: namespace)
                    }

                    Button {
                        withAnimation(.bouncy) { isExpanded.toggle() }
                    } label: {
                        Image(systemName: isExpanded ? "xmark" : "plus")
                            .frame(width: 56, height: 56)
                    }
                    .glassEffect(.regular.tint(.accentColor).interactive())
                    .glassEffectID("toggle", in: namespace)

                    if isExpanded {
                        ActionButton(icon: "crop")
                            .glassEffectID("crop", in: namespace)
                    }
                }

                if isExpanded {
                    ActionButton(icon: "wand.and.stars")
                        .glassEffectID("enhance", in: namespace)
                }
            }
        }
    }
}

swift

struct ExpandableActions: View {
    @State private var isExpanded = false
    @Namespace private var namespace

    var body: some View {
        GlassEffectContainer(spacing: 30) {
            VStack(spacing: 30) {
                if isExpanded {
                    ActionButton(icon: "rotate.right")
                        .glassEffectID("rotate", in: namespace)
                }

                HStack(spacing: 30) {
                    if isExpanded {
                        ActionButton(icon: "slider.horizontal.3")
                            .glassEffectID("adjust", in: namespace)
                    }

                    Button {
                        withAnimation(.bouncy) { isExpanded.toggle() }
                    } label: {
                        Image(systemName: isExpanded ? "xmark" : "plus")
                            .frame(width: 56, height: 56)
                    }
                    .glassEffect(.regular.tint(.accentColor).interactive())
                    .glassEffectID("toggle", in: namespace)

                    if isExpanded {
                        ActionButton(icon: "crop")
                            .glassEffectID("crop", in: namespace)
                    }
                }

                if isExpanded {
                    ActionButton(icon: "wand.and.stars")
                        .glassEffectID("enhance", in: namespace)
                }
            }
        }
    }
}

Navigation Patterns

导航模式

Tab Bar (Floating)

悬浮标签栏

swift

TabView {
    Tab("Home", systemImage: "house") {
        HomeView()
    }

    Tab("Search", systemImage: "magnifyingglass") {
        SearchView()
    }

    Tab("Profile", systemImage: "person") {
        ProfileView()
    }
}
// Tab bar now floats, reacts to background, collapses on scroll

swift

TabView {
    Tab("Home", systemImage: "house") {
        HomeView()
    }

    Tab("Search", systemImage: "magnifyingglass") {
        SearchView()
    }

    Tab("Profile", systemImage: "person") {
        ProfileView()
    }
}
// 标签栏现在支持悬浮、响应背景变化、滚动时折叠

Toolbar with Grouping

分组工具栏

swift

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Edit", systemImage: "pencil") { }
        Button("Share", systemImage: "square.and.arrow.up") { }
    }

    ToolbarSpacer(.flexible, placement: .topBarTrailing)

    ToolbarItem(placement: .topBarTrailing) {
        Button("Done", systemImage: "checkmark") { }
            .tint(.accentColor)
    }
}

swift

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Edit", systemImage: "pencil") { }
        Button("Share", systemImage: "square.and.arrow.up") { }
    }

    ToolbarSpacer(.flexible, placement: .topBarTrailing)

    ToolbarItem(placement: .topBarTrailing) {
        Button("Done", systemImage: "checkmark") { }
            .tint(.accentColor)
    }
}

Sheets with Morphing

带形变的Sheets

swift

struct ContentView: View {
    @State private var showSettings = false
    @Namespace private var namespace

    var body: some View {
        NavigationStack {
            ContentView()
                .toolbar {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button("Settings", systemImage: "gear") {
                            showSettings = true
                        }
                        .matchedTransitionSource(id: "settings", in: namespace)
                    }
                }
                .sheet(isPresented: $showSettings) {
                    SettingsView()
                        .navigationTransition(.zoom(sourceID: "settings", in: namespace))
                        .presentationDetents([.medium, .large])
                }
        }
    }
}

swift

struct ContentView: View {
    @State private var showSettings = false
    @Namespace private var namespace

    var body: some View {
        NavigationStack {
            ContentView()
                .toolbar {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button("Settings", systemImage: "gear") {
                            showSettings = true
                        }
                        .matchedTransitionSource(id: "settings", in: namespace)
                    }
                }
                .sheet(isPresented: $showSettings) {
                    SettingsView()
                        .navigationTransition(.zoom(sourceID: "settings", in: namespace))
                        .presentationDetents([.medium, .large])
                }
        }
    }
}

Typography That Speaks

有表现力的排版

Don't default to system fonts everywhere. Create typographic hierarchy:

swift

// Display fonts for headers
Text("Dashboard")
    .font(.largeTitle.bold())
    .foregroundStyle(.primary)

// Secondary information
Text("Last updated 5 min ago")
    .font(.subheadline)
    .foregroundStyle(.secondary)

// Consider custom fonts for brand identity
Text("Premium")
    .font(.custom("PlayfairDisplay-Bold", size: 32))

不要默认全界面使用系统字体，打造排版层级：

swift

// 大标题使用展示字体
Text("Dashboard")
    .font(.largeTitle.bold())
    .foregroundStyle(.primary)

// 次要信息
Text("Last updated 5 min ago")
    .font(.subheadline)
    .foregroundStyle(.secondary)

// 品牌标识可考虑使用自定义字体
Text("Premium")
    .font(.custom("PlayfairDisplay-Bold", size: 32))

Font Recommendations

字体推荐

Use Case	Options
Display	SF Pro Display, New York, custom serif
Body	SF Pro Text (system), custom sans
Technical	SF Mono, custom monospace
Editorial	New York, custom serif with character

适用场景	可选方案
大标题	SF Pro Display、New York、自定义衬线字体
正文	SF Pro Text（系统）、自定义无衬线字体
技术内容	SF Mono、自定义等宽字体
编辑内容	New York、有特色的自定义衬线字体

Color with Intention

有目的性的用色

System Integration

系统集成

swift

// Semantic colors that adapt
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// Accent with purpose
.tint(.accentColor)

swift

// 自适应的语义化颜色
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// 有目的性的强调色
.tint(.accentColor)

Dominant + Accent

主色+强调色

Don't distribute color evenly. Choose:

One dominant that defines the brand/mood
Sharp accents for actions and highlights
Neutral base for content readability

不要平均分布颜色。选择：

1种主色 定义品牌/氛围
鲜明的强调色 用于操作按钮和高亮内容
中性色基底 保障内容可读性

Dark Mode First

优先设计深色模式

Dark mode often produces more distinctive results. Design dark, then adapt to light.

深色模式通常能产出更有辨识度的效果。先设计深色模式，再适配浅色模式。

Animation Philosophy

动画理念

Bouncy is the New Default

弹性动画是新的默认选择

swift

withAnimation(.bouncy) {
    isExpanded.toggle()
}

// With parameters
withAnimation(.bouncy(duration: 0.5, extraBounce: 0.2)) {
    state = newState
}

swift

withAnimation(.bouncy) {
    isExpanded.toggle()
}

// 带参数配置
withAnimation(.bouncy(duration: 0.5, extraBounce: 0.2)) {
    state = newState
}

Key Animation Moments

关键动画节点

Moment	Treatment
Button press	Scale to 0.95, spring back
State change	Morph, don't swap
List appear	Staggered fade-in
Sheet present	Zoom from source
Error	Shake with haptic

节点	处理方式
按钮按压	缩放至0.95，弹簧回弹
状态变更	形变过渡，不要直接切换
列表出现	错峰淡入
Sheet弹出	从源位置缩放弹出
错误提示	震动加触感反馈

SF Symbols Draw Animations

SF Symbols绘制动画

swift

Image(systemName: "checkmark.circle")
    .symbolEffect(.drawOn, value: isComplete)

Image(systemName: "heart.fill")
    .symbolEffect(.bounce, value: isFavorite)

swift

Image(systemName: "checkmark.circle")
    .symbolEffect(.drawOn, value: isComplete)

Image(systemName: "heart.fill")
    .symbolEffect(.bounce, value: isFavorite)

Haptics: The Invisible Polish

触感反馈：看不见的打磨

swift

import UIKit

// Impact feedback
let generator = UIImpactFeedbackGenerator(style: .medium)
generator.impactOccurred()

// Selection feedback
let selection = UISelectionFeedbackGenerator()
selection.selectionChanged()

// Success/error
let notification = UINotificationFeedbackGenerator()
notification.notificationOccurred(.success)

swift

import UIKit

// 触感反馈
let generator = UIImpactFeedbackGenerator(style: .medium)
generator.impactOccurred()

// 选择反馈
let selection = UISelectionFeedbackGenerator()
selection.selectionChanged()

// 成功/错误通知反馈
let notification = UINotificationFeedbackGenerator()
notification.notificationOccurred(.success)

When to Use Haptics

触感反馈适用场景

Button presses (light impact)
Toggle changes (selection changed)
Pull to refresh (light impact)
Error states (error notification)
Success confirmations (success notification)
Slider thumb movement (selection changed)

按钮按压（轻量触感）
开关状态变更（选择变更反馈）
下拉刷新（轻量触感）
错误状态（错误通知反馈）
成功确认（成功通知反馈）
滑块拖动（选择变更反馈）

Accessibility: Built-In, Not Bolt-On

无障碍适配：原生内置，而非事后附加

Automatic Glass Adaptations

自动玻璃适配

Glass automatically adapts to:

Reduce Transparency: More frosting
Increase Contrast: Stark borders
Reduce Motion: Tones down animation

玻璃效果会自动适配以下设置：

降低透明度：增加磨砂效果
提高对比度：增加清晰边框
减少动画：降低动画幅度

Manual Checks

手动检查

swift

@Environment(\.accessibilityReduceTransparency) var reduceTransparency
@Environment(\.accessibilityReduceMotion) var reduceMotion

var animation: Animation? {
    reduceMotion ? nil : .bouncy
}

swift

@Environment(\.accessibilityReduceTransparency) var reduceTransparency
@Environment(\.accessibilityReduceMotion) var reduceMotion

var animation: Animation? {
    reduceMotion ? nil : .bouncy
}

Essentials

必备项

Minimum 44x44pt touch targets
Clear accessibility labels
Dynamic Type support
VoiceOver testing

最小44x44pt点击区域
清晰的无障碍标签
动态Type支持
VoiceOver测试

Quality Checklist

质量检查清单

Inspiration: Award-Winning Patterns

灵感参考：获奖设计模式

From 2025 Apple Design Award winners:

来自2025年苹果设计奖获奖作品：

Delight

愉悦感

Surprising interactions that reward exploration
Meaningful animations that enhance understanding
Playful details creating emotional connection

鼓励探索的惊喜交互
提升理解的有意义动画
创造情感连接的趣味细节

Innovation

创新性

Novel use of Apple technologies
Thoughtfully crafted yet accessible UI
Real-time features that feel magical

苹果技术的新颖用法
精心打磨且易用的UI
体验惊艳的实时功能

Inclusivity

包容性

VoiceOver support from day one
Dynamic Type throughout
Multiple input methods

从第一天就支持VoiceOver
全界面支持动态Type
支持多种输入方式

Visuals

视觉效果

Rich, detailed environments
Consistent visual language
Intentional depth and color

丰富、有细节的视觉环境
统一的视觉语言
有目的性的深度和用色

Reference

参考资料

For official Apple documentation links, WWDC session IDs, and API quick reference tables, see reference.md.

官方苹果文档链接、WWDC session ID和API速查表，请参考reference.md。

The Mandate

要求

Remember: The goal is an app worthy of an Apple Design Award—an app that feels genuinely designed, not generated. Every interface should have:

A point of view - A clear aesthetic direction
Intentional details - Nothing accidental
Emotional resonance - Users feel something
Technical excellence - Smooth, performant, accessible

Don't settle for "working." Push for memorable.

记住：目标是打造一款足以获得苹果设计奖的应用——一款看起来是精心设计而非生成的应用。每个界面都应该具备：

明确的设计主张 - 清晰的美学方向
有目的的细节 - 没有偶然的设计
情感共鸣 - 用户能有所感知
优秀的技术实现 - 流畅、高性能、支持无障碍

不要满足于「能用」，要追求「令人难忘」。