版式設(shè)計(jì)在網(wǎng)頁(yè)中如何應(yīng)用

王 欣

[摘要]上個(gè)世紀(jì)九十年代初期，現(xiàn)代互聯(lián)網(wǎng)的模式開(kāi)始初露端倪，當(dāng)今，互聯(lián)網(wǎng)已經(jīng)十分普及。隨之而來(lái)的是網(wǎng)頁(yè)成了和大家息息相關(guān)的信息傳達(dá)平臺(tái)。這個(gè)平臺(tái)在她外在的表現(xiàn)形式上不能脫離視覺(jué)傳達(dá)這么一件華麗的外衣，這就是這里要討論的——版式設(shè)計(jì)在網(wǎng)頁(yè)中的應(yīng)用，通過(guò)討論這些內(nèi)容，了解網(wǎng)頁(yè)其實(shí)應(yīng)該是功能性和美學(xué)完美結(jié)合的統(tǒng)一體。

[關(guān)鍵詞]互聯(lián)網(wǎng)信息傳達(dá)視覺(jué)版式設(shè)計(jì)功能美學(xué)

中圖分類(lèi)號(hào)：TP3文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1671—7597(2009)1020115--01

一□網(wǎng)頁(yè)版式設(shè)計(jì)應(yīng)遵循的原則

網(wǎng)頁(yè)的版式設(shè)計(jì)一定要遵循的就是功能性的突出表現(xiàn)，它是一個(gè)網(wǎng)頁(yè)與用戶(hù)互動(dòng)的工具，要讓瀏覽網(wǎng)頁(yè)的人先從功能上對(duì)它有一個(gè)認(rèn)知，之后再在這個(gè)基礎(chǔ)上進(jìn)行版面的設(shè)計(jì)。

二□網(wǎng)頁(yè)版式設(shè)計(jì)的視覺(jué)流程

要做到符合網(wǎng)頁(yè)版式設(shè)計(jì)的視覺(jué)流程，可以遵循以下原則：

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

現(xiàn)代設(shè)計(jì)的理念就是追求簡(jiǎn)約、明確、清晰，在這樣的風(fēng)格下傳達(dá)各種美的概念。如從上到下、從左到右、從左上到右下等視覺(jué)流程方法，這些流程軌跡都是最符合人的視覺(jué)習(xí)慣的，也是視覺(jué)流程的最常見(jiàn)的表達(dá)形式。

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

在一個(gè)設(shè)計(jì)作品中，一個(gè)亮點(diǎn)是視覺(jué)的中心，通過(guò)這些如文字、色彩、符號(hào)、圖形、線條等視覺(jué)形式的元素處理，主動(dòng)引導(dǎo)視線向一定的方向運(yùn)動(dòng)。由主及次、由近及遠(yuǎn)、由實(shí)及虛的將版面的各個(gè)構(gòu)成因素有序的聯(lián)系起來(lái)，形成一個(gè)整體，就能發(fā)揮最大的信息傳達(dá)功能。

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

運(yùn)用自有視覺(jué)流程的方法，版面的各視覺(jué)元素就應(yīng)該是非并列的關(guān)系，元素的排列也是在非等量的空間內(nèi)，將枯燥的元素付之新的視覺(jué)語(yǔ)言，使之更具視覺(jué)效果、更有沖擊力。

三□網(wǎng)頁(yè)版式設(shè)計(jì)的基本內(nèi)容

(一)網(wǎng)頁(yè)的標(biāo)題設(shè)計(jì)

在網(wǎng)頁(yè)的版式設(shè)計(jì)中好的標(biāo)題設(shè)計(jì)可令人賞心悅目，能形成網(wǎng)頁(yè)的整體風(fēng)格，并且包括網(wǎng)站的1080、導(dǎo)航以及一些快捷的欄目等主要的信息。標(biāo)題所在的欄目一般位于網(wǎng)頁(yè)的上方，并且左右貫穿了整個(gè)網(wǎng)頁(yè)，標(biāo)題的背景可以使動(dòng)態(tài)的圖片也可以使一般的靜態(tài)圖片，這一點(diǎn)是有網(wǎng)頁(yè)的交互式特性所決定的，就是因?yàn)榫W(wǎng)頁(yè)是一個(gè)需要互動(dòng)的頁(yè)面t這一點(diǎn)在網(wǎng)頁(yè)版式設(shè)計(jì)中一定要考慮到。并且，要在網(wǎng)頁(yè)的美感和功能性?xún)烧咧g找到一個(gè)合理的臨界點(diǎn)來(lái)展示這個(gè)網(wǎng)頁(yè)，讓這兩點(diǎn)都達(dá)到最大限度的發(fā)揮。

(二)欄目的分割設(shè)計(jì)

欄目分割的要點(diǎn)是分割后每個(gè)面積大小以及各個(gè)欄目的位置，這些決定了這個(gè)欄目在整個(gè)網(wǎng)頁(yè)版式中的主次關(guān)系，過(guò)于平衡，容易讓人覺(jué)得視線無(wú)處可放，沒(méi)有吸引視線的點(diǎn)。

(三)主體的突出

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

(四)文字的編排

在前面我們把網(wǎng)頁(yè)的版式設(shè)計(jì)當(dāng)作是一個(gè)整體來(lái)看待，現(xiàn)在我們分析它的組成，主要的就是文字，文字可以說(shuō)是任何視覺(jué)上展示的版面的設(shè)計(jì)主體。

1、點(diǎn)——文字在版面的設(shè)計(jì)中可以被我們當(dāng)做點(diǎn)來(lái)設(shè)計(jì)，每個(gè)字都是一個(gè)個(gè)體也同時(shí)扮演著一個(gè)獨(dú)立的整體，就是我們要表現(xiàn)的那個(gè)點(diǎn)。

2、線——線有時(shí)也是通過(guò)文字展現(xiàn)，這就是點(diǎn)動(dòng)成線。一條線是由一個(gè)個(gè)點(diǎn)構(gòu)成的，這一個(gè)個(gè)的點(diǎn)就是我們要設(shè)計(jì)的主要元素——文字。

3、面——線動(dòng)成面，這樣就產(chǎn)生了面積，也就是所謂“面”的形式。面分解開(kāi)來(lái)也是有一個(gè)一個(gè)點(diǎn)——也就是文字——組成的。

(五)圖文的結(jié)合

圖文結(jié)合主要有兩個(gè)表現(xiàn)形式，首先是文配合圖這樣的形式，這里圖形是網(wǎng)頁(yè)的主體，文字是輔助存在的，比如一些新聞?lì)惖木W(wǎng)站，圖不能表明一件事情的始末，所以要用文字配合說(shuō)明。另外一種情況正好是反過(guò)來(lái)的——圖配合文字。在這里要把握?qǐng)D和文的關(guān)系，根據(jù)不同類(lèi)別的網(wǎng)站，網(wǎng)頁(yè)中文和圖應(yīng)當(dāng)靈活搭配。

(六)版塊的使用

一個(gè)綜合類(lèi)的網(wǎng)站有很多的版塊，所以在整個(gè)網(wǎng)頁(yè)的設(shè)計(jì)上要以版塊為整體的大的元素，是版塊作為欄目的細(xì)節(jié)部分。比如說(shuō)一個(gè)大的門(mén)戶(hù)類(lèi)網(wǎng)站，它可能會(huì)包括很多內(nèi)容，像新聞、博客、體育、娛樂(lè)、音樂(lè)、社會(huì)、軍事、房產(chǎn)、家居、數(shù)碼、論壇等等，這些版塊都要簡(jiǎn)單明確的展示給觀者。

(七)頁(yè)面的節(jié)奏

節(jié)奏是從音樂(lè)中派生過(guò)來(lái)的一個(gè)很感性的詞匯，她需要根據(jù)設(shè)計(jì)的風(fēng)格和觀者本身的感情綜合起來(lái)體會(huì)，一個(gè)實(shí)事類(lèi)的網(wǎng)站給人的節(jié)奏就應(yīng)該是快速律動(dòng)的：一個(gè)軍事類(lèi)的網(wǎng)站給人的節(jié)奏就是嚴(yán)肅莊重的等等，這就是節(jié)奏。這一點(diǎn)要求設(shè)計(jì)師要從整體上把握，若不能在網(wǎng)頁(yè)版式設(shè)計(jì)的美感和功能上做到完整或者有所突破而可以的追求節(jié)奏t反而會(huì)適得其反。

四□關(guān)于霸頁(yè)的視覺(jué)沖擊力

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

(一)層次性

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

(二)視覺(jué)牽引

利用元素來(lái)吸引觀者視覺(jué)，讓觀者隨著設(shè)計(jì)者的思維去觀看作品，大多數(shù)這樣的情況都是可以歸類(lèi)為使用點(diǎn)、線、面等的引導(dǎo)來(lái)實(shí)現(xiàn)的。

(三)顏色誘導(dǎo)。顏色——特別是一些純的顏色，容易給人很強(qiáng)烈的視覺(jué)沖擊1在這里運(yùn)用對(duì)比等構(gòu)成使得頁(yè)面充滿(mǎn)吸引力!

五、結(jié)論

網(wǎng)頁(yè)的功能就是要傳達(dá)給人們信息。那么有關(guān)于網(wǎng)頁(yè)的設(shè)計(jì)就都不能離開(kāi)這個(gè)最基本的出發(fā)點(diǎn)，網(wǎng)頁(yè)的版式設(shè)計(jì)也是一樣。不管版式設(shè)計(jì)的內(nèi)容在網(wǎng)頁(yè)的設(shè)計(jì)中應(yīng)該得到怎樣的應(yīng)用，都要考慮到與功能的結(jié)合使用。所以在給一個(gè)網(wǎng)頁(yè)設(shè)計(jì)版式的時(shí)候，要首先考慮到整個(gè)網(wǎng)站的使用功能，在這個(gè)基礎(chǔ)上去發(fā)揮通過(guò)網(wǎng)頁(yè)版式設(shè)計(jì)傳達(dá)給人們信息的這么一個(gè)作用。最后把這些和我們所設(shè)計(jì)的結(jié)合在一起，形成一個(gè)完美的整體，各個(gè)方面都充分的發(fā)揮作用，使得人們?cè)跒g覽一個(gè)網(wǎng)頁(yè)的時(shí)候既接收到了需要的信息，又接受了這個(gè)網(wǎng)頁(yè)傳達(dá)給人們的整體設(shè)計(jì)風(fēng)格，這才是一個(gè)臺(tái)格的網(wǎng)頁(yè)版式。