對于一個項(xiàng)目來說,不管是網(wǎng)站設(shè)計(jì)或平面設(shè)計(jì),你將要做出的最重要的早期決策之一是:使用什么樣的背景來完成一個項(xiàng)目。 它是否是單色,無色,使用諸如幾何形狀,漸變或木紋圖案等時尚元素? 一個合適的、扎實(shí)的背景設(shè)計(jì)可以幫助使項(xiàng)目大放異彩。
時刻關(guān)注背景設(shè)計(jì)風(fēng)格的趨勢對于設(shè)計(jì)工作也很重要。 流行的背景可以先用戶說明網(wǎng)站設(shè)計(jì)是現(xiàn)代的,內(nèi)容是新的。 現(xiàn)代化的視覺框架甚至可以向用戶發(fā)出信號,表明你正在考慮他們的需求,并充分利用可以改善他們的體驗(yàn)的工具。
那么你需要怎么做呢? 以下是2020年十種背景設(shè)計(jì)趨勢和樣式,希望可以幫助你在接下來的項(xiàng)目中找到合適的感覺和靈感。
1.全屏視頻(Full Screen Video)
視頻已經(jīng)成為背景設(shè)計(jì)中必不可少的元素之一,但是隨著這一趨勢的發(fā)展,它有了全新的位置:全屏背景視頻。
響應(yīng)式技術(shù)允許設(shè)計(jì)人員通過縮放視頻以填充屏幕。 像上面的示例一樣,這種趨勢集中使用在效果和周圍元素較少的網(wǎng)站設(shè)計(jì)中。
這種趨勢營造了電影般的體驗(yàn),吸引了用戶,并可以使他們與視頻互動。 為了充分利用這種背景設(shè)計(jì)趨勢,在使用視頻資源的大小以及質(zhì)量上需要注意。
2.文本背景(Text in the Background)
你可能不會考慮將文本作為背景元素,但你完全可以嘗試這樣做。
強(qiáng)大的字體(尤其是帶有夸張的粗體的字體)可以使背景看起來如同使用圖像元素一樣,甚至侵占空間。
這可能是一個比較棘手的背景趨勢之一,因?yàn)槟阈枰诒3挚勺x性的同時保持字母,圖像和響應(yīng)性之間的平衡。
3.微妙的紋理(Subtle Textures)
背景中的細(xì)微紋理可以增加項(xiàng)目的深度和廣度。
你可以嘗試各種紋理圖案,但是主要趨勢似乎是在純色背景上設(shè)置斑點(diǎn)或條紋(最常見的是白色)。
這種紋理風(fēng)格可以為背景提供額外的視覺元素,并增加了設(shè)計(jì)的細(xì)節(jié)。 趨勢最好的部分可能是它幾乎可以處理任何主題的項(xiàng)目,你甚至可以將其與其他背景趨勢配合使用。
4.懸停動畫(Hover Animation)
誰說背景圖片就必須是靜態(tài)的?
設(shè)置懸停動作可以為靜態(tài)背景增加適當(dāng)?shù)囊苿恿俊?此技術(shù)適用于照片,插圖,甚至圖案或紋理。
它可以為用戶體驗(yàn)增加意想不到的樂趣。 在懸停動作出現(xiàn)之前,用戶甚至都不知道有它的存在。
要充分利用這種背景趨勢,請創(chuàng)建一些細(xì)微的動作。
5.分層,場景插畫(Layered, Scene Illustrations)
另一個不斷發(fā)展的背景趨勢是插圖的使用。 盡管設(shè)計(jì)師在背景中使用插圖已有相當(dāng)長的時間,但這些插圖在分層場景甚至某些動畫方面更加精致。
插圖可能引人注目且令人難忘。 插圖的困難之處在于,這些背景設(shè)計(jì)可能在視覺上比較雜亂,你必須仔細(xì)計(jì)劃其他元素的位置和樣式。
在上面的示例中使用的插畫就恰到好處的。 通過放置和動畫提示,可以很好地補(bǔ)充文本和設(shè)計(jì)的空余部分。
6.色塊層(Color Block Layers)
色塊一直是超越領(lǐng)域的設(shè)計(jì)趨勢。 你經(jīng)常會在時尚,家居裝飾和網(wǎng)頁設(shè)計(jì)中找到它。
對于設(shè)計(jì)背景而言,這種風(fēng)格的最大優(yōu)點(diǎn)是它既明亮又有層次感,視覺上很有趣。 它可以與各種調(diào)色板配合使用(對品牌來說可能非常有用),并且不會創(chuàng)建過于復(fù)雜或難以實(shí)現(xiàn)的背景。
使用背景明亮或淺色的色塊層,然后以另一種顏色添加第二個“背景”。 你可以在上面的網(wǎng)站設(shè)計(jì)示例中看到此背景,背景為白色,然后在藍(lán)色框中顯示單個元素。
7.扁平色(Flat Color)
扁平化設(shè)計(jì)從未真正消失的部分之一就是樣式的顏色。 這些顏色最近經(jīng)常被作為背景色來使用。
不僅是使用大膽的色調(diào)作為背景的樣式,而且還以扁平的設(shè)計(jì)理念使用它們。 沒有漸變,沒有變化,只有單一色調(diào)的純色背景。
這些背景通常在其頂部設(shè)置了圖像或文本元素,有時在其后面具有邊框或其他背景以創(chuàng)建深度(你可以從上面的示例中看到這種完整的效果,在米色背景上有白色邊緣,頂部是圖像)。
8.幾何圖形(Geometric Shapes)
圓形,多邊形和其他幾何元素是2020年背景設(shè)計(jì)的重要組成部分。
形狀可以讓人聯(lián)想到童年,也可以只是以前流行的所有平面,單色背景的有趣替代品。 對于現(xiàn)代幾何體,請堅(jiān)持使用單一的調(diào)色板,并使用具有很大對比度的元素以充分利用背景。
這些背景樣式可能有點(diǎn)浮夸,例如上面的示例。
9.線型(Line Patterns)
從細(xì)微的曲線到粗體的筆觸,線條圖案作為背景設(shè)計(jì)元素正變得越來越流行。
使線條元素起作用的原因是它們通常意味著某些東西。 線條圖案有助于將用戶吸引到設(shè)計(jì)中,并將眼睛引向其他視覺元素,例如上面示例中的自定義線條圖案。
線型可以大也可以小,根據(jù)項(xiàng)目目標(biāo)的不同,線型可以隨需求和目的進(jìn)行調(diào)整。
10.水彩(Watercolor)
水彩背景往往會引起設(shè)計(jì)師的很多不同的反應(yīng)-他們要么愛要么恨。
例如,上面的示例中,許多設(shè)計(jì)師會將水彩元素與女性化相關(guān)聯(lián),但不一定如此。 使用中性水彩以增加深度或平衡背景同樣是一種流行的方式。
水彩背景可以模仿繪畫的元素,也可以僅包含線條和其他相關(guān)的元素。
11.漸變(Gradients)
如果你和我一樣,那你可能是喜歡漸變的設(shè)計(jì)師之一(我簡直愛它們到無法自拔?。?。
這種趨勢非常靈活,有只是單一顏色的背景漸變,覆蓋圖像或視頻的背景漸變,甚至是改變顏色或看起來在整個設(shè)計(jì)中浮動的動畫背景漸變。
有這么多種選擇,幾乎可以肯定的是,你會找到一個可以與你的調(diào)色板和設(shè)計(jì)方案配相匹配的可行解決方案。
12.氣泡和斑點(diǎn)(Bubbles and Blobs)
盡管氣泡和斑點(diǎn)可能類似于幾何形狀,但它們通常有所不同,因?yàn)槠渲性S多元素都包含一些運(yùn)動,并且形狀相當(dāng)不完美。
這種趨勢傾向于以兩種方式作為背景元素起作用:
· 作為帶有氣泡或斑點(diǎn)形狀元素的實(shí)際背景,這些元素僅是為了視覺目的或?yàn)榭傮w設(shè)計(jì)添加一點(diǎn)顏色。
· 作為“前景”背景元素,例如上面的示例。 氣泡和斑點(diǎn)通常是移動的形狀,它們漂浮在設(shè)計(jì)中以產(chǎn)生更分層的效果,但它們是“背景元素”,因?yàn)樗鼈兂藥椭脩舻淖⒁饬ν猓瑳]有起到其他作用。
13.抽象形狀(Abstract Shapes)
有許多形狀和設(shè)計(jì)可以構(gòu)成美麗的背景,但不屬于任何一類。 所有這些元素都可以歸類為“抽象”類別。
純粹出于視覺興趣存在抽象的背景元素可以在用戶需要查看的元素附近創(chuàng)建焦點(diǎn),形成空間感和深度感,或者只是為其他元素提供襯托。
盡管抽象背景是一種“無規(guī)則”的設(shè)計(jì),但與它們一起使用時最好具有一定的組織性和圖案感,以使設(shè)計(jì)不會給用戶帶來混亂的氛圍。
14.木質(zhì)紋理(Wood Grain)
木質(zhì)紋理在產(chǎn)品攝影和場景風(fēng)格設(shè)計(jì)中很受歡迎。
兩者都可以很好地使用此元素,因?yàn)槟举|(zhì)紋理可以提供一種自然的,不平坦的的感覺。 它提供了一個有趣的位置,可以幫助將焦點(diǎn)集中在背景的主要元素和內(nèi)容上。
要充分利用木質(zhì)紋理,請嘗試使木材的顏色與前景元素匹配,并根據(jù)前景元素查找寬或薄的木板素材。 盡量避免內(nèi)容掉落在木板之間的“裂縫”中。
15.灰白色(White and Gray)
淺色(白色和灰色)背景是一種一直在發(fā)展和進(jìn)化的趨勢。 這些背景主要源自極簡主義趨勢,對用戶而言簡單易行。 它們?yōu)槠聊簧系钠渌靥峁┝顺渥愕目臻g和對比度。
大多數(shù)白色和灰色背景具有某些紋理元素,例如淺漸變色,使用陰影與前景元素或某些整體圖案或紋理分離開。
總結(jié)
在舊設(shè)計(jì)中通過更換全新的背景元素可以在一定程度上提升視覺的吸引力,通過簡單操作就可以更新項(xiàng)目。
尋找具有時尚氣息的東西,為你的設(shè)計(jì)增添更多現(xiàn)代氣息。
----圖文來自:design shack
----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理,為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)