淺談網(wǎng)站設(shè)計(jì)風(fēng)格和色彩搭配

中圖分類號(hào)：J0文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1008-925X(2011)09-00-01

摘要：網(wǎng)站的風(fēng)格決定網(wǎng)頁(yè)的色彩，網(wǎng)頁(yè)的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，色彩搭配卻是一個(gè)頭疼的問題。網(wǎng)頁(yè)的背景，文字，圖標(biāo)，邊框，超鏈接等，應(yīng)該采用什么樣的色彩，應(yīng)該搭配什么色彩才能最好的表達(dá)出預(yù)想的內(nèi)涵呢？本文將簡(jiǎn)單闡述網(wǎng)站的設(shè)計(jì)風(fēng)格與色彩搭配的原則。

關(guān)鍵詞：網(wǎng)頁(yè)；風(fēng)格；色彩

設(shè)計(jì)網(wǎng)站需要考慮的因素非常之多，從前期網(wǎng)站開始時(shí)的定位、設(shè)定網(wǎng)站框架、整理資料，到具體制作中的設(shè)計(jì)環(huán)節(jié)，再到最后的調(diào)試、發(fā)布、宣傳。這是一個(gè)環(huán)環(huán)相扣的過程。在此我們僅討論下設(shè)計(jì)網(wǎng)站時(shí)重要的兩大部分：整體風(fēng)格和色彩搭配。

1、 確定網(wǎng)站的整體風(fēng)格

網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最難以學(xué)習(xí)的，因?yàn)闆]有一個(gè)固定的模式可以參照和模仿。任意一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。風(fēng)格是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的標(biāo)志、色彩、字體、標(biāo)語(yǔ)、版面布局、瀏覽方式、交互性、文字、語(yǔ)氣、內(nèi)容價(jià)值、存在意義、站點(diǎn)榮譽(yù)等等諸多因素。如：網(wǎng)易是平易近人的，迪斯尼是生動(dòng)活潑的，IBM是專業(yè)嚴(yán)肅的。這些感覺都是網(wǎng)站給人們留下的不同感受。如何讓這些感覺在網(wǎng)頁(yè)上體現(xiàn)出來：

（1）將標(biāo)志logo，盡可能的放在每個(gè)頁(yè)面上最突出的位置。

（2）突出網(wǎng)站的標(biāo)準(zhǔn)色彩。

（3）總結(jié)一句能反映網(wǎng)站精髓的宣傳標(biāo)語(yǔ)放在主頁(yè)上。

（4）相同類型的圖像采用相同效果，比如說標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的效果。

整個(gè)網(wǎng)站體現(xiàn)出的一種感覺就是這個(gè)網(wǎng)站的風(fēng)格，只有風(fēng)格統(tǒng)一了才能根據(jù)需要決定網(wǎng)站主色調(diào)。

2、網(wǎng)頁(yè)色彩的搭配

色彩是人視覺最敏感的東西。不同色彩之間的對(duì)比會(huì)有不同的效果，當(dāng)兩種顏色同時(shí)在一起時(shí)，這兩種色各自走向自已的極端，例如紅色與綠色對(duì)比，紅的更紅，綠的更綠，黑色與白色對(duì)比，黑的更黑，白的更白。由于人的視覺的不同，對(duì)比的效果通常會(huì)有不同。當(dāng)長(zhǎng)時(shí)間的看一種純色，例如紅色，然后再看看周圍的人，你會(huì)發(fā)現(xiàn)周圍的人臉色會(huì)成綠色，正是因?yàn)榧t色與周圍的對(duì)比，形成了視覺的刺激。色彩的對(duì)比會(huì)受很多因素影響，例如色彩的面積、時(shí)間、亮度等等。無(wú)論是平面設(shè)計(jì)，還是網(wǎng)頁(yè)設(shè)計(jì)，色彩永遠(yuǎn)是最重要的一環(huán)。

2.1網(wǎng)頁(yè)色彩的搭配意義

如何搭配顏色才能讓自己的主頁(yè)更加絢麗多彩，達(dá)到既不顯得呆板，又不至于過于亮麗而造成過強(qiáng)刺激的視覺效果。

（1）顏色是因?yàn)楣獾恼凵涠a(chǎn)生的。

（2）紅，黃，藍(lán)是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。網(wǎng)頁(yè)html語(yǔ)言中的色彩表達(dá)即是用這三種顏色的數(shù)值表示例如：紅色是color (255，0，0)十六進(jìn)制的表示方法為(FF0000)白色為(FFFFFF)， 我們經(jīng)常看到的“bgColor=#FFFFFF”就是指背景色為白色。

（3）顏色分非彩色和彩色兩類。非彩色是指黑，白，灰系統(tǒng)色。彩色是指除了非彩色以外的所有色彩。

（4）任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作幾百萬(wàn)種色彩。網(wǎng)頁(yè)制作用彩色還是非彩色好呢？根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁(yè)面較完全黑白頁(yè)面更加吸引人。

我們通常是要考慮主頁(yè)底色的深、淺，這里借用攝影中的一個(gè)術(shù)語(yǔ)，就是“高調(diào)”和“低調(diào)”。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容。這種深淺的變化在色彩學(xué)中稱為“明度變化”。有些主頁(yè)，底色是黑的，但文字也選用了較深的色彩，由于色彩的明度比較接近，在瀏覽網(wǎng)站時(shí)，眼睛就會(huì)感覺很吃力，影響了閱讀效果。當(dāng)然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強(qiáng)，同樣也會(huì)使眼睛受不了。

同時(shí)也要考慮色彩的象征意義。顏色得配置，可以流露出情感和喜好，也會(huì)暴露對(duì)顏色的駕馭程度。在色彩的運(yùn)用上，可以根據(jù)主頁(yè)內(nèi)容的需要和喜好，分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍裕纾耗劬G色、翠綠色、金黃、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個(gè)民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對(duì)于色彩的喜好也存在著較大的差異。充分運(yùn)用色彩的這些特性，可以使我們的主頁(yè)具有深刻的藝術(shù)內(nèi)涵，從而提升主頁(yè)的文化品位。 暗色中含高亮度的對(duì)比，會(huì)給人清晰、激烈、很有強(qiáng)烈的刺激如深黃到刺黃色。暗色中間含高亮度的對(duì)比，會(huì)給人沉著、穩(wěn)重、深沉的感覺覺，如深紅中間是刺紅，中性色與低高度的對(duì)比，給人模糊、朦朧、深?yuàn)W的感覺，如草綠中間是淺灰、純色與高亮度的對(duì)比，給人跳躍舞動(dòng)的感覺。如黃色與白色的純色與低亮度的對(duì)比，給人輕柔、歡快的感快。如淺藍(lán)色與白色純色與暗色的對(duì)比，給人強(qiáng)硬，不可改變的感覺。

2.2"網(wǎng)頁(yè)色彩搭配的原理及技巧

對(duì)色彩有了一定的了解，那么到底用什么色彩搭配好看呢？首先要把握好以下幾點(diǎn)原則：①色彩的鮮明性。網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目。②色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對(duì)你的印象強(qiáng)烈。③色彩的合適性。就是說色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。④色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想，藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。其次掌握下列技巧：①用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，產(chǎn)生新的色彩，用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來色彩統(tǒng)一，有層次感。②用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色，比如主頁(yè)用藍(lán)色和對(duì)比色黃色就是這樣確定的。整個(gè)頁(yè)面色彩豐富但不花稍。③用一個(gè)色系。簡(jiǎn)單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)等。④用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很”跳”。

在網(wǎng)頁(yè)配色中，忌諱的是：①不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。②背景和前文的對(duì)比盡量要大，絕對(duì)不要用花紋繁復(fù)的圖案作背景，以便突出主要文字內(nèi)容。

掌握好以上內(nèi)容，要設(shè)計(jì)出風(fēng)格統(tǒng)一色彩漂亮的網(wǎng)站就很容易了。