版式設計在網頁藝術設計中的應用

◎程勇軍 余 晶 劉 衛

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

一、版式設計與網頁版式設計的概念與差異

1.概念

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

網頁版式設計是指設計者在網頁基本形態要素的支撐下，按照一定的藝術規律進行美化和組織布局，同時，結合網頁的文字、圖像、動畫、音頻、視頻等元素，使其形成整體統一的視覺效果，設計師所采用的的視覺藝術規律和藝術風格，在給瀏覽者帶來感官上的美感和精神上的享受的同時，也在有限的屏幕空間內體現了設計者的想法、意圖，從而達到了有效傳達信息的目標。

2.網頁版式設計的作用

如今網絡技術快速發展，網絡覆蓋面積逐步增大，怎樣體現網站最大的信息價值，對瀏覽者產生更強的吸引力，是大家普遍關心的問題，這就對網頁版式設計提出了更高的要求，設計出符合要求的網頁是提高網站瀏覽量的途徑之一。

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

3.網頁版式設計與傳統印刷版式設計的差異

網頁版式設計與傳統的報刊雜志等媒體平面設計有著較強的相似性，很多傳統出版行業版面設計的規則和禁忌，也大都適用于網頁的設計，但也存在較大差異。具體表現如下:

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

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

(3)傳統的印刷品具有成熟的印刷標準，而互聯網正處于不斷發展之中，網頁設計中的每個事件都可能隨時發生變化，從而帶來網頁版式設計中的變化。

(4)網頁設計作為一種特殊的版面，既有文字、圖片、視頻，還有些流動窗口和廣告等，內容更加繁多、復雜，設計在強調藝術性的同時，還要使頁面內容和形式達到有機統一，考慮頁面的可讀性和網絡瀏覽的特性，并兼具整體美感。

(5)動態化也是網頁版式設計區別于傳統印刷版式設計的顯著特征。網頁版式設計的動態設計是增強網頁的可讀性，參與性與趣味性的有力手段。同時，網頁設計人員必須根據網站各個階段的發展需求以及用戶的反饋信息，經常對網頁版式進行調整和修改，更具靈活性。

二、網站類型的不同所體現出的網頁版式特征

網頁版式設計根據內容性質，在布局上會產生差異，可劃分為如下幾個類型:

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

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

3.商務類網站。網站主要體現對企業、產品的介紹和推薦功能，除了一些企業介紹、通知公告等文字類板塊外，產品的圖片或視頻展示窗口也需要安排在適當的位置，并配以產品的文字說明，通過文字與圖像之間占比大小的相互配合，吸引瀏覽者進一步的了解企業、產品，從而達到有效的宣傳目標。

三、網頁版式設計常用的布局形式

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

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

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

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

4.對稱對比結構布局。整個網頁采取左右或者上下對稱的布局，非常醒目，在顏色上選擇一半深色，另一半淺色，兩部分搭配協調，會具有很強的視覺沖擊力，但將兩部分有機地結合比較困難，不易掌握，此類布局一般用于設計型站點。

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

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

7.標題文本型結構布局。這種類型的頁面最上部往往是主題標題，下面是正文，頁面內容以文本為主，比如一些文章頁、投票、注冊等內容的頁面多采用此類布局。

以上是目前網絡上較為常見的幾種布局，在具體的使用時可靈活使用。比如板塊內容非常多，就要考慮用“國字型”；而如果一些說明性的內容比較多的時候，例如新聞或者門戶網站的正文頁，則可以考慮標題正文型；如果是企業網站或個人主頁，不需要表達過多的文字信息，那么可采用POP結構、Flash布局或對稱對比結構，能大大豐富網頁視覺和聽覺效果，引人矚目。

四、網頁版式設計布局的步驟

1.草案。這屬于初步的創造階段，不講究過多考慮美工細節和技術功能功能，網頁也不必精美整齊，也，只以簡單的線條布局出網頁的輪廓。此階段多在于設計者的構思創意，盡可能多思考多探索不同類型和風格，最后選定一幅滿意的作為繼續創作的腳本，在實際工作中，根據客戶需求也需要準備多幅創作腳本，以供選擇。

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

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

對于網頁版面布局的設計，以下原則需要設計者重視:加強視覺效果，加強文案的可視度和可讀性，強調頁面的統一感。一些新鮮和個性化的布局將更能體現設計者的創意，也更能吸引觀者的注意，便于對網站加深印象。