淺析網(wǎng)頁設(shè)計(jì)中色彩搭配的應(yīng)用

陳永海

摘要：研究色彩是為了最大限度地發(fā)揮色彩的作用，也是為了更好地使用色彩。色彩的意義與內(nèi)容在藝術(shù)創(chuàng)造和表現(xiàn)方面是復(fù)雜多變的，是一種很美的大眾語言。色彩具有無限的魅力，它可以讓網(wǎng)頁中本來很平淡的部分瞬間就能變得靚麗，令人回味無窮?，F(xiàn)在高校計(jì)算機(jī)專業(yè)都開設(shè)有網(wǎng)頁制作（設(shè)計(jì)）這門課程，如何制作漂亮的網(wǎng)頁是這門課程的任務(wù)，我們這里講的網(wǎng)頁色彩，是大眾登錄網(wǎng)頁頁面時(shí)的第一印象，漂亮的色彩搭配能夠馬上吸引網(wǎng)頁訪問者，給看到的人們一種賞心悅目的美感。一個(gè)網(wǎng)站的網(wǎng)頁設(shè)計(jì)是否成功，在很大程度上取決于設(shè)計(jì)者對色彩的應(yīng)用與搭配。

關(guān)鍵詞：網(wǎng)頁；設(shè)計(jì)；色彩；搭配

中圖分類號：TP37 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2017）29-0267-02

Abstract：We study the color is in order to make the color work maximally and try to use color better. The meaning and content of color is complex and changeable in artistic creation and performance， it is a very beautiful popular language. The color is charming， because It can make the part of the dull web page become beautiful and let you feel memorable. Nowadays， most colleges and universities are offering web-making （design） courses in computer majors， and how to make beautiful web pages is the main task of this course. When people enter the web page， the first impression in our eyes is the web color which we are talking about here. Its attractive color matching can attract web visitors immediately， which giving people a kind of appreciation of the beauty. So whether the webpage design is a success or not in a website， It depends largely on the application and collocation of color by the designer.

Key words： web page； design； color； collocation

隨著科技不斷地發(fā)展、我國的改革開放的逐步深入，我國經(jīng)濟(jì)快速發(fā)展，人們的生活水平越來越好，越來越多的人開始在網(wǎng)上通信、工作、購物、娛樂，電腦應(yīng)用已經(jīng)越來越受到大眾的喜愛，網(wǎng)絡(luò)逐漸步入平常百姓家，我們現(xiàn)在生活及學(xué)習(xí)越來越離不開網(wǎng)絡(luò)，而接入網(wǎng)絡(luò)之后，我們經(jīng)常要接觸的就是地球村中的網(wǎng)頁，而網(wǎng)頁設(shè)計(jì)者們想要設(shè)計(jì)出漂亮的網(wǎng)站，必須要對網(wǎng)頁的色彩進(jìn)行搭配。網(wǎng)站是當(dāng)今世界的一個(gè)重要信息交流平臺，一個(gè)網(wǎng)站的網(wǎng)頁制作水平的高低直接體現(xiàn)了網(wǎng)站的好壞，而現(xiàn)在網(wǎng)站、網(wǎng)頁制作不再像以前的網(wǎng)站一樣只是把各類信息羅列在頁面上就萬事大吉了，而是要運(yùn)用各種技術(shù)手段將網(wǎng)站進(jìn)行化裝，提高人們打開網(wǎng)頁的興趣，提高網(wǎng)頁的訪問量，使更多的用戶在日常工作生活中都樂于打開你所制作的網(wǎng)站，進(jìn)而發(fā)展成會員，保證有固定的用戶，那就算成功了。而要達(dá)到這樣的效果，那就必須在網(wǎng)頁設(shè)計(jì)中好好研究一下網(wǎng)頁的色彩搭配?，F(xiàn)在我們就來對網(wǎng)頁設(shè)計(jì)中的色彩搭配進(jìn)行學(xué)習(xí)和探討。

1 認(rèn)識網(wǎng)頁色彩

網(wǎng)站是一個(gè)公司形象和品牌的重要宣傳陣地，有著代表公司形象的作用，現(xiàn)在很多公司對網(wǎng)網(wǎng)站越來越重視。網(wǎng)頁則是一個(gè)網(wǎng)站的門面，是公司的網(wǎng)絡(luò)商標(biāo)，如何設(shè)計(jì)一個(gè)吸引大眾訪問的網(wǎng)站越來越重要。而網(wǎng)頁的設(shè)計(jì)包括網(wǎng)頁的布局、網(wǎng)頁的色彩搭配、網(wǎng)頁主題的表達(dá)。網(wǎng)頁色彩的設(shè)計(jì)是一個(gè)網(wǎng)站設(shè)計(jì)非常重要環(huán)節(jié)，色彩主要有明度、色相和純度三個(gè)特征。明度是指物體反射光的量。物體反射的光越多，它的色彩明度就越高。我們在設(shè)計(jì)網(wǎng)頁時(shí)，應(yīng)該注意前景色、背景色及網(wǎng)頁各部分之間的色彩明度要相互協(xié)調(diào)。比如：網(wǎng)頁的背景色的明度較低，應(yīng)該將網(wǎng)頁中的文字色彩選擇明度較高的色彩，不然，背景色和文字顏色相差不大，訪問者在瀏覽網(wǎng)頁時(shí)會感到非常不舒服。也不應(yīng)該選擇明度太高的色彩，否則，訪問者會覺得很刺眼。接下來我們來研究下色相，色相是色彩最重要的特性，是色彩的種類。在網(wǎng)頁制作時(shí)，如果選擇冷色相，如綠色、藍(lán)色，可以使網(wǎng)頁變得清新、高雅的效果。假如選擇暖色相，如橙色、黃色、紅色等就可以創(chuàng)造出非常溫馨的效果。

2 網(wǎng)頁色彩的搭配技巧

色彩可以使平淡的東西瞬間變得靚麗無比，它有著魔幻般的力量，它可以給予某樣?xùn)|西鮮亮的生命，但它也可以使我們本來高漲的情緒轉(zhuǎn)瞬跌入萬丈深淵。網(wǎng)頁色彩是網(wǎng)頁制作設(shè)計(jì)的重要部分，屬于核心內(nèi)容，網(wǎng)站色彩的選擇非常重要，我們?yōu)g覽一個(gè)網(wǎng)站，我們最先看到的是網(wǎng)站的色彩，這也是最容易吸引人的部分，如果網(wǎng)頁色彩搭配效果較好，才能夠讓人流連忘返，用戶才有興趣花時(shí)間翻看網(wǎng)站的其他內(nèi)容。色彩的選擇和搭配是否合適，很大程度會影響訪問者的心情。所以，我們設(shè)計(jì)者在對網(wǎng)頁設(shè)計(jì)時(shí)，我們要形成獨(dú)家的特點(diǎn)風(fēng)格，將色彩的應(yīng)用搭配運(yùn)用好，選擇主色調(diào)，突出本網(wǎng)站的風(fēng)格，達(dá)到制作的要求。也要高度重視主要色調(diào)的搭配運(yùn)用，要能夠反映本單位的精神面貌等。例如：北海職業(yè)學(xué)院網(wǎng)站藍(lán)色和白色相間，突出了北海市藍(lán)天白云的景象，同時(shí)也象征著活潑，生命力，及具有鮮明的沿海特色。endprint

一個(gè)網(wǎng)站不能只使用一種顏色，否則會讓人感覺非常單調(diào)又乏味，但是也不能把所有的顏色都應(yīng)用到網(wǎng)站中，這樣看起來會覺得太花哨、太俗氣。網(wǎng)站的設(shè)計(jì)原則是一個(gè)網(wǎng)站最好有一種至三種主體色，可以這么說，網(wǎng)站的主體色的確定是網(wǎng)頁制作者最重要的決定。制作中，大部分的設(shè)計(jì)者把白色作為背景色，除了白色背景以外大量使用的顏色，就是指網(wǎng)站的主體色?，F(xiàn)在很多著名門戶網(wǎng)站的主頁都有自己的特色，都選擇一種主體色作為網(wǎng)站的色調(diào)。網(wǎng)頁的分支頁盡量不要使用太多的色調(diào)，太多的色調(diào)使用會讓人覺得凌亂、不夠穩(wěn)重。主體色確定后，再考慮其他色彩方案。

不同的顏色搭配在一起給人的感覺也會有所不同，色調(diào)、明暗不同，搭配在一起也會給訪問者感覺不同。我們在選擇一種顏色后，可以在這種顏色上變淺、加深或者加亮，再在同一頁面顯示同種顏色不同明度所達(dá)成的效果。網(wǎng)頁設(shè)計(jì)色彩的搭配還需要考慮人的生理特點(diǎn)，色彩搭配一定要合理，要給人一種和諧、愉快的感覺，避免采用純度很高的單一色彩，這樣很容易讓訪問者造成視覺疲勞，也容易造成訪問者不再對此網(wǎng)站有訪問的興趣。

3 網(wǎng)頁色彩搭配在網(wǎng)頁制作（設(shè)計(jì)）中的應(yīng)用

我們在網(wǎng)站制作（設(shè)計(jì)）時(shí)，要保證色彩應(yīng)用的獨(dú)特性，突出主題，能夠讓訪問者瞬間喜歡瀏覽主頁，充分起到吸引瀏覽者的作用。因此我們要在網(wǎng)頁制作中注重色彩的搭配，使網(wǎng)站能夠脫穎而出，突出網(wǎng)站主題。

1） 確定網(wǎng)站主題思想

一個(gè)優(yōu)秀的網(wǎng)站的主題是設(shè)計(jì)者重點(diǎn)考慮的問題，最好有一種主體色，主體色彩一般可以用公司的標(biāo)準(zhǔn)色，也就是一旦提到某個(gè)公司，可以馬上進(jìn)入訪問者腦海的一個(gè)主題色彩。可以利用這個(gè)主色彩貫穿網(wǎng)站的所有頁面，還可以根椐不同的分支頁面再輔助其他顏色進(jìn)行搭配。在搭配網(wǎng)頁色彩之前最好要先搞明白網(wǎng)站的主題和網(wǎng)站的服務(wù)對象，還有制作者希望通過色彩達(dá)到的目的。

2） 文字和背景的搭配

網(wǎng)頁制作的原則一般是背景色應(yīng)該使用淡一些或者素一點(diǎn)的色彩，然后再搭配深色的文字，這樣處理的結(jié)果會讓訪問者看起來比較舒暢。制作者在設(shè)計(jì)網(wǎng)頁時(shí)還要考慮突出文字效果，背景只是一個(gè)襯托，用來表達(dá)公司相關(guān)業(yè)務(wù)的主題思想。文字和背景的搭配要簡單易懂、適當(dāng)合理，最佳的設(shè)計(jì)理念是要吸引成千上萬的網(wǎng)頁訪問者進(jìn)行瀏覽網(wǎng)站，這也是高校計(jì)算機(jī)專業(yè)學(xué)生學(xué)習(xí)網(wǎng)頁制作（設(shè)計(jì)）最核心的內(nèi)容，也是學(xué)生是否成功掌握網(wǎng)頁色彩合理搭配最高的境界。

3） LOGO要突出

網(wǎng)頁的LOGO是公司的重要標(biāo)志，也是宣傳網(wǎng)站最重要的商標(biāo)，因此，LOGO一定要在網(wǎng)頁中突出，最好要將LOGO做得鮮明靚麗一點(diǎn)，也就是色彩方面跟網(wǎng)頁的主色彩分離出來。LOGO對一個(gè)公司非常重要，訪問者在瀏覽網(wǎng)頁時(shí)停留的時(shí)間非常短暫，所以我們要在網(wǎng)站的每一頁都標(biāo)清楚公司的LOGO，讓訪問者在快速瀏覽中第一時(shí)間記住并且停留下來繼續(xù)瀏覽的意愿。

4） 導(dǎo)航按鈕的應(yīng)用

導(dǎo)航按鈕是網(wǎng)站的指路燈。網(wǎng)頁中的導(dǎo)航按鈕的基本作用就是為了讓訪問者在瀏覽網(wǎng)頁的時(shí)候不至于迷失方向，而且可以通過它快速回到網(wǎng)站首頁以及其他相關(guān)內(nèi)容的界面。如果訪問者瀏覽網(wǎng)頁時(shí)，沒有醒目的導(dǎo)航按鈕，會很容易在網(wǎng)頁中迷失，這樣會給訪問者不好的印象，下次人家就不一定喜歡訪問你的網(wǎng)站了。所以我們可以使用一些極具吸引力的色彩，吸引訪問者的瀏覽視線，讓他們感覺網(wǎng)站還不錯(cuò)，值得訪問，最終達(dá)到訪問者可以迅速快捷地找到自己想要到達(dá)的頁面。

5） 網(wǎng)頁制作在色彩搭配中的注意事項(xiàng)

有部分新手在學(xué)做網(wǎng)頁時(shí)，全部使用單色調(diào)，確實(shí)是將網(wǎng)站內(nèi)容都羅列出來了，但是只有單一背景或者簡單使用彩色字體，這樣的設(shè)計(jì)太過于簡單了，沒有創(chuàng)新點(diǎn)，不能給訪問者留下深刻印象。因此我們應(yīng)該在制作時(shí)盡量不要采用這樣的單一色調(diào)方法，如果確實(shí)沒有辦法要采用的話，最好能通過調(diào)整色彩的透明度和飽和度進(jìn)行一定的變化，盡量使網(wǎng)頁變得生動車點(diǎn)。

還有制作網(wǎng)頁時(shí)，背景盡量不要采用五花八門比較復(fù)雜的圖片或者純度非常高的色彩作為網(wǎng)頁背景色，盡量做到文字和背景有比較清晰的對比度，而且最好背景和文字的色彩對比要比較鮮明，不然會導(dǎo)致色彩顛倒，不能將網(wǎng)站的內(nèi)容很好表現(xiàn)出來。

一個(gè)網(wǎng)頁的設(shè)計(jì)不要選擇太多的色彩數(shù)量，往往有不少的新手在制作網(wǎng)頁時(shí)會使用很多種不同的顏色，這樣會使得網(wǎng)頁很亂，也很“花”，雖然一眼看上去顯得好像五彩繽紛，但是再慢慢觀察，就會覺得缺少統(tǒng)一協(xié)調(diào)感，沒有內(nèi)在的美感，不能引人入勝，網(wǎng)頁就不能有很好的訪問量。

最后，色彩的搭配要根據(jù)網(wǎng)站的主辦單位特色及網(wǎng)站主題來選擇好主色調(diào)，主頁面最好是控制在一到兩種色彩，整個(gè)頁面色彩不要超過三種顏色，還要充分研究各種色彩之間的關(guān)系，使得瀏覽訪問者在瀏覽時(shí)達(dá)到比較平順又鮮明及悅目的視覺效果，使訪問者有興趣長期停留在本網(wǎng)站閱讀。

4 網(wǎng)頁色彩搭配的原則

網(wǎng)頁制作要考慮網(wǎng)頁樣式與布局（CSS+DIV）的設(shè)計(jì)，也要合理使用色彩搭配的相關(guān)原則，也要遵守相應(yīng)的規(guī)律。網(wǎng)站代表了企業(yè)單位和個(gè)人的形象，正確的布局或要讓網(wǎng)站結(jié)構(gòu)更加合理，使網(wǎng)站變得更加美觀。

1） 網(wǎng)頁制作需要配色的是畫布

在網(wǎng)頁制作設(shè)計(jì)中最根本的原則是，無論我們花了多少時(shí)間創(chuàng)造了一個(gè)輝煌的設(shè)計(jì)，其最終的作用是發(fā)揮出內(nèi)容的核心位置。網(wǎng)頁的配色方案永遠(yuǎn)不應(yīng)該比它呈現(xiàn)的內(nèi)容的更加“響亮”。網(wǎng)頁設(shè)計(jì)應(yīng)該是在后臺，目的是幫助突出網(wǎng)站的內(nèi)容。

2） 網(wǎng)頁制作要使用素一點(diǎn)的灰色作為網(wǎng)站的基調(diào)色

我們可以給網(wǎng)站基調(diào)選擇無數(shù)種顏色，但最好采用比較素的顏色，例如白色/淺灰色與深灰色的搭配文字背景。大家可以看看任何熱門的網(wǎng)站、模版、主題，白色或淺灰色與深灰色搭配成了大多數(shù)的選擇，這當(dāng)然也是有充分理由的。這樣的搭配對訪客而言提高了你內(nèi)容的可讀性，并且把你的圖片突出在最前方。

3） 主色調(diào)突出顯示endprint

網(wǎng)頁設(shè)計(jì)中如果使用好幾種不同的色調(diào)，配色方案絕大多數(shù)會存在較多問題。網(wǎng)頁中色調(diào)用得越多，網(wǎng)頁的頁面就很難進(jìn)行設(shè)計(jì)。因此，網(wǎng)頁的設(shè)計(jì)以灰色基調(diào)的前提下，最好只選擇一種鮮艷的色調(diào)來作為想要突出的事物，例如主標(biāo)題、主菜單以及導(dǎo)航按鈕等。網(wǎng)頁中常用的高亮顏色主要有紅色、黃色、藍(lán)色，等等。最好使用與你的基調(diào)顏色相近的高亮顏色。打開顏色選擇器，并單擊你彩色方塊的中心。當(dāng)然，這些顏色的選擇都不是固定死的。

4） 如果出現(xiàn)選擇困難時(shí)，可以使用藍(lán)色色調(diào)

網(wǎng)頁設(shè)計(jì)中如果對高亮色的選擇舉棋不定的話，可以考慮使用藍(lán)色。藍(lán)色是一種彈性比較大的顏色，可以和很多種顏色靈活搭配。綠色和黃色也很不錯(cuò)，但如果運(yùn)用不當(dāng)反而會使得網(wǎng)頁沒有達(dá)到原先設(shè)計(jì)的效果。而且，網(wǎng)頁設(shè)計(jì)中如果運(yùn)用藍(lán)色進(jìn)行設(shè)計(jì)，那么用錯(cuò)顏色的概率就會很低。所以在設(shè)計(jì)中正猶豫著不知道用什么顏色好，就可以使用藍(lán)色來設(shè)計(jì)。合適一點(diǎn)的藍(lán)色包括從H235到H190，比如深藍(lán)色到海軍藍(lán)。

5） 網(wǎng)頁制作中增加高亮色進(jìn)行變化設(shè)計(jì)

網(wǎng)頁設(shè)計(jì)中如果使用了高亮的顏色，可以從該點(diǎn)移動滑塊來選擇接下來的顏色。在設(shè)計(jì)中也需要其他的顏色，高亮色的細(xì)微變化會讓網(wǎng)頁設(shè)計(jì)中的顏色選擇變得簡單。

5 結(jié)束語

通過對網(wǎng)頁色彩搭配的探討，我們認(rèn)識了網(wǎng)頁中的色彩，了解了網(wǎng)頁中色彩的合理搭配，網(wǎng)頁制作（設(shè)計(jì)）中的色彩，能夠使我們的網(wǎng)頁制作及設(shè)計(jì)更加豐富多彩。色彩的不同表達(dá)的心理就不同， 不同的色彩搭配也可以制作出完全不同的網(wǎng)頁效果。一個(gè)完美的網(wǎng)站需要完美的色彩搭配設(shè)計(jì)，一個(gè)完美的色彩搭配可以成全一個(gè)完美的網(wǎng)頁，所以，網(wǎng)頁色彩搭配的應(yīng)用在網(wǎng)頁制作及設(shè)計(jì)中的作用是舉足輕重的，只要是創(chuàng)作就離不開色彩?？傊?，色彩搭配不僅是一種技術(shù)層面上的工作，更是一種具體藝術(shù)性很強(qiáng)的工作，我們要想制作出讓人流連忘返的網(wǎng)頁，還要通過不斷的實(shí)踐操作進(jìn)行探索。

參考文獻(xiàn)：

[1] 李鏡，李忠明.淺談網(wǎng)頁設(shè)計(jì)中色彩搭配的運(yùn)用[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2011（6）：26-27.

[2] 公希萌.網(wǎng)頁設(shè)計(jì)色彩搭配[J].科技信息，2012（36）：299-300.

[3] 楊超.網(wǎng)頁設(shè)計(jì)中色彩搭配的探討[J].江蘇第二師范學(xué)院學(xué)報(bào)：自然科學(xué)版，2006 （1）：121-122.

[4] 劉玉紅.CSS3+DIV網(wǎng)頁樣式與布局案例課堂[M].清華大學(xué)出版社，2011.

[5] 李愛國.網(wǎng)頁設(shè)計(jì)中的色彩搭配[J].湖南農(nóng)機(jī)：學(xué)術(shù)版， 2012 ， 39 （6）：79-79.endprint