透過SwiftUI Material 實現Glassmorphism

Kyle Lei

2024/08/18閱讀時間約 8 分鐘

Glassmorphism設計風格，是從2020就開始流行的UI設計趨勢，概念是Glass(玻璃)和 Skeuomorphism(擬物化)的結合，中文稱為毛玻璃效果。

Glassmorphism
SwiftUI Material
Glassmorphism with SwiftUI Material
Conclusion

Glassmorphism

Glassmorphism 讓元素看起來像是透明玻璃一樣，同時保留了一些模糊的背景效果，在介面中創造了一種立體感，可以讓介面元素更加引人注目並增加互動性。Glassmorphism特別強調4個特徵：

透明感/Transparency（背景模糊的磨砂效果）
物件於空間漂浮的多層次感 / Multi-layered approach with objects floating in space
強調模糊透明度的鮮明顏色 / Vivid colors to highlight the blurred transparency
於半透明物件上的細微且光亮的邊框 / A subtle, light border on the translucent objects

利用Glassmorphism可以為UI創造了以下兩種體驗效果：

Focal point：添加這些元素將有助於營造深度感視覺體驗。這將有助於設計師定義空間並創建焦點。
More visible：透明的佈局幫助APP感覺輕量級，並APP的內容更加可見和有吸引力的。

SwiftUI Material

SwiftUI在iOS 15提供了Material的背景模糊造型效果，可以讓我們簡單達到Glassmorphism的視覺效果。適合應用於背景圖片上的文字說明，疊加背景模糊的色塊以突顯文字。

上圖的效果使用ultraThinMaterial最輕微模糊的選項，可惜透明度已經是極限，如果可以更通透會更好。Material提供了5個模糊程度參數，由弱到強為：

ultraThinMaterial
thinMaterial
regularMaterial
thickMaterial
ultraThickMaterial

Glassmorphism with SwiftUI Material

透過Material的API可以實現Glassmorphism的UI效果，以下是透過SwiftUI實踐的基本步驟：

建立圓角矩形
前景使用漸層呈現透明度的漸變
背景使用Material.ultraThin呈現背景模糊效果
疊加漸層的外框線，呈現玻璃邊緣反射的效果
建立陰影呈現漂浮感

let gradientSurface = LinearGradient(colors: [.white.opacity(0.1), .clear], startPoint: .topLeading, endPoint: .bottomTrailing)

RoundedRectangle(cornerRadius: 15, style: .continuous)
    .foregroundStyle(gradientSurface)
    .background(.ultraThinMaterial)
    .overlay(
        RoundedRectangle(cornerRadius: 15, style: .circular)
            .stroke(lineWidth: 1.5)
            .foregroundStyle(gradientBorder)
            .opacity(0.8)
    )
    .shadow(color: .black.opacity(0.25), radius: 5, x: 0, y: 8)

下面示範了五種強度在黑色與白色的效果，可以明顯看出到thickMaterial以上程度的背景過於模糊以至於難以看到背景色塊。

黑色背景中的五種模糊等級

白色背景中的五種模糊等級

Glassmorphism UI

接下就透過Material來實作Glassmorphism UI卡片，並在背景加上圓形動畫凸顯毛玻璃的效果。

struct CardView: View {

    let gradientSurface = LinearGradient(colors: [.white.opacity(0.1), .clear], startPoint: .topLeading, endPoint: .bottomTrailing)
    let gradientBorder = LinearGradient(colors: [.white.opacity(0.5), .white.opacity(0.0), .white.opacity(0.0), .green.opacity(0.0), .green.opacity(0.5)], startPoint: .topLeading, endPoint: .bottomTrailing)
    
    var body: some View {
        RoundedRectangle(cornerRadius: 15, style: .continuous)
            .foregroundStyle(gradientSurface)
            .background(.ultraThinMaterial)
            .mask( RoundedRectangle(cornerRadius: 15, style: .circular).foregroundColor(.black) )
            .overlay(
                RoundedRectangle(cornerRadius: 15, style: .circular)
                    .stroke(lineWidth: 1.5)
                    .foregroundStyle(gradientBorder)
                    .opacity(0.8)
            )
            .frame(width: 300, height: 180)
            .shadow(color: .black.opacity(0.25), radius: 5, x: 0, y: 8)
    }
}