試析數(shù)字化背景下網(wǎng)頁設計中版式設計的發(fā)展運用

1、引言

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

2、網(wǎng)頁版式設計

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

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

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

3、網(wǎng)頁版式設計的設計原則

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

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

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

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

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

（3）網(wǎng)頁版式設計要動態(tài)化

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

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

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

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

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

4、網(wǎng)頁設計中版式設計的應用

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

4.1 網(wǎng)頁版式設計中的點、線、面

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

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

圖1 德國斯圖加特大學網(wǎng)頁

4.2 網(wǎng)頁版式設計中的色彩處理

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

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

4.3 網(wǎng)頁版式設計中的文字編排

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

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

5、網(wǎng)頁版式設計發(fā)展趨勢

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

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

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

結語

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

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

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

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

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

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

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