iOS 14和macOS Big Sur繼續(xù)發(fā)展一種視覺風(fēng)格,設(shè)計精良的模糊在建立層次結(jié)構(gòu)中起著巨大的作用。這就是設(shè)計師制作漂亮的模糊效果的原因娇斑。
下面向你展示如何通過幾個步驟進行制:
01
用中性色來提升
對于模糊的UI背景瑞眼,使用白色或黑色,有時也可以考慮使用灰色色調(diào)溉瓶。這些中性顏色是背景模糊層的最佳選擇。如果你使用鮮艷的色調(diào),模糊看起來會很奇怪堰酿,可能不適合你的UI下面的背景疾宏。
02
模糊使內(nèi)容可讀
應(yīng)用時髦的視覺風(fēng)格不會讓我們犧牲可用性。如果你只模糊一點背景值触创≡志猓卡片的內(nèi)容會看起來不好。
可以嘗試使用有助于在背景和文本內(nèi)容之間建立良好對比的值嗅榕。比如:我經(jīng)常使用16-24px的模糊效果顺饮,看起來效果還不錯。
03
調(diào)整不透明度以模糊
看起來不錯的模糊背景必須是半透明的凌那。圖層的不透明度過多會使模糊效果不可見兼雄。太低的不透明度會使模糊的圖層與背景混合。對我來說帽蝶,安全的選擇大約是30-60%赦肋。
04
不要使用過多的模糊
背景模糊需要平衡。它不僅與不透明度有關(guān)励稳,而且還與模糊本身的價值有關(guān)佃乘。如果模糊圖層太多,則背景中漂亮的漸變效果將消失驹尼。
???????????
05
使用相同的設(shè)置提升圖層
這是我在項目中使用的技巧趣避。為了在模糊和半透明的UI組件中構(gòu)建可視層次結(jié)構(gòu),我對標(biāo)題新翎,部分或卡片使用了相同的樣式程帕。
如果模糊的面板或卡片具有分組的元素或條形,請嘗試使用相同的圖層樣式進行抬高地啰。它給出了很好的結(jié)果愁拭。
06
在正確的背景下使用
應(yīng)用良好的背景非常重要。當(dāng)背景堅實時避免模糊亏吝。在圖像或漸變上使用它岭埠,因此可以為你的設(shè)計提供很好的深度感。
總結(jié)一下
這個簡單的教程向你展示了如何在設(shè)計中制作吸引人的模糊背景蔚鸥。如果你有自己的設(shè)計思路惜论,歡迎大家留意互動!