透過SwiftUI Material 實現Glassmorphism

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

Table of contents

• 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創造了以下兩種體驗效果：

1. Focal point：添加這些元素將有助於營造深度感視覺體驗。 這將有助於設計師定義空間並創建焦點。
2. 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實踐的基本步驟：

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

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

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

Glassmorphism Card UI

善加利用背景的透明度與模糊效果，將可以創造出視覺的層次感和深度，使介面更具現代感和視覺吸引力。

Design Case

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

oThings Card UI

oThings是Kyle獨立設計與開發的APP， 是一款專為您的生活記憶而設的記憶保存應用程式，讓您專注於記錄珍愛的事物。以SwiftUI介面框架開發，結合設計的創意與程式的創新所創造的混合體驗設計，呈現高質感的動畫轉場與絲滑的互動效果，打造具品牌辨識度的使用體驗。歡迎有興趣的您下載體驗。

Conclusion

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