1、引言

數(shù)字信息時(shí)代，網(wǎng)絡(luò)成為人們不可或缺的一部分，尤其對(duì)年輕受眾而言，已成為他們信息獲取和娛樂的主要方式。隨著人們對(duì)美的追求不斷地深入，網(wǎng)頁(yè)設(shè)計(jì)作為一種視覺語(yǔ)言，愈來(lái)愈講究編排和布局，對(duì)網(wǎng)頁(yè)中版式的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性活動(dòng)提出更高的要求。表面上看，它不過(guò)是關(guān)于網(wǎng)頁(yè)版式設(shè)計(jì)編排的技巧與方法的問(wèn)題，而實(shí)際上，它不僅是一種技能，更是藝術(shù)與技術(shù)的高度統(tǒng)一的結(jié)果。在新的時(shí)代背景下，網(wǎng)絡(luò)技術(shù)的日新月異，未來(lái)網(wǎng)頁(yè)設(shè)計(jì)中的版式設(shè)計(jì)將發(fā)揮更重要的作用。

2、網(wǎng)頁(yè)版式設(shè)計(jì)

網(wǎng)頁(yè)版式設(shè)計(jì)是指在有限的屏幕空間內(nèi)，按照一定的藝術(shù)規(guī)律將文字、圖像、色彩、動(dòng)畫、視頻等多媒體傳達(dá)要素進(jìn)行有機(jī)的排列組合，使其形成整體視覺印象，最終達(dá)到有效傳達(dá)信息的視覺設(shè)計(jì)。設(shè)計(jì)師將理性思維與感性思維個(gè)性化的表現(xiàn)出來(lái)，給人以視聽上的美感和精神上的享受，是創(chuàng)造性、藝術(shù)性地傳達(dá)信息的過(guò)程。

任何網(wǎng)頁(yè)的版式設(shè)計(jì)都要依據(jù)主題內(nèi)容來(lái)設(shè)定其風(fēng)格與表現(xiàn)形式，只有形式與內(nèi)容的完美統(tǒng)一，才能達(dá)到最佳宣傳效果。網(wǎng)頁(yè)風(fēng)格的形成主要依賴于其版式設(shè)計(jì)，包括色調(diào)搭配，圖文的組合形式等。目前網(wǎng)頁(yè)主要分類有：新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教文化、娛樂藝術(shù)、電子商務(wù)等。性質(zhì)不同的行業(yè)體現(xiàn)出的風(fēng)格各異。新聞網(wǎng)頁(yè)風(fēng)格一般比較簡(jiǎn)潔有序；娛樂行業(yè)則動(dòng)感活潑；文化教育類風(fēng)格莊重嚴(yán)謹(jǐn)、高雅大方；商務(wù)網(wǎng)頁(yè)則偏理性及現(xiàn)代化。

網(wǎng)頁(yè)的版式設(shè)計(jì)同報(bào)紙雜志等平面媒體的版式設(shè)計(jì)都有著相同的視覺傳達(dá)和審美目的，但又有諸多差異。印刷品都有固定的規(guī)格尺寸，網(wǎng)頁(yè)是靜、動(dòng)態(tài)版面。由于表現(xiàn)形式、運(yùn)行方式、社會(huì)功能和心理感受的不同，網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的版式設(shè)計(jì)又有其自身的特殊規(guī)律。表現(xiàn)形式的不同，網(wǎng)頁(yè)版式設(shè)計(jì)的主題更加鮮明；運(yùn)行方式的不同，網(wǎng)頁(yè)版式設(shè)計(jì)簡(jiǎn)潔而整體；[1]社會(huì)功能的不同，網(wǎng)頁(yè)版式設(shè)計(jì)強(qiáng)調(diào)頁(yè)面各組成部分的共性因素；心理感受的不同，網(wǎng)頁(yè)版式設(shè)計(jì)更具互動(dòng)的愉悅感?？梢哉f(shuō)，網(wǎng)頁(yè)是一張?zhí)厥獾摹凹垺薄?/p>

3、網(wǎng)頁(yè)版式設(shè)計(jì)的設(shè)計(jì)原則

目前國(guó)內(nèi)網(wǎng)頁(yè)中的版式設(shè)計(jì)存在著諸多的不足：① “堵”， 版面五花八門，不分主次，缺乏條理，極易造成排斥感及視覺疲勞，更無(wú)藝術(shù)美感可言。② “花”，頁(yè)面五彩繽紛極不和諧，無(wú)整體感，不僅弱化了實(shí)用功能，還嚴(yán)重干擾了信息瀏覽和愉悅感的獲取。③“千篇一律”，尤其是很多新聞網(wǎng)站，單調(diào)而乏味，缺乏特色，十分雷同。綜合以上的分析，網(wǎng)頁(yè)的版式設(shè)計(jì)應(yīng)遵循以下五點(diǎn)設(shè)計(jì)原則。

（1）網(wǎng)頁(yè)版式設(shè)計(jì)的布局要合理化

即設(shè)計(jì)主題鮮明突出，主體形象成為視覺中心，以確切的表達(dá)主題的思想。通過(guò)分類編排，合理規(guī)劃各構(gòu)成要素，使布局單純、簡(jiǎn)練、清晰和準(zhǔn)確，達(dá)到頁(yè)面的形式與內(nèi)容的有機(jī)統(tǒng)一，具有整體美感。

（2）網(wǎng)頁(yè)版式設(shè)計(jì)要符合視覺流程規(guī)律

即符合人的視覺習(xí)慣，保持視覺引導(dǎo)的節(jié)奏感和流暢感。不單要保證有效的傳達(dá)信息，更要突出主要信息。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)必須考慮到人們視覺流向的心理和生理特點(diǎn)，確定各種視覺構(gòu)成元素之間的視覺關(guān)系和主次秩序，[2]并通過(guò)精心安排從而影響、引導(dǎo)受眾的視線移動(dòng)。

（3）網(wǎng)頁(yè)版式設(shè)計(jì)要?jiǎng)討B(tài)化

動(dòng)態(tài)化是網(wǎng)頁(yè)的特殊存在方式，在畫面上表現(xiàn)為構(gòu)成元素輪廓的不規(guī)則、張揚(yáng)或是構(gòu)成元素有動(dòng)態(tài)動(dòng)勢(shì)，或是畫面色彩的鮮明跳躍。[3]由于網(wǎng)頁(yè)信息的更新和即時(shí)交互性，須經(jīng)常地對(duì)網(wǎng)頁(yè)版式進(jìn)行調(diào)整和修改，來(lái)提高網(wǎng)站的關(guān)注率和新鮮度。

（4）網(wǎng)頁(yè)版式設(shè)計(jì)要符合人的視覺心理空間

視覺心理空間是通過(guò)各個(gè)構(gòu)成元素的比例關(guān)系、大小變化、色彩變化以及動(dòng)靜變化等空間因素表現(xiàn)出來(lái)的。它不僅是物理空間的使用，更多的是通過(guò)各種視覺手段去改變?yōu)g覽者的視覺心理感受，以創(chuàng)造出舒適、和諧的視覺心理空間。[4]

（5）網(wǎng)頁(yè)版式設(shè)計(jì)要符合審美需求

在滿足功能需要的前提下，針對(duì)審美情趣的不斷提高，需要采取一些美的形式去提升網(wǎng)站的形象使其賞心悅目。加入美的因素，要遵循一定的形式美法則。即：變化與統(tǒng)一、條理與反復(fù)、對(duì)比與調(diào)和、均齊與平衡、節(jié)奏與韻律等最貼近網(wǎng)頁(yè)版式設(shè)計(jì)的形式美的規(guī)則。

4、網(wǎng)頁(yè)設(shè)計(jì)中版式設(shè)計(jì)的應(yīng)用

網(wǎng)頁(yè)版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱型、焦點(diǎn)型、三角型、自由型十種。其藝術(shù)表現(xiàn)手法、原則與平面設(shè)計(jì)中的基本相同，故而略之。本文從版式設(shè)計(jì)中點(diǎn)、線、面的關(guān)系、色彩的處理、文字的編排來(lái)對(duì)網(wǎng)頁(yè)版式設(shè)計(jì)進(jìn)行歸納總結(jié)。

4.1 網(wǎng)頁(yè)版式設(shè)計(jì)中的點(diǎn)、線、面

對(duì)網(wǎng)頁(yè)的各形態(tài)要素進(jìn)行點(diǎn)、線、面的分割組合，是網(wǎng)頁(yè)版式設(shè)計(jì)的基本方法之一。點(diǎn)線面之間相互作用可以構(gòu)成多種多樣的視覺形象，形成變化萬(wàn)千的視覺空間。點(diǎn)由于大小、形態(tài)、位置的不同，所產(chǎn)生的視覺效果和心理作用也不同。點(diǎn)的縮小起著強(qiáng)調(diào)和引起注意的作用，而點(diǎn)的放大有面之感。線的分割產(chǎn)生各種比例的空間，同時(shí)也形成各種比例關(guān)系的面。面在版面中具有平衡、豐富空間層次、烘托及深化主題的作用。多數(shù)情況下，點(diǎn)與線、線與面、面與點(diǎn)之間都是相對(duì)的，是相互依存、相互滲透的關(guān)系。

德國(guó)斯圖加特大學(xué)的網(wǎng)頁(yè)是德國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)之一（見圖1），運(yùn)用點(diǎn)線面構(gòu)成將其分成四欄，也就是將其版面分成了四個(gè)面。通過(guò)四個(gè)不同色面的交叉位置置入學(xué)院logo，其右側(cè)平行導(dǎo)入學(xué)校標(biāo)題使右下角板塊成為版面中活躍的視覺焦點(diǎn)，這種突出主題的方式不同于其他的通過(guò)跨欄或者是專門的一欄線來(lái)劃分。圖片區(qū)可理解為面的密集或重復(fù)形成了線。在藝術(shù)性網(wǎng)頁(yè)的版面安排中，文字以點(diǎn)、線、面的性質(zhì)存在，以點(diǎn)成線，以線帶面，或組成不同的形狀，或留有大片的空間給人以遐想，以形成風(fēng)格迥異的視覺形式，從而給人留下深刻的印象。[5]整個(gè)版面布局簡(jiǎn)潔明快，主次關(guān)系、呼應(yīng)關(guān)系和形式關(guān)系確保了良好的視覺秩序感，帶有濃厚的藝術(shù)特色，內(nèi)容和形式既有機(jī)統(tǒng)一又有強(qiáng)烈的形式美在里面。

圖1 德國(guó)斯圖加特大學(xué)網(wǎng)頁(yè)

4.2 網(wǎng)頁(yè)版式設(shè)計(jì)中的色彩處理

色彩在網(wǎng)頁(yè)設(shè)計(jì)中是最先被人感知的信息元素。優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)除了首先應(yīng)考慮其內(nèi)容上的精益求精，合理有效的視覺編排外，其次就是對(duì)整體色彩的把握。如色相、明度、純度的整體性、和諧性搭配，使基于色彩設(shè)計(jì)所表現(xiàn)的網(wǎng)頁(yè)風(fēng)格與情感得到統(tǒng)一，使信息之間產(chǎn)生必要的視覺聯(lián)系，取得形象飽滿而富有特色的目的。一個(gè)具有自身鮮明特色的，整體統(tǒng)一中發(fā)揮創(chuàng)造性和實(shí)施變化的和諧。

色彩是為主題服務(wù)的，總的應(yīng)用原則是“總體協(xié)調(diào)，局部對(duì)比”。也就是，網(wǎng)頁(yè)的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。在以實(shí)現(xiàn)對(duì)內(nèi)容的組織和導(dǎo)航。優(yōu)秀的網(wǎng)站無(wú)論是主題色還是輔助色，它們的位置面積、形式以及控制力都是基于對(duì)色彩的物理反應(yīng)加以詳細(xì)分析而得出的方案。[6]如兒童網(wǎng)頁(yè)版式設(shè)計(jì)，要將復(fù)雜的信息進(jìn)行大膽的分類與歸納是不容易的。兒童網(wǎng)站的趣味性，夸張性，色彩的多樣性決定了網(wǎng)頁(yè)的色彩不能是優(yōu)雅恬淡的，不能是冷漠嚴(yán)肅的。它需運(yùn)用大量高純度，高明度，對(duì)比反差較明顯，跳躍的色彩大來(lái)充分體現(xiàn)了兒童天真爛漫的特性。色彩多但并不雜亂無(wú)章法，符合兒童對(duì)色彩審美的需要。而一款商業(yè)性的化妝品網(wǎng)頁(yè)設(shè)計(jì)，需運(yùn)用純度較低，對(duì)比反差較小，有序的色彩。在滿足方便快捷地查看商品和進(jìn)行交易的同時(shí)，以冷暖色調(diào)局部對(duì)比來(lái)渲染氣氛，似乎能從畫面中嗅到化妝品清新淡雅的味道，體現(xiàn)了女性的高貴柔美。

4.3 網(wǎng)頁(yè)版式設(shè)計(jì)中的文字編排

網(wǎng)頁(yè)設(shè)計(jì)中文字，包含標(biāo)題字、副標(biāo)題字、引文、說(shuō)明文、正文等。與傳統(tǒng)的版式設(shè)計(jì)相比，網(wǎng)頁(yè)中的文字設(shè)計(jì)一方面在藝術(shù)原則、藝術(shù)處理手法上與傳統(tǒng)的平面設(shè)計(jì)有共通之處。另一方面，它的藝術(shù)表現(xiàn)手法必然受到網(wǎng)絡(luò)技術(shù)條件的制約，強(qiáng)調(diào)科學(xué)性、審美性、功能性三者的緊密結(jié)合。在設(shè)計(jì)時(shí)，其標(biāo)題性字體或其他需要強(qiáng)調(diào)的地方選擇以大方、醒目、突出的字體為宜，宋體、黑體等是其首選字體，也可根據(jù)不同需求選擇比較有創(chuàng)意的藝術(shù)字體。

視覺經(jīng)驗(yàn)告訴我們，正文大段的文字排版如果只分一欄，用戶會(huì)產(chǎn)生疲勞和錯(cuò)行等問(wèn)題。根據(jù)受眾的視覺認(rèn)知特征，通常將文字分欄處理為雙欄、三欄和四欄或多欄等，既免了版面的繁雜零亂，又活潑而富于變化。此外，文字編排質(zhì)量取決于文字部分與非文字部分之間的關(guān)系，應(yīng)適當(dāng)?shù)目紤]文字的行距、空間的安排，給眼睛一個(gè)休息的地方。忽略了文字編排外的空白空間是專業(yè)上不成熟的一個(gè)標(biāo)志。所以每一種文字版面布置方法在設(shè)計(jì)過(guò)程中都要深思熟慮，以保持頁(yè)面的整體性。

5、網(wǎng)頁(yè)版式設(shè)計(jì)發(fā)展趨勢(shì)

網(wǎng)絡(luò)技術(shù)的革新發(fā)展，不同時(shí)代不同的設(shè)計(jì)審美觀念和美學(xué)特征，客觀上將網(wǎng)頁(yè)設(shè)計(jì)推向了更高層的表現(xiàn)境界，通過(guò)新的設(shè)計(jì)觀念、方法、元素構(gòu)造新的視覺形式，各類網(wǎng)站的版式設(shè)計(jì)呈現(xiàn)多樣化、個(gè)性化的特點(diǎn)，如個(gè)人類和門戶類網(wǎng)站。結(jié)合平面版式的實(shí)際特征，作者分析了網(wǎng)頁(yè)版式設(shè)計(jì)的發(fā)展趨勢(shì)：

印刷式網(wǎng)頁(yè)版式設(shè)計(jì)將占主導(dǎo)。印刷設(shè)計(jì)向來(lái)都是網(wǎng)頁(yè)設(shè)計(jì)的靈感來(lái)源及參照。印刷版式的易讀性、大標(biāo)題的使用，極簡(jiǎn)化藝術(shù)風(fēng)格等優(yōu)勢(shì)，將使更多的印刷樣式的排版作為設(shè)計(jì)元素重點(diǎn)。由于技術(shù)功能上的限制和視覺心理的要求使網(wǎng)頁(yè)字體等設(shè)計(jì)呈現(xiàn)為固定化的模式，轄制了藝術(shù)性的表達(dá)空間，網(wǎng)頁(yè)版式形式遠(yuǎn)不如傳統(tǒng)版式自由多變，設(shè)計(jì)師不得不尋找一個(gè)微妙的折中方案。隨著越來(lái)越多的技術(shù)性改進(jìn)，許多障礙將會(huì)得到解決，印刷式版式設(shè)計(jì)方法與審美將巧妙地融進(jìn)網(wǎng)頁(yè)中。

兼容手機(jī)網(wǎng)頁(yè)的版式設(shè)計(jì)方興未艾。在網(wǎng)絡(luò)高速公路無(wú)處不在的信息時(shí)代，隨著移動(dòng)網(wǎng)絡(luò)的茁壯成長(zhǎng)，它的傳播力、影響力漸強(qiáng)，許多公司都推出了適于手機(jī)等便攜式載體的網(wǎng)頁(yè)設(shè)計(jì)，其整體結(jié)構(gòu)具有足夠的靈活性兼容這種變化。雖然目前消費(fèi)者還未對(duì)電視終端上網(wǎng)形成習(xí)慣，但相信未來(lái)網(wǎng)絡(luò)電視的普及，會(huì)刺激更多適用于電視等大屏幕的網(wǎng)頁(yè)版式設(shè)計(jì)新形象的出現(xiàn)。

結(jié)語(yǔ)

網(wǎng)頁(yè)中的版式設(shè)計(jì)是一種新的視覺表現(xiàn)方式，在我國(guó)發(fā)展的時(shí)間不長(zhǎng)，但它兼容了傳統(tǒng)版式設(shè)計(jì)的特征，又具備其沒有的優(yōu)勢(shì)，是對(duì)傳統(tǒng)版式設(shè)計(jì)的延續(xù)和革新，就更離不開科學(xué)技術(shù)的發(fā)展。總之，版式設(shè)計(jì)在整個(gè)網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)中占據(jù)著重要的地位。在順應(yīng)國(guó)際化發(fā)展趨勢(shì)的同時(shí)，我國(guó)的網(wǎng)頁(yè)設(shè)計(jì)師們應(yīng)該不斷探索具有本民族特色的網(wǎng)頁(yè)設(shè)計(jì)視覺語(yǔ)言，不斷發(fā)掘中國(guó)傳統(tǒng)文化的精髓，按照美的要求進(jìn)行合目的的設(shè)計(jì)，營(yíng)造自己獨(dú)特的風(fēng)格，推動(dòng)網(wǎng)頁(yè)設(shè)計(jì)達(dá)到技術(shù)與藝術(shù)的統(tǒng)一、功能與審美的完美結(jié)合。

[1]彭輝.網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中的版式設(shè)計(jì)原則[J].光盤技術(shù),2007, 2:59-60

[2]彭剛等編著.網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)[M].北京: 高等教育出版社,2006,9

[3]曲美亭,伊延波.論網(wǎng)頁(yè)設(shè)計(jì)中的視覺傳達(dá)[J].赤子,2009 ,20

[4]張爽.淺談網(wǎng)頁(yè)設(shè)計(jì)中的版式設(shè)計(jì)[J].科技信息,2008,13:56

[5]郭欣欣.現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中靜態(tài)文字的藝術(shù)表現(xiàn)[J].洛陽(yáng)師范學(xué)院學(xué)報(bào),2007,3:102-103

[6]沈雷,劉菲.論品牌服裝網(wǎng)頁(yè)色彩設(shè)計(jì)[J].藝術(shù)與設(shè)計(jì),2010,4:48-50