2.1 網(wǎng)頁布局

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

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

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

點(diǎn)

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

線

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

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

面

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

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

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

網(wǎng)格型

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

封面型

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

分割型

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

焦點(diǎn)型

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

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

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

建立秩序

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

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

突出中心

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

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

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