網(wǎng)站設(shè)計(jì)頁(yè)面布局的形式和原則

網(wǎng)站設(shè)計(jì)布局是指以最適合用戶瀏覽的方式將圖片和文字排放在頁(yè)面的不同的位置。

 1.頁(yè)面布局的形式

(1)"T”形結(jié)構(gòu)布局

"T”形結(jié)構(gòu)布局是網(wǎng)貞設(shè)計(jì)中應(yīng)用較廣泛的一種布局方式.通常頁(yè)面頂部為網(wǎng)站的標(biāo)志、廣告條、主菜單等，右側(cè)或左側(cè)有一列邊欄，然后另一側(cè)是很寬的正文.這種布局形式的頁(yè)面結(jié)構(gòu)清晰.主次分明.但容易給人一種規(guī)矩呆板的感覺(jué)。

(2)“口"形布局

通常貞面最上邊是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)就是網(wǎng)站的毛要內(nèi)容，左右分列兒小條內(nèi)容，中間是主要部分，最下邊是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局形式充分利用了版面.信息量大，但頁(yè)面往往比較擁擠，不夠靈活。

(3)“川"形或"三"布局

“川’形布局頁(yè)面被垂直劃分為若干欄.一般分為三欄或四欄，在頁(yè)面的項(xiàng)部是標(biāo)志欄或廣告欄等。而“三.形布局頁(yè)面被水平劃分為若千欄，色塊中大多放廣告條。

(4) POP布局

POP布局形式的頁(yè)面大部分內(nèi)容為精美的圖片和一些小的動(dòng)畫(huà).再放置兒個(gè)簡(jiǎn)單的鏈接:或梁用Flash動(dòng)畫(huà)形式作為貞面的設(shè)計(jì)中心。這種布局形式漂亮吸引人.但瀏覽速度較慢.常用于時(shí)尚類網(wǎng)站。

(5)標(biāo)題正文型布局

標(biāo)題正文型布局通常在頁(yè)面最上邊是標(biāo)題或類似的一錢內(nèi)容.下邊則是正文內(nèi)容。商務(wù)網(wǎng)站的一些政策或面、幫助文章頁(yè)面或注冊(cè)頁(yè)面等常采用這種類取。

(6)框架型布局

框架型布局形式包括左右框架型布局、上卜框架型布局及綜合框架嗽布局等形式.在左右框架型布局中，一般左側(cè)是導(dǎo)航鏈接.有時(shí)最上邊會(huì)有一個(gè)小的標(biāo)題或標(biāo)志，右
側(cè)是正文內(nèi)容。這種布局形式結(jié)構(gòu)清晰、·L!了然，常川f大獄論壇及企業(yè)網(wǎng)站的頁(yè)面。

上下框架型布局形式與左右框架型布局類似，Ix.別僅僅在于是一種LF分為兩頁(yè)的框架。綜合框架吧布局是一種相對(duì)復(fù)雜的框架結(jié)構(gòu).通常結(jié)合了左右框架烈和上卜框架烈的布局形式。

具體采用什么類型的布局結(jié)構(gòu).要依據(jù)實(shí)際情況具體分析。如果內(nèi)容較多，可選川“T”形布局或“口”形布局形式:如果需要展示企業(yè)形象或個(gè)人風(fēng)采，可以選用POP布局形式:如果是具體的內(nèi)容頁(yè)面.則可以選用標(biāo)題正文型布局形式。

 2.頁(yè)面布局的原則

(1)重點(diǎn)突出

應(yīng)考慮頁(yè)面的視覺(jué)中心.即屏幕的中央或中間偏上的位置處。通常-代j要的文章和圖片可以安排在這個(gè)位置.稍微次要的內(nèi)容叮以安排在視覺(jué)中心以外的位置。

(2)平衡請(qǐng)調(diào)

應(yīng)充分考慮受眾視覺(jué)的接受度，和諧地運(yùn)用頁(yè)面色塊、顏色、文字、圖片等信息形式，力求達(dá)到種穩(wěn)定、誠(chéng)實(shí)、信籟的貞面效染。

(3)圖文并茂

應(yīng)注意文字與圖片的和漪統(tǒng)一。文字’于圖片互為襯托.既能活躍頁(yè)面，又能豐富頁(yè)面內(nèi)容。

(4)簡(jiǎn)潔清晰

網(wǎng)頁(yè)內(nèi)容的編排應(yīng)便于閱讀。通過(guò)使川解目的標(biāo)毯.限制所用的字體和顏色的數(shù)目.來(lái)保持版面的簡(jiǎn)沽。

3、頁(yè)面色彩搭配

在網(wǎng)頁(yè)設(shè)計(jì)中.應(yīng)根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配以構(gòu)成視覺(jué)舒適的頁(yè)面.在網(wǎng)頁(yè)設(shè)計(jì)中通常主要內(nèi)容文字采用黑色.而邊框、背景、圖像應(yīng)用彩色.在進(jìn)行網(wǎng)頁(yè)色彩設(shè)計(jì)時(shí).切記不要將所有的顏色都用到.t般情況下.網(wǎng)頁(yè)色彩措配的技巧有:運(yùn)用相同色系色彩:運(yùn)用對(duì)比色和互補(bǔ)色:使川過(guò)渡色:用然色和·種色彩:背景和文字的對(duì)比要盡量大等。

4、頁(yè)面鏈接形式

網(wǎng)頁(yè)的組織結(jié)構(gòu)形式主要是指9i面之間的關(guān)系，可以采用以卜形式:

(1)樹(shù)狀結(jié)構(gòu)

樹(shù)狀結(jié)構(gòu)的網(wǎng)頁(yè)組織形式如圖1-7所示.是目前網(wǎng)站所采用的主要形式之一。其特點(diǎn)是條理清晰.瀏覽者可以根據(jù)路徑清楚地了解自己所在的位置，不容易迷路.同時(shí)也使于內(nèi)容的擴(kuò)充.但是該結(jié)構(gòu)的瀏覽效率較低。
 (2)線性結(jié)構(gòu)

線性結(jié)構(gòu)的網(wǎng)頁(yè)組織形式如圖1-8所示，一般用于信息量較少的小型網(wǎng)站、索引站點(diǎn)，或用來(lái)組織網(wǎng)站中的一部分內(nèi)容。 (3)網(wǎng)狀結(jié)構(gòu)

網(wǎng)狀結(jié)構(gòu)的網(wǎng)頁(yè)組織形式如圖1-9所示.便于瀏覽者獲取信息.隨時(shí)可以到達(dá)自己喜歡的頁(yè)面。但是由于鏈接太多.容易使瀏覽者迷路。