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

1網(wǎng)頁平面設(shè)計的特點

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

2平面構(gòu)成在網(wǎng)頁設(shè)計中的應(yīng)用

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

2.1網(wǎng)頁設(shè)計中的點線面應(yīng)用

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

2.2網(wǎng)頁設(shè)計中的平面構(gòu)成基本形式應(yīng)用

2.2.1重復(fù)構(gòu)成

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

2.2.2漸變構(gòu)成

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

2.2.3對比構(gòu)成

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

3結(jié)語

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

作者：李翠輕郭軍城董齡燁單位：石家莊鐵路職業(yè)技術(shù)學(xué)院河北交通職業(yè)技術(shù)學(xué)院