網站設計中的配色與布局解析

宋雅飛

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

關鍵詞：網站設計;配色;布局;分析

中圖分類號：TP311? ? ? 文獻標識碼：A

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

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

1 網站設計中配色與布局的意義

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

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

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

2網站設計中的配色應用

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

2.1 色彩搭配原則

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

2.2 色彩搭配方法

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

2.2.1 同種色彩搭配

同種色彩搭配是指選定一種色彩，從而通過調整色彩的透明度和飽和度，使得顏色變淡或者變深，從而產生新的色彩。在設計的過程中，我們可以根據網站的需求進行調節，尋找適合的色彩。運用同種色彩搭配，使得網站主頁的色彩和諧統一，富有層次感[7]。

2.2.2 鄰近色彩搭配

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

2.2.3 對比色彩搭配

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

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

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

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

3網站設計中的布局應用

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

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

網頁設計的第一步就是設計版面布局。與傳統的報紙一樣，首先就是進行排版，所以我們要掌握網頁的基本布局。通過學習經典的網站案例和實際操作過程中，筆者歸納總結了以下常見的布局結構：

3.1 “國”字型布局

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

3.2 “廠”字型布局

“廠”字型布局的整個結構就像“廠”字，網頁的頂端和左邊為主導欄目，右邊則是主要內容區域。此種布局在實際運用中較為廣泛。

3.3 “框架”型布局

“框架”型布局分為左右框架型、上下框架型和綜合框架型。左右框架型布局是一種左右分為兩頁的框架結構，通常是左邊為導航鏈接，最上面是標題，右邊則是正文。很多的大型論壇就是運用此種結構，該類結構分布較為清晰。上下框架型布局與左右型結構布局較為相似，區別在于把頁面分為上下兩頁。綜合框架型相對復雜一點，是上面兩結構的組合，例如“拐角型"布局。“框架”型布局的優點就是布局清晰，觀看清楚方便，但是缺點在于結構變化不靈活。

3.4 封面型布局

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

3.5 Flash型布局

Flash型布局與封面型布局結構是相似的，但Flash型布局采用Flash，Flash本身就具有強大的功能，網站展現的信息就會非常豐富多樣，如果設計得合理，其視覺效果也是非常可觀的[10]。

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

4結束語

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

參考文獻：

[1] 員勃.互聯網網頁界面中的信息設計研究[J].現代商貿工業，2014，26（7）：173-175.

[2] 楊旭蘭.色彩在網頁設計中的應用研究[D].南京：南京林業大學，2009.

[3] 鄭望平.網頁設計中的色彩運用與研究[D].蘭州：西北師范大學，2012.

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

[5] 楊諾.電腦色彩構成設計教程[M].天津：天津大學出版社，2008.

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

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

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

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

[10] 楊旭蘭.色彩在網頁設計中的應用研究[D].南京：南京林業大學，2009.

【通聯編輯：李雅琪】