平面構成與網頁設計研討

前言：本站為你精心整理了平面構成與網頁設計研討范文，希望能為你的創作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

1網頁平面設計的特點

從技術手法來講，網頁設計遵循HTML標準規范。其標記式代碼構成正是針對網頁視覺元素組織編排的描述語言。如規定文字、圖片的位置、大小、透明度、色彩等。通過這種標記語言，清楚的表達了設計者的創作意圖，使人能夠一目了然。這是一種易于借鑒、重用、修訂的設計手法。從觀者體驗來講，網頁相對與其他媒體更能吸引人的眼球。人們每日頻繁打開網站，瀏覽大量網頁，將其作為獲取信息的主要渠道。報紙、廣播、電視只是單向的提供信息內容給受眾，而網絡卻提供了對信息進行篩選、拓展、深化的手段。網頁必將遠超報紙、廣播、電視在社交媒體中的作用。優秀的網頁設計應該能以簡潔的布局、明確的導航、統一的風格、便捷的交互帶給人們流暢的瀏覽體驗。網頁文件大小、分辨率、瀏覽器等因素都可能影響人們的瀏覽體驗，而傳統的平面設計卻無需考慮媒介載體問題。

2平面構成在網頁設計中的應用

平面構成用于網頁設計應為信息內容的流暢傳遞服務。“不要把信息隨意的擺放在屏幕上。要把信息放在由窗口和面板構成的背景中，窗口、面板和基本的網格應有一致、清晰的聯系”。遵循傳統平面構成的認知，網頁中的信息仍可歸結為點線面的視覺元素。諸如重復、對比、漸變等構成形式，是將視覺信息元素有序化、藝術化的必要手段。

2.1網頁設計中的點線面應用

點是網頁設計的基本構件，是不可分割的信息元素和視覺元素，即人們瀏覽網頁的著眼點所在。譬如超鏈接、按鈕、logo、表單輸入項、標題、列表項。依筆者所見，網頁中的點可以是圖片，也可以是文字；可以體現內容，也可以提供交互功能。線是點的移動軌跡，是面的邊際，是不同信息內容的板塊劃分。在網頁中，線具有分割、聯結、牽引、裝飾、組織等作用。在網頁設計中，線的作用弱于傳統媒介。因為網頁處理的多是有規則輪廓的線，有虛實之分。實線如：圖片、表格的邊框，網頁中專門有一個標記<hr>用來畫出橫線，以示區域間隔。虛線如：無邊框網頁元素的內外間距（magin和padding），將為信息視覺元素繪制無形的邊線，將其與內外層的元素區分開來。網頁并不支持無規則的線獨立完整的存在。網頁的結構布局本質上是由矩形容器，按從上到下的瀑布式排列、嵌套組合而成。橫線、豎線之外的斜線、不規則線條最終都是切割、分解到不同行列的矩形容器中拼接而成的。從瀏覽器看到的完整效果只是假象。即使通過<map>標記創建形狀（shap）為多變不規則形（polygon）的熱點鏈接，其所指向的圖片本身仍是處于矩形容器中。所謂的不規則鏈接區域，只是為了表征如地圖中特定地點之類的信息內容，卻與網頁的布局和視覺元素實體無關。面在網頁中的表征，即大大小小的矩形容器。和不存在不規則的線條一樣，網頁結構中也不存在不規則的面。這似乎是一個束縛平面設計師手腳的枷鎖。實際上，網頁設計并不排斥任何的線面形式呈現。瀑布式排列、嵌套組成網頁的虛擬矩形容器，可視為組成報紙、電子屏幕的點陣系統。包括線、面，甚至色彩等視覺元素都可以無礙的呈現在人們面前，只是其實質的結構受到了精密的分解和組織而已。這種組織本身就是平面構成設計最基礎的重復構成的應用。對此，火狐瀏覽器提供了三維視圖的查看工具，可以讓人更加形象的了解網頁中各視覺元素的層次關系。

2.2網頁設計中的平面構成基本形式應用

2.2.1重復構成

網頁中同質內容的視覺表達，一般通過重復構成來實現。如搜索引擎的檢索結果、導航、菜單、背景圖片、表格內容等。重復是規律性、整齊性、秩序性的體現。重復出現的視覺元素，能夠形成一種趨勢引導，使得信息點的集合延展成面。不同的面便具備了不同的功能效用。如搜索引擎的檢索結果列表，它引導人們的視線從上到下的移動，進而對檢索結果的實用價值進行迅速的判斷；視線行至底部，分頁鏈接按鈕又是從左到右排列，提示人們還有更多的檢索結果，也許所尋找的信息內容正在其中。這是絕對重復的應用，且符合視覺流動習慣。而同一個新聞文章列表各個鏈接，在點擊進入后，顯示布局排版重復而信息內容迥異的新聞文章頁面，又是相對重復的效用。

2.2.2漸變構成

漸變能夠體現基本形的有規律變動，具有韻律感、節奏感。在網頁設計中，漸變的應用也很普遍，如很多網站的背景色采用從上到下的漸變過程。漸變不能過快，否則缺少連貫性，也不能過慢，重復累贅，應以能夠體現空間透視的韻律感為準。除了背景色，網頁中的漸變還可用來表現視覺元素如圖片、文字的大小、位置、疏密、方向等。與靜態媒介的漸變不同，網頁可以通過編程的方式動態的呈現漸變過程。如在某種情境觸發下，使網頁視覺元素位置、透明度、色彩、大小、粗細等屬性發生變化。此時的網頁鮮活生動，運動感十足又兼具靈性的。人們的操作體驗也會增分不少。

2.2.3對比構成

對比作為一種自由的構成方式，利用特定的參照體系，突出顯示視覺對象之間或模糊或明確、或簡單或復雜的差異性。利用對比，形成層次感和視覺沖擊力。通常，網站logo的用色與整體頁面的用色產生強烈的對比，才能夠使其不至于迷失在網頁的具體內容中。又如在網上購物網站中，正在低價熱銷的產品會突出顯示，和普通產品會形成鮮明對比，緊緊抓住顧客的眼球，充分吸引了人們注意力的焦點。以google首頁為例，大量的留白使得處于中央區域的檢索詞輸入框和Logo等主要信息異常突出。且搜索按鈕是頁面中最大的可點擊元素，正說明了用戶對它的使用率遠遠超出了其他鏈接或按鈕。

3結語

網頁設計是一種受限的藝術形式，平面構成的知識技能更顯重要。對于高職藝術設計類專業教學而言，如何在網頁設計中自覺貫徹傳統的平面構成，尤其是針對網頁平面視覺設計的特點，靈活運用諸如點線面、對比漸變等手法，使學生迅速的在網頁上實現自己的創意設想，將美學與科學，藝術與技術進行完美的糅合，最終設計出叫好又叫座的作品，是一個不斷深入探討的課題。

作者：李翠輕郭軍城董齡燁單位：石家莊鐵路職業技術學院河北交通職業技術學院