網頁配色與版式布局的設計

□張麗萍

在信息技術時代，互聯網的使用越來越廣泛，網頁的設置已經不再是專業技術人員的專利，一般的用戶同樣也可以設計與制作出屬于自己的網頁。一個好的網頁設計會給用戶留下深刻的印象，并且讓用戶有好用易用的體驗。對于剛開始學習制作網頁的人來說，往往不容易駕馭。從網頁設計的版式布局、信息主次層級、展示圖片、色彩搭配等視覺方面的運用，直接影響到用戶對網站的第一印象，而在這些內容中，色彩的配色方案是整個頁面設計中的重中之重。本文根據學生制作的作品中出現的配色方案問題和版面布局問題進行分析。

一、網頁配色

打開一個網站，給用戶留下第一印象的不是網站豐富的內容，而是網站中的色彩和網站合理的版面布局，尤其是色彩對我們的視覺效果非常明顯，一個網站設計成功與否，在某種程度上取決于設計者對色彩的運用和搭配。

(一)色彩搭配原則。在制作網頁時，除了考慮網站本身的類型、功能、定位以外還需要遵循一定的色彩搭配原則，進而設計出精美的網頁。一是色彩的鮮明性。如果一個網站的色彩鮮明，這樣很容易吸引用戶眼球，使用戶產生耳目一新的感覺。二是色彩的獨特性。給網頁用色必須體現頁面獨特的設計風格，這樣才能讓用戶產生深刻的記憶。三是色彩的藝術性。按照內容決定形式的原則，在考慮網站本身特點的同時，還可以加入不同的藝術表現形式，設計出既符合網站要求，又富有一定美感的網站。四是色彩搭配的合理性。色彩具有強大的精神影響力。人們常常感受到色彩對自己心理的影響。這些影響總是在不知不覺中發揮作用，左右我們的情緒。對于網頁設計者來說，色彩的心理作用尤為重要。因為網絡是在高效率、快節奏的現代生活方式下產生的。所以不同的主題應該選用不同的色彩。比如，科技型網站用藍色來體現，美食的滋味用橙色來體現，女性的柔情用粉紅色體現等。

(二)色彩搭配方法。任何一種顏色都有色調、飽和度、明度三方面，顏色的運用是純色之間的關系，以及它們混合在一起的效果。在教學過程中，通過從目前很多的網絡應用中的經典案例，找到關于色彩運用的一些廣泛的色彩關系以及搭配方法，以此作為實際工作學習中配色的指南。

1.同種色彩搭配。這里是指先選定一種色彩，然后調整透明度或者飽和度，也就是將色彩變淡或者加深，產生新的色彩，用于網頁設計，這樣的頁面看起來色彩統一，且具有層次感。

2.鄰近色彩搭配。先在色相環上任選一色，與此色相距90 度，或者彼此相隔五六個數位的兩色，即稱為鄰近色。如:紅色與黃橙色、藍色與黃綠色等。采用鄰近色搭配的目的可以使網頁避免色彩雜亂，可以使網頁達到和諧統一的效果。

3.對比色彩搭配。顏色對比一般指從純度、明度、色相上進行對比，如明暗對比、深淺對比、冷暖對比等。對比色不僅可以突出重點，而且很容易激發視覺上的沖擊，產生強烈的視覺效果。合理使用對比色，能夠使網站的特色鮮明、重點突出。在設計網頁時，通常以一種顏色為主色調，對比色僅僅作為點綴，以起到畫龍點睛的作用。同時，顏色的對比原則從另一個層面上講，也是一種襯托。

4.色彩的黃金法則6:3:1。所謂黃金法則，運用到網頁中是指網頁中主色、輔助色和點綴色。一般來說，一個合格的設計要有60% 的主色，30% 的輔助色和10%的點綴色，這是一個基本法則。比如在設計臥室時，墻壁用60%的比例，家居床品、窗簾之類就是30%，10% 就是小的飾品和藝術品，這10% 起到畫龍點睛的作用，用來激活畫面，提升設計層次和品味。這個法則就是黃金法則。當看到一個設計作品時，我們視覺上首先有一個顏色感受，即確定是暖色系的，還是冷色系的，這個色系就是我們說的60%的主色調，它可以被用來渲染畫面氣氛;另外的30% 是為了畫面的平衡，來襯托主色調;至于那10%就是點睛之筆。

如果對顏色的搭配沒有經驗，可以使用Dreamweaver的配色方案來學習簡單的配色，根據Dreamweaver 系統提供的多種背景、文本和鏈接的顏色來選擇搭配。當然還可以使用一些專門的網頁配色軟件來輔助搭配好網站的色彩。

二、網頁布局

除了學習網頁配色的基本原則與方法之外，還應了解網頁的版式布局，網站劃分框架結構可以使網站內容層次清晰，使瀏覽者一目了然，方便瀏覽信息。網頁的基本結構就好像蓋房子要先打地基一樣，有了堅實的地基方能萬丈高樓平地起。網頁布局就是在頁面上劃分出不同的區域，按照設計的原則和方法，把不同的內容放置到不同的位置上，并通過色彩調和出不同的網站基調，使網頁內容形成一個有機的整體，充分表達網站主題的過程。

網頁布局常用的方法有:使用表格布局、使用層布局、使用框架布局。需要用戶根據頁面特點而決定使用哪種方法，三種方法都有各自的優缺點。表格布局是簡單易用，但后期維護和修改時就比較麻煩。層布局使用框架和樣式分離的方法進行布局，后期容易維護。

設計首頁的第一步是設計版面布局。這就像傳統的報刊雜志編輯一樣，首先要進行排版。所以我們必須要學習和掌握網頁的版面設計。通過觀察一些經典網站案例，和實際制作網頁的過程中，列出幾種常見的布局結構，供大家參考。常見的布局結構有“國”字型布局、“廠”字型布局、“框架”型布局、“Flash”型布局，下面對這些布局分別進行說明。

(一)“國”字型布局。又稱“同”字型布局，即最上面是網站的標題及橫幅廣告，接下來是網站的主要內容，左右分別列出一些欄目，中間是主要部分，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是一些大中型網站常用的布局類型。這種布局的優點是充分利用版面，信息量大。它的缺點是頁面擁擠，不夠靈活。

(二)“廠”字型布局。整個頁面布局類似“廠”字，頁面頂部和左部都可以設計為主導航欄，右下面是主內容區。

(三)“框架”型布局。一是左右框架型:這是一種左右分為兩頁的框架結構，一般左面是導航鏈接，最上面可以有標題或標起，右面是正文。一般見到的大部分的大型論壇都是這種結構。這種類型的結構非常清晰，一目了然。二是上下框架型:與上面類似，區別僅僅在于它是把頁面分為上下兩頁的框架。三是綜合框架型:是上面兩結構的組合，相對復雜的一種框架結構，較為常見的是類似于“拐角型”布局，只是采用了框架結構。幾種框架結構的一個共同特點就是瀏覽方便，速度快，但結構變化不靈活。

(四)封面型布局。這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接，這種類型大部分出現在企業網站和個人主頁，如果處理得好，會給人帶來賞心悅目的感覺。優點顯而易見，漂亮吸引人。缺點是速度慢，作為版面布局還是值得借鑒的。

(五)Flash 型布局。這種布局與封面型結構是類似的，只是這種類型采用了目前非常流行的Flash，與封面型不同的是，由于Flash 強大的功能，頁面所表達的信息更豐富，如果其視覺效果及聽覺效果處理得當，并不亞于傳統的多媒體。

當然，在實際設計中不要局限于以上幾種布局格式，可以稍作適當的變化，這樣會收到意想不到的效果，另外，平時在瀏覽網頁時要多留心別人的布局方式，如果遇到好的布局就可以保存下來作為設計布局的參考。

三、結語

網絡的飛速發展使網頁設計技術不斷提高，也給網頁設計人員帶來了更大的挑戰，如何把網頁的內容與形式完美地結合，增強網站的吸引力，在制作網頁的時候在不僅要注重網頁內容，而且要注重網頁色彩搭和網頁布局，這樣才能制作出適合用戶的、具有個性風格的精美網頁。

［1］劉霆麗.完美網頁設計與制作［M］.北京:人民郵電出版社，2007

［2］徐延章，主編.美工與創意——網頁設計藝術［M］.北京:科學出版社，2009

［3］文杰書院，主編.網頁設計與制作［M］.北京:清華大學出版社，2012