您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 瀏覽設(shè)計(jì)教程

網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)原則:讓你的網(wǎng)站容易讀懂

 

正確的背景風(fēng)格可以為整個(gè)網(wǎng)站確定基調(diào)。我們搜集了一批使用大幅圖像、明亮顏色或出眾圖案來(lái)作為背景的優(yōu)秀網(wǎng)站,希望從中探尋當(dāng)下網(wǎng)站的流行設(shè)計(jì)風(fēng)格。

什么樣的背景最適合你的網(wǎng)站,這并沒(méi)有一定之規(guī),但確實(shí)有一些共同的要素:

互聯(lián)網(wǎng)背景的內(nèi)容應(yīng)該有目的性。

背景應(yīng)該與你的品牌風(fēng)格一致。

背景之上的文字內(nèi)容應(yīng)該易于閱讀(無(wú)論是顏色、反差還是尺寸大小。) 背景的主題在整個(gè)網(wǎng)站內(nèi)應(yīng)該連貫一致。

背景應(yīng)該能很快下載并且不會(huì)讓你的網(wǎng)站變得緩慢甚至卡死。

現(xiàn)在的流行趨勢(shì)是什么?

就像服裝和發(fā)型會(huì)變,網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格也在變。對(duì)于背景來(lái)說(shuō),趨勢(shì)的變化尤其突出。

目前,大量的網(wǎng)站在首屏采用整幅圖片作為背景,之前圖趣給大家?guī)?lái)過(guò)很多整幅大圖片的網(wǎng)頁(yè)設(shè)計(jì)案例。一些背景是清晰、寫(xiě)實(shí)的(如照片和插圖),而另一些則可能是抽象隱晦的。大尺寸的、虛化或模糊的圖也隨處可見(jiàn)。

色塊背景也很流行,但已經(jīng)不是通常那種永不過(guò)時(shí)的黑和白。很多設(shè)計(jì)師使用強(qiáng)烈、濃重的顏色來(lái)幫助網(wǎng)站內(nèi)容從背景中突顯出來(lái)。

最后,圖案和紋理也用得很多。不過(guò)形狀的大小最近改變了不少。越來(lái)越多的網(wǎng)站在背景中采用大塊的圖案,而此前曾經(jīng)流行的則是小的圖案。大面積的圖案與低反差的內(nèi)容帶來(lái)一種很微妙的感覺(jué)。細(xì)微的紋理背景也非常流行,用以給設(shè)計(jì)增添真實(shí)的感覺(jué)。

清晰的圖像

使用逼真、清晰的圖像從來(lái)不會(huì)過(guò)時(shí),但是流行與否則取決于使用的方法。越來(lái)越多的此類圖像現(xiàn)在是直接作為背景,而不是作為其它背景之上的照片。插圖也日漸流行。同樣,色彩是非常重要的,因?yàn)樗鼪Q定了插圖的品質(zhì)。

模糊或虛化的圖像

使用虛化或模糊圖的情況會(huì)有些復(fù)雜。它只有在圖片本身品質(zhì)很好的情況下才會(huì)帶來(lái)好的效果,如果為了掩飾圖片質(zhì)量的低劣而去虛化,效果會(huì)適得其反。一般我們需要要很清楚為什么要把一張圖虛化。有時(shí)候非常明顯的模糊會(huì)有很好的效果(像 Humaan 網(wǎng)站中柔化的山峰),而有時(shí)候只需要輕微的虛化就足夠了(上方 We Make 網(wǎng)站)。

色塊

明亮的顏色正在開(kāi)始流行并越來(lái)越引起注意。大量設(shè)計(jì)師選擇利用顏色來(lái)創(chuàng)造出深度和對(duì)比。

黑或白

黑和白是經(jīng)典的背景色,用起來(lái)也簡(jiǎn)單。你可以很容易為字體產(chǎn)生對(duì)比效果(即使是很小的字),并且永不過(guò)時(shí)。如果加上一些細(xì)微的空間處理,黑色或是白色背景便會(huì)看起來(lái)更時(shí)尚。Foundry Co. 用到了線條來(lái)起強(qiáng)化的作用,而 Designing Monsters 在黑暗色調(diào)上用了大面積的對(duì)比色(黑白反差)。

圖案或紋理

不要擔(dān)心采用濃烈的圖案背景。大塊的、重復(fù)拼接的圖案現(xiàn)在隨處可見(jiàn)。細(xì)膩的紋理可以給設(shè)計(jì)增加真實(shí)感。此類流行設(shè)計(jì)的關(guān)鍵在于恰當(dāng)?shù)姆床顚?duì)比。請(qǐng)看 Alfred 網(wǎng)站的紫色,你可能要仔細(xì)地查看才能注意到背景中交叉的圖案。

結(jié)論

背景可以決定網(wǎng)站的基調(diào)。在最終決定之前,你可以嘗試各種選擇——照片、色塊,或是圖案。不要覺(jué)得有任何束縛。以上的這些例子中,那些最能在視覺(jué)中引起興趣的網(wǎng)站不光采用了獨(dú)特的背景,大多還采用了第二級(jí)的背景,比如在色塊上方的照片,而文字又在兩者之上。 當(dāng)然,在選擇背景主題時(shí),要考慮到你的內(nèi)容。要記住網(wǎng)站設(shè)計(jì)中最重要的原則:讓你的網(wǎng)站容易讀懂。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://likemindfilms.com/tutorial/tutorial1196.html
9個(gè)非常有用的CSS網(wǎng)頁(yè)設(shè)計(jì)技巧
10種無(wú)損圖片的編輯技巧(推薦教程)
圖趣網(wǎng)微信
建議反饋
×