設(shè)計趨勢:網(wǎng)頁設(shè)計中的磨砂玻璃效果
時間:2023-08-31 18:18:01 | 來源:網(wǎng)站運營
時間:2023-08-31 18:18:01 來源:網(wǎng)站運營
設(shè)計趨勢:網(wǎng)頁設(shè)計中的磨砂玻璃效果:通過模糊和透明度的正確組合,您將獲得網(wǎng)站和App設(shè)計中最熱門的趨勢之一——磨砂玻璃效果。這是一種設(shè)計技術(shù),它使用高斯模糊、陰影和透明度來創(chuàng)建模仿現(xiàn)實生活中磨砂玻璃的元素。讓我們深入探討使用這種設(shè)計趨勢的七種不同方式。
分層設(shè)計元素
由于效果的組合——模糊、陰影和透明度——磨砂玻璃技術(shù)在多層設(shè)計中效果很好。
這個例子很好,因為你可以看到背景的明暗元素以及透明度是如何工作的。
無論是單個元素還是堆疊元素,例如上面的示例,它都會以一種允許背景元素穿透的方式創(chuàng)建微妙的深度。這個例子很好,因為你可以看到背景的明暗元素以及透明度是如何工作的。另外,請注意較大的“玻璃”區(qū)域的白色邊緣周圍的柔和陰影,以便它與背景之間有明顯的區(qū)別。
效果也是粘性導航的一部分。如果您不確定如何使用玻璃效果,它可以很好地用于這種類型的導航元素,并且是一個很好的起點。
圖標設(shè)計
磨砂玻璃圖標是對大多數(shù)設(shè)計師長期以來一直使用的圖標風格的全新詮釋。不過,這可能是對趨勢的一種更棘手的使用。
由于圖標非常小,磨砂效果可以為某些設(shè)計增加一定程度的視覺復雜性。對于以超大方式使用的圖標,這可能是最可行的。
另一個可行的選擇是用于沒有很多圖標的設(shè)計,并且所有形狀和用途都非常標準且易于理解。
彩色背景
磨砂玻璃效果可以作為網(wǎng)站背景的基礎(chǔ)。
完成這項工作的技巧是模糊背景圖像或顏色,使用戶不會試圖猜測背景是由什么組成的。它應該只是一種更柔和,幾乎是斑點的顏色。
大多數(shù)使用磨砂玻璃背景的設(shè)計師都使用冷色調(diào)(它強調(diào)冬天的感覺)。
上面的例子使用雙磨砂層,背景和中間背景元素跨越背景。白色區(qū)域和顏色背景中的曲線是一個強大的組合,它為沒有很多高度視覺元素的設(shè)計提供了興趣。
卡片式積木
磨砂玻璃效果非常適合卡片式塊,以在元素之間創(chuàng)建分隔。
在上面的玻璃卡示例中,設(shè)計使用信用卡樣式元素,但幾乎可以為任何類似的覆蓋層重新構(gòu)想??紤]使用這種風格的卡片式塊作為雜志格式的博客文章的容器,或者作為應用程序設(shè)計中的塊狀按鈕。
有很多不同的機會可以使用此顯示選項。
這個例子讓我想到的另一件事是如何在黑暗的界面中分層磨砂玻璃元素。請注意磨砂玻璃如何柔化整個設(shè)計輪廓。
主導藝術(shù)
磨砂玻璃效果在
網(wǎng)站設(shè)計中最不常見的用途可能是作為一種主要的藝術(shù)元素,但它也可以用于此目的。
在上面的示例中,當動畫背景文本滾動時,磨砂的前景動畫用作焦點。
當用作主要的藝術(shù)元素時,這種效果的挑戰(zhàn)是確保它不會“太軟”。您希望用戶了解他們正在查看的內(nèi)容并知道如何與之交互。這里的關(guān)鍵是不要為了設(shè)計效果而犧牲可用性。
形式和按鈕
磨砂玻璃技術(shù)可以應用于設(shè)計中的特定用戶界面元素。
上面的著陸頁面概念是如何將其用于表單字段的一個很好的例子。
在這個黑色的設(shè)計概念中,效果的作用是幫助將注意力吸引到屏幕上的動作項上。
你從設(shè)計的角度來看,在深色背景上使用較淺的表單域有助于以一種您不會使用純粹的“幽靈”或輪廓表單域的方式吸引您,這種風格很受歡迎,因為它創(chuàng)造了時尚的設(shè)計元素. (即使它犧牲了一些可用性。)
軟背景層
由于磨砂玻璃效果,有時背景非常柔和和簡單。全白背景下的小顏色區(qū)域可以增加一些視覺焦點,以確保屏幕上的一些移動。
盡量不要將背景磨砂元素擴展到整個屏幕。
這可能是磨砂玻璃元素最簡單的第一個實現(xiàn),因為它純粹是在背景中,不需要考慮其他層。
雖然此示例適用于一個小區(qū)域,但情況并非總是如此。盡量不要將背景磨砂元素擴展到整個屏幕。擁有計數(shù)器空白有助于強調(diào)該技術(shù)。否則,它可能看起來就像一個漸變。
結(jié)論
磨砂玻璃效果的有趣之處在于它可以作為小空間中的微妙元素或作為項目的整體設(shè)計概念。它已經(jīng)被一些知名設(shè)計公司采用……當您一直向左或向右滑動時,只需看看 iPhone 上的一些面板即可。
有這么多人在玩磨砂玻璃元素,我們肯定會在未來看到它將成為一種設(shè)計潮流。