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

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

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

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

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

二、設計遵循的原則

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

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

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

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

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

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

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

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

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

四、版式設計中圖像的處理

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