轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里　

如何選擇一種最恰當(dāng)?shù)木W(wǎng)頁(yè)背景是網(wǎng)站設(shè)計(jì)中最常見的問(wèn)題之一。 通常網(wǎng)站設(shè)計(jì)者都已準(zhǔn)備好網(wǎng)站內(nèi)容，而且版面布局大多也基本敲定。但背景要么是令人厭煩，要么是讓人眼花繚亂，讓設(shè)計(jì)者遲遲不能確定。

今天，我們將介紹幾個(gè)實(shí)際網(wǎng)站來(lái)啟發(fā)你的靈感，看看如何設(shè)計(jì)趣味而又令人感興趣的網(wǎng)頁(yè)背景。收藏本文，當(dāng)你再次閱讀時(shí)，你定會(huì)被某一個(gè)背景設(shè)計(jì)所迷戀。

1. 素描設(shè)計(jì)

這種設(shè)計(jì)在幾年前就變得比較流行，而且一直持續(xù)到現(xiàn)在。這靈感來(lái)源于在筆記本上的涂鴉亂畫，就像你十幾歲時(shí)在英文課上所作的那樣。每一部分都是些粗糙的素描表現(xiàn)，頁(yè)面看似是非常隨意的創(chuàng)意集合，而它們都以不同的旋轉(zhuǎn)方式散布在頁(yè)面各處。NotchStudio就是很好地應(yīng)用了這種創(chuàng)意，并且以非常柔緩的方式表現(xiàn)出來(lái)。

即使你本人不善長(zhǎng)繪畫，這種創(chuàng)意也是相當(dāng)容易實(shí)現(xiàn)的，是因?yàn)檫@些涂鴉通常都是些非?；镜脑O(shè)計(jì)。如果擁有一部Wacom或iPad平板電腦，你就可以相當(dāng)容易地描繪出你自己的圖片或者某種意義上能夠反映此類風(fēng)格的書寫文本。還有很多免費(fèi)字體如Pointy，可以幫你不費(fèi)吹灰之力就可實(shí)現(xiàn)讓人贊不絕口的素描。

2. 精細(xì)文稿設(shè)計(jì)風(fēng)格

紙張的質(zhì)地紋理總能激起設(shè)計(jì)者的激情，而且為所有年齡所適用。目前這種創(chuàng)意已不像幾年前那樣風(fēng)靡，但是它還是會(huì)帶給你一種非常微妙的效果：如果你沒(méi)有看到它，那會(huì)讓你非常地想念。

你注意到Beautiful Type所用的紋理設(shè)計(jì)，它既沒(méi)有偏離主題也沒(méi)有過(guò)分夸張，而是將一個(gè)原本看起來(lái)就很好的網(wǎng)站更是錦上添花。

查閱LostandTaken網(wǎng)站，你可以找到海量的紋理資源可以應(yīng)用到你的設(shè)計(jì)中。

3. 漸變?cè)O(shè)計(jì)

很多設(shè)計(jì)者認(rèn)為漸變已經(jīng)因被過(guò)度使用而變得不再那么讓人著迷。我個(gè)人認(rèn)為它們很容易被濫用，而且執(zhí)行的不恰當(dāng)，但是我們決不會(huì)看到全是純色一統(tǒng)天下沒(méi)有漸變的局面。因?yàn)闈u變反映了現(xiàn)實(shí)（自然世界我們從未看到?jīng)]有任何摻雜的純色），所以為了讓他們的作品感覺(jué)起來(lái)更真實(shí)，設(shè)計(jì)者還會(huì)繼續(xù)應(yīng)用漸變?cè)O(shè)計(jì)。

漸變?cè)O(shè)計(jì)通常是用來(lái)保持事物樸素的最好方法。不必混入瘋狂的顏色，也無(wú)須制造不明快的變調(diào)，只需選擇一個(gè)簡(jiǎn)單的漸變。我的最愛之一就是從老灰到黑灰的漸變。它純凈，易于實(shí)現(xiàn)而且表現(xiàn)出真正的優(yōu)雅。你可以從如下的設(shè)計(jì)中體會(huì)到這一點(diǎn)。

 

4. 雙色調(diào)對(duì)比設(shè)計(jì)

力求頁(yè)面獨(dú)特雅致而大膽的另一個(gè)選擇就是頁(yè)面中加入一個(gè)生硬的變色設(shè)計(jì)。大多是水平方向的變色，但如果采用垂直設(shè)計(jì)也會(huì)給人獨(dú)特和耀眼的感覺(jué)。

這種創(chuàng)意是要利用對(duì)比的魔力。我們的眼睛會(huì)非常自然地被對(duì)比色所吸引而不能自拔。其關(guān)鍵在于要確保兩種顏色明顯差異。不要選擇任何抵觸或沖撞色調(diào)，而要嘗試純黑與一種淺色的對(duì)比。

5. 全屏圖片設(shè)計(jì)

我提及這種創(chuàng)意，你或許會(huì)嗤之以鼻，但我仍會(huì)盡我所能繼續(xù)給你講解掌握這種創(chuàng)意設(shè)計(jì)的技巧：偉大的圖片成就偉大的設(shè)計(jì)。它簡(jiǎn)潔而樸素。任何人都偏愛美好的圖片，因此將它加入你的設(shè)計(jì)中，就會(huì)使你的網(wǎng)站得到每個(gè)人的垂青。很簡(jiǎn)單，是吧？

圖片賦予了真?zhèn)€網(wǎng)站以靈感。你可以從一幅畫中捕捉到顏色、紋理甚至排印的靈感，進(jìn)而創(chuàng)造一種非常美好的統(tǒng)一連貫的主題。

注意體會(huì)下面網(wǎng)站設(shè)計(jì)中的暗色自然元素，它給人一種使用了很多照片于主頁(yè)滑行的外表和感覺(jué)。

6. 紋理搭配顏色漸變?cè)O(shè)計(jì)

我非常喜歡最近時(shí)?？吹降木W(wǎng)站的原因是在于頁(yè)面頂部應(yīng)用了燈光效果或融入了某種類似于一點(diǎn)點(diǎn)紋理，讓頁(yè)面快速漸變到純色的創(chuàng)意設(shè)計(jì)。

過(guò)多紋理會(huì)極易降低網(wǎng)頁(yè)文本的可讀性，還會(huì)增加視覺(jué)噪音將網(wǎng)頁(yè)變?yōu)橐环N完全不同的頁(yè)面。而把紋理隱含置入則會(huì)讓你額外收獲稱贊的眼神，還不會(huì)犧牲網(wǎng)頁(yè)整體的美感與可讀性。

太多時(shí)候，我們是利用CSS背景圖片重置，讓紋理充斥整個(gè)背景。其實(shí)我們可以嘗試讓紋理選擇性地出現(xiàn)，那樣你會(huì)立刻發(fā)現(xiàn)你的設(shè)計(jì)看起來(lái)要好地多。

7. 仰望設(shè)計(jì)

天空對(duì)于人類是永恒不變的幻想空間。云彩、太陽(yáng)光束、星星和月亮，所有這些元素都會(huì)賦予人們一種魔法讓他們目不轉(zhuǎn)睛地盯著你。

當(dāng)你要把這些元素融入你的背景的時(shí)候要特別小心，因?yàn)槟菚?huì)特別容易產(chǎn)生一些難看或陳腐的效果。要掌握這種創(chuàng)意技巧，設(shè)計(jì)者需要對(duì)美學(xué)有很好的感覺(jué)，懂得如何表達(dá)”空間”的概念，千萬(wàn)不要把它變成一種類似于老版Windows屏保的懷舊效果。

下面的網(wǎng)站選用優(yōu)美的天空作為突出的網(wǎng)頁(yè)背景，是一個(gè)非常好的例子。設(shè)計(jì)者利用復(fù)古色調(diào)和微細(xì)的斜線紋理，渲染出了非常漂亮的星際空間。這是在你應(yīng)用天空在你的網(wǎng)頁(yè)背景之前最好要特別關(guān)注的。

 

8. 多色菱形圖案設(shè)計(jì)

我能聽到你在說(shuō)：”菱形圖案？你在開玩笑？” 在你在評(píng)語(yǔ)欄扔磚頭之前，我們必須要承認(rèn)菱形圖案確實(shí)能夠產(chǎn)生一些特別有魅力的效果。但是，就像我們先前說(shuō)的一樣，這種創(chuàng)意不是任何人都能做的，只有那些懂得如何利用狂熱模式的有經(jīng)驗(yàn)的老手才能熟練掌握而不至于造成難看的效果。

下面是應(yīng)用這種創(chuàng)意效果非常好的一個(gè)實(shí)例。改良后的菱形圖案格調(diào)的應(yīng)用并沒(méi)有特別出格地吸引你的注意力，而是給頁(yè)面帶來(lái)了非常好的華美情調(diào)。

9. 抽象和狂熱設(shè)計(jì)

是否你已經(jīng)厭倦了我的關(guān)于微妙設(shè)計(jì)技巧的”謹(jǐn)慎”或”放松”的建議？那么這個(gè)提示就是給你的。有時(shí)候，最好的背景可能就是一些對(duì)頁(yè)面內(nèi)容無(wú)關(guān)緊要地狂熱和大膽的表現(xiàn)，它們只是為了吸引你的注意。

一些網(wǎng)站都非常好地實(shí)現(xiàn)了水彩畫的效果，這是一種非常流行的技巧，你能夠發(fā)現(xiàn)非常多地網(wǎng)絡(luò)資源可以模仿。

試用Flickr搜索”abstract watercolor” （抽象水彩畫）看看你會(huì)發(fā)現(xiàn)什么。那里有海量的廉價(jià)圖片，足夠幫助讓你的網(wǎng)頁(yè)獲得更多人的關(guān)注。

10. 無(wú)須避免純色設(shè)計(jì)

以上所有建議都是要滿足你成就偉大網(wǎng)站背景創(chuàng)意的需求。但是，對(duì)于一個(gè)設(shè)計(jì)者必須要明白，純色背景并沒(méi)有任何不對(duì)的地方。它是我的特別喜愛的眾多設(shè)計(jì)中的關(guān)鍵元素。學(xué)會(huì)如何恰當(dāng)?shù)貞?yīng)用純色創(chuàng)意是成為一個(gè)設(shè)計(jì)者的重要組成部分。

瀏覽一下Piknik，那里提供了很多免費(fèi)工具，你最好一定要加到你的設(shè)計(jì)資源庫(kù)里。這個(gè)網(wǎng)站能讓你對(duì)屏幕顏色的預(yù)覽和選擇變得非常簡(jiǎn)單。你要做的只是移動(dòng)鼠標(biāo)，觀察背景的顏色變化。

 

總結(jié)

背景的選擇決定著你整個(gè)網(wǎng)站的基調(diào)和個(gè)性。就在前兩天，我的一個(gè)同行有意將他的網(wǎng)站置入我們的宣傳目錄，但是他們只是選擇了一個(gè)特別差的背景圖片。這個(gè)網(wǎng)站的設(shè)計(jì)和布局非常好，我就是不能容忍那個(gè)難看的背景。之后，他接受了我所指出的問(wèn)題，并把背景變換成了一種更簡(jiǎn)潔的風(fēng)格，直接把網(wǎng)站提高到了一個(gè)全新的水平。

就像在開場(chǎng)白所說(shuō)的那樣，下一次當(dāng)你糾結(jié)于設(shè)計(jì)常規(guī)而不能選擇合適網(wǎng)頁(yè)背景的時(shí)候，再來(lái)看一下我們這篇文章，嘗試其中的某種創(chuàng)意?？傆幸惶?，你也會(huì)抵達(dá)完美網(wǎng)站的彼岸。

原文地址：article.yeeyan.org