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