分析網(wǎng)頁版式設(shè)計常用的布局形式和步驟,平面設(shè)計論文

分析網(wǎng)頁版式設(shè)計常用的布局形式和步驟,平面設(shè)計論文本篇論文目錄導(dǎo)航：【】【】【】【】分析網(wǎng)頁版式設(shè)計常用的布局形式和步驟【】版式設(shè)計論文范文：分析網(wǎng)頁版式設(shè)計常用的布局形式和步驟摘要：從網(wǎng)頁版式設(shè)計的概念、傳統(tǒng)印刷版式設(shè)計與網(wǎng)頁版式設(shè)計的差異、網(wǎng)頁版式設(shè)計常用的布局形式和步驟等幾方面進行了研究與探尋求索。本文關(guān)鍵詞語：版式設(shè)計，網(wǎng)頁版式設(shè)計，排版布局技巧，隨著我們國家信息化高速發(fā)展和人們對網(wǎng)頁設(shè)計要求的逐步提高，網(wǎng)頁設(shè)計技術(shù)快速興起，并逐步遭到人們重視。網(wǎng)頁設(shè)計分為網(wǎng)頁技術(shù)設(shè)計與網(wǎng)頁藝術(shù)設(shè)計，也就是在運用JAVA、等編程技術(shù)進行網(wǎng)頁技術(shù)設(shè)計的同時，對網(wǎng)頁的文字、版式設(shè)計、顏色搭配等藝術(shù)視覺設(shè)計進行充分融合及統(tǒng)一，針對網(wǎng)絡(luò)信息不同的特點進行全方位的展示。網(wǎng)頁藝術(shù)設(shè)計主要由版式設(shè)計、視聽元素設(shè)計等共同組合而成。本篇文章主要從版式設(shè)計與網(wǎng)頁設(shè)計的差異，以及網(wǎng)頁設(shè)計的布局類型等方面，對網(wǎng)頁的版式設(shè)計進行分析與探究，進而使設(shè)計者根據(jù)詳細情況找到更合適網(wǎng)站的版式形式。一、版式設(shè)計與網(wǎng)頁版式設(shè)計的概念與差異1.概念版式設(shè)計，又稱為版式設(shè)計，是平面設(shè)計中的一大分支指，是設(shè)計人員根據(jù)設(shè)計主題和視覺需求，在預(yù)先設(shè)定的有限版面內(nèi)，運用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片〔圖形〕及色彩等視覺傳達信息要素，進行有組織、有目的的組合排列的設(shè)計行為與經(jīng)過。隨著信息技術(shù)的高度發(fā)展，網(wǎng)頁、海報、廣告、平面及影像等諸多領(lǐng)域都會牽涉到版式設(shè)計。版面設(shè)計除了設(shè)計者的藝術(shù)構(gòu)思，也需要與編排技術(shù)相結(jié)合，是藝術(shù)與技術(shù)的統(tǒng)一體。網(wǎng)頁版式設(shè)計是指設(shè)計者在網(wǎng)頁基本形態(tài)要素的支撐下，根據(jù)一定的藝術(shù)規(guī)律進行美化和組織布局，同時，結(jié)合網(wǎng)頁的文字、圖像、動畫、音頻、視頻等元素，使其構(gòu)成整體統(tǒng)一的視覺效果，設(shè)計師所采用的的視覺藝術(shù)規(guī)律和藝術(shù)風格，在給閱讀者帶來感官上的美感和精神上的享受的同時，也在有限的屏幕空間內(nèi)具體表現(xiàn)出了設(shè)計者的想法、意圖，進而到達了有效傳達信息的目的。2.網(wǎng)頁版式設(shè)計的作用如今網(wǎng)絡(luò)技術(shù)快速發(fā)展，網(wǎng)絡(luò)覆蓋面積逐步增大，如何具體表現(xiàn)出網(wǎng)站最大的信息價值，對閱讀者產(chǎn)生更強的吸引力，是大家普遍關(guān)心的問題，這就對網(wǎng)頁版式設(shè)計提出了更高層次的要求，設(shè)計出符合要求的網(wǎng)頁是提高網(wǎng)站閱讀量的途徑之一。網(wǎng)頁版式設(shè)計決定了網(wǎng)站的類型特點和藝術(shù)風格，它以直觀的視覺配置牽引著網(wǎng)頁頁面之間的方向性，網(wǎng)頁內(nèi)容的表示出效果也隨之加強，在感性表示出的同時，設(shè)計者要兼具考慮網(wǎng)頁空間能否合理，頁面下載速度快不快、頁面效果是不是最優(yōu)等技術(shù)因素，這也需要設(shè)計者在設(shè)計經(jīng)過中具有理性思維。3.網(wǎng)頁版式設(shè)計與傳統(tǒng)印刷版式設(shè)計的差異網(wǎng)頁版式設(shè)計與傳統(tǒng)的報刊雜志等媒體平面設(shè)計有著較強的類似性，很多傳統(tǒng)出版行業(yè)版面設(shè)計的規(guī)則和禁忌，也大都適用于網(wǎng)頁的設(shè)計，但也存在較大差異。詳細表現(xiàn)如下：〔1〕印刷品都有固定的規(guī)格尺寸，網(wǎng)頁則不然，它的頁面尺寸可能會出現(xiàn)1024X768像素、800X600像素等不同的規(guī)格，由顯示器的分辨率來確定，其組織構(gòu)造也不是線性組合，頁面上每個元素的尺寸和位置對于網(wǎng)頁設(shè)計者是很難精到準確控制的?！?〕傳統(tǒng)印刷品的設(shè)計者除了能夠在版式設(shè)計中進行優(yōu)化，還能夠通過指定使用的紙張和油墨，讓設(shè)計效果得以最佳呈現(xiàn)；而網(wǎng)頁設(shè)計者卻不能要求閱讀者使用什么樣的智能設(shè)備，最終在呈現(xiàn)上還要受閱讀者閱讀器的色彩、分辨率和閱讀者閱讀習慣的制約，設(shè)計者對呈現(xiàn)效果的可控制性較低?！?〕傳統(tǒng)的印刷品具有成熟的印刷標準，而互聯(lián)網(wǎng)正處于不斷發(fā)展之中，網(wǎng)頁設(shè)計中的每個事件都可能隨時發(fā)生變化，進而帶來網(wǎng)頁版式設(shè)計中的變化?！?〕網(wǎng)頁設(shè)計作為一種特殊的版面，既有文字、圖片、視頻，還有些流動窗口和廣告等，內(nèi)容愈加繁多、復(fù)雜，設(shè)計在強調(diào)藝術(shù)性的同時，還要使頁面內(nèi)容和形式到達有機統(tǒng)一，考慮頁面的可讀性和網(wǎng)絡(luò)閱讀的特性，并兼具整體美感?！?〕動態(tài)化也是網(wǎng)頁版式設(shè)計區(qū)別于傳統(tǒng)印刷版式設(shè)計的顯著特征。網(wǎng)頁版式設(shè)計的動態(tài)設(shè)計是加強網(wǎng)頁的可讀性，介入性與趣味性的有力手段。同時，網(wǎng)頁設(shè)計人員必須根據(jù)網(wǎng)站各個階段的發(fā)展需求以及用戶的反應(yīng)信息，經(jīng)常對網(wǎng)頁版式進行調(diào)整和修改，更具靈敏性。二、網(wǎng)站類型的不同所具體表現(xiàn)出出的網(wǎng)頁版式特征網(wǎng)頁版式設(shè)計根據(jù)內(nèi)容性質(zhì)，在布局上會產(chǎn)生差異，可劃分為如下幾個類型：1.門戶類網(wǎng)站。在這里類網(wǎng)頁中，文字居多，圖片運用較少，并運用Icon功能辨別圖標使用戶能夠快速預(yù)知按鈕的功能、文本的意義，進而快速的引導(dǎo)用戶進入功能頁面辦事，通過文字的敘述和圖標的運用，注重信息發(fā)布和辦事功能的展示，增加部門的權(quán)威性。注意，在這里類網(wǎng)頁版式設(shè)計時，是不能增加其他方面的廣告信息的，只能闡述與主題相關(guān)的內(nèi)容。2.新聞或門戶類網(wǎng)站。這類網(wǎng)站在首頁上，會根據(jù)內(nèi)容的不同，劃分出新聞、教育、娛樂、財經(jīng)、科技等多個模塊。以文字為主，穿插一定量與板塊內(nèi)容相關(guān)的高品質(zhì)圖片，來吸引閱讀者的注意，且為了便于閱讀者的閱讀，版面大多較為整潔工整，且具有一定的韻律感，就像一首歌曲，每個模塊具有不同的節(jié)拍，但在細節(jié)上加以區(qū)別，保持整個頁面的統(tǒng)一協(xié)調(diào)。一般來講，在這類的網(wǎng)頁設(shè)計中，橫向的內(nèi)容通常是不變的，讓閱讀者在閱讀時有整體連貫性的體驗，主要通過縱向的板塊變化，層疊的展示出欄目板塊，縱向延展開去，網(wǎng)頁能存儲的信息量也隨之龐大。3.商務(wù)類網(wǎng)站。網(wǎng)站主要具體表現(xiàn)出對企業(yè)、產(chǎn)品的介紹和推薦功能，除了一些企業(yè)介紹、通知公告等文字類板塊外，產(chǎn)品的圖片或視頻展示窗口也需要布置在適當?shù)奈恢?，并配以產(chǎn)品的文字講明，通過文字與圖像之間占比大小的互相配合，吸引閱讀者進一步的了解企業(yè)、產(chǎn)品，進而到達有效的宣傳目的。三、網(wǎng)頁版式設(shè)計常用的布局形式網(wǎng)頁版式設(shè)計布局，簡單的理解就是將圖片、視頻和文字排擺放在頁面的不同位置給閱讀者帶來最合適的閱讀體驗，兼顧網(wǎng)站內(nèi)容的呈現(xiàn)、美感和閱讀者體驗到達最佳的形式。經(jīng)過網(wǎng)頁設(shè)計者大量的實踐總結(jié)，常見的網(wǎng)頁布局形式包括：同字形布局、T字形布局、三字形布局、川字形布局等，下面我們就7類網(wǎng)頁布局設(shè)計逐一加以解析。1.同字型構(gòu)造布局，也稱為國字型。在頁面的頂部位置是網(wǎng)站Logo及廣告條，往下可分為三欄，左右兩欄分列兩小條內(nèi)容，中間位置是網(wǎng)站的主要部分，與左右兩欄并列縱向延伸到網(wǎng)站底部，版權(quán)信息、朋友情誼鏈接、網(wǎng)站地圖等聚集于網(wǎng)頁底部。2.T形構(gòu)造布局。此類構(gòu)造頁面頂部同上，網(wǎng)站Logo一般置于頂部左上角，往下分為二欄，左欄設(shè)置為主導(dǎo)航區(qū)，網(wǎng)頁主要內(nèi)容分列在右欄為。左導(dǎo)航區(qū)的一般背景一般設(shè)置為較深的顏色，整體效果類似英文字母T.這種布局的優(yōu)點是頁面條理清楚明晰、主題突出，是初學(xué)者最容易把握的布局方式方法。缺點是對色彩細節(jié)搭配要求比擬高，假如搭配不當，會給人以規(guī)矩呆板感，容易引人膩煩。3.口形構(gòu)造布局。這種布局類似一個方框，表現(xiàn)為頁面頂部和底部是廣告條，中間區(qū)域分為三欄，左欄是主菜單，中間為網(wǎng)頁主要內(nèi)容，右欄是熱門推薦、朋友情誼鏈接或圖片展示區(qū)域等。這種布局的優(yōu)點是充分利用版面，網(wǎng)頁布局緊湊，信息豐富，但四面封閉，易使人產(chǎn)生壓抑感。4.對稱比照構(gòu)造布局。整個網(wǎng)頁采取左右或者上下對稱的布局，非常奪目，在顏色上選擇一半深色，另一半淡色，兩部分搭配協(xié)調(diào)，會具有很強的視覺沖擊力，但將兩部分有機地結(jié)合比擬困難，不易把握，此類布局一般用于設(shè)計型站點。5.POP構(gòu)造布局。這種布局就像一張宣傳海報，整個頁面中間是一幅奪目且設(shè)計精致華美的大圖片，大圖中間再穿插一些圖片和文字，設(shè)計漂亮吸引人，但大量的運用圖片會導(dǎo)致圖形分辨率偏大，網(wǎng)頁下載速度慢，閱讀不順暢，且提供的文字信息量有限。此類布局常用于時髦類或教育類站點。6.Flash布局。這種布局整個頁面就是一個Flash動畫，畫面絢麗，動感十足，由于Flash的強大功能，頁面所表示出的信息愈加豐富，也能直觀的體驗覺效果和聽覺效果，是比擬新潮的一種布局方式。7.標題文本型構(gòu)造布局。這種類型的頁面最上部往往是主題標題，以下為正文，頁面內(nèi)容以文本為主，比方一些文章頁、投票、注冊等內(nèi)容的頁面多采用此類布局。以上是當前網(wǎng)絡(luò)上較為常見的幾種布局，在詳細的使用時可靈敏使用。比方板塊內(nèi)容非常多，就要考慮用國字型而假如一些講明性的內(nèi)容比擬多的時候，例如新聞或者門戶網(wǎng)站的正文頁，則能夠考慮標題正文型；假如是企業(yè)網(wǎng)站或個人主頁，不需要表示出太多的文字信息，那么可采用POP構(gòu)造、Flash布局或?qū)ΨQ比照構(gòu)造，能大大豐富網(wǎng)頁視覺和聽覺效果，引人矚目。四、網(wǎng)頁版式設(shè)計布局的步驟1.草案。這屬于初步的創(chuàng)造階段，不講究太多考慮美工細節(jié)和技術(shù)功能功能，網(wǎng)頁也不必精致華美整潔，也，只以簡單的線條布局出網(wǎng)頁的輪廓。此階段多在于設(shè)計者的構(gòu)思創(chuàng)意，盡可能多考慮多探尋求索不同類型和風格，最后選定一幅滿意的作為繼續(xù)創(chuàng)作的腳本，在實際工作中，根據(jù)客戶需求也需要準備多幅創(chuàng)作腳本，以供選擇。2.粗略布局。梳理出網(wǎng)站Logo、主導(dǎo)航、搜索、朋友情誼鏈接、廣告欄、聯(lián)絡(luò)方式和版權(quán)信息等必須放置到頁面上的功能模塊。通常將網(wǎng)站Logo、主導(dǎo)航等最重要的模塊放頁面上部最顯眼、最突出的位置，最好是屏幕第一屏的位置，往下能夠根據(jù)邏輯關(guān)系考慮次要模塊的排放位置。