透過SwiftUI Material 實現Glassmorphism

Glassmorphism設計風格，是從2020就開始流行的UI設計趨勢，概念是Glass(玻璃)和 Skeuomorphism(擬物化)的結合，中文稱為毛玻璃效果。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 in user interfaces

利用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的API可以實現Glassmorphism的UI效果，以下是透過SwiftUI coding實踐的基本步驟：

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以上程度的背景過於模糊以至於難以看到背景色塊。

Five blur levels in black background

Five blur levels in white background

Demonstration

接下就透過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)
    }
}

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

CardView

Design Case — oThings

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

oThings

‎oThings

Conclusion

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

Source code:

CardView

GitHub - kylekylei/GlassmorphismDemo