2021-1-26 周周
一個簡易的小教程，一起Get起來~
設計中存在一些不可忽視的趨勢。盡管玻璃態在UI設計中不是新的事物，但是最近又被人們挖掘出來了。有些人甚至將這個趨勢稱為“玻璃態”。
下面讓我向你展示如何通過7個簡單的步驟教你如何創建玻璃態的UI效果。
1）畫一個形狀
首先創建一個基本形狀，一個具有以下尺寸的矩形：640×400，再加40pt的圓角。
2）應用漸變填充
現在該基本填充了。在本教程中，我們將使用漸變。兩種漸變顏色都將是純白色（#FFFFFF），但是它們的不透明度會有所不同。將第一個設置為40％，第二個設置為10％。
3）添加背景模糊
我們來模仿玻璃的是模糊感。首先將背景模糊值設置為20左右，來看看這個是表面如何變化的。當然，你也可以根據自己的效果來設置不同的模糊度。
4）添加邊框
一個優雅的邊框會為元素增添了光澤。當玻璃表面重疊時，它也有助于建立視覺層次。如果要在設計中創建定向光的幻覺，則可能需要對邊框使用漸變。我是這樣制作卡片的，所以看起來更有“質感”。
卡邊界對角漸變的設置：
邊框：3px
顏色1：#FFFFFF（不透明度50％）
顏色2：#FFFFFF（不透明度0％）
顏色3：＃FF48DB（不透明度0％）
顏色4：＃FF48DB（不透明度50％）
5）應用陰影
細微的陰影效果有助于增強視覺層次。由于陰影的存在，區分所有層將更加容易。
在我的示例中，我使用具有24的模糊值的深色，并且擴展減小為-1。這次，你將通過添加陰影樣式屬性以與玻璃表面一起成形來獲得最佳效果。
6）填寫內容
是時候添加一些內容了。填寫必要的徽標和文字。要創建壓印層的錯覺，請用白色填充內容，并將不透明度降低到50％。你也可以玩圖層混合-嘗試疊加以獲得有趣的結果。
7）添加質感
玻璃卡片已完成，但是，你可以進一步添加一些高級紋理！要添加優雅的噪點，我們添加帶有噪點的圖像。將不透明度降低到20％，并將填充的混合模式設置為“疊加”。看看現在看起來多么有質感。
來看一些其它的嘗試~
文章來源：UI中國 作者：Tzw_n
藍藍設計( www.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務