透過 SwiftUI Material 實現 Glassmorphism

Glassmorphism 是什麼？

Glassmorphism 設計風格，是從 2020 年就開始流行的 UI 設計趨勢，概念是 Glass（玻璃）和 Skeuomorphism（擬物化）的結合，中文稱為毛玻璃效果。Glassmorphism 讓元素看起來像是透明玻璃一樣，同時保留了一些模糊的背景效果，在介面中創造了一種立體感，可以讓介面元素更加引人注目並增加互動性。

Glassmorphism 特別強調四個特徵：

透明感 / 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 提供了五個模糊程度參數，由弱到強為：

ultraThinMaterial
thinMaterial
regularMaterial
thickMaterial
ultraThickMaterial

Glassmorphism with SwiftUI Material

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

建立圓角矩形
前景使用漸層呈現透明度的漸變
背景使用 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)

下面示範了五種強度的效果，向下捲動可以依序感受從 ultraThin 到 ultraThick 的模糊層次變化。

.ultraThin

material

.thin

material

.regular

material

.thick

material

.ultraThick

material

Glassmorphism UI

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

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)
    }
}

創建 RoundedRectangle，作為卡片的主要形狀
使用 foregroundStyle 套用 gradientSurface 的漸層，藉以控制模糊效果的層次變化
使用 background 增加 ultraThinMaterial 的背景模糊效果
由於 ultraThinMaterial 會超出 RoundedRectangle 的圓角邊界，使用 mask 製作遮罩
使用 overlay 套上漸層的邊框，實現 Highlight 效果

Design Case - oThings

oThings 提供色彩主題的設定，在 Color theme 的選單背景，使用 Material.ultraThinMaterial 作為填滿效果，通透的效果讓使用者可以即時感受顏色主題的設定結果，然而模糊的背景又不會影響介面資訊的閱讀。

Conclusion

在實務設計上應用 Glassmorphism，並不代表要整體 APP 都是毛玻璃的風格，是可以作為局部或者是個別介面元件的簡化應用，讓整體介面呈現一種通透感但資訊又不會被背景干擾。透過 SwiftUI 的 Material，讓滿足此介面設計目的之實踐變得相當容易。