此文僅供本人學(xué)習(xí)使用迟螺。
設(shè)計中存在一些不可忽視的趨勢誓斥。盡管玻璃態(tài)在UI設(shè)計中不是新的事物薪者，但是最近又被人們挖掘出來了。有些人甚至將這個趨勢稱為“玻璃態(tài)”玉吁。
下面讓我向你展示如何通過7個簡單的步驟教你如何創(chuàng)建玻璃態(tài)的UI效果照弥。
1）畫一個形狀
首先創(chuàng)建一個基本形狀，一個具有以下尺寸的矩形：640×400进副，再加40pt的圓角这揣。
2）應(yīng)用漸變填充
現(xiàn)在該基本填充了。在本教程中敢会，我們將使用漸變曾沈。兩種漸變顏色都將是純白色（#FFFFFF），但是它們的不透明度會有所不同鸥昏。將第一個設(shè)置為40％，第二個設(shè)置為10％吏垮。
3）添加背景模糊
我們來模仿玻璃的是模糊感障涯。首先將背景模糊值設(shè)置為20左右，來看看這個是表面如何變化的膳汪。當(dāng)然唯蝶，你也可以根據(jù)自己的效果來設(shè)置不同的模糊度。
4）添加邊框
一個優(yōu)雅的邊框會為元素增添了光澤遗嗽。當(dāng)玻璃表面重疊時粘我，它也有助于建立視覺層次。如果要在設(shè)計中創(chuàng)建定向光的幻覺痹换，則可能需要對邊框使用漸變征字。我是這樣制作卡片的，所以看起來更有“質(zhì)感”娇豫。
卡邊界對角漸變的設(shè)置：
邊框：3px
顏色1：#FFFFFF（不透明度50％）
顏色2：#FFFFFF（不透明度0％）
顏色3：＃FF48DB（不透明度0％）
顏色3：＃FF48DB（不透明度50％）
5）應(yīng)用陰影
細微的陰影效果有助于增強視覺層次匙姜。由于陰影的存在，區(qū)分所有層將更加容易冯痢。
在我的示例中氮昧，我使用具有24的模糊值的深色框杜，并且擴展減小為-1。這次袖肥，你將通過添加陰影樣式屬性以與玻璃表面一起成形來獲得最佳效果咪辱。
6）填寫內(nèi)容
是時候添加一些內(nèi)容了。填寫必要的徽標(biāo)和文字昭伸。要創(chuàng)建壓印層的錯覺梧乘，請用白色填充內(nèi)容，并將不透明度降低到50％庐杨。你也可以玩圖層混合-嘗試疊加以獲得有趣的結(jié)果。
7）添加質(zhì)感
玻璃卡片已完成夹供，但是灵份，你可以進一步添加一些高級紋理！要添加優(yōu)雅的噪點哮洽，我們添加帶有噪點的圖像填渠。將不透明度降低到20％，并將填充的混合模式設(shè)置為“疊加”鸟辅》帐玻看看現(xiàn)在看起來多么有質(zhì)感。
來看一些其它的嘗試~
