摘 要：在這個信息化的時代，電子計算機(jī)的普及和應(yīng)用，編輯文檔和圖文處理已經(jīng)是每個大學(xué)生必須掌握的知識內(nèi)容。網(wǎng)頁設(shè)計是一個復(fù)雜的過程，網(wǎng)頁版式設(shè)計是其中的最重點環(huán)節(jié)。本文從網(wǎng)頁設(shè)計的本質(zhì)出發(fā)，對網(wǎng)頁版式設(shè)計的結(jié)構(gòu)和藝術(shù)性各個方面做了詳細(xì)的分析。

關(guān)鍵詞：版式設(shè)計 網(wǎng)頁設(shè)計 學(xué)生 藝術(shù)性

構(gòu)建一個網(wǎng)站就好比寫一篇論文，首先要列出題綱，才能主題明確、層次清晰。網(wǎng)站建設(shè)初學(xué)者，最容易犯的錯誤就是：確定題材后立刻開始制作，沒有進(jìn)行合理規(guī)劃。從而導(dǎo)致網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜混亂，板塊編排混亂等。結(jié)果不但瀏覽者看得糊里糊涂，設(shè)計者自己在擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難。因此，在實際的網(wǎng)站設(shè)計中，總是將這兩種結(jié)構(gòu)混合起來使用。網(wǎng)站希望瀏覽者既可以方便快速地達(dá)到自己需要的頁面，又可以清晰地知道自己的位置。所以，最好的辦法是：首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。關(guān)于鏈接結(jié)構(gòu)的設(shè)計，在實際的網(wǎng)頁制作中是非常重要一環(huán)，采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局。

一、國內(nèi)外網(wǎng)頁板式流行不一

國內(nèi)外的流行網(wǎng)頁版式大多是不一樣，這和國內(nèi)外的文化差異、網(wǎng)絡(luò)發(fā)展都有一定的關(guān)系。國外流行的一般是較小版面的網(wǎng)頁版式。無論是內(nèi)容豐富的門戶網(wǎng)站還是簡單的個人網(wǎng)站，通常的頁面版式面積都不超過兩個電腦屏幕。而且網(wǎng)頁結(jié)果一般比較簡單，在三欄式的基礎(chǔ)上稍微擴(kuò)展。如雅虎首頁將近兩頁，三欄式設(shè)計，導(dǎo)航清晰。又如MSN首頁也是兩頁，同樣類似三欄設(shè)計，導(dǎo)航清晰。再如某學(xué)院網(wǎng)站，只有一頁長，橫截三欄設(shè)計，中間大圖片很有特色。這樣的網(wǎng)頁版式結(jié)果風(fēng)格有利于頁面層次分明，頁面信息層次清晰。

而國內(nèi)流行的多為復(fù)雜的復(fù)合式和十分絢麗的整體網(wǎng)頁。新浪、搜狐和網(wǎng)易三大門戶首頁均為5頁或者6頁長，頁面為復(fù)雜的復(fù)合式。網(wǎng)頁的內(nèi)容特別多，廣告也多。中文的門戶網(wǎng)站幾乎都是這樣設(shè)計的，因為其信息容量大，可設(shè)計廣告位多。而大多數(shù)的小網(wǎng)站偏向于整體的絢麗風(fēng)格，如各個汽車廠商的網(wǎng)站，幾乎都為整頁面的FLASH動畫。這類網(wǎng)頁互交能力強(qiáng)，各種效果顯得比較時尚。

二、網(wǎng)頁設(shè)計的基本版式結(jié)構(gòu)分析

網(wǎng)頁設(shè)計中的元素包括有設(shè)計網(wǎng)站標(biāo)志、設(shè)計網(wǎng)站色彩、設(shè)計網(wǎng)站字體和設(shè)計網(wǎng)站宣傳語。對于用戶而言，網(wǎng)頁是由文字、圖片、動畫、音樂、影像、色彩等元素組成，這些是用戶可以直觀感受到的。在網(wǎng)頁設(shè)計中網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。由于網(wǎng)頁顯示技術(shù)的特殊性和網(wǎng)頁瀏覽操作的獨特性，網(wǎng)頁的版式結(jié)構(gòu)是有一定的規(guī)律的，通常都要用到一個導(dǎo)航欄。常用到的網(wǎng)頁版式結(jié)構(gòu)歸納如下：

1.兩欄式：兩欄分為橫排兩欄和豎排兩欄兩種，豎排兩欄較少見，橫排兩欄則使用較多。橫排兩欄即是頂部或者底部有一個面積相對較小的導(dǎo)航欄。豎排兩欄的導(dǎo)航欄則在側(cè)邊。

2.三欄式：三欄式分為三種：左導(dǎo)航欄式、右導(dǎo)航欄式和三欄導(dǎo)航式。這種格式中，它們的頂部都可能保留有橫向?qū)Ш綑冢櫭剂x，左欄導(dǎo)航即左側(cè)有一窄欄為導(dǎo)航欄，右側(cè)為寬內(nèi)容欄；右欄導(dǎo)航則為右側(cè)有一窄導(dǎo)航欄，左側(cè)為寬內(nèi)容欄；三欄導(dǎo)航為左右各一個窄導(dǎo)航欄，中間仍為寬內(nèi)容欄。這三種結(jié)構(gòu)各有優(yōu)缺點。左欄導(dǎo)航式是至今為止使用得最多、最廣泛的網(wǎng)頁版式結(jié)構(gòu)。目前超過半數(shù)的網(wǎng)頁是這種版式結(jié)構(gòu)。左欄導(dǎo)航式的優(yōu)點是美觀大方而且實用。正是因為它被如此廣泛的使用，它也有了一個致命的弱點——缺乏新意。右欄導(dǎo)航式和左欄導(dǎo)航式一樣是一種很鮮明的結(jié)構(gòu)，但是大多數(shù)人還是偏向于左欄導(dǎo)航式，主要原因是因為左欄導(dǎo)航式已經(jīng)被大家接受為一種結(jié)構(gòu)標(biāo)準(zhǔn)，所以右欄導(dǎo)航式很少見到。右欄導(dǎo)航式的優(yōu)點就是比較有新意，但也存在被被用戶接受的缺點。三欄導(dǎo)航在許多國外的大門戶網(wǎng)站中用得比較多，因為它能夠提供更多的信息板塊，也就是能夠提供更多的信息容量，或者能提供更多的廣告位置，這就是它的優(yōu)勢。而缺點也是很明顯的，三欄導(dǎo)航容易導(dǎo)致網(wǎng)頁頁面內(nèi)容混亂繁冗。

3.復(fù)合式：復(fù)合式網(wǎng)頁版式結(jié)構(gòu)。國內(nèi)的幾大門戶網(wǎng)站的首頁均采用的復(fù)合式的網(wǎng)頁版式結(jié)構(gòu)設(shè)計。這種設(shè)計通常把詳細(xì)的分類導(dǎo)航放在頁面頂端，把剩余頁面橫切成很多段，每個段又是單獨的一塊版式風(fēng)格，在一段中頂部會有一個標(biāo)題提示這段的內(nèi)容，然后端可能是兩欄也可能是三欄或者四欄結(jié)構(gòu)。以新浪網(wǎng)首頁為例，最上面橫欄為大導(dǎo)航欄；下面接著的段落塊是導(dǎo)航廣告塊，廣告塊采用左側(cè)欄式；再下面是博客于新聞段落塊，其中為左側(cè)欄式，左側(cè)欄式中的內(nèi)容欄又嵌套著上下欄，其中的下欄又為左右平分的兩欄；再下為娛樂與體育的段落塊，為三欄結(jié)構(gòu)；再下為社會與直播段落塊，同樣是三欄結(jié)構(gòu)；再下為游戲與經(jīng)濟(jì)塊，其中嵌套了左欄結(jié)構(gòu)，左欄結(jié)構(gòu)中又嵌套了左右平分式的三欄結(jié)構(gòu)。再經(jīng)過5個段落塊后為頁面最下面的新浪版權(quán)塊。

可見復(fù)合式是在分段基礎(chǔ)上復(fù)雜的套用各種兩欄、三欄甚至更多欄的網(wǎng)頁版式結(jié)構(gòu)。這種結(jié)構(gòu)可載信息量極大，所以通常被中文門戶網(wǎng)站采用。其缺點為死板、內(nèi)容過多過繁。

4.自由式：自由式即除了以上這些常用形式外的其他形式。這里以實例討論幾種比較有個性的網(wǎng)頁版式結(jié)構(gòu)。在此引例說明兩種。

三、網(wǎng)站板式設(shè)計的藝術(shù)性

1.網(wǎng)頁風(fēng)格的藝術(shù)化定位：“風(fēng)格”是抽象的，是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標(biāo)志，色彩，字體，標(biāo)語）、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價值等等諸多因素，網(wǎng)站可以是平易近人的、生動活潑的也可以是專業(yè)嚴(yán)肅的。不管是色彩、技術(shù)、文字、布局，還是交互方式，只要你能由此讓瀏覽者明確分辨出這是你網(wǎng)站獨有的，這就形成了網(wǎng)站的“風(fēng)格”。風(fēng)格是有人性的，通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以概括出一個站點的個性：是粗獷豪放的，還是清新秀麗的；是溫文儒雅的，還是執(zhí)著熱情的；是活潑易變的，還是墨守成規(guī)的?？傊?，有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：在普通網(wǎng)站上你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量多少，瀏覽速度快慢等；在有風(fēng)格的網(wǎng)站上你可以獲得除內(nèi)容之外的更感性的認(rèn)識，比如站點的品位，對瀏覽者的態(tài)度等。在明確自己想給人以怎樣的印象后，要找出網(wǎng)站中最有特色的東西，就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點強(qiáng)化、宣傳?？傊L(fēng)格的形成不是一次定位的，你可以在實踐中不斷強(qiáng)化、調(diào)整、改進(jìn)。

2。有創(chuàng)意的內(nèi)容選擇及可讀性藝術(shù)： 好的內(nèi)容選擇需要有好的創(chuàng)意，作為網(wǎng)頁設(shè)計制作者，最苦惱的就是沒有好的內(nèi)容創(chuàng)意。網(wǎng)絡(luò)上的最多的創(chuàng)意即是來自于虛擬同現(xiàn)實的結(jié)合。創(chuàng)意的目的是為了更好的宣傳與推廣網(wǎng)站，如果創(chuàng)意很好，卻對網(wǎng)站發(fā)展毫無意義，那么，網(wǎng)站設(shè)計制作者也應(yīng)當(dāng)放棄這個創(chuàng)意。另外，主頁內(nèi)容是網(wǎng)站的根本之所在，如果內(nèi)容空洞，即使頁面制作地再怎樣精美，仍然不會有多少用戶。從根本上說，網(wǎng)站內(nèi)容仍然左右著網(wǎng)站流量，內(nèi)容為王依然是個人網(wǎng)站成功的關(guān)鍵。

網(wǎng)頁版式設(shè)計需要盡量適合用戶的瀏覽，而不應(yīng)該需要人去過多的思考或者理解。例如天極圖片站首頁，首先瀏覽者的目光會被大幅主圖片吸引，然后會轉(zhuǎn)移到右邊的小圖片上，接下來會查閱下面欄目的各種圖片。這個過程是完全自然順暢的，并不需要過多的思考，所以這是一個成功的設(shè)計。

3.避免視覺疲勞的藝術(shù)功能：視覺疲勞是某些網(wǎng)站的詬病，是網(wǎng)頁的致命傷。如果用戶打開一個網(wǎng)站瀏覽感覺到視覺疲勞，他肯定會中斷瀏覽關(guān)掉這個網(wǎng)站，如果是有需求必須在這個網(wǎng)站上尋找某種信息，這個網(wǎng)站也會給用戶留下非常不好的印象。通常某個網(wǎng)頁是很難給用戶留下版式設(shè)計上的深刻印象的，除非這個頁面很完美，或者很糟，而通常很多情況是后者。這就會導(dǎo)致網(wǎng)頁的瀏覽者越來越少。視覺疲勞不一定是網(wǎng)頁設(shè)計時安排的內(nèi)容所造成的，也可能是后期某些沒有想到的內(nèi)容組合造成的。

4.保持網(wǎng)頁上不同內(nèi)容的一致性的藝術(shù)：網(wǎng)頁上的內(nèi)容可能有很多種分類，但是在設(shè)計網(wǎng)頁版式的時候，一定要注意不同內(nèi)容之間的聯(lián)系，保持在某個方面的一致性。例如在天極圖片站首頁中，頁面大部分內(nèi)容為圖片，頁面上的廣告也都設(shè)置為圖片形式的廣告，這樣保證了不同網(wǎng)頁內(nèi)容的一致性，更加突出了網(wǎng)站強(qiáng)調(diào)的主旨——圖片網(wǎng)站。而對于老古開發(fā)網(wǎng)，可以看到頁面混亂，過多雜亂的廣告已經(jīng)造成頁面內(nèi)容非常不協(xié)調(diào)，顯得內(nèi)容松散，難以感受到主旨。

隨著網(wǎng)頁、交互式等多種媒體迅速發(fā)展，版式設(shè)計中的網(wǎng)頁設(shè)計人才成為社會急需，如何使得學(xué)生通過改變課堂教學(xué)方式來提升學(xué)生的網(wǎng)頁設(shè)計的能力，提高網(wǎng)頁板式的藝術(shù)性，針對網(wǎng)頁設(shè)計技術(shù)的新要求，怎樣進(jìn)行網(wǎng)頁設(shè)計的結(jié)構(gòu)分析和藝術(shù)性表達(dá)，明確網(wǎng)頁板式結(jié)構(gòu)的實用性和藝術(shù)性特點，這樣才能設(shè)計出具有高品質(zhì)的網(wǎng)頁視覺設(shè)計。