平面構(gòu)成與網(wǎng)頁(yè)設(shè)計(jì)研討

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

1網(wǎng)頁(yè)平面設(shè)計(jì)的特點(diǎn)

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

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

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

2.1網(wǎng)頁(yè)設(shè)計(jì)中的點(diǎn)線(xiàn)面應(yīng)用

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

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

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

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

2.2.2漸變構(gòu)成

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

2.2.3對(duì)比構(gòu)成

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

3結(jié)語(yǔ)

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

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