設計中存在一些不可忽視的趨勢。盡管玻璃態在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)應用陰影細微的陰影效果有助于增強視覺層次。由于陰影的存在,區分所有層將更加容易。