板式設(shè)計(jì)課程中的網(wǎng)頁(yè)版式設(shè)計(jì)結(jié)構(gòu)與藝術(shù)性探索

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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