宋雅飛

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

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

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

文章編號：1009-3044（2022）16-0100-03

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

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

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

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

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

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

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

2.1 色彩搭配原則

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

2.2 色彩搭配方法

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

2.2.1 同種色彩搭配

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

2.2.2 鄰近色彩搭配

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

2.2.3 對比色彩搭配

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

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

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

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

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

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

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

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

3.1 “國”字型布局

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

3.2 “廠”字型布局

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

3.3 “框架”型布局

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

3.4 封面型布局

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

3.5 Flash型布局

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

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

4結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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

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

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