2.1 網(wǎng)頁(yè)布局

網(wǎng)頁(yè)布局是指在有限的顯示器屏幕空間上將網(wǎng)頁(yè)元素進(jìn)行排列組合，使網(wǎng)頁(yè)在傳遞信息的同時(shí)也能給瀏覽者的視覺(jué)感官上帶來(lái)美的享受。要想使網(wǎng)頁(yè)頁(yè)面產(chǎn)生最近的視覺(jué)效果，設(shè)計(jì)師需要仔細(xì)推敲版面布局的合理性，給瀏覽者一個(gè)流暢的視覺(jué)體驗(yàn)。

2.1.1 網(wǎng)頁(yè)的形式語(yǔ)言

點(diǎn)、線、面是構(gòu)成視覺(jué)空間的基本元素，是表現(xiàn)視覺(jué)形象的基本形式語(yǔ)言。網(wǎng)頁(yè)頁(yè)面中的點(diǎn)可以是一個(gè)按鈕或一個(gè)圖標(biāo)，線可以是一行文字或一行按鈕，面可以是一張圖片或一段文字，網(wǎng)頁(yè)的視覺(jué)形象就是通過(guò)這些點(diǎn)、線、面的構(gòu)成營(yíng)造起來(lái)的。點(diǎn)、線、面相互作用組合成千變?nèi)f化的視覺(jué)形象。在網(wǎng)頁(yè)設(shè)計(jì)中處理好三者之間的關(guān)系，合理地運(yùn)用形式語(yǔ)言，可以創(chuàng)造出獨(dú)特的網(wǎng)頁(yè)視覺(jué)形象，從而進(jìn)一步吸引瀏覽者。

點(diǎn)

在網(wǎng)頁(yè)中可以把一個(gè)單獨(dú)的形象稱為點(diǎn)，比如一個(gè)標(biāo)志或一個(gè)按鈕。單個(gè)的點(diǎn)在畫面中形成視覺(jué)中心，產(chǎn)生吸引力。點(diǎn)的位置、聚集、發(fā)散和方向都會(huì)給人帶來(lái)不同的心理感受，頁(yè)面通過(guò)點(diǎn)以不同的色彩出現(xiàn)，起到活躍畫面的作用。圖2-1～圖2-3所示的網(wǎng)頁(yè)是以點(diǎn)為主要形式語(yǔ)言的。

線

線在頁(yè)面中起到分割畫面和引導(dǎo)視線的作用。在網(wǎng)頁(yè)設(shè)計(jì)中，利用線對(duì)頁(yè)面空間進(jìn)行分割的方法也十分常見(jiàn)。經(jīng)過(guò)線的分割可以產(chǎn)生各種特征的面，如圖2-4所示。

不同形態(tài)的線會(huì)給人以不同的感受，垂直的線給人以挺拔的感覺(jué)，水平的線顯得平穩(wěn)，曲線給人以動(dòng)感和活力。在如圖2-5所示的網(wǎng)站中，運(yùn)用線條勾勒出不同的形態(tài)，貫穿整個(gè)網(wǎng)站始終，給網(wǎng)站增添了活力和感情。

面

面是網(wǎng)頁(yè)中最常見(jiàn)的構(gòu)成元素，表格、圖片等都是面。面的大小、形態(tài)和變化關(guān)系到頁(yè)面的整體布局。通過(guò)面的分割、組合和虛實(shí)交替的方式，可以使網(wǎng)頁(yè)產(chǎn)生井然有序的效果，如圖2-6和圖2-7所示。

2.1.2 網(wǎng)頁(yè)布局類型

根據(jù)不同的組織形式，可以將網(wǎng)頁(yè)的版式分成很多種，最常見(jiàn)的是網(wǎng)格型、封面型、分割型和焦點(diǎn)型4種，其他的版面布局方式多是在這4種方式的基礎(chǔ)上經(jīng)過(guò)變異和加工而成。

網(wǎng)格型

網(wǎng)格型是網(wǎng)頁(yè)設(shè)計(jì)中最常用的一種布局方式，主要以橫向兩欄、三欄或縱向兩欄、三欄居多。網(wǎng)格版式是一種規(guī)范、嚴(yán)謹(jǐn)?shù)陌婷娌季址绞剑o人以條理清晰的感覺(jué)。綜合類門戶網(wǎng)站基本都采用網(wǎng)格型的版式布局方式，如圖2-8和圖2-9所示。

封面型

封面型布局通常用在網(wǎng)站的首頁(yè)，以圖像充滿整個(gè)版面，再加上鏈接的按鈕或文字。封面型的網(wǎng)頁(yè)視覺(jué)效果直觀突出，給人以生動(dòng)、大方的感覺(jué)，如圖2-10和圖2-11所示。

分割型

分割型布局是指把頁(yè)面分成上下或左右兩部分，分別安排圖片和文字內(nèi)容。圖片和文字部分的比例相當(dāng)，形成對(duì)比效果。在整個(gè)頁(yè)面中圖片部分感性而有表現(xiàn)力，文字部分則理性有說(shuō)服力，如圖2-12和圖2-13所示。

焦點(diǎn)型

焦點(diǎn)型布局是指將圖片或文字置于頁(yè)面的視覺(jué)中心，然后安排其他視覺(jué)元素引導(dǎo)瀏覽者的視線向頁(yè)面中心聚集或向外輻射，形成收縮或膨脹的視覺(jué)感受。通過(guò)對(duì)視覺(jué)流程的設(shè)計(jì)在頁(yè)面中形成焦點(diǎn)，給瀏覽者帶來(lái)強(qiáng)烈的視覺(jué)效果，如圖2-14和圖2-15所示。

2.1.3 網(wǎng)頁(yè)布局方法

在開始動(dòng)手制作網(wǎng)頁(yè)之前，要先構(gòu)思頁(yè)面的布局方式，這是第一步工作。在實(shí)際網(wǎng)頁(yè)設(shè)計(jì)工作中，頁(yè)面布局的劃分有固定的基本流程，具體步驟如下。

建立秩序

版面布局的第一步就是根據(jù)網(wǎng)頁(yè)的風(fēng)格、主題和頁(yè)面內(nèi)容多少來(lái)確定頁(yè)面要采取的版式類型。如果是主題比較莊重的網(wǎng)頁(yè)，可采用網(wǎng)格型布局方式；如果是風(fēng)格比較輕松的網(wǎng)頁(yè)，則可采用封面型或焦點(diǎn)型布局方式；如果是頁(yè)面內(nèi)容較多的網(wǎng)頁(yè)，也可采用網(wǎng)格型布局方式，幫助建立頁(yè)面秩序；如果是頁(yè)面內(nèi)容較少的網(wǎng)頁(yè)可采用封面型或焦點(diǎn)型布局方式，著重宣傳主體對(duì)象。

確定頁(yè)面采用的布局類型后，將頁(yè)面涵蓋的內(nèi)容依整體布局的需要進(jìn)行分組歸納，將有一定內(nèi)在聯(lián)系的頁(yè)面進(jìn)行組織排列，推敲標(biāo)題文字和圖形在頁(yè)面中的主次地位，從而確定其在頁(yè)面中的位置。另外，還要考慮頁(yè)面排版要符合瀏覽者的閱讀習(xí)慣、思維發(fā)展等邏輯順序，例如，網(wǎng)站制作者或者公司信息通常放置在頁(yè)腳，這是為了符合瀏覽者已經(jīng)形成的瀏覽習(xí)慣。通過(guò)設(shè)計(jì)者的精心構(gòu)思，將頁(yè)面中的構(gòu)成元素組合成為豐富多彩、簡(jiǎn)潔明確的統(tǒng)一整體。

突出中心

網(wǎng)頁(yè)中的構(gòu)成元素根據(jù)其傳遞信息的內(nèi)容不同有著主次之分，所以在構(gòu)思頁(yè)面布局時(shí)，注意將重要的圖片和文字安排在頁(yè)面的視覺(jué)中心部分，稍次要的內(nèi)容安排在視覺(jué)中心以外的位置。網(wǎng)頁(yè)頁(yè)面的視覺(jué)中心通常在屏幕中央或中央偏上的部位，將主要內(nèi)容放在這些位置可以強(qiáng)調(diào)重點(diǎn)。另外，頁(yè)面上方或左側(cè)的醒目位置通常用來(lái)放置像導(dǎo)航欄這樣有著重要功能的頁(yè)面構(gòu)成元素，這樣可以方便瀏覽者順利瀏覽該網(wǎng)站。

整體協(xié)調(diào)

形式多變的布局可以給網(wǎng)頁(yè)帶來(lái)豐富的表現(xiàn)力，但在組織頁(yè)面內(nèi)容時(shí)要努力做到布局的有序化和整體化，也就是整個(gè)頁(yè)面的協(xié)調(diào)統(tǒng)一。如果只考慮將各種網(wǎng)頁(yè)構(gòu)成元素強(qiáng)加進(jìn)頁(yè)面，或是各個(gè)頁(yè)面構(gòu)成元素的位置安排不合理，這都將會(huì)使頁(yè)面陷入雜亂、失去均衡的整體美感。所以，在設(shè)計(jì)中注意對(duì)比與調(diào)和、對(duì)稱與平衡、節(jié)奏與韻律，以及留白等手法的運(yùn)用，可以讓頁(yè)面形成不同的造型效果，從而創(chuàng)造出風(fēng)格新穎、效果獨(dú)特的頁(yè)面。