千篇一律的白色北京,2016年我們被赤果果的白色背景霸屏了!是時(shí)候給你的網(wǎng)站快速換一個(gè)更現(xiàn)代的背景了喲~
雖然許多極簡(jiǎn)風(fēng)格仍不過(guò)時(shí),但并不代表我們都喜歡缺乏色彩的風(fēng)格設(shè)計(jì)。設(shè)計(jì)師也可以選擇灰色和明亮的顏色替代它們。對(duì)于背景效果的追求也產(chǎn)生了許多更有趣的樣式和幾何圖形、像不對(duì)稱(chēng)模式、抽象藝術(shù)。而今天我們就用實(shí)例來(lái)探討下,現(xiàn)代網(wǎng)站的背景趨勢(shì)與啟示!
1.圖像上的幾何
首屏主圖仍然是目前最受歡迎的背景設(shè)計(jì)風(fēng)格之一。引人注目的大畫(huà)面能很好的吸引用戶(hù)注意。
雖然它們本身不是背景,大多數(shù)情況下,放大的全幅圖片只是主頁(yè)的布景。在圖片上增加文本、導(dǎo)航元素和交互(因此被視為一個(gè)背景)。
主圖的新趨勢(shì)是在其上增加一個(gè)酷酷的幾何圖形層,來(lái)增加視覺(jué)的趣味性。從螺旋形到矩形到更多其他的形狀,設(shè)計(jì)師將基本形狀添加進(jìn)設(shè)計(jì)中去。
但你需要有目的地將幾何形狀使用到主圖中才能發(fā)揮出它應(yīng)有的效果。簡(jiǎn)單的將一些六邊形放到圖片上是很難有什么作用的。幾何元素應(yīng)該放置在正確的位置上,能夠?qū)⒂脩?hù)的視覺(jué)吸引到正確的位置,或者引導(dǎo)用戶(hù)進(jìn)行特定的操作。通過(guò)幾何圖形,也能夠?qū)⒁恍┥侍砑拥揭粋€(gè)暗色調(diào)或極簡(jiǎn)的設(shè)計(jì)中去,來(lái)引導(dǎo)視線的運(yùn)動(dòng)。形狀還能夠被用來(lái)幫助強(qiáng)調(diào)品牌特征,建立一個(gè)較強(qiáng)的品牌關(guān)系,特別當(dāng)這些形狀原本是logo中的一部分的時(shí)候。
2.灰色的色調(diào)
扭轉(zhuǎn)升級(jí)極簡(jiǎn)風(fēng)格設(shè)計(jì)的最簡(jiǎn)方法就是加入一點(diǎn)灰色。
相對(duì)于單調(diào)的白色背景,更多的網(wǎng)站開(kāi)始使用灰色調(diào)的背景來(lái)使之變成完全相反的簡(jiǎn)約設(shè)計(jì)風(fēng)格。
使用灰色的背景的好處就是能讓顏色看起來(lái)更加飽滿(mǎn)并給人以偏暖或偏冷的傾向。
底色能適匹配品牌的顏色或者是適應(yīng)周?chē)膱D片?;蛘?,用單純的灰色制造一種平滑的色調(diào)。
無(wú)論你使用什么色值的灰色,請(qǐng)記住環(huán)繞在顏色周?chē)脑貢?huì)幫助你決定顏色給用戶(hù)帶來(lái)的感覺(jué)。
比如Paul Valentine網(wǎng)站使用淡粉來(lái)作為背景色時(shí)它看起來(lái)很柔和,而同樣的顏色在S.Dallyn網(wǎng)站時(shí)則更加彰顯出時(shí)尚的感覺(jué)。
3.明艷的圖層
正如可以用幾何形狀來(lái)創(chuàng)建背景層,色塊也可以起到相同的作用。選擇明亮的顏色是一個(gè)大膽而有趣的背景設(shè)計(jì)決策。
這些彩色的背景可以服務(wù)于從吸引用戶(hù)注意設(shè)計(jì)到增加視覺(jué)樂(lè)趣等多種目的。
最近一些色彩的流行趨勢(shì)很大程度上會(huì)影響到設(shè)計(jì),而這一趨勢(shì)也是色塊創(chuàng)建背景的根基。許多的顏色和圖層有原質(zhì)設(shè)計(jì)(Material Design)的感覺(jué) (或帶有扁平化設(shè)計(jì)風(fēng)格的味道)。這種對(duì)流行趨勢(shì)的融合和轉(zhuǎn)化是一種自然的進(jìn)化,是一種容易被采納的設(shè)計(jì)風(fēng)格,因?yàn)橄啾扔趶氐椎耐品?,它可以更好的調(diào)整現(xiàn)有的網(wǎng)站。
4.不對(duì)稱(chēng)
跳出局限!(或者最少調(diào)整一下,別讓它看起來(lái)那么對(duì)稱(chēng)。)
背景并不需要把細(xì)小的元素和圖案完美的一一排列。也并不一定是單一的色彩或圖像。
它可以是一些元素的組合,以完美的平衡的方式放置在畫(huà)面中,而不是簡(jiǎn)單的左右對(duì)稱(chēng)??尚械姆绞奖热纾涸O(shè)計(jì)一個(gè)主圖,不采取屏幕的全寬一側(cè)的留白比另一側(cè)要更多,就像上圖Nap Luxury Guesthouse網(wǎng)站所示。還可以像CMMNTY的網(wǎng)站的方式一樣,其中文本元素和留白空間有同等的權(quán)重,來(lái)引導(dǎo)用戶(hù)閱讀文字信息。又或者如VASE的網(wǎng)站所展示的:通過(guò)局部展示放大后的產(chǎn)品圖像,并配以文字和交互元素。
無(wú)論設(shè)計(jì)如何展現(xiàn),我們都應(yīng)當(dāng)從和諧平衡的方面來(lái)考慮背景設(shè)計(jì),而不是尋求現(xiàn)成的模板。嘗試一些不同的感覺(jué)。不對(duì)稱(chēng)常會(huì)給人大膽、有趣、令人眼前一亮的感覺(jué)(尤其在這么多十分對(duì)稱(chēng)作品的映襯下。)
5. 抽象藝術(shù)
做背景圖的時(shí)候沒(méi)思路?試試玩些抽象的吧。用色彩和形狀任意組合,雖然可能會(huì)四不像,但視覺(jué)上會(huì)很有意思。
在設(shè)計(jì)網(wǎng)站頁(yè)面時(shí),你需要一個(gè)有趣的視覺(jué)亮點(diǎn)來(lái)吸引用戶(hù)的眼球。如果頁(yè)面設(shè)計(jì)流于俗套,用戶(hù)沒(méi)有理由繼續(xù)駐留。
設(shè)計(jì)明確的視覺(jué)重心,配上有吸引力的文字來(lái)引起用戶(hù)的注意力。要敢于出格、不同尋常和有趣。
總結(jié)
你的網(wǎng)站設(shè)計(jì)還在飽受老舊、過(guò)時(shí)并且爛大街的主圖所帶來(lái)的困擾么?(沒(méi)關(guān)系,承認(rèn)吧。我們都有可能遇到這種情況)開(kāi)始給你的網(wǎng)站背景換上更加時(shí)尚風(fēng)格吧。使用以上的例子來(lái)激發(fā)你的靈感,大膽摒棄以往的固有模式,嘗試使用不同的方法。
—————————————————————————————————————————————————
我們是DATS翻譯小組,我們愛(ài)設(shè)計(jì)愛(ài)英語(yǔ),通過(guò)翻譯設(shè)計(jì)的文章共同學(xué)習(xí)進(jìn)步,雖然我們還有許多不足,但是只要把每個(gè)人的微小的力量聚集起來(lái),總有一天會(huì)發(fā)出耀眼的光芒~
本文翻譯由DATS翻譯小組成員 Nierkou、八重、安妮、猴子王呀、喵醬紫共同翻譯完成。
翻譯校對(duì):Haku
視覺(jué)設(shè)計(jì):喵醬紫
原文出處:https://designshack.net/articles/graphics/5-modern-website-background-ideas-for-2017/
給設(shè)計(jì)前沿網(wǎng)打氣!加油!支持我們!猛點(diǎn)這里 >>
聲明:本站所有作品及素材資源僅供學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途,否則產(chǎn)生的一切后果將由您自己承擔(dān)!如有侵犯您的版權(quán),請(qǐng)及時(shí)發(fā)郵件聯(lián)系我們(netsir@qq.com),我們將盡快處理。本站聲明:本站為個(gè)人非營(yíng)利性站點(diǎn),文章中出現(xiàn)的商標(biāo)版權(quán)屬于其合法持有人,本站僅展示.所有資源均網(wǎng)上搜集,任何涉及商業(yè)盈利目的均不得使用,否則產(chǎn)生的一切后果將由使用者承擔(dān)!本站僅僅提供一個(gè)學(xué)習(xí)的環(huán)境,將不對(duì)任何資源負(fù)法律責(zé)任.除部分原創(chuàng)作品外,本站不享有版權(quán),如果您發(fā)現(xiàn)有圖片侵害了您的版權(quán),請(qǐng)速與我們聯(lián)系,我們將在第一時(shí)間刪除
聯(lián)系客服