網頁設計中版面布局的研究

朱紀蘭

江蘇省揚中市供電公司，江蘇鎮江 212200

1 版面設計方法與布局原則

1.1 版面設計方法

網頁版面設計的方法和技巧主要有以下幾點：

1)簡潔

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

2)要有主色調

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

3)注意字體的設置

網頁版面的布局也包括字體的樣式，字體在網頁版面中也應遵循簡易的原則，也以不超過3 種樣式為主。既然遵循簡易原則，且版面設計字體應不要太大，這樣在網頁版面顯示的字體會給瀏覽者帶來更多有用的信息。哪些閃爍的文字就最好不要出現在網頁版面設計中，圖片的閃爍會給瀏覽者帶來厭煩的感覺，甚至會不舒服。一般而言，標題欄中的字體應比正文相對大些，顏色也應該區分開來。

4)視覺效果要好

網頁版面中的網頁結構與排版設計中最重要的成分是視覺效果。優秀的設計者能制作出更完美的網頁排版和結構，翻閱那些成功的網頁分析發現，網頁主題部分設計的比例是1：2；2：1；再者也可以按1：2：1 的結構，這些比例結構是網頁版面設計中較為常見和比較流行的結構方式。網頁版面的標題和結尾處，也應合理的發布網頁信息，更應遵循合理組織、靈活多變的結構方式去布局。

1.2 版面布局原則

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

1)整體布局，和諧統一。網頁設計中占據關鍵地位的整體布局頁面，起著主導作用。聰明的整體布局，充分顯示了設計師的想法，設計師的靈感，這個頁面必須協調統一。

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

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

最終的目的是使頁面布局頁面產生清晰有序，更好地突出主體，達到最好的顯示效果，因此，內容頁面的視覺中心應該是主體。網頁可以視覺秩序、空間層次、主從關系和相互之間的邏輯關系，通過組織掌握和使用來突出主體。空間層次，按照訂單的主從關系使得放大視覺中心的主要形象，表達主體思想，將一個總體布局設計文檔在各種信息，幫助建立的主要形象，和雙方的主要形象適當地增加一些空白，可以讓更突出強調的主要形象；

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

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

2 常見版面布局

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

2.1 T 型布局

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

圖1 T 型布局結構圖

2.2 “口”型布局

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

2.3 “川”型布局

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

2.4 POP 布局

流行布局的海報，一個美麗的照片作為頁面設計中心，在適當的位置放置主菜單，用于POP 布局。這個布局不是上下和左右對稱，但是需要平衡和節奏，可以實現動態效果，其優點是美麗迷人，缺陷是速度運行中是很緩慢的。

圖2 POP 布局

3 新技術對企業網站的挑戰

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

[1]趙曉莉.iv+css布局在網頁設計中的應用[J].管理學家，2010.

[2]章學明.淺談水工自動化監測系統在城西水庫的應用[J].管理學家，2010.

[3]嚴加瓊.淺析網頁設計中的頁面布局[J].電腦學習，2010.

[4]艾妮.基于三維全景技術的通用電子商務系統的研究與開發[D].貴州大學，2009.

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

[6]周歡.論網頁設計留白[J].小作家選刊（教學交流），2013.

[7]李玲玲.關于"網頁布局"方式的研究[J].淮北職業技術學院學報，2011.