李翠輕 郭軍城 董齡燁

（石家莊鐵路職業(yè)技術(shù)學(xué)院1） 河北石家莊 050041 河北交通職業(yè)技術(shù)學(xué)院2） 河北石家莊 050000）

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

自包豪斯起，平面設(shè)計(jì)技能訓(xùn)練，多用手繪的方法，在紙張上實(shí)行訓(xùn)練。但網(wǎng)頁是一種新的視覺平面。如何使其視覺元素組織更趨合理，抓住訪問者的注意力，需要充分的利用平面設(shè)計(jì)的思維和技術(shù)?；诰W(wǎng)頁的平面設(shè)計(jì)有著顯著的獨(dú)特性，傳統(tǒng)平面構(gòu)成的技術(shù)和手法在網(wǎng)頁設(shè)計(jì)中應(yīng)用時(shí)可能遭遇水土不服的情況發(fā)生，應(yīng)該在教學(xué)和實(shí)踐中予以重視。

從載體形態(tài)來講，網(wǎng)頁通過各種瀏覽器軟件在各式電子屏幕設(shè)備中呈現(xiàn)，其版式布局、色彩呈現(xiàn)具備伸縮性和動(dòng)態(tài)性。根據(jù)用戶終端、交互動(dòng)作的不同會(huì)發(fā)生變化、調(diào)整、適應(yīng)。所以網(wǎng)頁設(shè)計(jì)不同于靜態(tài)手繪的設(shè)計(jì)領(lǐng)域，因?yàn)閯?chuàng)作者是在設(shè)計(jì)一件活的東西，兼具伸縮性、擴(kuò)展性、成長性。布局設(shè)計(jì)時(shí)，應(yīng)該采用流體布局，使其能夠在大多數(shù)機(jī)器顯示。適應(yīng)式網(wǎng)頁設(shè)計(jì)由Ethan Marcotte在2010年5月份提出，其目標(biāo)是要讓設(shè)計(jì)的網(wǎng)站能夠響應(yīng)用戶的行為，根據(jù)不同終端設(shè)備自動(dòng)調(diào)整尺寸。

從功能要求來講，網(wǎng)頁設(shè)計(jì)強(qiáng)調(diào)以信息傳遞為主、以交互為主而衍生的功能性。信息通過視覺元素傳達(dá)。網(wǎng)頁中的點(diǎn)線面等設(shè)計(jì)元素與紙本相比有不同的意義。網(wǎng)頁應(yīng)給用戶提供良好的可操作性和用戶體驗(yàn)。在網(wǎng)頁設(shè)計(jì)領(lǐng)域，可用性和視覺性的爭議一直存在,好似魚與熊掌的取舍。一方面，為保證用戶粘性，統(tǒng)一、簡練的風(fēng)格使網(wǎng)頁的用戶操作經(jīng)驗(yàn)得以延續(xù)，不至于為更多新鮮的視點(diǎn)干擾；另一方面，為避免審美疲勞，設(shè)計(jì)師還要兼顧藝術(shù)性視覺考量，設(shè)計(jì)勞動(dòng)中所迸發(fā)的創(chuàng)造力超出任何人的想象與預(yù)期，總有不落窠臼的網(wǎng)頁作品涌現(xiàn)，讓人感到眼前一亮。

從技術(shù)手法來講，網(wǎng)頁設(shè)計(jì)遵循HTML標(biāo)準(zhǔn)規(guī)范。其標(biāo)記式代碼構(gòu)成正是針對(duì)網(wǎng)頁視覺元素組織編排的描述語言。如規(guī)定文字、圖片的位置、大小、透明度、色彩等。通過這種標(biāo)記語言，清楚的表達(dá)了設(shè)計(jì)者的創(chuàng)作意圖，使人能夠一目了然。這是一種易于借鑒、重用、修訂的設(shè)計(jì)手法。

從觀者體驗(yàn)來講，網(wǎng)頁相對(duì)與其他媒體更能吸引人的眼球。人們每日頻繁打開網(wǎng)站，瀏覽大量網(wǎng)頁，將其作為獲取信息的主要渠道。報(bào)紙、廣播、電視只是單向的提供信息內(nèi)容給受眾，而網(wǎng)絡(luò)卻提供了對(duì)信息進(jìn)行篩選、拓展、深化的手段。網(wǎng)頁必將遠(yuǎn)超報(bào)紙、廣播、電視在社交媒體中的作用。優(yōu)秀的網(wǎng)頁設(shè)計(jì)應(yīng)該能以簡潔的布局、明確的導(dǎo)航、統(tǒng)一的風(fēng)格、便捷的交互帶給人們流暢的瀏覽體驗(yàn)。網(wǎng)頁文件大小、分辨率、瀏覽器等因素都可能影響人們的瀏覽體驗(yàn)，而傳統(tǒng)的平面設(shè)計(jì)卻無需考慮媒介載體問題。

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

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

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

點(diǎn)是網(wǎng)頁設(shè)計(jì)的基本構(gòu)件，是不可分割的信息元素和視覺元素，即人們?yōu)g覽網(wǎng)頁的著眼點(diǎn)所在。譬如超鏈接、按鈕、logo、表單輸入項(xiàng)、標(biāo)題、列表項(xiàng)。依筆者所見，網(wǎng)頁中的點(diǎn)可以是圖片，也可以是文字；可以體現(xiàn)內(nèi)容，也可以提供交互功能。

線是點(diǎn)的移動(dòng)軌跡，是面的邊際，是不同信息內(nèi)容的板塊劃分。在網(wǎng)頁中，線具有分割、聯(lián)結(jié)、牽引、裝飾、組織等作用。在網(wǎng)頁設(shè)計(jì)中，線的作用弱于傳統(tǒng)媒介。因?yàn)榫W(wǎng)頁處理的多是有規(guī)則輪廓的線，有虛實(shí)之分。實(shí)線如：圖片、表格的邊框，網(wǎng)頁中專門有一個(gè)標(biāo)記

---

用來畫出橫線，以示區(qū)域間隔。虛線如：無邊框網(wǎng)頁元素的內(nèi)外間距（magin和 padding），將為信息視覺元素繪制無形的邊線，將其與內(nèi)外層的元素區(qū)分開來。

網(wǎng)頁并不支持無規(guī)則的線獨(dú)立完整的存在。網(wǎng)頁的結(jié)構(gòu)布局本質(zhì)上是由矩形容器，按從上到下的瀑布式排列、嵌套組合而成。橫線、豎線之外的斜線、不規(guī)則線條最終都是切割、分解到不同行列的矩形容器中拼接而成的。從瀏覽器看到的完整效果只是假象。即使通過

面在網(wǎng)頁中的表征，即大大小小的矩形容器。和不存在不規(guī)則的線條一樣，網(wǎng)頁結(jié)構(gòu)中也不存在不規(guī)則的面。這似乎是一個(gè)束縛平面設(shè)計(jì)師手腳的枷鎖。實(shí)際上，網(wǎng)頁設(shè)計(jì)并不排斥任何的線面形式呈現(xiàn)。瀑布式排列、嵌套組成網(wǎng)頁的虛擬矩形容器，可視為組成報(bào)紙、電子屏幕的點(diǎn)陣系統(tǒng)。包括線、面，甚至色彩等視覺元素都可以無礙的呈現(xiàn)在人們面前，只是其實(shí)質(zhì)的結(jié)構(gòu)受到了精密的分解和組織而已。這種組織本身就是平面構(gòu)成設(shè)計(jì)最基礎(chǔ)的重復(fù)構(gòu)成的應(yīng)用。對(duì)此，火狐瀏覽器提供了三維視圖的查看工具，可以讓人更加形象的了解網(wǎng)頁中各視覺元素的層次關(guān)系。

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

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

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

在網(wǎng)頁設(shè)計(jì)中使用重復(fù)，能夠減少視覺混亂帶來的視覺疲勞，增添網(wǎng)頁的寧靜感，給人簡單整潔、一致有序、愉悅和諧的感覺。越是復(fù)雜、龐大的網(wǎng)站越需要用重復(fù)的手法來組織其網(wǎng)頁內(nèi)容的排版布局，不讓海量的信息內(nèi)容成為負(fù)擔(dān)。

2.2.2 漸變構(gòu)成

漸變能夠體現(xiàn)基本形的有規(guī)律變動(dòng)，具有韻律感、節(jié)奏感。在網(wǎng)頁設(shè)計(jì)中，漸變的應(yīng)用也很普遍，如很多網(wǎng)站的背景色采用從上到下的漸變過程。漸變不能過快，否則缺少連貫性，也不能過慢，重復(fù)累贅，應(yīng)以能夠體現(xiàn)空間透視的韻律感為準(zhǔn)。除了背景色，網(wǎng)頁中的漸變還可用來表現(xiàn)視覺元素如圖片、文字的大小、位置、疏密、方向等。

與靜態(tài)媒介的漸變不同，網(wǎng)頁可以通過編程的方式動(dòng)態(tài)的呈現(xiàn)漸變過程。如在某種情境觸發(fā)下，使網(wǎng)頁視覺元素位置、透明度、色彩、大小、粗細(xì)等屬性發(fā)生變化。此時(shí)的網(wǎng)頁鮮活生動(dòng)，運(yùn)動(dòng)感十足又兼具靈性的。人們的操作體驗(yàn)也會(huì)增分不少。

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

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

3 結(jié)語

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

[1]設(shè)計(jì)之家.25個(gè)漂亮的響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Website).[DB/CD]. [2012-8-5]/[ 2012-9-15]http://www.sj33.cn/digital/wysj /201208/31694.html

[2]Penny Mcintire著,葉永彬譯.Web視覺設(shè)計(jì)[M].北京:機(jī)械工業(yè)出版社,2008：161

[3]王月.論網(wǎng)絡(luò)媒體的藝術(shù)設(shè)計(jì)[J].新西部(下旬刊),2011,(5):125,129.

[4]徐希景,陳筍.網(wǎng)頁平面構(gòu)成的創(chuàng)意手法分析[J].福建商業(yè)高等?？茖W(xué)校學(xué)報(bào),2003,(6):47～50

[5]葛小華.平面設(shè)計(jì)語言在網(wǎng)頁視覺平面的應(yīng)用[J].大舞臺(tái),2011,(2):100～101