火星網校
如何設計出漂亮的模糊效果背景？
iOS 14和macOS Big Sur繼續發展一種視覺風格，設計精良的模糊在建立層次結構中起著巨大的作用。那麼如何設計出漂亮的模糊效果背景？下麵向你展示如何通過幾個步驟進行製作。
1.用中性色來提升
對於模糊的UI背景，使用白色或黑色，有時也可以考慮使用灰色色調。這些中性顏色是背景模糊層的最佳選擇。如果你使用鮮豔的色調，模糊看起來會很奇怪，可能不適合你的UI下麵的背景。
2.模糊使內容可讀
應用時髦的視覺風格不會讓我們犧牲可用性。如果你隻模糊一點背景值。卡片的內容會看起來不好。
可以嚐試使用有助於在背景和文本內容之間建立良好對比的值。比如：我經常使用16-24px的模糊效果，看起來效果還不錯。
3.調整不透明度以模糊
看起來不錯的模糊背景必須是半透明的。圖層的不透明度過多會使模糊效果不可見。太低的不透明度會使模糊的圖層與背景混合。對我來說，安全的選擇大約是30-60％。
4.不要使用過多的模糊
背景模糊需要平衡。它不僅與不透明度有關，而且還與模糊本身的價值有關。如果模糊圖層太多，則背景中漂亮的漸變效果將消失。
5.使用相同的設置提升圖層
這是我在項目中使用的技巧。為了在模糊和半透明的UI組件中構建可視層次結構，我對標題，部分或卡片使用了相同的樣式。
如果模糊的麵板或卡片具有分組的元素或條形，請嚐試使用相同的圖層樣式進行抬高。它給出了很好的結果。
6.在正確的背景下使用
應用良好的背景非常重要。當背景堅實時避免模糊。在圖像或漸變上使用它，因此可以為你的設計提供很好的深度感。
總結一下
這個簡單的教程向你展示了如何在設計中製作吸引人的模糊背景。如果你有自己的設計思路，歡迎大家留意互動！
來源：小阿田的設計筆記（公眾號）
作者：UXMisfit
譯者：Tzw_n
上一篇 2021年UI/UX設計趨勢前瞻
下一篇 如何做好分類導航設計？
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
騰訊遊戲美術春招已經啟動啦！25、26、27、28屆均有機會投遞，實習崗位有動畫、特效、3D場景/角色、2D場景/角色、技術美......
-
剛入學的同學，在第一次學到新軟件的時候，經常會被各種快捷鍵整懵。但是網上download的快捷鍵記憶圖，不一定就是合適的。這裏......
-
官方宣布3月共134款新遊戲版號過審，網傳68家遊戲公司超1000崗位
提前了解行業趨勢，關注熱門遊戲和新技術如AI、UE5等；或通過了解和參加線上、線下行業遊戲大賽或交流峰會，增加行業信息來源，積......
-
今天要分享的是武漢校區剪包專場招聘會，企業代表是曾就讀於武漢校區2210期的剪包學長，這次代表公司返校，招聘視頻拍攝剪輯崗位。
-
AI時代找不到工作怎麼辦？瞄準這6個常青樹行業，火星全專業可匹配！
科技在創新，社會在發展，自動化、機器人和AI人工智能的應用，讓很多重複性高、低技能要求的傳統工作崗位正在被逐步取代，這是一個無......
-
一般發生在下半年，如果公司上半年業績未達標，有些公司可能會在年中發起招聘需求，為團隊儲備一些新人，到年底以“試用期不通過”為理......
