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

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了網(wǎng)頁(yè)設(shè)計(jì)中的色彩搭配應(yīng)用范文，希望能給你帶來靈感和參考，敬請(qǐng)閱讀。

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

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

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

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

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

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

色彩可以使平淡的東西瞬間變得靚麗無比，它有著魔幻般的力量，它可以給予某樣?xùn)|西鮮亮的生命，但它也可以使我們本來高漲的情緒轉(zhuǎn)瞬跌入萬丈深淵。網(wǎng)頁(yè)色彩是網(wǎng)頁(yè)制作設(shè)計(jì)的重要部分，屬于核心內(nèi)容，網(wǎng)站色彩的選擇非常重要，我們?yōu)g覽一個(gè)網(wǎng)站，我們最先看到的是網(wǎng)站的色彩，這也是最容易吸引人的部分，如果網(wǎng)頁(yè)色彩搭配效果較好，才能夠讓人流連忘返，用戶才有興趣花時(shí)間翻看網(wǎng)站的其他內(nèi)容。色彩的選擇和搭配是否合適，很大程度會(huì)影響訪問者的心情。所以，我們?cè)O(shè)計(jì)者在對(duì)網(wǎng)頁(yè)設(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í)也象征著活潑，生命力，及具有鮮明的沿海特色。一個(gè)網(wǎng)站不能只使用一種顏色，否則會(huì)讓人感覺非常單調(diào)又乏味，但是也不能把所有的顏色都應(yīng)用到網(wǎng)站中，這樣看起來會(huì)覺得太花哨、太俗氣。網(wǎng)站的設(shè)計(jì)原則是一個(gè)網(wǎng)站最好有一種至三種主體色，可以這么說，網(wǎng)站的主體色的確定是網(wǎng)頁(yè)制作者最重要的決定。制作中，大部分的設(shè)計(jì)者把白色作為背景色，除了白色背景以外大量使用的顏色，就是指網(wǎng)站的主體色?，F(xiàn)在很多著名門戶網(wǎng)站的主頁(yè)都有自己的特色，都選擇一種主體色作為網(wǎng)站的色調(diào)。網(wǎng)頁(yè)的分支頁(yè)盡量不要使用太多的色調(diào)，太多的色調(diào)使用會(huì)讓人覺得凌亂、不夠穩(wěn)重。主體色確定后，再考慮其他色彩方案。不同的顏色搭配在一起給人的感覺也會(huì)有所不同，色調(diào)、明暗不同，搭配在一起也會(huì)給訪問者感覺不同。我們?cè)谶x擇一種顏色后，可以在這種顏色上變淺、加深或者加亮，再在同一頁(yè)面顯示同種顏色不同明度所達(dá)成的效果。網(wǎng)頁(yè)設(shè)計(jì)色彩的搭配還需要考慮人的生理特點(diǎn)，色彩搭配一定要合理，要給人一種和諧、愉快的感覺，避免采用純度很高的單一色彩，這樣很容易讓訪問者造成視覺疲勞，也容易造成訪問者不再對(duì)此網(wǎng)站有訪問的興趣。

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

我們?cè)诰W(wǎng)站制作(設(shè)計(jì))時(shí)，要保證色彩應(yīng)用的獨(dú)特性，突出主題，能夠讓訪問者瞬間喜歡瀏覽主頁(yè)，充分起到吸引瀏覽者的作用。因此我們要在網(wǎng)頁(yè)制作中注重色彩的搭配，使網(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)站的所有頁(yè)面，還可以根椐不同的分支頁(yè)面再輔助其他顏色進(jìn)行搭配。在搭配網(wǎng)頁(yè)色彩之前最好要先搞明白網(wǎng)站的主題和網(wǎng)站的服務(wù)對(duì)象，還有制作者希望通過色彩達(dá)到的目的。2)文字和背景的搭配網(wǎng)頁(yè)制作的原則一般是背景色應(yīng)該使用淡一些或者素一點(diǎn)的色彩，然后再搭配深色的文字，這樣處理的結(jié)果會(huì)讓訪問者看起來比較舒暢。制作者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)還要考慮突出文字效果，背景只是一個(gè)襯托，用來表達(dá)公司相關(guān)業(yè)務(wù)的主題思想。文字和背景的搭配要簡(jiǎn)單易懂、適當(dāng)合理，最佳的設(shè)計(jì)理念是要吸引成千上萬的網(wǎng)頁(yè)訪問者進(jìn)行瀏覽網(wǎng)站，這也是高校計(jì)算機(jī)專業(yè)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)制作(設(shè)計(jì))最核心的內(nèi)容，也是學(xué)生是否成功掌握網(wǎng)頁(yè)色彩合理搭配最高的境界。3)LOGO要突出網(wǎng)頁(yè)的LOGO是公司的重要標(biāo)志，也是宣傳網(wǎng)站最重要的商標(biāo)，因此，LOGO一定要在網(wǎng)頁(yè)中突出，最好要將LOGO做得鮮明靚麗一點(diǎn)，也就是色彩方面跟網(wǎng)頁(yè)的主色彩分離出來。LOGO對(duì)一個(gè)公司非常重要，訪問者在瀏覽網(wǎng)頁(yè)時(shí)停留的時(shí)間非常短暫，所以我們要在網(wǎng)站的每一頁(yè)都標(biāo)清楚公司的LOGO，讓訪問者在快速瀏覽中第一時(shí)間記住并且停留下來繼續(xù)瀏覽的意愿。4)導(dǎo)航按鈕的應(yīng)用導(dǎo)航按鈕是網(wǎng)站的指路燈。網(wǎng)頁(yè)中的導(dǎo)航按鈕的基本作用就是為了讓訪問者在瀏覽網(wǎng)頁(yè)的時(shí)候不至于迷失方向，而且可以通過它快速回到網(wǎng)站首頁(yè)以及其他相關(guān)內(nèi)容的界面。如果訪問者瀏覽網(wǎng)頁(yè)時(shí)，沒有醒目的導(dǎo)航按鈕，會(huì)很容易在網(wǎng)頁(yè)中迷失，這樣會(huì)給訪問者不好的印象，下次人家就不一定喜歡訪問你的網(wǎng)站了。所以我們可以使用一些極具吸引力的色彩，吸引訪問者的瀏覽視線，讓他們感覺網(wǎng)站還不錯(cuò)，值得訪問，最終達(dá)到訪問者可以迅速快捷地找到自己想要到達(dá)的頁(yè)面。5)網(wǎng)頁(yè)制作在色彩搭配中的注意事項(xiàng)有部分新手在學(xué)做網(wǎng)頁(yè)時(shí)，全部使用單色調(diào)，確實(shí)是將網(wǎng)站內(nèi)容都羅列出來了，但是只有單一背景或者簡(jiǎn)單使用彩色字體，這樣的設(shè)計(jì)太過于簡(jiǎn)單了，沒有創(chuàng)新點(diǎn)，不能給訪問者留下深刻印象。因此我們應(yīng)該在制作時(shí)盡量不要采用這樣的單一色調(diào)方法，如果確實(shí)沒有辦法要采用的話，最好能通過調(diào)整色彩的透明度和飽和度進(jìn)行一定的變化，盡量使網(wǎng)頁(yè)變得生動(dòng)車點(diǎn)。還有制作網(wǎng)頁(yè)時(shí)，背景盡量不要采用五花八門比較復(fù)雜的圖片或者純度非常高的色彩作為網(wǎng)頁(yè)背景色，盡量做到文字和背景有比較清晰的對(duì)比度，而且最好背景和文字的色彩對(duì)比要比較鮮明，不然會(huì)導(dǎo)致色彩顛倒，不能將網(wǎng)站的內(nèi)容很好表現(xiàn)出來。一個(gè)網(wǎng)頁(yè)的設(shè)計(jì)不要選擇太多的色彩數(shù)量，往往有不少的新手在制作網(wǎng)頁(yè)時(shí)會(huì)使用很多種不同的顏色，這樣會(huì)使得網(wǎng)頁(yè)很亂，也很“花”，雖然一眼看上去顯得好像五彩繽紛，但是再慢慢觀察，就會(huì)覺得缺少統(tǒng)一協(xié)調(diào)感，沒有內(nèi)在的美感，不能引人入勝，網(wǎng)頁(yè)就不能有很好的訪問量。最后，色彩的搭配要根據(jù)網(wǎng)站的主辦單位特色及網(wǎng)站主題來選擇好主色調(diào)，主頁(yè)面最好是控制在一到兩種色彩，整個(gè)頁(yè)面色彩不要超過三種顏色，還要充分研究各種色彩之間的關(guān)系，使得瀏覽訪問者在瀏覽時(shí)達(dá)到比較平順又鮮明及悅目的視覺效果，使訪問者有興趣長(zhǎng)期停留在本網(wǎng)站閱讀。

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

網(wǎng)頁(yè)制作要考慮網(wǎng)頁(yè)樣式與布局(CSS+DIV)的設(shè)計(jì)，也要合理使用色彩搭配的相關(guān)原則，也要遵守相應(yīng)的規(guī)律。網(wǎng)站代表了企業(yè)單位和個(gè)人的形象，正確的布局或要讓網(wǎng)站結(jié)構(gòu)更加合理，使網(wǎng)站變得更加美觀。1)網(wǎng)頁(yè)制作需要配色的是畫布在網(wǎng)頁(yè)制作設(shè)計(jì)中最根本的原則是，無論我們花了多少時(shí)間創(chuàng)造了一個(gè)輝煌的設(shè)計(jì)，其最終的作用是發(fā)揮出內(nèi)容的核心位置。網(wǎng)頁(yè)的配色方案永遠(yuǎn)不應(yīng)該比它呈現(xiàn)的內(nèi)容的更加“響亮”。網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該是在后臺(tái)，目的是幫助突出網(wǎng)站的內(nèi)容2)網(wǎng)頁(yè)制作要使用素一點(diǎn)的灰色作為網(wǎng)站的基調(diào)色我們可以給網(wǎng)站基調(diào)選擇無數(shù)種顏色，但最好采用比較素的顏色，例如白色/淺灰色與深灰色的搭配文字背景。大家可以看看任何熱門的網(wǎng)站、模版、主題，白色或淺灰色與深灰色搭配成了大多數(shù)的選擇，這當(dāng)然也是有充分理由的。這樣的搭配對(duì)訪客而言提高了你內(nèi)容的可讀性，并且把你的圖片突出在最前方。3)主色調(diào)突出顯示網(wǎng)頁(yè)設(shè)計(jì)中如果使用好幾種不同的色調(diào)，配色方案絕大多數(shù)會(huì)存在較多問題。網(wǎng)頁(yè)中色調(diào)用得越多，網(wǎng)頁(yè)的頁(yè)面就很難進(jìn)行設(shè)計(jì)。因此，網(wǎng)頁(yè)的設(shè)計(jì)以灰色基調(diào)的前提下，最好只選擇一種鮮艷的色調(diào)來作為想要突出的事物，例如主標(biāo)題、主菜單以及導(dǎo)航按鈕等。網(wǎng)頁(yè)中常用的高亮顏色主要有紅色、黃色、藍(lán)色，等等。最好使用與你的基調(diào)顏色相近的高亮顏色。打開顏色選擇器，并單擊你彩色方塊的中心。當(dāng)然，這些顏色的選擇都不是固定死的。4)如果出現(xiàn)選擇困難時(shí)，可以使用藍(lán)色色調(diào)網(wǎng)頁(yè)設(shè)計(jì)中如果對(duì)高亮色的選擇舉棋不定的話，可以考慮使用藍(lán)色。藍(lán)色是一種彈性比較大的顏色，可以和很多種顏色靈活搭配。綠色和黃色也很不錯(cuò)，但如果運(yùn)用不當(dāng)反而會(huì)使得網(wǎng)頁(yè)沒有達(dá)到原先設(shè)計(jì)的效果。而且，網(wǎng)頁(yè)設(shè)計(jì)中如果運(yùn)用藍(lán)色進(jìn)行設(shè)計(jì)，那么用錯(cuò)顏色的概率就會(huì)很低。所以在設(shè)計(jì)中正猶豫著不知道用什么顏色好，就可以使用藍(lán)色來設(shè)計(jì)。合適一點(diǎn)的藍(lán)色包括從H235到H190，比如深藍(lán)色到海軍藍(lán)。5)網(wǎng)頁(yè)制作中增加高亮色進(jìn)行變化設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)中如果使用了高亮的顏色，可以從該點(diǎn)移動(dòng)滑塊來選擇接下來的顏色。在設(shè)計(jì)中也需要其他的顏色，高亮色的細(xì)微變化會(huì)讓網(wǎng)頁(yè)設(shè)計(jì)中的顏色選擇變得簡(jiǎn)單。

5結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

作者:陳永海 單位:北海職業(yè)學(xué)院