網(wǎng)頁設(shè)計中版面布局的研究

朱紀(jì)蘭

江蘇省揚中市供電公司，江蘇鎮(zhèn)江 212200

1 版面設(shè)計方法與布局原則

1.1 版面設(shè)計方法

網(wǎng)頁版面設(shè)計的方法和技巧主要有以下幾點：

1)簡潔

網(wǎng)頁版面首先映入眼簾的是布局，而布局最重要的原則就是簡潔，簡潔的版面設(shè)計能夠給人帶來煥然一新的感覺，這有利于瀏覽者更順利的進行網(wǎng)頁信息閱讀，對其更好的選擇，只有先簡潔的閱讀網(wǎng)頁主題內(nèi)容，其次才是從屬的內(nèi)容。往往瀏覽者會被網(wǎng)頁圖片的精美吸引住，所以這時網(wǎng)頁只有在訪問中體現(xiàn)它的使用價值，他們才會反復(fù)性的進行瀏覽訪問。這個網(wǎng)頁版面在百度、谷歌中比較常見，因為他們給人的感覺簡潔、瀏覽器來更高效。

2)要有主色調(diào)

網(wǎng)站版面給人的第一感覺，要從主色調(diào)說起，主色調(diào)主要布局與網(wǎng)站網(wǎng)頁設(shè)計中。主色調(diào)多的頁面會給客戶帶來厭煩的感覺，不利于瀏覽者長期觀看。簡單來說，網(wǎng)頁版面的主色彩應(yīng)用中不能超過5 種，而且其中應(yīng)以一種主色調(diào)為主，讓其占主導(dǎo)地位，用其他4 中顏色作為襯托和點綴。網(wǎng)頁版面設(shè)計的主色調(diào)一般包括黃色、藍色、橙色、灰色、黑白色系列。

3)注意字體的設(shè)置

網(wǎng)頁版面的布局也包括字體的樣式，字體在網(wǎng)頁版面中也應(yīng)遵循簡易的原則，也以不超過3 種樣式為主。既然遵循簡易原則，且版面設(shè)計字體應(yīng)不要太大，這樣在網(wǎng)頁版面顯示的字體會給瀏覽者帶來更多有用的信息。哪些閃爍的文字就最好不要出現(xiàn)在網(wǎng)頁版面設(shè)計中，圖片的閃爍會給瀏覽者帶來厭煩的感覺，甚至?xí)皇娣Ｒ话愣?，?biāo)題欄中的字體應(yīng)比正文相對大些，顏色也應(yīng)該區(qū)分開來。

4)視覺效果要好

網(wǎng)頁版面中的網(wǎng)頁結(jié)構(gòu)與排版設(shè)計中最重要的成分是視覺效果。優(yōu)秀的設(shè)計者能制作出更完美的網(wǎng)頁排版和結(jié)構(gòu)，翻閱那些成功的網(wǎng)頁分析發(fā)現(xiàn)，網(wǎng)頁主題部分設(shè)計的比例是1：2；2：1；再者也可以按1：2：1 的結(jié)構(gòu)，這些比例結(jié)構(gòu)是網(wǎng)頁版面設(shè)計中較為常見和比較流行的結(jié)構(gòu)方式。網(wǎng)頁版面的標(biāo)題和結(jié)尾處，也應(yīng)合理的發(fā)布網(wǎng)頁信息，更應(yīng)遵循合理組織、靈活多變的結(jié)構(gòu)方式去布局。

1.2 版面布局原則

網(wǎng)頁版面的布局類似于雜志排版的布局。作為一種頁面布局，可以是圖片、或者是文字，也有可能是動畫等等。同時，或大或小的文本，圖片的大??；動靜態(tài)的運用。當(dāng)瀏覽者瀏覽版面時，看到的畫面是由文字和圖片構(gòu)成的，假如文字和圖片雜亂五章的羅列在一起，會顯得頁面比較復(fù)雜。所以版面的布局應(yīng)根據(jù)版面的內(nèi)容需要，進行合理的排序編輯，布局，這樣在版面布局中形成一個有機的整體，讓用戶更好的瀏覽。以下是版面布局的原則：

1)整體布局，和諧統(tǒng)一。網(wǎng)頁設(shè)計中占據(jù)關(guān)鍵地位的整體布局頁面，起著主導(dǎo)作用。聰明的整體布局，充分顯示了設(shè)計師的想法，設(shè)計師的靈感，這個頁面必須協(xié)調(diào)統(tǒng)一。

集成是布局的傳統(tǒng)方法是使用一個對稱的形式。通過空間，和之間的交互文本和圖形建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。然而，對稱平衡有時使頁面顯得呆板，僵化、缺乏活力。對稱平衡輔助設(shè)計一些新的單詞和模式，需要時可以使用一些夸張，和強烈的緊張和運動，能給對稱頁面添加一些生動、有趣；

2)主次分明，中心突出。在一個頁面布局中，您必須首先考慮視覺中心，該中心一般在頁面的關(guān)鍵領(lǐng)域，即中部和上部的位置。因此應(yīng)該最溝通的信息，在這個網(wǎng)站最具吸引力的內(nèi)容。在視覺的中心可以安排那些次要的內(nèi)容，略，突出關(guān)鍵頁面上的，優(yōu)先考慮。

最終的目的是使頁面布局頁面產(chǎn)生清晰有序，更好地突出主體，達到最好的顯示效果，因此，內(nèi)容頁面的視覺中心應(yīng)該是主體。網(wǎng)頁可以視覺秩序、空間層次、主從關(guān)系和相互之間的邏輯關(guān)系，通過組織掌握和使用來突出主體。空間層次，按照訂單的主從關(guān)系使得放大視覺中心的主要形象，表達主體思想，將一個總體布局設(shè)計文檔在各種信息，幫助建立的主要形象，和雙方的主要形象適當(dāng)?shù)卦黾右恍┛瞻?，可以讓更突出強調(diào)的主要形象；

3)疏密有度，錯落有致。在版面布局的內(nèi)容中，一定要緊密結(jié)合，恰當(dāng)留出空白，合理的運用空格，例如字間距和行間距的制造；在對稱的原則下講究非對稱和對稱美；對于形態(tài)和色彩的運用更要結(jié)合黑白搭配，圓形和方形的搭配，進而更好的獲得視覺帶來的效果；

4)圖文并茂，相得益彰。圖形的美觀，文字的整潔，都需要二者相互搭配，如果圖形在版面設(shè)計中比例較大，而文字使用較少，就會大大降低頁面所呈現(xiàn)的額信息容量；反之，文字占用太多則會顯現(xiàn)出整個版面的沉悶，沒有生氣，所以圖文并茂，合理搭配，互相協(xié)調(diào)，才能給網(wǎng)頁版面帶來靈活的展現(xiàn)，繼而豐富了頁面的內(nèi)容。

2 常見版面布局

版面通常所指的是在網(wǎng)頁瀏覽器中呈現(xiàn)的完整布局，布局呈現(xiàn)的文字和圖形相得益彰，以下是常見的頁面布局形式：

2.1 T 型布局

T 型結(jié)構(gòu)是頂部的頁面布局的條紋網(wǎng)站標(biāo)語和橫幅，下面左邊主菜單的一部分，右側(cè)的布局來顯示內(nèi)容。因為菜單背景更深，整體效果類似于英文字母T，T 布局，這是最廣泛應(yīng)用于網(wǎng)頁設(shè)計布局。其優(yōu)點是頁面結(jié)構(gòu)清晰，明確，主次是最容易學(xué)習(xí)初學(xué)者的布局方法;缺點是沉悶的，如果把握不好，不注意細節(jié)和色彩搭配，容易看后讓人覺得無趣。T 的布局結(jié)構(gòu)如圖1 所示。

圖1 T 型布局結(jié)構(gòu)圖

2.2 “口”型布局

“口”型布局映入眼簾的感覺是頁面最中間的主題內(nèi)容，像一個口字，左右為注冊信息，內(nèi)容導(dǎo)航以及搜索引擎，右側(cè)往往是動態(tài)新聞，熱點內(nèi)容，以及友情鏈接，上下則為橫條廣告，以及橫條菜單。而另一個口型布局相對簡單些，主要有橫條廣告或標(biāo)題以及主題內(nèi)容來布局的。

2.3 “川”型布局

在頁面布局中，川型布局是最特殊的，整個頁面呈現(xiàn)川字形狀，一般分為3 列，網(wǎng)站的內(nèi)容欄目主要呈現(xiàn)3 列中，這樣就可以更大限度的呈現(xiàn)主頁的索引功能。這種布局針對網(wǎng)站內(nèi)容欄目較多。它區(qū)別于國形布局，其內(nèi)容主要是頁面的二級鏈接，不足之處就在于欄目在配置的比例上是不平衡的，色彩也不容易得到統(tǒng)一。

2.4 POP 布局

流行布局的海報，一個美麗的照片作為頁面設(shè)計中心，在適當(dāng)?shù)奈恢梅胖弥鞑藛?，用于POP 布局。這個布局不是上下和左右對稱，但是需要平衡和節(jié)奏，可以實現(xiàn)動態(tài)效果，其優(yōu)點是美麗迷人，缺陷是速度運行中是很緩慢的。

圖2 POP 布局

3 新技術(shù)對企業(yè)網(wǎng)站的挑戰(zhàn)

真正的媒體行業(yè)的變化是由數(shù)字信息傳播方式演變而來的，傳統(tǒng)媒體的企業(yè)應(yīng)該跟上步伐，大膽的擁抱，積極為數(shù)字方式進行傳輸。終端設(shè)備的發(fā)展，使大量的桌面的網(wǎng)絡(luò)時代企業(yè)再次面臨嚴(yán)峻考驗。新的在線閱讀設(shè)備催生了新的開發(fā)技術(shù)，顯示技術(shù)，當(dāng)然也帶來了新的設(shè)計技術(shù)。新一代的數(shù)字新媒體文化的游客的感知達到了不可逆轉(zhuǎn)的趨勢，他們會像往常一樣，忘記了傳統(tǒng)媒體網(wǎng)絡(luò)的緩慢。通過互聯(lián)網(wǎng)媒介為核心企業(yè)，因此，媒體，還需要繼續(xù)跟蹤新技術(shù)，密切關(guān)注數(shù)字波的進展，為了保持良好的市場競爭力，將不會被讀者拋棄。網(wǎng)頁設(shè)計的過程中，我們應(yīng)該繼承我國的傳統(tǒng)文化，形成獨特的設(shè)計風(fēng)格，擴大的設(shè)計視覺語言的同時，我們還需要創(chuàng)新，突出現(xiàn)代化、引領(lǐng)時尚潮流。在現(xiàn)代極簡主義風(fēng)格中融入中國傳統(tǒng)元素以及符號的提煉為版面設(shè)計做出突出貢獻，促進網(wǎng)頁設(shè)計變得更加強烈的視覺認(rèn)知和藝術(shù)魅力，創(chuàng)造一個自然、合理、平穩(wěn)的視覺過程，更好地激發(fā)人們的審美情趣和引導(dǎo)瀏覽者更好的接受信息。

[1]趙曉莉.iv+css布局在網(wǎng)頁設(shè)計中的應(yīng)用[J].管理學(xué)家，2010.

[2]章學(xué)明.淺談水工自動化監(jiān)測系統(tǒng)在城西水庫的應(yīng)用[J].管理學(xué)家，2010.

[3]嚴(yán)加瓊.淺析網(wǎng)頁設(shè)計中的頁面布局[J].電腦學(xué)習(xí)，2010.

[4]艾妮.基于三維全景技術(shù)的通用電子商務(wù)系統(tǒng)的研究與開發(fā)[D].貴州大學(xué)，2009.

[5]馬馳.語文課堂的幽默應(yīng)充滿理趣[J].小作家選刊（教學(xué)交流），2013.

[6]周歡.論網(wǎng)頁設(shè)計留白[J].小作家選刊（教學(xué)交流），2013.

[7]李玲玲.關(guān)于"網(wǎng)頁布局"方式的研究[J].淮北職業(yè)技術(shù)學(xué)院學(xué)報，2011.