淺談網頁設計教學中網站版面的編排與設計

摘 要：網頁設計可看做是平面設計的一個延伸，是將平面設計與信息化技術相結合的一門設計藝術。本文從網頁設計中的審美需求和視覺流程入手，著重探討網站版面的編排與設計，旨在為網頁設計教學者和未來的設計師們提供參考。

關鍵詞：網頁設計；設計藝術；審美需求

近年來，人們的生活已經與互聯網密不可分，在工作、學習，娛樂等各個方面，互聯網帶給我們的便利無可取代。網頁可以說是互聯網的臉，我們通過瀏覽網頁來獲取信息，進行溝通與交流。因此，一張好看的臉對一個網頁、網站來說可以更吸引人。然而網頁設計在我國仍處在一個較初級的階段，專業的網頁設計師數目很少，這就需要高質量的網頁設計教學來培養更多的專業人才。如何綜合文字、圖片、色彩及用戶審美需求等各方因素，編排設計出一個視覺效果良好的版面，是網頁設計教學中的一個重點。

1 用戶的審美需求

上世紀末互聯網剛登陸我國時，發展勢頭過于迅速。很多網站在創立之初只是想趕緊搶占一席之地，而沒有將太多的時間和精力投入到網頁的設計中，結果是雖然各個網站內容各不相同，但一看之下，版面幾乎都是同一風格，幾乎毫無新意，很快就導致了用戶的審美疲勞。隨著網絡不斷的發展，人們對網站的版面和整體風格越發重視，網站管理者若沒有一張好看的“臉”，將很難留住用戶。這就要求設計者們從藝術的角度出發，從用戶的審美需求入手，結合平面設計中對美學的解釋運用一些藝術的基本形式來改造網頁的版面，從而使其更具美感、更有個性。

1.1 版面的規范化

網頁版面的設計要遵循一定的規律，明確編排時的重點，分清主次內容，按由主到次的順序逐步完成編排。尤其在使用符號、圖片、文字、動畫等內容時，要遵循平面設計中形式美的視覺規律，強調文字、圖片及色彩的搭配。同時，網頁的設計必須要與網頁內容想關聯，不可脫離主題，僅為美學而設計。

1.2 版面的均衡性

頁面的編排中，可以將單個的文字看做是點，成行的文字看做是線，成段落的文字看成面。點、線、面的排列要強調均衡性。三種形式要因實際情況而采用。如單個文字，用起來會十分突兀，但可以讓用戶一眼就看到；成段文字可以排列十分美觀，但用戶可能因為字數過多而放棄閱讀。文字的排列方式一般有水平、垂直、傾斜，前兩種容易帶給人穩定，安寧的感覺，而傾斜會讓人不由產生運動感。合理的結合三種排列方式，保證頁面整體平衡的情況下給局部安插一些斜體字，會顯得更動感而富有生氣。

2 設計中的視覺流程

一個網站要得到用戶的喜愛，其頁面內容、整體布局都必須通過視覺感官使用戶感到愉悅或欣賞。而精心設計過得頁面相比隨意的版面編排無疑要更容易吸引用戶，從而增加網站的訪問量。網站要通過網頁傳達信息，就必須要要慮到視覺元素的處理，只有擁有良好的視覺效果，才能稱得上是新時代背景下真正意義上的新媒體。這就要求網頁設計師們從人們的日常生活出發，更多的考慮人們的閱讀習慣。對于網頁版面的編排，各個元素之間的排列及其各自的大小、位置，都要結合閱讀順序。使用戶保留自己的習慣，在閱讀網頁時感到輕松，自然。

3 網頁中各構成要素的分析

網頁的作用在于傳遞信息，而網頁設計就是服務于這個目的。通過優化網頁中文字、圖片、色彩的造型、排列和放置，使網頁更美觀，更容易讓人獲取信息。如何處理文字、圖片和色彩，值得我們做更多的討論。

3.1 文字的處理

文字是傳遞信息的核心部分，網頁設計中一定會涉及文字的處理。且一般來說文字占整個頁面篇幅較大，因此文字處理好壞直接影響到整個頁面設計的水平。設計師在進行處理時需要考慮文字編輯的整體效果，應盡量給人以簡潔亮麗的視覺效果，要避免頁面中文字效果凌亂、復雜，過多刻意的修飾若使用不當反而會適得其反，因此在必要時，可以不加修飾，僅保留文字本身。此外，設計時還應注意文字的格式、大小及字體要配合文章內容。總而言之，要合理運用美學的觀念編輯文字。

3.2 圖片的處理

網絡訊息傳播的速度越來越快，造成了較普遍的“快餐式閱讀”現象。這種現象是指用戶在互聯網上閱讀時往往只關注標題和核心段落，而僅僅會對極少部分感興趣的內容完成全文的閱讀。網頁上好的圖片可以激發用戶的閱讀興趣，而且圖片的合理編排可以大大增加網頁的美觀，使得原本單純的文本閱讀變的更有趣味。因此，版面設計中必須重視圖片的處理。選擇圖片的內容、數量、大小和方向等都可直接影響到網頁的整體布局，在對圖片進行處理時，我們要遵循精簡的原則，盡量少的選擇圖片，盡量選擇高質量高度切合主題的圖片，力圖用圖片抓住讀者。

未來的互聯網到底會發展到怎樣的一個程度，沒有人可以預測。網頁設計的出現雖然只有短短十幾年，卻必須要不斷跟隨互聯網飛速的發展而不斷變革和創新。又因為網頁設計本身綜合了傳統媒體的各種平面設計因素，又必須講設計師的美學理念通過計算機展現在網頁上。這就要求網頁設計師必須具備較高的設計文化素養，在設計中綜合考慮各方面因素，且必須具備創新意識，緊跟潮流，應互聯網之發展不斷探索更高水準的網頁設計。

[參考文獻]

[1]Paul M.larsst.視覺傳播——形象載動信息[M].霍文利譯.北京廣播學院出版社，2003，2（8）：6-10.

[2]西門柳上，馬國良，劉清華.正在爆發的互聯網革命[M].機械工業出版社，2009，2（5）：22-24.

[3]王受之.世界平面設計史[M].中國青年出版社，2006.2（5）：68-74.