前言：本站為你精心整理了版式設(shè)計(jì)在網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中應(yīng)用范文，希望能為你的創(chuàng)作提供參考價(jià)值，我們的客服老師可以幫助你提供個(gè)性化的參考范文，歡迎咨詢。

[摘要]從網(wǎng)頁(yè)版式設(shè)計(jì)的概念、傳統(tǒng)印刷版式設(shè)計(jì)與網(wǎng)頁(yè)版式設(shè)計(jì)的差異、網(wǎng)頁(yè)版式設(shè)計(jì)常用的布局形式和步驟等幾方面進(jìn)行了研究與探索。

[關(guān)鍵詞]版式設(shè)計(jì)；網(wǎng)頁(yè)版式；設(shè)計(jì)排版；布局技巧

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

一、版式設(shè)計(jì)與網(wǎng)頁(yè)版式設(shè)計(jì)的概念與差異

1.概念

版式設(shè)計(jì)，又稱為版式設(shè)計(jì)，是平面設(shè)計(jì)中的一大分支指，是設(shè)計(jì)人員根據(jù)設(shè)計(jì)主題和視覺(jué)需求，在預(yù)先設(shè)定的有限版面內(nèi)，運(yùn)用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片（圖形）及色彩等視覺(jué)傳達(dá)信息要素，進(jìn)行有組織、有目的的組合排列的設(shè)計(jì)行為與過(guò)程。隨著信息技術(shù)的高度發(fā)展，網(wǎng)頁(yè)、海報(bào)、廣告、平面及影像等眾多領(lǐng)域都會(huì)涉及到版式設(shè)計(jì)。版面設(shè)計(jì)除了設(shè)計(jì)者的藝術(shù)構(gòu)思，也需要與編排技術(shù)相結(jié)合，是藝術(shù)與技術(shù)的統(tǒng)一體。網(wǎng)頁(yè)版式設(shè)計(jì)是指設(shè)計(jì)者在網(wǎng)頁(yè)基本形態(tài)要素的支撐下，按照一定的藝術(shù)規(guī)律進(jìn)行美化和組織布局，同時(shí)，結(jié)合網(wǎng)頁(yè)的文字、圖像、動(dòng)畫、音頻、視頻等元素，使其形成整體統(tǒng)一的視覺(jué)效果，設(shè)計(jì)師所采用的的視覺(jué)藝術(shù)規(guī)律和藝術(shù)風(fēng)格，在給瀏覽者帶來(lái)感官上的美感和精神上的享受的同時(shí)，也在有限的屏幕空間內(nèi)體現(xiàn)了設(shè)計(jì)者的想法、意圖，從而達(dá)到了有效傳達(dá)信息的目標(biāo)。

2.網(wǎng)頁(yè)版式設(shè)計(jì)的作用

如今網(wǎng)絡(luò)技術(shù)快速發(fā)展，網(wǎng)絡(luò)覆蓋面積逐步增大，怎樣體現(xiàn)網(wǎng)站最大的信息價(jià)值，對(duì)瀏覽者產(chǎn)生更強(qiáng)的吸引力，是大家普遍關(guān)心的問(wèn)題，這就對(duì)網(wǎng)頁(yè)版式設(shè)計(jì)提出了更高的要求，設(shè)計(jì)出符合要求的網(wǎng)頁(yè)是提高網(wǎng)站瀏覽量的途徑之一。網(wǎng)頁(yè)版式設(shè)計(jì)決定了網(wǎng)站的類型特點(diǎn)和藝術(shù)風(fēng)格，它以直觀的視覺(jué)配置牽引著網(wǎng)頁(yè)頁(yè)面之間的方向性，網(wǎng)頁(yè)內(nèi)容的表達(dá)效果也隨之增強(qiáng)，在感性表達(dá)的同時(shí)，設(shè)計(jì)者要兼具考慮網(wǎng)頁(yè)空間是否合理，頁(yè)面下載速度快不快、頁(yè)面效果是不是最優(yōu)等技術(shù)因素，這也需要設(shè)計(jì)者在設(shè)計(jì)過(guò)程中具有理性思維。

3.網(wǎng)頁(yè)版式設(shè)計(jì)與傳統(tǒng)印刷版式設(shè)計(jì)的差異

網(wǎng)頁(yè)版式設(shè)計(jì)與傳統(tǒng)的報(bào)刊雜志等媒體平面設(shè)計(jì)有著較強(qiáng)的相似性，很多傳統(tǒng)出版行業(yè)版面設(shè)計(jì)的規(guī)則和禁忌，也大都適用于網(wǎng)頁(yè)的設(shè)計(jì)，但也存在較大差異。具體表現(xiàn)如下：（1）印刷品都有固定的規(guī)格尺寸，網(wǎng)頁(yè)則不然，它的頁(yè)面尺寸可能會(huì)出現(xiàn)1024X768像素、800X600像素等不同的規(guī)格，由顯示器的分辨率來(lái)確定，其組織結(jié)構(gòu)也不是線性組合，頁(yè)面上每個(gè)元素的尺寸和位置對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者是很難精確控制的。（2）傳統(tǒng)印刷品的設(shè)計(jì)者除了可以在版式設(shè)計(jì)中進(jìn)行優(yōu)化，還可以通過(guò)指定使用的紙張和油墨，讓設(shè)計(jì)效果得以最佳呈現(xiàn)；而網(wǎng)頁(yè)設(shè)計(jì)者卻不能要求瀏覽者使用什么樣的智能設(shè)備，最終在呈現(xiàn)上還要受瀏覽者瀏覽器的色彩、分辨率和瀏覽者瀏覽習(xí)慣的制約，設(shè)計(jì)者對(duì)呈現(xiàn)效果的可控制性較低。（3）傳統(tǒng)的印刷品具有成熟的印刷標(biāo)準(zhǔn)，而互聯(lián)網(wǎng)正處于不斷發(fā)展之中，網(wǎng)頁(yè)設(shè)計(jì)中的每個(gè)事件都可能隨時(shí)發(fā)生變化，從而帶來(lái)網(wǎng)頁(yè)版式設(shè)計(jì)中的變化。（4）網(wǎng)頁(yè)設(shè)計(jì)作為一種特殊的版面，既有文字、圖片、視頻，還有些流動(dòng)窗口和廣告等，內(nèi)容更加繁多、復(fù)雜，設(shè)計(jì)在強(qiáng)調(diào)藝術(shù)性的同時(shí)，還要使頁(yè)面內(nèi)容和形式達(dá)到有機(jī)統(tǒng)一，考慮頁(yè)面的可讀性和網(wǎng)絡(luò)瀏覽的特性，并兼具整體美感。（5）動(dòng)態(tài)化也是網(wǎng)頁(yè)版式設(shè)計(jì)區(qū)別于傳統(tǒng)印刷版式設(shè)計(jì)的顯著特征。網(wǎng)頁(yè)版式設(shè)計(jì)的動(dòng)態(tài)設(shè)計(jì)是增強(qiáng)網(wǎng)頁(yè)的可讀性，參與性與趣味性的有力手段。同時(shí)，網(wǎng)頁(yè)設(shè)計(jì)人員必須根據(jù)網(wǎng)站各個(gè)階段的發(fā)展需求以及用戶的反饋信息，經(jīng)常對(duì)網(wǎng)頁(yè)版式進(jìn)行調(diào)整和修改，更具靈活性。

二、網(wǎng)站類型的不同所體現(xiàn)出的網(wǎng)頁(yè)版式特征

網(wǎng)頁(yè)版式設(shè)計(jì)根據(jù)內(nèi)容性質(zhì)，在布局上會(huì)產(chǎn)生差異，可劃分為如下幾個(gè)類型：

1.政府門戶類網(wǎng)站

在此類網(wǎng)頁(yè)中，文字居多，圖片運(yùn)用較少，并運(yùn)用Icon功能識(shí)別圖標(biāo)使用戶可以快速預(yù)知按鈕的功能、文本的意義，從而快捷的引導(dǎo)用戶進(jìn)入功能頁(yè)面辦事，通過(guò)文字的敘述和圖標(biāo)的運(yùn)用，注重信息和辦事功能的展示，增加政府部門的權(quán)威性。注意，在此類網(wǎng)頁(yè)版式設(shè)計(jì)時(shí)，是不能增加其他方面的廣告信息的，只能闡述與主題相關(guān)的內(nèi)容。

2.新聞或門戶類網(wǎng)站

這類網(wǎng)站在首頁(yè)上，會(huì)根據(jù)內(nèi)容的不同，劃分出新聞、教育、娛樂(lè)、財(cái)經(jīng)、科技等多個(gè)模塊。以文字為主，穿插一定量與板塊內(nèi)容相關(guān)的高品質(zhì)圖片，來(lái)吸引瀏覽者的注意，且為了便于瀏覽者的閱讀，版面大多較為整齊工整，且具有一定的韻律感，就像一首歌曲，每個(gè)模塊具有不同的節(jié)拍，但在細(xì)節(jié)上加以區(qū)別，保持整個(gè)頁(yè)面的統(tǒng)一協(xié)調(diào)。一般來(lái)說(shuō)，在這類的網(wǎng)頁(yè)設(shè)計(jì)中，橫向的內(nèi)容通常是不變的，讓瀏覽者在瀏覽時(shí)有整體連貫性的體驗(yàn)，主要通過(guò)縱向的板塊變化，層疊的展示出欄目板塊，縱向延展開(kāi)去，網(wǎng)頁(yè)能存儲(chǔ)的信息量也隨之龐大。

3.商務(wù)類網(wǎng)站

網(wǎng)站主要體現(xiàn)對(duì)企業(yè)、產(chǎn)品的介紹和推薦功能，除了一些企業(yè)介紹、通知公告等文字類板塊外，產(chǎn)品的圖片或視頻展示窗口也需要安排在適當(dāng)?shù)奈恢?，并配以產(chǎn)品的文字說(shuō)明，通過(guò)文字與圖像之間占比大小的相互配合，吸引瀏覽者進(jìn)一步的了解企業(yè)、產(chǎn)品，從而達(dá)到有效的宣傳目標(biāo)。

三、網(wǎng)頁(yè)版式設(shè)計(jì)常用的布局形式

網(wǎng)頁(yè)版式設(shè)計(jì)布局，簡(jiǎn)單的理解就是將圖片、視頻和文字排擺放在頁(yè)面的不同位置給瀏覽者帶來(lái)最適合的瀏覽體驗(yàn)，兼顧網(wǎng)站內(nèi)容的呈現(xiàn)、美感和瀏覽者體驗(yàn)達(dá)到最佳的形式。經(jīng)過(guò)網(wǎng)頁(yè)設(shè)計(jì)者大量的實(shí)踐總結(jié)，常見(jiàn)的網(wǎng)頁(yè)布局形式包括：“同”字形布局、“T”字形布局、“三”字形布局、“川”字形布局等，下面我們就7類網(wǎng)頁(yè)布局設(shè)計(jì)一一加以解析。

1.“同”字型結(jié)構(gòu)布局，也稱為“國(guó)”字型

在頁(yè)面的頂部位置是網(wǎng)站Logo及廣告條，往下可分為三欄，左右兩欄分列兩小條內(nèi)容，中間位置是網(wǎng)站的主要部分，與左右兩欄并列縱向延伸到網(wǎng)站底部，版權(quán)信息、友情鏈接、網(wǎng)站地圖等匯集于網(wǎng)頁(yè)底部。

2.“T”形結(jié)構(gòu)布局

此類結(jié)構(gòu)頁(yè)面頂部同上，網(wǎng)站Logo一般置于頂部左上角，往下分為二欄，左欄設(shè)置為主導(dǎo)航區(qū)，網(wǎng)頁(yè)主要內(nèi)容分列在右欄為。左導(dǎo)航區(qū)的一般背景一般設(shè)置為較深的顏色，整體效果類似英文字母“T”。這種布局的優(yōu)點(diǎn)是頁(yè)面條理清晰、主題突出，是初學(xué)者最容易掌握的布局方法。缺點(diǎn)是對(duì)色彩細(xì)節(jié)搭配要求比較高，如果搭配不當(dāng)，會(huì)給人以規(guī)矩呆板感，容易引人厭煩。

3.“口”形結(jié)構(gòu)布局

這種布局類似一個(gè)方框，表現(xiàn)為頁(yè)面頂部和底部是廣告條，中間區(qū)域分為三欄，左欄是主菜單，中間為網(wǎng)頁(yè)主要內(nèi)容，右欄是熱點(diǎn)推薦、友情鏈接或圖片展示區(qū)域等。這種布局的優(yōu)點(diǎn)是充分利用版面，網(wǎng)頁(yè)布局緊湊，信息豐富，但四面封閉，易使人產(chǎn)生壓抑感。

4.對(duì)稱對(duì)比結(jié)構(gòu)布局

整個(gè)網(wǎng)頁(yè)采取左右或者上下對(duì)稱的布局，非常醒目，在顏色上選擇一半深色，另一半淺色，兩部分搭配協(xié)調(diào)，會(huì)具有很強(qiáng)的視覺(jué)沖擊力，但將兩部分有機(jī)地結(jié)合比較困難，不易掌握，此類布局一般用于設(shè)計(jì)型站點(diǎn)。

5.POP結(jié)構(gòu)布局

這種布局就像一張宣傳海報(bào)，整個(gè)頁(yè)面中間是一幅醒目且設(shè)計(jì)精美的大圖片，大圖中間再穿插一些圖片和文字，設(shè)計(jì)漂亮吸引人，但大量的運(yùn)用圖片會(huì)導(dǎo)致圖形分辨率偏大，網(wǎng)頁(yè)下載速度慢，瀏覽不順暢，且提供的文字信息量有限。此類布局常用于時(shí)尚類或教育類站點(diǎn)。

6.Flash布局

這種布局整個(gè)頁(yè)面就是一個(gè)Flash動(dòng)畫，畫面絢麗，動(dòng)感十足，由于Flash的強(qiáng)大功能，頁(yè)面所表達(dá)的信息更加豐富，也能直觀的體驗(yàn)覺(jué)效果和聽(tīng)覺(jué)效果，是比較新潮的一種布局方式。

7.標(biāo)題文本型結(jié)構(gòu)布局

這種類型的頁(yè)面最上部往往是主題標(biāo)題，下面是正文，頁(yè)面內(nèi)容以文本為主，比如一些文章頁(yè)、投票、注冊(cè)等內(nèi)容的頁(yè)面多采用此類布局。以上是目前網(wǎng)絡(luò)上較為常見(jiàn)的幾種布局，在具體的使用時(shí)可靈活使用。比如板塊內(nèi)容非常多，就要考慮用“國(guó)字型”；而如果一些說(shuō)明性的內(nèi)容比較多的時(shí)候，例如新聞或者門戶網(wǎng)站的正文頁(yè)，則可以考慮標(biāo)題正文型；如果是企業(yè)網(wǎng)站或個(gè)人主頁(yè)，不需要表達(dá)過(guò)多的文字信息，那么可采用POP結(jié)構(gòu)、Flash布局或?qū)ΨQ對(duì)比結(jié)構(gòu)，能大大豐富網(wǎng)頁(yè)視覺(jué)和聽(tīng)覺(jué)效果，引人矚目。

四、網(wǎng)頁(yè)版式設(shè)計(jì)布局的步驟

1.草案

這屬于初步的創(chuàng)造階段，不講究過(guò)多考慮美工細(xì)節(jié)和技術(shù)功能功能，網(wǎng)頁(yè)也不必精美整齊，也，只以簡(jiǎn)單的線條布局出網(wǎng)頁(yè)的輪廓。此階段多在于設(shè)計(jì)者的構(gòu)思創(chuàng)意，盡可能多思考多探索不同類型和風(fēng)格，最后選定一幅滿意的作為繼續(xù)創(chuàng)作的腳本，在實(shí)際工作中，根據(jù)客戶需求也需要準(zhǔn)備多幅創(chuàng)作腳本，以供選擇。

2.粗略布局

梳理出網(wǎng)站Logo、主導(dǎo)航、搜索、友情鏈接、廣告欄、聯(lián)系方式和版權(quán)信息等必須放置到頁(yè)面上的功能模塊。通常將網(wǎng)站Logo、主導(dǎo)航等最重要的模塊放頁(yè)面上部最顯眼、最突出的位置，最好是屏幕第一屏的位置，往下可以根據(jù)邏輯關(guān)系考慮次要模塊的排放位置。

3.定案

將粗略布局繼續(xù)美化，使其更加精細(xì)和具體，最后達(dá)到滿意定案。對(duì)于網(wǎng)頁(yè)版面布局的設(shè)計(jì)，以下原則需要設(shè)計(jì)者重視：加強(qiáng)視覺(jué)效果，加強(qiáng)文案的可視度和可讀性，強(qiáng)調(diào)頁(yè)面的統(tǒng)一感。一些新鮮和個(gè)性化的布局將更能體現(xiàn)設(shè)計(jì)者的創(chuàng)意，也更能吸引觀者的注意，便于對(duì)網(wǎng)站加深印象。

參考文獻(xiàn)：

[1]王靚、董繼先：《論版式設(shè)計(jì)的藝術(shù)化》，《藝術(shù)與設(shè)計(jì):理論版》2007年第5期

作者:程勇軍 余晶 劉衛(wèi) 單位:湖北省人民政府門戶網(wǎng)站