設(shè)計模糊效果背景的6個超實用技巧

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è)計思路惜论,歡迎大家留意互動!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末株茶,一起剝皮案震驚了整個濱河市来涨,隨后出現(xiàn)的幾起案子图焰,更是在濱河造成了極大的恐慌启盛,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異僵闯,居然都是意外死亡卧抗,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門鳖粟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來社裆,“玉大人,你說我怎么就攤上這事向图∮拘悖” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵榄攀,是天一觀的道長嗜傅。 經(jīng)常有香客問我,道長檩赢,這世上最難降的妖魔是什么吕嘀? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮贞瞒,結(jié)果婚禮上偶房,老公的妹妹穿的比我還像新娘。我一直安慰自己军浆,他們只是感情好棕洋,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著乒融,像睡著了一般拍冠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上簇抵,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天庆杜,我揣著相機與錄音,去河邊找鬼碟摆。 笑死晃财,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的典蜕。 我是一名探鬼主播断盛,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼愉舔!你這毒婦竟也來了钢猛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤轩缤,失蹤者是張志新(化名)和其女友劉穎命迈,沒想到半個月后贩绕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡壶愤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年淑倾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片征椒。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡娇哆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出勃救,到底是詐尸還是另有隱情碍讨,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布蒙秒,位于F島的核電站垄开,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏税肪。R本人自食惡果不足惜溉躲,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望益兄。 院中可真熱鬧锻梳,春花似錦、人聲如沸净捅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蛔六。三九已至荆永,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間国章,已是汗流浹背具钥。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留液兽,地道東北人骂删。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像四啰,于是被迫代替她去往敵國和親宁玫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容