版式設(shè)計在網(wǎng)頁藝術(shù)設(shè)計中的應(yīng)用

◎程勇軍 余 晶 劉 衛(wèi)

隨著我國信息化高速發(fā)展和人們對網(wǎng)頁設(shè)計要求的逐步提高，網(wǎng)頁設(shè)計技術(shù)快速興起，并逐漸受到人們重視。網(wǎng)頁設(shè)計分為網(wǎng)頁技術(shù)設(shè)計與網(wǎng)頁藝術(shù)設(shè)計，也就是在運(yùn)用JAVA、HTML等編程技術(shù)進(jìn)行網(wǎng)頁技術(shù)設(shè)計的同時，對網(wǎng)頁的文字、版式設(shè)計、顏色搭配等藝術(shù)視覺設(shè)計進(jìn)行充分融合及統(tǒng)一，針對網(wǎng)絡(luò)信息不同的特點(diǎn)進(jìn)行全方位的展示。網(wǎng)頁藝術(shù)設(shè)計主要由版式設(shè)計、視聽元素設(shè)計等共同組合而成。本篇文章主要從版式設(shè)計與網(wǎng)頁設(shè)計的差異，以及網(wǎng)頁設(shè)計的布局類型等方面，對網(wǎng)頁的版式設(shè)計進(jìn)行分析與探究，從而使設(shè)計者根據(jù)具體情況找到更適合網(wǎng)站的版式形式。

一、版式設(shè)計與網(wǎng)頁版式設(shè)計的概念與差異

1.概念

版式設(shè)計，又稱為版式設(shè)計，是平面設(shè)計中的一大分支指，是設(shè)計人員根據(jù)設(shè)計主題和視覺需求，在預(yù)先設(shè)定的有限版面內(nèi)，運(yùn)用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片(圖形)及色彩等視覺傳達(dá)信息要素，進(jìn)行有組織、有目的的組合排列的設(shè)計行為與過程。隨著信息技術(shù)的高度發(fā)展，網(wǎng)頁、海報、廣告、平面及影像等眾多領(lǐng)域都會涉及到版式設(shè)計。版面設(shè)計除了設(shè)計者的藝術(shù)構(gòu)思，也需要與編排技術(shù)相結(jié)合，是藝術(shù)與技術(shù)的統(tǒng)一體。

網(wǎng)頁版式設(shè)計是指設(shè)計者在網(wǎng)頁基本形態(tài)要素的支撐下，按照一定的藝術(shù)規(guī)律進(jìn)行美化和組織布局，同時，結(jié)合網(wǎng)頁的文字、圖像、動畫、音頻、視頻等元素，使其形成整體統(tǒng)一的視覺效果，設(shè)計師所采用的的視覺藝術(shù)規(guī)律和藝術(shù)風(fēng)格，在給瀏覽者帶來感官上的美感和精神上的享受的同時，也在有限的屏幕空間內(nèi)體現(xiàn)了設(shè)計者的想法、意圖，從而達(dá)到了有效傳達(dá)信息的目標(biāo)。

2.網(wǎng)頁版式設(shè)計的作用

如今網(wǎng)絡(luò)技術(shù)快速發(fā)展，網(wǎng)絡(luò)覆蓋面積逐步增大，怎樣體現(xiàn)網(wǎng)站最大的信息價值，對瀏覽者產(chǎn)生更強(qiáng)的吸引力，是大家普遍關(guān)心的問題，這就對網(wǎng)頁版式設(shè)計提出了更高的要求，設(shè)計出符合要求的網(wǎng)頁是提高網(wǎng)站瀏覽量的途徑之一。

網(wǎng)頁版式設(shè)計決定了網(wǎng)站的類型特點(diǎn)和藝術(shù)風(fēng)格，它以直觀的視覺配置牽引著網(wǎng)頁頁面之間的方向性，網(wǎng)頁內(nèi)容的表達(dá)效果也隨之增強(qiáng)，在感性表達(dá)的同時，設(shè)計者要兼具考慮網(wǎng)頁空間是否合理，頁面下載速度快不快、頁面效果是不是最優(yōu)等技術(shù)因素，這也需要設(shè)計者在設(shè)計過程中具有理性思維。

3.網(wǎng)頁版式設(shè)計與傳統(tǒng)印刷版式設(shè)計的差異

網(wǎng)頁版式設(shè)計與傳統(tǒng)的報刊雜志等媒體平面設(shè)計有著較強(qiáng)的相似性，很多傳統(tǒng)出版行業(yè)版面設(shè)計的規(guī)則和禁忌，也大都適用于網(wǎng)頁的設(shè)計，但也存在較大差異。具體表現(xiàn)如下:

(1)印刷品都有固定的規(guī)格尺寸，網(wǎng)頁則不然，它的頁面尺寸可能會出現(xiàn)1024X768像素、800X600像素等不同的規(guī)格，由顯示器的分辨率來確定，其組織結(jié)構(gòu)也不是線性組合，頁面上每個元素的尺寸和位置對于網(wǎng)頁設(shè)計者是很難精確控制的。

(2)傳統(tǒng)印刷品的設(shè)計者除了可以在版式設(shè)計中進(jìn)行優(yōu)化，還可以通過指定使用的紙張和油墨，讓設(shè)計效果得以最佳呈現(xiàn)；而網(wǎng)頁設(shè)計者卻不能要求瀏覽者使用什么樣的智能設(shè)備，最終在呈現(xiàn)上還要受瀏覽者瀏覽器的色彩、分辨率和瀏覽者瀏覽習(xí)慣的制約，設(shè)計者對呈現(xiàn)效果的可控制性較低。

(3)傳統(tǒng)的印刷品具有成熟的印刷標(biāo)準(zhǔn)，而互聯(lián)網(wǎng)正處于不斷發(fā)展之中，網(wǎng)頁設(shè)計中的每個事件都可能隨時發(fā)生變化，從而帶來網(wǎng)頁版式設(shè)計中的變化。

(4)網(wǎng)頁設(shè)計作為一種特殊的版面，既有文字、圖片、視頻，還有些流動窗口和廣告等，內(nèi)容更加繁多、復(fù)雜，設(shè)計在強(qiáng)調(diào)藝術(shù)性的同時，還要使頁面內(nèi)容和形式達(dá)到有機(jī)統(tǒng)一，考慮頁面的可讀性和網(wǎng)絡(luò)瀏覽的特性，并兼具整體美感。

(5)動態(tài)化也是網(wǎng)頁版式設(shè)計區(qū)別于傳統(tǒng)印刷版式設(shè)計的顯著特征。網(wǎng)頁版式設(shè)計的動態(tài)設(shè)計是增強(qiáng)網(wǎng)頁的可讀性，參與性與趣味性的有力手段。同時，網(wǎng)頁設(shè)計人員必須根據(jù)網(wǎng)站各個階段的發(fā)展需求以及用戶的反饋信息，經(jīng)常對網(wǎng)頁版式進(jìn)行調(diào)整和修改，更具靈活性。

二、網(wǎng)站類型的不同所體現(xiàn)出的網(wǎng)頁版式特征

網(wǎng)頁版式設(shè)計根據(jù)內(nèi)容性質(zhì)，在布局上會產(chǎn)生差異，可劃分為如下幾個類型:

1.政府門戶類網(wǎng)站。在此類網(wǎng)頁中，文字居多，圖片運(yùn)用較少，并運(yùn)用Icon功能識別圖標(biāo)使用戶可以快速預(yù)知按鈕的功能、文本的意義，從而快捷的引導(dǎo)用戶進(jìn)入功能頁面辦事，通過文字的敘述和圖標(biāo)的運(yùn)用，注重信息發(fā)布和辦事功能的展示，增加政府部門的權(quán)威性。注意，在此類網(wǎng)頁版式設(shè)計時，是不能增加其他方面的廣告信息的，只能闡述與主題相關(guān)的內(nèi)容。

2.新聞或門戶類網(wǎng)站。這類網(wǎng)站在首頁上，會根據(jù)內(nèi)容的不同，劃分出新聞、教育、娛樂、財經(jīng)、科技等多個模塊。以文字為主，穿插一定量與板塊內(nèi)容相關(guān)的高品質(zhì)圖片，來吸引瀏覽者的注意，且為了便于瀏覽者的閱讀，版面大多較為整齊工整，且具有一定的韻律感，就像一首歌曲，每個模塊具有不同的節(jié)拍，但在細(xì)節(jié)上加以區(qū)別，保持整個頁面的統(tǒng)一協(xié)調(diào)。一般來說，在這類的網(wǎng)頁設(shè)計中，橫向的內(nèi)容通常是不變的，讓瀏覽者在瀏覽時有整體連貫性的體驗(yàn)，主要通過縱向的板塊變化，層疊的展示出欄目板塊，縱向延展開去，網(wǎng)頁能存儲的信息量也隨之龐大。

3.商務(wù)類網(wǎng)站。網(wǎng)站主要體現(xiàn)對企業(yè)、產(chǎn)品的介紹和推薦功能，除了一些企業(yè)介紹、通知公告等文字類板塊外，產(chǎn)品的圖片或視頻展示窗口也需要安排在適當(dāng)?shù)奈恢?，并配以產(chǎn)品的文字說明，通過文字與圖像之間占比大小的相互配合，吸引瀏覽者進(jìn)一步的了解企業(yè)、產(chǎn)品，從而達(dá)到有效的宣傳目標(biāo)。

三、網(wǎng)頁版式設(shè)計常用的布局形式

網(wǎng)頁版式設(shè)計布局，簡單的理解就是將圖片、視頻和文字排擺放在頁面的不同位置給瀏覽者帶來最適合的瀏覽體驗(yàn)，兼顧網(wǎng)站內(nèi)容的呈現(xiàn)、美感和瀏覽者體驗(yàn)達(dá)到最佳的形式。經(jīng)過網(wǎng)頁設(shè)計者大量的實(shí)踐總結(jié)，常見的網(wǎng)頁布局形式包括:“同”字形布局、“T”字形布局、“三”字形布局、“川”字形布局等，下面我們就7類網(wǎng)頁布局設(shè)計一一加以解析。

1.“同”字型結(jié)構(gòu)布局，也稱為“國”字型。在頁面的頂部位置是網(wǎng)站Logo及廣告條，往下可分為三欄，左右兩欄分列兩小條內(nèi)容，中間位置是網(wǎng)站的主要部分，與左右兩欄并列縱向延伸到網(wǎng)站底部，版權(quán)信息、友情鏈接、網(wǎng)站地圖等匯集于網(wǎng)頁底部。

2.“T”形結(jié)構(gòu)布局。此類結(jié)構(gòu)頁面頂部同上，網(wǎng)站Logo一般置于頂部左上角，往下分為二欄，左欄設(shè)置為主導(dǎo)航區(qū)，網(wǎng)頁主要內(nèi)容分列在右欄為。左導(dǎo)航區(qū)的一般背景一般設(shè)置為較深的顏色，整體效果類似英文字母“T”。這種布局的優(yōu)點(diǎn)是頁面條理清晰、主題突出，是初學(xué)者最容易掌握的布局方法。缺點(diǎn)是對色彩細(xì)節(jié)搭配要求比較高，如果搭配不當(dāng)，會給人以規(guī)矩呆板感，容易引人厭煩。

3.“口”形結(jié)構(gòu)布局。這種布局類似一個方框，表現(xiàn)為頁面頂部和底部是廣告條，中間區(qū)域分為三欄，左欄是主菜單，中間為網(wǎng)頁主要內(nèi)容，右欄是熱點(diǎn)推薦、友情鏈接或圖片展示區(qū)域等。這種布局的優(yōu)點(diǎn)是充分利用版面，網(wǎng)頁布局緊湊，信息豐富，但四面封閉，易使人產(chǎn)生壓抑感。

4.對稱對比結(jié)構(gòu)布局。整個網(wǎng)頁采取左右或者上下對稱的布局，非常醒目，在顏色上選擇一半深色，另一半淺色，兩部分搭配協(xié)調(diào)，會具有很強(qiáng)的視覺沖擊力，但將兩部分有機(jī)地結(jié)合比較困難，不易掌握，此類布局一般用于設(shè)計型站點(diǎn)。

5.POP結(jié)構(gòu)布局。這種布局就像一張宣傳海報，整個頁面中間是一幅醒目且設(shè)計精美的大圖片，大圖中間再穿插一些圖片和文字，設(shè)計漂亮吸引人，但大量的運(yùn)用圖片會導(dǎo)致圖形分辨率偏大，網(wǎng)頁下載速度慢，瀏覽不順暢，且提供的文字信息量有限。此類布局常用于時尚類或教育類站點(diǎn)。

6.Flash布局。這種布局整個頁面就是一個Flash動畫，畫面絢麗，動感十足，由于Flash的強(qiáng)大功能，頁面所表達(dá)的信息更加豐富，也能直觀的體驗(yàn)覺效果和聽覺效果，是比較新潮的一種布局方式。

7.標(biāo)題文本型結(jié)構(gòu)布局。這種類型的頁面最上部往往是主題標(biāo)題，下面是正文，頁面內(nèi)容以文本為主，比如一些文章頁、投票、注冊等內(nèi)容的頁面多采用此類布局。

以上是目前網(wǎng)絡(luò)上較為常見的幾種布局，在具體的使用時可靈活使用。比如板塊內(nèi)容非常多，就要考慮用“國字型”；而如果一些說明性的內(nèi)容比較多的時候，例如新聞或者門戶網(wǎng)站的正文頁，則可以考慮標(biāo)題正文型；如果是企業(yè)網(wǎng)站或個人主頁，不需要表達(dá)過多的文字信息，那么可采用POP結(jié)構(gòu)、Flash布局或?qū)ΨQ對比結(jié)構(gòu)，能大大豐富網(wǎng)頁視覺和聽覺效果，引人矚目。

四、網(wǎng)頁版式設(shè)計布局的步驟

1.草案。這屬于初步的創(chuàng)造階段，不講究過多考慮美工細(xì)節(jié)和技術(shù)功能功能，網(wǎng)頁也不必精美整齊，也，只以簡單的線條布局出網(wǎng)頁的輪廓。此階段多在于設(shè)計者的構(gòu)思創(chuàng)意，盡可能多思考多探索不同類型和風(fēng)格，最后選定一幅滿意的作為繼續(xù)創(chuàng)作的腳本，在實(shí)際工作中，根據(jù)客戶需求也需要準(zhǔn)備多幅創(chuàng)作腳本，以供選擇。

2.粗略布局。梳理出網(wǎng)站Logo、主導(dǎo)航、搜索、友情鏈接、廣告欄、聯(lián)系方式和版權(quán)信息等必須放置到頁面上的功能模塊。通常將網(wǎng)站Logo、主導(dǎo)航等最重要的模塊放頁面上部最顯眼、最突出的位置，最好是屏幕第一屏的位置，往下可以根據(jù)邏輯關(guān)系考慮次要模塊的排放位置。

3.定案。將粗略布局繼續(xù)美化，使其更加精細(xì)和具體，最后達(dá)到滿意定案。

對于網(wǎng)頁版面布局的設(shè)計，以下原則需要設(shè)計者重視:加強(qiáng)視覺效果，加強(qiáng)文案的可視度和可讀性，強(qiáng)調(diào)頁面的統(tǒng)一感。一些新鮮和個性化的布局將更能體現(xiàn)設(shè)計者的創(chuàng)意，也更能吸引觀者的注意，便于對網(wǎng)站加深印象。