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創造了以下兩種體驗效果：
- Focal point：添加這些元素將有助於營造深度感視覺體驗。 這將有助於設計師定義空間並創建焦點。
- More visible：透明的佈局幫助APP感覺輕量級，並APP的內容更加可見和有吸引力的。
SwiftUI Material
SwiftUI在iOS 15提供了Material的背景模糊造型效果，可以讓我們簡單達到Glassmorphism的視覺效果。適合應用於背景圖片上的文字說明，疊加背景模糊的色塊以突顯文字。
上圖的效果使用ultraThinMaterial最輕微模糊的選項，可惜透明度已經是極限，如果可以更通透會更好。Material提供了5個模糊程度參數，由弱到強為：
ultraThinMaterialthinMaterialregularMaterialthickMaterialultraThickMaterial
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)
}
}
- 創建RoundedRectangle，作為卡片的主要形狀
- 使用
foregroundStyle套用gradientSurface的漸層，藉以控制模糊效果的層次變化 - 使用
background增加ultraThinMaterial的背景模糊效果 - 由於
ultraThinMaterial會超出RoundedRectangle的圓角邊界，使用mask製作遮罩 - 使用overlay套上漸層的邊框，實現Highlight效果
Glassmorphism Card UI
善加利用背景的透明度與模糊效果，將可以創造出視覺的層次感和深度，使介面更具現代感和視覺吸引力。
Design Case
oThings提供色彩主題的設定，在Color theme的選單背景，使用Material.ultraThinMaterial作為填滿效果，通透的效果讓使用者可以即時感受顏色主題的設定結果，然而模糊的背景又不會影響介面資訊的閱讀。
oThings Card UI
oThings是Kyle獨立設計與開發的APP， 是一款專為您的生活記憶而設的記憶保存應用程式，讓您專注於記錄珍愛的事物。以SwiftUI介面框架開發，結合設計的創意與程式的創新所創造的混合體驗設計，呈現高質感的動畫轉場與絲滑的互動效果，打造具品牌辨識度的使用體驗。歡迎有興趣的您下載體驗。
Conclusion
在實務設計上應用Glassmorphism，並不代表要整體APP都是毛玻璃的風格，是可以作為局部或者是個別介面元件的簡化應用，讓整體介面呈現一種通透感但資訊又不會背景干擾。透過SwiftUI的Material，讓滿足此介面設計目的之實踐變得相當容易。
