網(wǎng)頁配色與版式布局的設(shè)計(jì)

□張麗萍

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

一、網(wǎng)頁配色

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

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

(二)色彩搭配方法。任何一種顏色都有色調(diào)、飽和度、明度三方面，顏色的運(yùn)用是純色之間的關(guān)系，以及它們混合在一起的效果。在教學(xué)過程中，通過從目前很多的網(wǎng)絡(luò)應(yīng)用中的經(jīng)典案例，找到關(guān)于色彩運(yùn)用的一些廣泛的色彩關(guān)系以及搭配方法，以此作為實(shí)際工作學(xué)習(xí)中配色的指南。

1.同種色彩搭配。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，也就是將色彩變淡或者加深，產(chǎn)生新的色彩，用于網(wǎng)頁設(shè)計(jì)，這樣的頁面看起來色彩統(tǒng)一，且具有層次感。

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

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

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

如果對顏色的搭配沒有經(jīng)驗(yàn)，可以使用Dreamweaver的配色方案來學(xué)習(xí)簡單的配色，根據(jù)Dreamweaver 系統(tǒng)提供的多種背景、文本和鏈接的顏色來選擇搭配。當(dāng)然還可以使用一些專門的網(wǎng)頁配色軟件來輔助搭配好網(wǎng)站的色彩。

二、網(wǎng)頁布局

除了學(xué)習(xí)網(wǎng)頁配色的基本原則與方法之外，還應(yīng)了解網(wǎng)頁的版式布局，網(wǎng)站劃分框架結(jié)構(gòu)可以使網(wǎng)站內(nèi)容層次清晰，使瀏覽者一目了然，方便瀏覽信息。網(wǎng)頁的基本結(jié)構(gòu)就好像蓋房子要先打地基一樣，有了堅(jiān)實(shí)的地基方能萬丈高樓平地起。網(wǎng)頁布局就是在頁面上劃分出不同的區(qū)域，按照設(shè)計(jì)的原則和方法，把不同的內(nèi)容放置到不同的位置上，并通過色彩調(diào)和出不同的網(wǎng)站基調(diào)，使網(wǎng)頁內(nèi)容形成一個(gè)有機(jī)的整體，充分表達(dá)網(wǎng)站主題的過程。

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

設(shè)計(jì)首頁的第一步是設(shè)計(jì)版面布局。這就像傳統(tǒng)的報(bào)刊雜志編輯一樣，首先要進(jìn)行排版。所以我們必須要學(xué)習(xí)和掌握網(wǎng)頁的版面設(shè)計(jì)。通過觀察一些經(jīng)典網(wǎng)站案例，和實(shí)際制作網(wǎng)頁的過程中，列出幾種常見的布局結(jié)構(gòu)，供大家參考。常見的布局結(jié)構(gòu)有“國”字型布局、“廠”字型布局、“框架”型布局、“Flash”型布局，下面對這些布局分別進(jìn)行說明。

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

(二)“廠”字型布局。整個(gè)頁面布局類似“廠”字，頁面頂部和左部都可以設(shè)計(jì)為主導(dǎo)航欄，右下面是主內(nèi)容區(qū)。

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

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

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

當(dāng)然，在實(shí)際設(shè)計(jì)中不要局限于以上幾種布局格式，可以稍作適當(dāng)?shù)淖兓?，這樣會收到意想不到的效果，另外，平時(shí)在瀏覽網(wǎng)頁時(shí)要多留心別人的布局方式，如果遇到好的布局就可以保存下來作為設(shè)計(jì)布局的參考。

三、結(jié)語

網(wǎng)絡(luò)的飛速發(fā)展使網(wǎng)頁設(shè)計(jì)技術(shù)不斷提高，也給網(wǎng)頁設(shè)計(jì)人員帶來了更大的挑戰(zhàn)，如何把網(wǎng)頁的內(nèi)容與形式完美地結(jié)合，增強(qiáng)網(wǎng)站的吸引力，在制作網(wǎng)頁的時(shí)候在不僅要注重網(wǎng)頁內(nèi)容，而且要注重網(wǎng)頁色彩搭和網(wǎng)頁布局，這樣才能制作出適合用戶的、具有個(gè)性風(fēng)格的精美網(wǎng)頁。

［1］劉霆麗.完美網(wǎng)頁設(shè)計(jì)與制作［M］.北京:人民郵電出版社，2007

［2］徐延章，主編.美工與創(chuàng)意——網(wǎng)頁設(shè)計(jì)藝術(shù)［M］.北京:科學(xué)出版社，2009

［3］文杰書院，主編.網(wǎng)頁設(shè)計(jì)與制作［M］.北京:清華大學(xué)出版社，2012