版式設(shè)計(jì)在網(wǎng)頁中的重要性

李明妍（江蘇省聯(lián)合職業(yè)技術(shù)學(xué)院徐州財(cái)經(jīng)分院,江蘇 徐州 221008）

版式設(shè)計(jì)在網(wǎng)頁中的重要性

李明妍
（江蘇省聯(lián)合職業(yè)技術(shù)學(xué)院徐州財(cái)經(jīng)分院,江蘇 徐州 221008）

在這個(gè)互聯(lián)網(wǎng)的時(shí)代，瀏覽網(wǎng)頁就成了人們必不可少的生活方式，那么網(wǎng)頁設(shè)計(jì)這個(gè)行業(yè)便逐漸走俏，為了便于人們?cè)O(shè)計(jì)出布局合理，形式獨(dú)特的網(wǎng)站，網(wǎng)頁設(shè)計(jì)的版式設(shè)計(jì)將變得越來越重要，本篇文章便是對(duì)如何將版式設(shè)計(jì)合理的運(yùn)用在網(wǎng)頁中進(jìn)行研究。

網(wǎng)頁設(shè)計(jì)；互聯(lián)網(wǎng)；瀏覽網(wǎng)頁

1 網(wǎng)頁的原則

網(wǎng)頁設(shè)計(jì)由于是在電腦屏幕上觀看的，還需要跟瀏覽者進(jìn)行互動(dòng)，這就和普通的平面設(shè)計(jì)有了質(zhì)的不同。觀看載體不同，所以我們?cè)谘芯烤W(wǎng)頁設(shè)計(jì)的時(shí)候，除了要研究網(wǎng)頁的美觀還要研究瀏覽者在面對(duì)網(wǎng)頁的心理感受，要讓讀者先從功能上對(duì)其有個(gè)認(rèn)知，在認(rèn)知基礎(chǔ)上才能進(jìn)行制作版面的設(shè)計(jì)。這就使得網(wǎng)頁設(shè)計(jì)的這門技術(shù)還需我們做更多的相關(guān)探究。

2 網(wǎng)頁的布局風(fēng)格

網(wǎng)頁布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。 看看我們經(jīng)常用到的版面布局形式:

（1）“同”字型布局。這種布局結(jié)構(gòu)的最上面一般是網(wǎng)站的標(biāo)志、廣告以及導(dǎo)航欄；下面是主要內(nèi)容，左有一些欄，右也有一些欄目，在結(jié)構(gòu)的中間位置是內(nèi)容主體；結(jié)構(gòu)的最下面是一些網(wǎng)站的基本信息及版權(quán)信息。國(guó)內(nèi)一些大中型網(wǎng)站常見的是這種結(jié)構(gòu)布局方式。這種結(jié)構(gòu)的優(yōu)點(diǎn)是把版面充分的利用了起來，讓讀者有很大的信息量進(jìn)行閱讀；它的缺點(diǎn)是頁面看上去靈活性不夠，有時(shí)也給人一種擁擠的感覺。

（2）“廠”字型局：這種布局結(jié)構(gòu)的特點(diǎn)是在頁面的頂部設(shè)為標(biāo)志和廣告條，下方左面為主菜單，右面顯示正文信息。本布局方式是目前應(yīng)用比較廣泛的一種。本布局的優(yōu)點(diǎn)是主次非常分明，頁面結(jié)構(gòu)一目了然，很清晰；它的缺點(diǎn)是對(duì)色彩搭配要求比較高，如果搭配不當(dāng)?shù)脑挘瑫?huì)給人以規(guī)矩呆板，甚至容易引人厭煩。

（3）“框架”型布局：這種布局結(jié)構(gòu)一般為上下或左右布局，一欄是導(dǎo)航欄，一欄是正文信息。也有將頁面分為三欄的，上邊一欄放圖片廣告，左側(cè)欄放導(dǎo)航欄，右側(cè)為正文信息。

3 網(wǎng)頁布局清晰的原則

3.1 網(wǎng)頁的標(biāo)題設(shè)計(jì)

在網(wǎng)頁的版式設(shè)計(jì)中成功的標(biāo)題可以讓人一目了然和賞心悅目，也能給整個(gè)網(wǎng)站提高氣氛。網(wǎng)站的首頁上方會(huì)有公司的標(biāo)題，標(biāo)題后面的背景也有靜態(tài)的和動(dòng)態(tài)的區(qū)分，也可以形成交互性。這也是網(wǎng)頁的版式與普通印刷品版式的區(qū)別。

3.2 文字的編排

文字本身是以傳達(dá)內(nèi)容和表達(dá)信息為主題的。在網(wǎng)頁設(shè)計(jì)過程中，網(wǎng)頁的設(shè)計(jì)一定要抓住這個(gè)主題不要放松，但是同時(shí)也可以利用字體也表達(dá)一定的感情，例如：粗體字強(qiáng)壯有力，有男性特點(diǎn)，適合機(jī)械、建筑業(yè)等內(nèi)容；細(xì)體字高雅細(xì)致，有女性特點(diǎn)，更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。同時(shí)設(shè)計(jì)者也要考慮到一些細(xì)節(jié)的內(nèi)容，如很多讀者的計(jì)算機(jī)中只裝有三種字體及一些相應(yīng)的特定字體，如果沒有特別強(qiáng)的針對(duì)性的要求，最好采用缺省字體。

字號(hào)的大小也有一定的要求，如標(biāo)題和其他需要強(qiáng)調(diào)的地方用字號(hào)大一些，如9磅，而網(wǎng)頁的正文，這是人們閱讀量最大的，12磅的字體是比較合適的，像一些頁腳的和輔助性的信息，可以使用能小一點(diǎn)的字號(hào)。

頁面里的正文部分，這個(gè)部分是最重要的部分，這部分的內(nèi)容是由許多單個(gè)文字經(jīng)過編排組成的群體，這個(gè)群體影響著讀者的閱讀，可以從藝術(shù)、個(gè)性、情感方面對(duì)這部分進(jìn)行處理，以達(dá)到最好的抓住讀者眼球的作用。

3.3 圖文結(jié)合

版式有可以分為無圖的版式和有圖的版式，有圖的版式鋼架豐富，無圖的版式需要給人不容易枯燥的感覺就需要巧妙的排版了，兩種版式都不可缺少，當(dāng)然網(wǎng)站上更多的還是圖文結(jié)合的版式。

在視覺順序上，從吸引人的注意力角度來說，圖形對(duì)人眼球的吸引力遠(yuǎn)遠(yuǎn)是超過了純文字對(duì)人眼球的吸引力，圖形給人的視覺印象要比文字強(qiáng)烈得多，這是因?yàn)閳D形的色彩變化明顯，所含內(nèi)容也異常豐富，同時(shí)圖片的引入也對(duì)頁面起到好很好美化作用。可以說，要使網(wǎng)頁更好的吸引人的眼球，更好的抓住人們的視線，并在純文本基礎(chǔ)上變得更有趣味，最為簡(jiǎn)捷省力的辦法就是使用圖片。幾乎所有的網(wǎng)頁都用到了圖形，善于使用圖形，可以讓網(wǎng)頁的主題表現(xiàn)的更加生動(dòng)、形象和直觀，同時(shí)也較好地增強(qiáng)網(wǎng)頁的宣傳力、號(hào)召力和感染力，吸引讀者的注意，引起讀者的興趣。網(wǎng)頁可以圖文并茂地向用戶提供信息，成倍地加大了它所提供的信息量。對(duì)于一條信息來說，圖片對(duì)瀏覽者的吸引遠(yuǎn)遠(yuǎn)超過單純的文字。頁面的節(jié)奏韻律。這也是圖文排版的魅力所在。

4 網(wǎng)頁視覺美觀的原則

網(wǎng)頁的顏色表達(dá)一種情感，也象征不同的含義。這些象征含義在人們思想交流形成了復(fù)雜的問題，如人們的時(shí)代、民族、年齡、地域、階層、工作能力、經(jīng)濟(jì)地區(qū)、通過不同的顏色組合，呈現(xiàn)給他們的心理感受是截然不同的。如紫紅和土黃搭配，可以產(chǎn)生高貴的，的氣氛。粉色和白色混合，能體現(xiàn)柔順、雅致、浪漫的氣氛。金色和大紅、金色的搭配能渲染喜慶的氣氛。而橙色和黃色的搭配則會(huì)給人帶來暖意。設(shè)計(jì)主題的不同，顏色搭配的方法也隨之改變。兼顧網(wǎng)頁的適應(yīng)性，應(yīng)盡量使用網(wǎng)頁安全色。可先確定一種能表現(xiàn)主題的主體色，然后根據(jù)具體的需要，應(yīng)用顏色的近似和對(duì)比來完成整個(gè)頁面的配色方案。整個(gè)頁面在視覺上應(yīng)是一個(gè)整體，以達(dá)到和諧、悅目的視覺效果。

總是，一個(gè)優(yōu)秀網(wǎng)頁的實(shí)現(xiàn)離不開以上幾點(diǎn)原則，只要每個(gè)細(xì)節(jié)都做到合理設(shè)計(jì)一定能夠呈現(xiàn)出一個(gè)精彩的網(wǎng)站。

[1]董海斌.平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[J].科技信息,2008(05):155.

[2]尹振鶴．云計(jì)算的特點(diǎn)及應(yīng)用分析[J].硅谷,2014(12):126.

[3]鄒鈺．AutoCAD動(dòng)態(tài)塊在室內(nèi)設(shè)計(jì)制圖中的應(yīng)用[J].硅谷,2014(12):126.

[4]楊翠芳.淺析視錯(cuò)覺手段在平面設(shè)計(jì)中的運(yùn)用技巧[J]。電腦知識(shí)與技術(shù),2011(11):8037.