本文授權轉自：小阿田的設計筆記（ID：tzwDesign）

設計中存在一些不可忽視的趨勢。盡管玻璃態(tài)在UI設計中不是新的事物，但是最近又被人們挖掘出來了。有些人甚至將這個趨勢稱為“玻璃態(tài)”。

下面讓我向你展示如何通過7個簡單的步驟教你如何創(chuàng)建玻璃態(tài)的UI效果。

1）畫一個形狀

首先創(chuàng)建一個基本形狀，一個具有以下尺寸的矩形：640×400，再加40pt的圓角。

2）應用漸變填充

現(xiàn)在該基本填充了。在本教程中，我們將使用漸變。兩種漸變顏色都將是純白色（#FFFFFF），但是它們的不透明度會有所不同。將第一個設置為40％，第二個設置為10％。

3）添加背景模糊

我們來模仿玻璃的是模糊感。首先將背景模糊值設置為20左右，來看看這個是表面如何變化的。當然，你也可以根據(jù)自己的效果來設置不同的模糊度。

4）添加邊框

一個優(yōu)雅的邊框會為元素增添了光澤。當玻璃表面重疊時，它也有助于建立視覺層次。如果要在設計中創(chuàng)建定向光的幻覺，則可能需要對邊框使用漸變。我是這樣制作卡片的，所以看起來更有“質感”。

卡邊界對角漸變的設置：

邊框：3px

顏色1：#FFFFFF（不透明度50％）

顏色2：#FFFFFF（不透明度0％）

顏色3：＃FF48DB（不透明度0％）

顏色3：＃FF48DB（不透明度50％）

5）應用陰影

細微的陰影效果有助于增強視覺層次。由于陰影的存在，區(qū)分所有層將更加容易。

在我的示例中，我使用具有24的模糊值的深色，并且擴展減小為-1。這次，你將通過添加陰影樣式屬性以與玻璃表面一起成形來獲得最佳效果。

6）填寫內容

是時候添加一些內容了。填寫必要的徽標和文字。要創(chuàng)建壓印層的錯覺，請用白色填充內容，并將不透明度降低到50％。你也可以玩圖層混合-嘗試疊加以獲得有趣的結果。

7）添加質感

玻璃卡片已完成，但是，你可以進一步添加一些高級紋理！要添加優(yōu)雅的噪點，我們添加帶有噪點的圖像。將不透明度降低到20％，并將填充的混合模式設置為“疊加”。看看現(xiàn)在看起來多么有質感。

來看一些其它的嘗試~

玻璃擬態(tài)越來越受歡迎，總之，多學點沒壞處噠， 如果你有更好的設計思路，歡迎留言

在科技浪潮奔涌向前的當下，人工智能正深刻重塑我們的生活與工作。人機之間的關系，也從簡單交互邁向深度協(xié)作。想知道如何在這一趨勢下把握體驗設計的新方向嗎？2025 年 10 月將在北京舉辦的 IXDC 國際體驗設計大會聚焦 “人機共生：人工智能時代人機協(xié)作新范式”，作為全球領先的用戶體驗創(chuàng)新盛會，它將匯聚前沿理念與實踐。一起來關注這場盛會，探索人機協(xié)作的無限可能。

文章轉載：小阿田的設計筆記，版權歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/YZ8tTi_AaQNL-KChSTXiQA

版權聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會注明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯(lián)系，若涉及內容或作品等版權問題，煩請原作者聯(lián)系我們，給出內容所在的網(wǎng)址并提供相關證明資料，我們會核查后立即更正或者刪除有關內容！本公眾號不承擔任何責任，并擁有對此聲明的最終解釋權。

聯(lián)系微信：18802086168

聯(lián)系電話：18802086168

編排 | 羅家玉

終審 | 蘇 菁

點這里，學習更多設計知識！