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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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