網(wǎng)站設(shè)計(jì)中的配色與布局解析

宋雅飛

摘要：在網(wǎng)站設(shè)計(jì)中，主要運(yùn)用超媒體鏈接技術(shù)，將網(wǎng)頁(yè)的文字、圖畫、聲音等進(jìn)行排列組合，使得網(wǎng)站設(shè)計(jì)得更加和諧，擁有自己的主題。一般來(lái)說(shuō)，人們打開網(wǎng)站給人的第一印象往往不是多么豐富的內(nèi)容，而是網(wǎng)站整體的布局與配色[1]。文章著重分析網(wǎng)站設(shè)計(jì)中的配色與布局，希望可以根據(jù)不同的網(wǎng)站需求進(jìn)行合理的色彩搭配和布局，從而制作出更具特色的網(wǎng)站。

關(guān)鍵詞：網(wǎng)站設(shè)計(jì);配色;布局;分析

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）16-0100-03

隨著信息時(shí)代的到來(lái)，互聯(lián)網(wǎng)的使用越來(lái)越廣泛，網(wǎng)站設(shè)計(jì)已經(jīng)不僅僅只是技術(shù)人員的追求，更是整個(gè)社會(huì)的趨勢(shì)。一個(gè)精彩的網(wǎng)頁(yè)設(shè)計(jì)會(huì)給用戶留下深刻的印象，使得用戶有著很好的體驗(yàn)。因此，制作網(wǎng)頁(yè)不是簡(jiǎn)簡(jiǎn)單單的拼湊，是需要我們用心來(lái)設(shè)計(jì)的，這樣才能制作出好的網(wǎng)頁(yè)，贏得用戶的喜愛(ài)。從網(wǎng)頁(yè)設(shè)計(jì)的布局、色彩搭配，都是整個(gè)網(wǎng)站設(shè)計(jì)中的重點(diǎn)，需要我們不斷去探索[2]。

1 網(wǎng)站設(shè)計(jì)中配色與布局的意義

互聯(lián)網(wǎng)已經(jīng)深入到人們的工作與生活中，是現(xiàn)在信息傳播的主要途徑，無(wú)論是購(gòu)物平臺(tái)還是某些App都會(huì)遇到網(wǎng)頁(yè)的設(shè)計(jì)問(wèn)題。當(dāng)人們上網(wǎng)查詢資料、購(gòu)物或者打游戲時(shí)，必然會(huì)進(jìn)入到網(wǎng)頁(yè)中，在眾多網(wǎng)頁(yè)中，用戶會(huì)如何抉擇呢，這可能就會(huì)取決于網(wǎng)頁(yè)的吸引程度。用戶第一眼看到網(wǎng)站時(shí)，沒(méi)有辦法一眼看完內(nèi)容，而是瀏覽網(wǎng)站的布局與配色，在整個(gè)網(wǎng)站的布局中，配色首當(dāng)其沖，會(huì)吸引用戶繼續(xù)往下觀看。如果網(wǎng)站的布局和色彩第一眼就讓用戶失去興趣，那用戶就可能不會(huì)選擇這家。所以，網(wǎng)站設(shè)計(jì)中配色與布局是具有現(xiàn)實(shí)意義的，是不容忽視的[3]。

在網(wǎng)頁(yè)設(shè)計(jì)的不斷研究與探索中進(jìn)行分析與總結(jié)，通過(guò)網(wǎng)絡(luò)問(wèn)卷調(diào)查，讓我們認(rèn)識(shí)到網(wǎng)站設(shè)計(jì)的布局與色彩搭配發(fā)揮的重要作用。數(shù)字化時(shí)代的到來(lái)使得網(wǎng)絡(luò)已逐漸代替報(bào)紙、廣播等等傳統(tǒng)媒介，正發(fā)揮著舉足輕重的作用。網(wǎng)站設(shè)計(jì)是近些年來(lái)發(fā)展的新興領(lǐng)域，新領(lǐng)域總會(huì)面臨著新挑戰(zhàn)，網(wǎng)絡(luò)本身就不似傳統(tǒng)的媒介，其構(gòu)成元素更加復(fù)雜，網(wǎng)站設(shè)計(jì)更是將專業(yè)技術(shù)與藝術(shù)相融合的學(xué)科，只有將圖像、文字、聲音等元素完美結(jié)合，才能設(shè)計(jì)出讓大眾滿意的網(wǎng)站。

色彩是藝術(shù)的主要表現(xiàn)形式，色彩的運(yùn)用主要分為有彩色和無(wú)彩色兩大類，在網(wǎng)站中合理運(yùn)用色彩會(huì)達(dá)到意想不到的視覺(jué)效果，例如平平無(wú)奇的網(wǎng)頁(yè)，會(huì)因?yàn)榻k麗的色彩搭配，而使得網(wǎng)頁(yè)變得賞心悅目。網(wǎng)絡(luò)時(shí)代的快速發(fā)展使得網(wǎng)站的范圍越來(lái)越廣，不僅僅有信息平臺(tái)還有娛樂(lè)平臺(tái)，時(shí)間的驗(yàn)證告訴我們只有簡(jiǎn)單的文字和圖片組成的網(wǎng)站，已經(jīng)無(wú)法滿足人們?nèi)找嬖鲩L(zhǎng)的審美需求，我們需要?jiǎng)?chuàng)造更有吸引力的網(wǎng)站。網(wǎng)站的布局和色彩搭配是用戶決定是否繼續(xù)觀看的重要因素[4]。為了符合時(shí)代的發(fā)展和用戶的需求，網(wǎng)站設(shè)計(jì)人員要將專業(yè)技術(shù)與藝術(shù)結(jié)合起來(lái)，在網(wǎng)站設(shè)計(jì)過(guò)程中不僅僅要加強(qiáng)專業(yè)技術(shù)能力，更要關(guān)注藝術(shù)，讓美觀與實(shí)用齊頭并進(jìn)。

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

每當(dāng)人們打開一個(gè)網(wǎng)站，映入眼簾第一眼看到的還是網(wǎng)站中的色彩搭配和合理的版面布局，特別是色彩搭配在整個(gè)網(wǎng)頁(yè)中的視覺(jué)效果是非常鮮明的，在一定程度上可以說(shuō)，一個(gè)網(wǎng)站設(shè)計(jì)的成功與否，色彩搭配的運(yùn)用占據(jù)首要地位。

2.1 色彩搭配原則

網(wǎng)站設(shè)計(jì)人員在制作網(wǎng)頁(yè)時(shí)，在考慮網(wǎng)站自身的類型、市場(chǎng)以及功能這些專業(yè)需求時(shí)，還會(huì)考慮藝術(shù)元素，色彩搭配就是其中非常重要的一點(diǎn)，運(yùn)用色彩的多樣性，從而設(shè)計(jì)出精美的網(wǎng)頁(yè)。色彩搭配一般遵循以下原則：一是色彩的鮮明性，色彩本身就有著鮮明亮麗的特點(diǎn)，在符合網(wǎng)站大方向的前提下，運(yùn)用色彩鮮明性的特點(diǎn)，鮮亮明艷非常容易吸引用戶的眼球，使其感受到耳目一新的感覺(jué)[5]。二是色彩的獨(dú)特性。別具一格才能煥然一新，如果每一個(gè)網(wǎng)站的色彩搭配都是相似的，那又有什么區(qū)別呢，在網(wǎng)站色彩搭配設(shè)計(jì)時(shí)，要考慮到色彩的獨(dú)有特性，這樣才能在眾多網(wǎng)站中站穩(wěn)腳跟。三是色彩的藝術(shù)性。色彩是藝術(shù)的表達(dá)形式，在網(wǎng)站設(shè)計(jì)時(shí)，定下網(wǎng)站基本主題后，我們還要加入不同的藝術(shù)表現(xiàn)形式。藝術(shù)是極具美感的，在網(wǎng)頁(yè)中融入色彩的藝術(shù)性，會(huì)給網(wǎng)站增光添彩。四是色彩搭配的合理性。研究表明，色彩是具有強(qiáng)大的精神影響力。色彩對(duì)人們的心理是具有潛移默化的影響，明艷的色彩會(huì)使得人們心情愉快，色彩在無(wú)形中左右我們的情緒。此外，有的網(wǎng)站是嚴(yán)肅的，不宜使用鮮亮的顏色，我們?cè)谑褂蒙蚀钆鋾r(shí)一定要考慮色彩的合理性。對(duì)于網(wǎng)站設(shè)計(jì)人員來(lái)說(shuō)，色彩的心理作用是特別關(guān)鍵的，我們?cè)谠O(shè)計(jì)時(shí)必須要考慮這一因素。現(xiàn)代社會(huì)是快節(jié)奏的時(shí)代，不同的網(wǎng)站主題應(yīng)該選用不同色彩，不能一概而論。例如，科技型網(wǎng)站使用藍(lán)色來(lái)表現(xiàn)，女性的網(wǎng)站可以使用粉紅色等。色彩的搭配不是想當(dāng)然的，是具有一定的依據(jù)，因此我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)要考慮到網(wǎng)站的主旨以及使用范圍等基本元素，合理敲定網(wǎng)頁(yè)的色彩搭配原則[6]。

2.2 色彩搭配方法

每一種顏色都有色調(diào)、飽和度、明度，色彩的運(yùn)用是純色之間的搭配組合，不同的顏色組合在一起會(huì)產(chǎn)生不一樣的效果，有的顏色之間組合起來(lái)會(huì)相得益彰，撞出不一樣的火花，有的顏色搭配在一起則非常不適合。這就是色彩的搭配，不是胡亂組合，是運(yùn)用色彩之間的關(guān)系和搭配方法，從而讓人眼前一亮。

2.2.1 同種色彩搭配

同種色彩搭配是指選定一種色彩，從而通過(guò)調(diào)整色彩的透明度和飽和度，使得顏色變淡或者變深，從而產(chǎn)生新的色彩。在設(shè)計(jì)的過(guò)程中，我們可以根據(jù)網(wǎng)站的需求進(jìn)行調(diào)節(jié)，尋找適合的色彩。運(yùn)用同種色彩搭配，使得網(wǎng)站主頁(yè)的色彩和諧統(tǒng)一，富有層次感[7]。

2.2.2 鄰近色彩搭配

鄰近色彩搭配是指在色相環(huán)上選取一色，在與選定的這個(gè)顏色距離九十度或者相隔五六個(gè)數(shù)位的顏色，這兩個(gè)顏色就是鄰近色，例如藍(lán)色與黃綠色。在網(wǎng)站設(shè)計(jì)的過(guò)程中，運(yùn)用鄰近色搭配，使得網(wǎng)站整體顏色趨于統(tǒng)一，避免網(wǎng)頁(yè)花花綠綠，錯(cuò)亂復(fù)雜。

2.2.3 對(duì)比色彩搭配

顏色對(duì)比是指將兩種顏色在透明度、飽和度上進(jìn)行明暗對(duì)比、深淺對(duì)比等等。運(yùn)用顏色對(duì)比搭配具有強(qiáng)烈的視覺(jué)沖突，產(chǎn)生較強(qiáng)的視覺(jué)效果，而且可以突出主旨，因此合理應(yīng)用對(duì)比色彩搭配，使得網(wǎng)站特點(diǎn)鮮明、主題突出。在網(wǎng)站設(shè)計(jì)的過(guò)程中，我們可以以一種色彩作為網(wǎng)站主色，使用對(duì)比色加以點(diǎn)綴，從而起到點(diǎn)睛之筆。本身色彩的對(duì)比就起到強(qiáng)調(diào)的作用，在網(wǎng)站設(shè)計(jì)中應(yīng)用，就是將主題發(fā)揮極致[8]。

2.2.4 色彩的黃金法則6：3：1

色彩的黃金法則是指網(wǎng)頁(yè)中的主色、輔助色和點(diǎn)綴色，其比例大致為6：3：1。通常來(lái)說(shuō)，網(wǎng)站的色彩設(shè)計(jì)會(huì)有60%的主色，30%的輔助色和10%的點(diǎn)綴色，這是黃金法則，實(shí)際運(yùn)用中居多。例如我們?cè)谠O(shè)計(jì)房間時(shí)，墻壁代表著60%的比例，運(yùn)用一種主色調(diào);家居用品和窗簾代表著30%的比例，運(yùn)用一種輔助色;裝飾用品則代表著10%的比例，起到畫龍點(diǎn)睛的作用，主要用來(lái)點(diǎn)綴，提升整體層次感。當(dāng)我們?cè)谠O(shè)計(jì)一個(gè)作品時(shí)，我們會(huì)敲定一個(gè)主色調(diào)，確定是選用暖色系還是冷色系，這就是我們所說(shuō)的主色調(diào)，大概占60%，是整體氣氛的奠定，30%的輔助色主要用為了搭配，平衡畫面，剩余的10%的作用就是起到點(diǎn)綴作用。在設(shè)計(jì)的過(guò)程中如果沒(méi)有搭配經(jīng)驗(yàn)，可以嘗試色彩的黃金法則，當(dāng)然我們要根據(jù)網(wǎng)站的背景、功能等方面敲定基本氛圍，然后再選擇色彩來(lái)搭配，發(fā)揮色彩的重要作用。

總之，網(wǎng)站設(shè)計(jì)中的色彩搭配是一門學(xué)問(wèn)，需要我們深入去探索。色彩是奧妙的，在網(wǎng)站設(shè)計(jì)的過(guò)程中，我們要敢于去探索色彩的奧妙與玄幻，將色彩的搭配運(yùn)用到極致。色彩搭配是網(wǎng)站設(shè)計(jì)中的重要環(huán)節(jié)，不是簡(jiǎn)單的組合，是值得我們深入地解析。

3網(wǎng)站設(shè)計(jì)中的布局應(yīng)用

在網(wǎng)站設(shè)計(jì)的過(guò)程中，除了要了解色彩搭配的基本原則和搭配方法之外，還要知悉網(wǎng)站的版式布局。網(wǎng)站的布局是具有核心地位的，合理的布局，劃分框架結(jié)構(gòu)合理，使得網(wǎng)站內(nèi)容有層次，才是一個(gè)有質(zhì)感的網(wǎng)站。網(wǎng)站的基本結(jié)構(gòu)就如同蓋房子一樣，只有打下牢固的地基，萬(wàn)丈高樓才會(huì)穩(wěn)固。網(wǎng)頁(yè)布局就是將網(wǎng)站的頁(yè)面化為不同的區(qū)域，按照每個(gè)區(qū)域的要求，將內(nèi)容放在相應(yīng)的位置上，并通過(guò)不同區(qū)域搭配不同的色彩，使得整個(gè)網(wǎng)站和諧統(tǒng)一。

網(wǎng)頁(yè)布局較為常見的使用方法為使用表格布局、使用層布局、使用框架布局，用戶可以根據(jù)網(wǎng)頁(yè)特點(diǎn)選擇適合的方法，每種方法都有著自身的好處與壞處。例如使用表格布局的優(yōu)點(diǎn)是簡(jiǎn)單好用，但缺點(diǎn)則是后期的修改與維護(hù)麻煩;使用層布局就規(guī)避了表格布局的缺點(diǎn)，使用框架和樣式進(jìn)行分離[9]。

網(wǎng)頁(yè)設(shè)計(jì)的第一步就是設(shè)計(jì)版面布局。與傳統(tǒng)的報(bào)紙一樣，首先就是進(jìn)行排版，所以我們要掌握網(wǎng)頁(yè)的基本布局。通過(guò)學(xué)習(xí)經(jīng)典的網(wǎng)站案例和實(shí)際操作過(guò)程中，筆者歸納總結(jié)了以下常見的布局結(jié)構(gòu)：

3.1 “國(guó)”字型布局

“國(guó)”字型布局又名“同”字型布局，網(wǎng)頁(yè)最上面的為網(wǎng)站的名字、主題以及廣告，緊接著是主要內(nèi)容，左右可以設(shè)置一些欄目，中間是主要部分，網(wǎng)頁(yè)最下邊是基本信息、號(hào)碼以及版權(quán)聲明等等。這種結(jié)構(gòu)主要運(yùn)用于一些大中型的網(wǎng)站，運(yùn)用此種布局可以充分使用版面，信息量充分，但是網(wǎng)頁(yè)布局會(huì)非常擁擠，且無(wú)法靈活變通。

3.2 “廠”字型布局

“廠”字型布局的整個(gè)結(jié)構(gòu)就像“廠”字，網(wǎng)頁(yè)的頂端和左邊為主導(dǎo)欄目，右邊則是主要內(nèi)容區(qū)域。此種布局在實(shí)際運(yùn)用中較為廣泛。

3.3 “框架”型布局

“框架”型布局分為左右框架型、上下框架型和綜合框架型。左右框架型布局是一種左右分為兩頁(yè)的框架結(jié)構(gòu)，通常是左邊為導(dǎo)航鏈接，最上面是標(biāo)題，右邊則是正文。很多的大型論壇就是運(yùn)用此種結(jié)構(gòu)，該類結(jié)構(gòu)分布較為清晰。上下框架型布局與左右型結(jié)構(gòu)布局較為相似，區(qū)別在于把頁(yè)面分為上下兩頁(yè)。綜合框架型相對(duì)復(fù)雜一點(diǎn)，是上面兩結(jié)構(gòu)的組合，例如“拐角型"布局?！翱蚣堋毙筒季值膬?yōu)點(diǎn)就是布局清晰，觀看清楚方便，但是缺點(diǎn)在于結(jié)構(gòu)變化不靈活。

3.4 封面型布局

封面型布局主要是出現(xiàn)在一些網(wǎng)站的首頁(yè)，封面型顧名思義就是精美的平面設(shè)計(jì)融入動(dòng)畫設(shè)計(jì)，并在動(dòng)畫上鏈入網(wǎng)站鏈接。封面型布局主要運(yùn)用于企業(yè)網(wǎng)站和個(gè)人主頁(yè)，封面設(shè)計(jì)得精美，會(huì)給人賞心悅目的感覺(jué)，其優(yōu)點(diǎn)就在此，引人注目，缺點(diǎn)就是不夠直觀，速度相對(duì)較慢。此種布局作為版面布局是值得運(yùn)用的，精美的封面是吸引人的第一道目光，會(huì)使得用戶想要去了解這個(gè)網(wǎng)站，從而對(duì)網(wǎng)頁(yè)產(chǎn)生興趣。

3.5 Flash型布局

Flash型布局與封面型布局結(jié)構(gòu)是相似的，但Flash型布局采用Flash，F(xiàn)lash本身就具有強(qiáng)大的功能，網(wǎng)站展現(xiàn)的信息就會(huì)非常豐富多樣，如果設(shè)計(jì)得合理，其視覺(jué)效果也是非?？捎^的[10]。

當(dāng)然，我們?cè)诰W(wǎng)站設(shè)計(jì)的實(shí)際過(guò)程中，并不是只有以上幾種布局類型，網(wǎng)站的布局是沒(méi)有固定模式的，只要是合理的布局，網(wǎng)站就會(huì)出彩。每一種布局只要稍作變化，就會(huì)產(chǎn)生不一樣的效果。因此，在網(wǎng)站設(shè)計(jì)的過(guò)程中要多多積累經(jīng)驗(yàn)，觀察他人的布局方式，取其精華，去其糟粕，遇到好的布局可以主動(dòng)學(xué)習(xí)。

4結(jié)束語(yǔ)

互聯(lián)網(wǎng)技術(shù)的快速發(fā)展使得網(wǎng)站設(shè)計(jì)的技術(shù)在不斷提高，與此同時(shí)也為網(wǎng)站設(shè)計(jì)人員帶來(lái)了更大的機(jī)遇與挑戰(zhàn)。如何設(shè)計(jì)精美的網(wǎng)站，如何把網(wǎng)站的內(nèi)容與形式完美結(jié)合，如何提高網(wǎng)頁(yè)的吸引力，這就要求我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)不僅僅要注重網(wǎng)站的主要內(nèi)容，還要注重色彩搭配和合理布局，這樣才能制作出精彩絕倫、別具一格的網(wǎng)頁(yè)。

參考文獻(xiàn)：

[1] 員勃.互聯(lián)網(wǎng)網(wǎng)頁(yè)界面中的信息設(shè)計(jì)研究[J].現(xiàn)代商貿(mào)工業(yè)，2014，26（7）：173-175.

[2] 楊旭蘭.色彩在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究[D].南京：南京林業(yè)大學(xué)，2009.

[3] 鄭望平.網(wǎng)頁(yè)設(shè)計(jì)中的色彩運(yùn)用與研究[D].蘭州：西北師范大學(xué)，2012.

[4] 黎芳.網(wǎng)頁(yè)設(shè)計(jì)與配色實(shí)例分析[M].北京：北京希望電子出版社，2006.

[5] 楊諾.電腦色彩構(gòu)成設(shè)計(jì)教程[M].天津：天津大學(xué)出版社，2008.

[6] 劉娜，易月娥，鄧子娟.淺析網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面布局[J].長(zhǎng)沙民政職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2005，12（4）：116-118.

[7] 黃紅燕.基于用戶體驗(yàn)的WEB界面色彩設(shè)計(jì)研究[D].廣州：廣東工業(yè)大學(xué)，2014.

[8] 宋妍敏，趙江洪，王巍.基于案例的色彩研究在工業(yè)設(shè)計(jì)中的應(yīng)用[J].裝飾，2006（5）：108.

[9] 劉杰，饒培倫.針對(duì)網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)的視覺(jué)搜索能力研究[J].人類工效學(xué)，2006，12（2）：1-3.

[10] 楊旭蘭.色彩在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究[D].南京：南京林業(yè)大學(xué)，2009.

【通聯(lián)編輯：李雅琪】