玻璃擬態(tài)是今年各大設(shè)計網(wǎng)站提到的比較多的風(fēng)格渠欺,很多文章將其定義為設(shè)計領(lǐng)域的新趨勢妹蔽,我覺得這并不合理。因為玻璃擬態(tài)被實際應(yīng)用的并不多挠将,只能說在各設(shè)計網(wǎng)站上比較流行胳岂,有設(shè)計師自身拿來“意淫”的成分。
玻璃擬態(tài)尤其不適合在實際項目中的界面設(shè)計上使用舔稀,其主要不足有以下幾點:①頁面需要大量留白乳丰,過渡占用空間,②在日光環(huán)境下辨識度太低 ③開發(fā)實現(xiàn)成本高内贮,渲染占用系統(tǒng)資源④除了新穎产园,視覺效果一般為了設(shè)計師“一己私欲”汞斧,這犧牲是不是有點過大了?
如果界面非要做成玻璃擬態(tài)的效果什燕,我覺得只有在深色背景+黑夜模式下效果是最佳的粘勒。
難道被設(shè)計師煞費苦心發(fā)明出來的玻璃擬態(tài)就這么被拋棄了?不是的屎即,我們只是全盤否定了用玻璃擬態(tài)做界面庙睡,但是用來做背景和圖標(biāo)還是可以的(做效果圖也不錯)。
做背景我就不多說了技俐,iOS 14乘陪,macOS Big Sur 和 Windows 10 20H2上用到的比較多,跟早期說的毛玻璃效果類似雕擂。
今天主要介紹下擬態(tài)圖標(biāo)的實現(xiàn)方法暂刘,技法很簡單,實現(xiàn)過程中有三個細(xì)節(jié)需要注:
1捂刺、模糊方式需要選擇“背景模糊”
當(dāng)模糊選項里背景模糊離奇消失時谣拣,試試重新選擇一下其他模糊選項就會再次出現(xiàn)
2、一定要給圖層樣式填充添加不透明度而不是在圖層外觀里面添加
3族展、模糊圖層的投影只投在后面的圖層上:
如上圖森缠,圖層A的投影只顯示與圖層B重疊區(qū)域的部分,投在B區(qū)域外的不顯示仪缸,這需要把A復(fù)制一層加上投影贵涵,然后用B作為蒙版層對A的投影進(jìn)行遮罩。
設(shè)計的關(guān)鍵在于遮擋部分實現(xiàn)的效果恰画,圖層A加投影是為了前后界限和空間區(qū)分更明顯宾茂,模糊層A還可以細(xì)化加內(nèi)隱影效果: 可以加兩個一深一淺,淺的作為投影處的暗部反光拴还,加兩個也是為了讓界限明顯一些(尤其是在不透明度很低和深色背景下增加內(nèi)陰影更加有必要)跨晴;其他效果可以自由發(fā)揮,如給整體加彌散投影片林、初始圖層加一些微漸變等端盆。
其它我就不多說了,下面是網(wǎng)上找的一些案例费封,效果和種類基本就這些焕妙,大家可以結(jié)合應(yīng)用場景參考下。
更多干活查看“小桔設(shè)計”公粽號