版式設計在網頁中如何應用

王 欣

[摘要]上個世紀九十年代初期，現代互聯網的模式開始初露端倪，當今，互聯網已經十分普及。隨之而來的是網頁成了和大家息息相關的信息傳達平臺。這個平臺在她外在的表現形式上不能脫離視覺傳達這么一件華麗的外衣，這就是這里要討論的——版式設計在網頁中的應用，通過討論這些內容，了解網頁其實應該是功能性和美學完美結合的統一體。

[關鍵詞]互聯網信息傳達視覺版式設計功能美學

中圖分類號：TP3文獻標識碼：A文章編號：1671—7597(2009)1020115--01

一□網頁版式設計應遵循的原則

網頁的版式設計一定要遵循的就是功能性的突出表現，它是一個網頁與用戶互動的工具，要讓瀏覽網頁的人先從功能上對它有一個認知，之后再在這個基礎上進行版面的設計。

二□網頁版式設計的視覺流程

要做到符合網頁版式設計的視覺流程，可以遵循以下原則：

(一)按照方向與位置安排視覺流程

現代設計的理念就是追求簡約、明確、清晰，在這樣的風格下傳達各種美的概念。如從上到下、從左到右、從左上到右下等視覺流程方法，這些流程軌跡都是最符合人的視覺習慣的，也是視覺流程的最常見的表達形式。

(二)按照視覺中心安排視覺流程

在一個設計作品中，一個亮點是視覺的中心，通過這些如文字、色彩、符號、圖形、線條等視覺形式的元素處理，主動引導視線向一定的方向運動。由主及次、由近及遠、由實及虛的將版面的各個構成因素有序的聯系起來，形成一個整體，就能發揮最大的信息傳達功能。

(三)按照自由方式安排視覺流程

運用自有視覺流程的方法，版面的各視覺元素就應該是非并列的關系，元素的排列也是在非等量的空間內，將枯燥的元素付之新的視覺語言，使之更具視覺效果、更有沖擊力。

三□網頁版式設計的基本內容

(一)網頁的標題設計

在網頁的版式設計中好的標題設計可令人賞心悅目，能形成網頁的整體風格，并且包括網站的1080、導航以及一些快捷的欄目等主要的信息。標題所在的欄目一般位于網頁的上方，并且左右貫穿了整個網頁，標題的背景可以使動態的圖片也可以使一般的靜態圖片，這一點是有網頁的交互式特性所決定的，就是因為網頁是一個需要互動的頁面t這一點在網頁版式設計中一定要考慮到。并且，要在網頁的美感和功能性兩者之間找到一個合理的臨界點來展示這個網頁，讓這兩點都達到最大限度的發揮。

(二)欄目的分割設計

欄目分割的要點是分割后每個面積大小以及各個欄目的位置，這些決定了這個欄目在整個網頁版式中的主次關系，過于平衡，容易讓人覺得視線無處可放，沒有吸引視線的點。

(三)主體的突出

這里的“紅花”也就是主題，可以通過位置、面積大小、顏色等方式被突出出來的，就是主體的突出。一個事務是一個整體，整體又是由個體組成的，每個個體雖然都是個體，但也有主次之分。全部的主體就不能構成主體這一個概念，就像一定要用綠葉來配紅花一樣。這里的“紅花”也就是主題可以通過位置、面積大小、顏色等方式被突出出來的，就是主體的突出。

(四)文字的編排

在前面我們把網頁的版式設計當作是一個整體來看待，現在我們分析它的組成，主要的就是文字，文字可以說是任何視覺上展示的版面的設計主體。

1、點——文字在版面的設計中可以被我們當做點來設計，每個字都是一個個體也同時扮演著一個獨立的整體，就是我們要表現的那個點。

2、線——線有時也是通過文字展現，這就是點動成線。一條線是由一個個點構成的，這一個個的點就是我們要設計的主要元素——文字。

3、面——線動成面，這樣就產生了面積，也就是所謂“面”的形式。面分解開來也是有一個一個點——也就是文字——組成的。

(五)圖文的結合

圖文結合主要有兩個表現形式，首先是文配合圖這樣的形式，這里圖形是網頁的主體，文字是輔助存在的，比如一些新聞類的網站，圖不能表明一件事情的始末，所以要用文字配合說明。另外一種情況正好是反過來的——圖配合文字。在這里要把握圖和文的關系，根據不同類別的網站，網頁中文和圖應當靈活搭配。

(六)版塊的使用

一個綜合類的網站有很多的版塊，所以在整個網頁的設計上要以版塊為整體的大的元素，是版塊作為欄目的細節部分。比如說一個大的門戶類網站，它可能會包括很多內容，像新聞、博客、體育、娛樂、音樂、社會、軍事、房產、家居、數碼、論壇等等，這些版塊都要簡單明確的展示給觀者。

(七)頁面的節奏

節奏是從音樂中派生過來的一個很感性的詞匯，她需要根據設計的風格和觀者本身的感情綜合起來體會，一個實事類的網站給人的節奏就應該是快速律動的：一個軍事類的網站給人的節奏就是嚴肅莊重的等等，這就是節奏。這一點要求設計師要從整體上把握，若不能在網頁版式設計的美感和功能上做到完整或者有所突破而可以的追求節奏t反而會適得其反。

四□關于霸頁的視覺沖擊力

現在同類的網站多如牛毛，各種各樣的網頁也呈現出爭奇斗艷的趨勢，那么怎樣能讓一個網頁在眾多的網站中獨樹一幟、讓人們能對它過目不忘呢?其實除了內容上的新穎，極具視覺沖擊力的網頁設計也是起到了極大的作用!讓人們甚至在只看一眼的情況下能對這個網站產生興趣就是這個網頁版式設計的成功，因為現在很多網站之間彼此都做了鏈接，我們可以從這個頁面登陸到另外一個同類網站上面，這時如果在形式上具有獨到之處，視覺設計就起到了決定性的作用。視覺沖擊力能使人們的視線在這個頁面上停留，從而向人們傳遞信息。信息的傳遞是需要時間的，不管是花幾秒鐘粗略的掃一下頁面或版面。①那么視覺沖擊力是怎么形成的呢?

(一)層次性

圖形和元素之間層次的關系可以達到干擾多余視線的作用并且更能讓人注意到這個頁面中的主體元素，但是這里用于層次的干擾圖形必須是這個頁面中的輔助圖形。

(二)視覺牽引

利用元素來吸引觀者視覺，讓觀者隨著設計者的思維去觀看作品，大多數這樣的情況都是可以歸類為使用點、線、面等的引導來實現的。

(三)顏色誘導。顏色——特別是一些純的顏色，容易給人很強烈的視覺沖擊1在這里運用對比等構成使得頁面充滿吸引力!

五、結論

網頁的功能就是要傳達給人們信息。那么有關于網頁的設計就都不能離開這個最基本的出發點，網頁的版式設計也是一樣。不管版式設計的內容在網頁的設計中應該得到怎樣的應用，都要考慮到與功能的結合使用。所以在給一個網頁設計版式的時候，要首先考慮到整個網站的使用功能，在這個基礎上去發揮通過網頁版式設計傳達給人們信息的這么一個作用。最后把這些和我們所設計的結合在一起，形成一個完美的整體，各個方面都充分的發揮作用，使得人們在瀏覽一個網頁的時候既接收到了需要的信息，又接受了這個網頁傳達給人們的整體設計風格，這才是一個臺格的網頁版式。