網(wǎng)頁(yè)中的版式設(shè)計(jì)遵循的原則及其文字圖像處理發(fā)布者：本站     時(shí)間：2020-05-02 14:05:29

網(wǎng)頁(yè)的版式設(shè)計(jì)是設(shè)計(jì)師感性表達(dá)和理性思維的產(chǎn)物，指在有限的屏幕空間內(nèi)，設(shè)計(jì)師按照一定的藝術(shù)語(yǔ)言將網(wǎng)頁(yè)的多個(gè)組成要素進(jìn)行合理安排，使其形成整體，力求最佳的視覺(jué)效果。通常以瀏覽者閱讀為目的，運(yùn)用合理有序的安排，將網(wǎng)頁(yè)中的元素多個(gè)元素如文字、圖像、動(dòng)畫、音頻、廣告視頻等組織在一起，通過(guò)畫面上的統(tǒng)一產(chǎn)生視覺(jué)上的美感。

網(wǎng)頁(yè)版式設(shè)計(jì)往往決定了網(wǎng)頁(yè)的設(shè)計(jì)風(fēng)格及個(gè)性特征，目的在于增強(qiáng)網(wǎng)頁(yè)內(nèi)容的表達(dá)效果。因此，網(wǎng)頁(yè)中的版式設(shè)計(jì)在整個(gè)網(wǎng)頁(yè)設(shè)計(jì)中占有著非常重要的地位。但是初學(xué)者往往忽視了這方面，認(rèn)為技術(shù)能代表一切，知道用哪個(gè)做網(wǎng)頁(yè)的工具就一定能做出質(zhì)量較高的網(wǎng)頁(yè)。其實(shí)不是，因?yàn)檐浖H僅是一種工具，就像手中的筆，僅僅是一個(gè)工具而已，并不代表能寫出好的文章來(lái)。很多人對(duì)技術(shù)掌握得熟練，但做出的網(wǎng)頁(yè)卻通常是照搬別人的東西，并沒(méi)有體現(xiàn)出網(wǎng)頁(yè)水平的提高。

一、提高網(wǎng)頁(yè)設(shè)計(jì)的審美能力

在當(dāng)今的網(wǎng)絡(luò)時(shí)代里，人自身的因素是重要的，只有提高審美能力，才有可能設(shè)計(jì)好網(wǎng)頁(yè)。所以，培養(yǎng)自己的審美修養(yǎng)是至關(guān)重要的。在網(wǎng)頁(yè)具體布局的設(shè)計(jì)上，網(wǎng)頁(yè)設(shè)計(jì)雖然呈現(xiàn)出多樣化的趨勢(shì)，但是最基本的模式是平面設(shè)計(jì)中的內(nèi)容。平面設(shè)計(jì)就要考慮到形式美的因素，網(wǎng)頁(yè)中版式布局就屬于形式中的內(nèi)容，就是體現(xiàn)在頁(yè)面的形式美方面，具體表現(xiàn)在對(duì)頁(yè)面的布局上。整個(gè)頁(yè)面形式美得到體現(xiàn)可以分為幾個(gè)部分，每個(gè)部分體現(xiàn)不同的形式有不同的功能，具體來(lái)看就是左邊、右邊、上邊、下邊、中間，自身具有許多獨(dú)特之處。通常中間的部分一般承載著主要的信息，使用者主要看中間這個(gè)部分的內(nèi)容。

二、設(shè)計(jì)遵循的原則

在網(wǎng)頁(yè)設(shè)計(jì)中，版式設(shè)計(jì)的好壞它決定了整個(gè)頁(yè)面設(shè)計(jì)的成敗，作為網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)在具體版式設(shè)計(jì)中應(yīng)注意以下幾點(diǎn):

(一)網(wǎng)頁(yè)中的版面編排問(wèn)題。網(wǎng)頁(yè)作為一種特殊的表現(xiàn)形式，在頁(yè)面中既包含文字和圖片，還包括一些附加廣告、視頻等內(nèi)容。對(duì)于不同的網(wǎng)站版式設(shè)計(jì)，根據(jù)頁(yè)面內(nèi)容的不同，又形成不同的版面安排形式。如電子商務(wù)類網(wǎng)站，設(shè)計(jì)過(guò)程中根據(jù)內(nèi)容需要主要的款式圖片和一定的促銷文字。

在主頁(yè)中以圖片為主、文字為附進(jìn)行編排布局，使其成為有機(jī)的整體，以吸引瀏覽者的關(guān)注。在政府網(wǎng)站設(shè)計(jì)中，頁(yè)面的編排不宜用過(guò)多的活潑的藝術(shù)圖片，為傳達(dá)信息的重要性、準(zhǔn)確性，突出文字的編排。在網(wǎng)頁(yè)版式的設(shè)計(jì)中要力求清晰、簡(jiǎn)練、精確和單純。如文戶網(wǎng)站的設(shè)計(jì)，文字量比較大，為了瀏覽者易讀相關(guān)內(nèi)容，版面設(shè)計(jì)中要力求簡(jiǎn)潔性。

同時(shí)注重網(wǎng)頁(yè)中版式的節(jié)奏感及韻律，它如音樂(lè)作品里的節(jié)拍，是組織內(nèi)容的一個(gè)重要單元，主要通過(guò)畫面疏密的編排讓畫面形成節(jié)奏感。在網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中，橫向往往是固定的，那么縱向的排列就非常重要，隨著鼠標(biāo)的向下滑動(dòng)，不同版面的信息會(huì)躍然眼前，同時(shí)，縱向排列的設(shè)計(jì)更加容易添加大量的信息，這也成為網(wǎng)頁(yè)瀏覽的特點(diǎn)。如新聞網(wǎng)站，根據(jù)不同內(nèi)容進(jìn)行劃分，充分體現(xiàn)了“一個(gè)主頁(yè)，整個(gè)世界”。在導(dǎo)航欄的下方，按照網(wǎng)頁(yè)中的內(nèi)容分欄設(shè)計(jì)出新聞、娛樂(lè)、體育、美食、旅游等不同區(qū)域的編排設(shè)計(jì)。

(二)網(wǎng)頁(yè)版式設(shè)計(jì)的視覺(jué)流程有一定秩序性。人們通常在一個(gè)網(wǎng)站中瀏覽網(wǎng)頁(yè)時(shí)，一般較大的圖片和字號(hào)偏大的文字更能引起瀏覽者的注意，這就要求版式的設(shè)計(jì)中必須依據(jù)人們?cè)谝曈X(jué)上的生理和心理的特點(diǎn)，來(lái)突出設(shè)計(jì)主題形成頁(yè)面合理的瀏覽秩序。如在電子商務(wù)類網(wǎng)站中，既有多媒體展示又有圖片、文字，為突出設(shè)計(jì)主題，設(shè)計(jì)時(shí)要根據(jù)頁(yè)面信息的主次來(lái)確定設(shè)計(jì)內(nèi)容的順序，同時(shí)要符合人的視覺(jué)習(xí)慣和有效的傳達(dá)信息，通過(guò)合理安排頁(yè)面的秩序性使畫面具有節(jié)奏感和流暢感，以突出主要信息，引導(dǎo)瀏覽者閱讀網(wǎng)頁(yè)。

(三)排版網(wǎng)格的設(shè)計(jì)。網(wǎng)格的設(shè)計(jì)目的解決網(wǎng)頁(yè)中不同版面的定位問(wèn)題，在設(shè)計(jì)中為避免網(wǎng)格太過(guò)于呆板，影響設(shè)計(jì)效果。網(wǎng)格可以當(dāng)作一個(gè)的框架，在逐一向不同的框架中添加小的表格成為分級(jí)效果，形成版面內(nèi)容的主次之分，用以拼貼圖片，組織文字的排版，所以說(shuō)，網(wǎng)格設(shè)計(jì)的定位問(wèn)題成為一幅好的版面設(shè)計(jì)的基礎(chǔ)。

版面設(shè)計(jì)中強(qiáng)調(diào)整體性，又在統(tǒng)一中求變化，以避免版面的呆板。在版式方面主要的難點(diǎn)是如何精確地安排各個(gè)元素，精確的網(wǎng)格設(shè)計(jì)可以使圖片進(jìn)行無(wú)縫銜接，更能很好地體現(xiàn)設(shè)計(jì)者的想法。如何進(jìn)行網(wǎng)格設(shè)計(jì)，其設(shè)計(jì)的合理性成為關(guān)鍵。如校園網(wǎng)站的設(shè)計(jì)，在網(wǎng)格的區(qū)域規(guī)劃中，充分考慮到網(wǎng)頁(yè)內(nèi)容進(jìn)行劃分，現(xiàn)在的設(shè)計(jì)中更加考慮人性化的設(shè)計(jì)方案，因?yàn)橐话愣际怯沂贮c(diǎn)擊鼠標(biāo)進(jìn)行瀏覽頁(yè)面，所以設(shè)計(jì)時(shí)一般導(dǎo)航條放在版面的右邊，這主要是與大家操作有關(guān)的考慮。在網(wǎng)頁(yè)網(wǎng)格設(shè)計(jì)中導(dǎo)航成為主要問(wèn)題，對(duì)于最后的版權(quán)信息放在網(wǎng)頁(yè)的最下邊。

三、版式中文字效果的處理

對(duì)于任何一個(gè)網(wǎng)站而言，信息的傳遞主要依靠的都是文字，所以文字的設(shè)計(jì)及編排對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的成功都是至關(guān)重要的。一般來(lái)講，頁(yè)面中有大標(biāo)題和小標(biāo)題、副標(biāo)題，設(shè)計(jì)中可以按照常規(guī)的方式來(lái)設(shè)置字體，通過(guò)文字字號(hào)的設(shè)置及字體的應(yīng)用確定文字在頁(yè)面中的主次順序。同時(shí)，也可以將文字處理成圖形化，而且字體進(jìn)行藝術(shù)化的設(shè)計(jì)，將文字意象化、圖形化，能夠避免網(wǎng)頁(yè)中往往產(chǎn)生的單調(diào)和平淡。如個(gè)人網(wǎng)頁(yè)設(shè)計(jì)中，通過(guò)文字與圖像之間或文字與文字之間進(jìn)行疊置，通過(guò)淺色的背景圖片襯托出圖片上方的文字效果，或不同字母之間進(jìn)行上下錯(cuò)落的疊加，以豐富畫面增強(qiáng)畫面美觀，以更富創(chuàng)意的形式表達(dá)出深層的設(shè)計(jì)思想，從而打動(dòng)人心。它不僅運(yùn)用于傳統(tǒng)的版式設(shè)計(jì)，在網(wǎng)頁(yè)版式設(shè)計(jì)中也廣泛采用。但是要注意的是網(wǎng)頁(yè)設(shè)計(jì)主要是便于閱讀，是為人服務(wù)的，不易于過(guò)多的運(yùn)用疊加效果。

四、版式設(shè)計(jì)中圖像的處理

頁(yè)面中除了文字效果設(shè)計(jì)之外，最重要的設(shè)計(jì)元素還有對(duì)圖像的處理。合理的運(yùn)用圖像設(shè)計(jì)會(huì)使網(wǎng)頁(yè)更加具有欣賞性和趣味性，同時(shí)，對(duì)于圖像其本身也是傳達(dá)信息的重要手段。比起文字，圖像更具直觀性，可以很生動(dòng)容易地把文字襯托出來(lái)，更易于瀏覽者理解文字的內(nèi)容。首先，在圖像的編排上可以各幅圖像相互自由疊置或分類疊置而構(gòu)成的塊狀組合，具有輕快、活潑的特性，同時(shí)也不失整體感。其次，在圖像的處理方面，如網(wǎng)絡(luò)教學(xué)類網(wǎng)站設(shè)計(jì)中，對(duì)圖像的外形本身加以變化或在圖形的下方采用不同的背景，都能使頁(yè)面的整體效果加以改變。在一些影視學(xué)院的網(wǎng)站設(shè)計(jì)中，圖片的下方以電影膠片為背影襯托，更能突出網(wǎng)站的主題設(shè)計(jì)。一般情況下圖片的外形變化也能給人以不同的視覺(jué)感受，如以方形為外形的圖片給人以穩(wěn)定、嚴(yán)肅，以圓形或曲線外形的給人以柔軟、親切，退底的圖像以及不規(guī)則或不帶邊框的圖像給人以活潑。另外在網(wǎng)頁(yè)中圖像所占據(jù)的面積大小也能顯示出其重要作用。小圖像一般用于穿插在字群中，既襯托文字內(nèi)容，又使版面顯得簡(jiǎn)潔而精致。在一個(gè)頁(yè)面中，大圖像易形成視覺(jué)的匯焦點(diǎn)，更易引起瀏覽者的注意。