論網(wǎng)頁設(shè)計(jì)中的留白藝術(shù)

湯麗花

摘 要：隨著時(shí)代的發(fā)展，網(wǎng)站建設(shè)越來越接近于一門藝術(shù)而不僅僅是一項(xiàng)技術(shù)。網(wǎng)頁的藝術(shù)設(shè)計(jì)，日益被網(wǎng)站設(shè)計(jì)者所注重，而網(wǎng)頁留白正是一種重要的藝術(shù)表現(xiàn)。結(jié)合多年的網(wǎng)頁制作教學(xué)經(jīng)驗(yàn)，筆者從網(wǎng)頁的可用性和藝術(shù)性兩個(gè)方面闡述了網(wǎng)頁留白的功能，從網(wǎng)站整體設(shè)計(jì)和頁面設(shè)計(jì)兩個(gè)方面闡述了網(wǎng)頁留白的處理方法。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；留白藝術(shù)；功能；方法

中圖分類號：G712 文獻(xiàn)標(biāo)識碼：A 文章編號：1992-7711（2016）11-085-1

一、關(guān)于網(wǎng)頁設(shè)計(jì)的“虛實(shí)”和“留白”

“留白”是中國傳統(tǒng)繪畫藝術(shù)千錘百煉的結(jié)晶，這種藝術(shù)思想源于傳統(tǒng)的中國哲學(xué)思想，基于陰陽辯證、虛實(shí)相生的原理。虛與實(shí)作為我國古代美學(xué)的一對范疇，在古代哲學(xué)思想中有很深淵源。古代的虛實(shí)相生正是哲學(xué)上的樸素辯證法在藝術(shù)領(lǐng)域的應(yīng)用。

網(wǎng)頁設(shè)計(jì)通過網(wǎng)頁上的文字、圖形、音視頻、動(dòng)畫等元素向用戶傳達(dá)信息，把各種網(wǎng)頁元素做藝術(shù)而合理的處理，讓用戶在接受信息的同時(shí)享受到美感，獲得良好的用戶體驗(yàn)。虛實(shí)與留白是網(wǎng)頁設(shè)計(jì)要遵循形式美的法則之一。網(wǎng)頁設(shè)計(jì)留白的內(nèi)涵包括三個(gè)方面：一是頁面的空白部分。如logo區(qū)的空白、標(biāo)題區(qū)的空白、內(nèi)容和圖片周圍的空白、網(wǎng)頁背景空白等等。二是大面積的有色范圍。如在頁面設(shè)計(jì)中只放置極少的必要元素，背景則用大面積的單純色彩渲染，利用單純色彩的力量來突出和烘托網(wǎng)頁上的主要元素。三是頁面主要設(shè)計(jì)元素的背景是重復(fù)出現(xiàn)的、在視覺上呈現(xiàn)出整體性的規(guī)則圖形的組合。這種為突出主體而留下的“白”，在網(wǎng)頁設(shè)計(jì)中只要處理得當(dāng)，依然會(huì)成為網(wǎng)頁設(shè)計(jì)留白的典范。

二、Web標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)留白的功能

1.可用性體現(xiàn)。一是突出設(shè)計(jì)主題。人們在完整地接收平面元素信息時(shí)，視線會(huì)形成一個(gè)習(xí)慣性的流動(dòng)順序：視點(diǎn)先落入視覺焦點(diǎn)，后隨各元素間的強(qiáng)弱變化而作有序流動(dòng)，最后完成對全部元素信息的吸收。認(rèn)知心理學(xué)的研究證明，留在空白之中的東西更容易被人注意和想起，留白對瀏覽起強(qiáng)調(diào)和停頓的作用，有助于視覺向主體元素集中凝聚，它所創(chuàng)造出的空間形成一種路徑進(jìn)而左右用戶的瀏覽方向。二是簡潔頁面元素。少就是多，簡潔就是豐富，單純就是飽滿。在單純中求豐富，在簡練中求明快。網(wǎng)頁設(shè)計(jì)可用性的研究表明，簡潔的、瀏覽性強(qiáng)的網(wǎng)頁能使用戶獲得更加良好的體驗(yàn)。無論從整體設(shè)計(jì)，還是結(jié)構(gòu)設(shè)計(jì)、顏色搭配等方面，網(wǎng)頁設(shè)計(jì)都要求簡單明了，每一個(gè)符號、每一個(gè)標(biāo)題、每一個(gè)版塊都要緊扣主題，堅(jiān)決去掉不必要的、與主題無關(guān)的東西，盡量做到用最簡潔的元素來傳遞最豐富的意蘊(yùn)、最準(zhǔn)確的信息。當(dāng)然，簡潔不等于簡單，簡潔的形式更需要網(wǎng)頁設(shè)計(jì)者具有概括濃縮的審美能力，對留白的理解有更高的要求。三是節(jié)約網(wǎng)絡(luò)帶寬。在網(wǎng)頁設(shè)計(jì)布局中，所有用戶界面設(shè)計(jì)的一般原則是：瀏覽器所有的設(shè)計(jì)元件中，如果少了某個(gè)設(shè)計(jì)元件，該設(shè)計(jì)仍然能夠工作，就把它刪掉。簡潔總是比復(fù)雜要好，特別是在Web設(shè)計(jì)中，每節(jié)省3字節(jié)就會(huì)減少千分之一秒的下載時(shí)間。

2.藝術(shù)性體現(xiàn)。網(wǎng)頁設(shè)計(jì)中的藝術(shù)性是從屬于可用性的，但這并不影響網(wǎng)頁藝術(shù)性的存在和它帶給用戶的美感體驗(yàn)。恰恰相反，網(wǎng)頁的藝術(shù)性是可用性延伸和擴(kuò)展。當(dāng)下網(wǎng)站建設(shè)中，功利色彩非常濃厚，網(wǎng)頁上堆積的信息可以“多”、“擠”、“滿”、“亂”形容，從視覺的角度解決辦法之一就是運(yùn)用網(wǎng)頁留白，這種留白可以是空白，也可以是大面積的單純色彩，或者是規(guī)則圖形的組合，無一例外地，它使文字之間、圖形之間形成頁面節(jié)奏感、版塊層次感、內(nèi)容主次感，創(chuàng)造“透氣”的感覺，以化解大量信息聚集起來造成的壓迫感，尋求心理釋放，給瀏覽者帶來輕松、愉悅的享受和無限的想象空間，最大限度地激發(fā)他們的藝術(shù)想象力，從而更好地體會(huì)頁面信息中所潛藏的深刻含意。這正是網(wǎng)頁留白在更高層次上的藝術(shù)韻律之美。

三、Web標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)留白處理方法

1.網(wǎng)站整體設(shè)計(jì)留白。在網(wǎng)站設(shè)計(jì)的整體方案中，廣泛利用留白的方法構(gòu)建設(shè)計(jì)框架，創(chuàng)造統(tǒng)一的視覺傳達(dá)意境，使整個(gè)設(shè)計(jì)理念能夠準(zhǔn)確而有效，形成網(wǎng)站獨(dú)特的風(fēng)格和廣闊的系統(tǒng)擴(kuò)展空間，使頁面中的各個(gè)元素更加具有活力和結(jié)構(gòu)組織的多元性，激發(fā)出強(qiáng)大的視覺能量。這種留白的思維方式是把整個(gè)系統(tǒng)作為留白的載體，而不是單獨(dú)的某一頁、某一偵，這需要設(shè)計(jì)師從設(shè)計(jì)的全方位去考慮網(wǎng)站的架構(gòu)，做到設(shè)計(jì)的全面統(tǒng)一，從整體氣質(zhì)上定義網(wǎng)站文化的含義，傳達(dá)更容易被識別和認(rèn)同的企業(yè)品質(zhì)。因此，留白在這里的表現(xiàn)已經(jīng)不在再單純的技術(shù)手段，而是融入整個(gè)網(wǎng)站系統(tǒng)的構(gòu)建的、不可或缺的一部分。這種系統(tǒng)的視覺說服力更為直接，可用性更強(qiáng)。

2.網(wǎng)站頁面設(shè)計(jì)留白。在網(wǎng)頁設(shè)計(jì)中，也要注重細(xì)節(jié)的處理，尋求設(shè)計(jì)在不同角度的精致表現(xiàn)，力求把設(shè)計(jì)延伸到每一個(gè)角落，無論從哪一個(gè)角度審視，都展現(xiàn)出完美的設(shè)計(jì)魅力，從而達(dá)到局部帶動(dòng)整體的設(shè)計(jì)目的。具體說來，包含以下幾個(gè)方面：一是網(wǎng)頁頂部（頭部）留白。保留傳遞網(wǎng)站的類型、風(fēng)格的logo和提供簡單明了導(dǎo)航鏈接。二是頁面背影留白。去除阻礙視線順暢流動(dòng)的底紋等裝飾性元素，根據(jù)實(shí)際需要設(shè)計(jì)好頁面邊空。三是簡化標(biāo)題表現(xiàn)，去除題花等裝飾性元素，特別是頭條、置頂、圖版等，不作圍框、流動(dòng)、色彩變換等特效重復(fù)強(qiáng)調(diào)。四是版塊分離用空白而不是表格或線條。

留白作為一種經(jīng)典的傳統(tǒng)平面設(shè)計(jì)語言，已經(jīng)延伸到當(dāng)今設(shè)計(jì)的各個(gè)領(lǐng)域。它正在從設(shè)計(jì)的思維方法上給我們更多的思維空間。網(wǎng)頁設(shè)計(jì)留白是網(wǎng)頁藝術(shù)性的需要，更是網(wǎng)頁可用性的要求。無論作為網(wǎng)頁設(shè)計(jì)者，還是網(wǎng)頁用戶，都應(yīng)當(dāng)把看待“留白”提升到一個(gè)新的高度。在這樣一個(gè)多元、開放的時(shí)代，它一定會(huì)擁有更大的應(yīng)用空間。

[參考文獻(xiàn)]

[1]韓兵.對設(shè)計(jì)中留白的再認(rèn)識[J].藝術(shù)與設(shè)計(jì)（理論），2009（03）.

[2]陳學(xué)軍，郝怡.藝術(shù)形式中的留白略論[J].書畫，2007（07）.

[3]童鏵彬.淺談留白在平面設(shè)計(jì)中的應(yīng)用[J].美術(shù)之友，2009（06）.