虛與實(shí)的和諧——論網(wǎng)頁(yè)設(shè)計(jì)留白

1、<p>　　虛與實(shí)的和諧——論網(wǎng)頁(yè)設(shè)計(jì)留白</p><p>　　摘要： 網(wǎng)頁(yè)留白內(nèi)涵的包含三個(gè)方面：頁(yè)面的空白部分、大面積的有色范圍和重復(fù)出現(xiàn)的、在視覺上呈現(xiàn)出整體性的規(guī)則圖形的組合。從網(wǎng)頁(yè)的可用性和藝術(shù)性兩個(gè)方面闡述了網(wǎng)頁(yè)留白的功能，從網(wǎng)站整體設(shè)計(jì)和頁(yè)面設(shè)計(jì)兩個(gè)方面闡述了網(wǎng)頁(yè)留白的處理方法。 </p><p>　　Abstract: The intentional blank

2、space includes three aspects: the blank page, part of a large area of color range and repeated, and the visual integrity of the rules of a combination of graphics. It aims to analyze the function of intentional blank spa

3、ce from the pages of the availability and artistic aspects. Besides, it attempts to depict the approaches on how to handle intentional blank space from the perspective of the overall web and page design. </p><

4、p>　　關(guān)鍵詞： 虛實(shí)；留白；網(wǎng)頁(yè)設(shè)計(jì) </p><p>　　Key words: virtual and real；intentional blank space；web design </p><p><b>　　0 引言 </b></p><p>　　“留白”作為中國(guó)畫特有的繪畫語(yǔ)言之一，隨著現(xiàn)代數(shù)字媒體技術(shù)與藝術(shù)的發(fā)展，在現(xiàn)代設(shè)

5、計(jì)藝術(shù)中的重要地位和作用越來越突出，在網(wǎng)頁(yè)設(shè)計(jì)、版面設(shè)計(jì)、室內(nèi)設(shè)計(jì)等設(shè)計(jì)中多有運(yùn)用。網(wǎng)頁(yè)設(shè)計(jì)是Web設(shè)計(jì)中最直接可見的部分，簡(jiǎn)潔、單純、可用是當(dāng)代Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的主流，迅速、有效地傳達(dá)信息，少用裝飾，強(qiáng)調(diào)虛實(shí)、留白的運(yùn)用成為網(wǎng)頁(yè)設(shè)計(jì)的時(shí)尚追求。在網(wǎng)頁(yè)設(shè)計(jì)中有效運(yùn)用留白的技法和觀念，無疑是對(duì)Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)與藝術(shù)思維的極大豐富和拓展，也必將促使我們對(duì)這一思維方法展開更高層次的研究和探索。 </p><p>

6、;　　1 關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的“虛實(shí)”和“留白” </p><p>　　“留白”是中國(guó)傳統(tǒng)繪畫藝術(shù)千錘百煉的結(jié)晶，這種藝術(shù)思想源于傳統(tǒng)的中國(guó)哲學(xué)思想，基于陰陽(yáng)辯證、虛實(shí)相生的原理。虛與實(shí)作為我國(guó)古代美學(xué)的一對(duì)范疇，在古代哲學(xué)思想中有很深淵源。古代的虛實(shí)相生正是哲學(xué)上的樸素辯證法在藝術(shù)領(lǐng)域的應(yīng)用。[1]網(wǎng)頁(yè)設(shè)計(jì)通過網(wǎng)頁(yè)上的文字、圖形、音視頻、動(dòng)畫等元素向用戶傳達(dá)信息，把各種網(wǎng)頁(yè)元素做藝術(shù)而合理的處理，讓用戶在接受信息的

7、同時(shí)享受到美感，獲得良好的用戶體驗(yàn)。虛實(shí)與留白是網(wǎng)頁(yè)設(shè)計(jì)要遵循形式美的法則之一。網(wǎng)頁(yè)設(shè)計(jì)留白的內(nèi)涵包括三個(gè)方面：一是頁(yè)面的空白部分?！鞍咨且磺猩手凶钔昝赖念伾?，我們幾乎找不到白色有消極意義的情境?！盵2]如logo區(qū)的空白、標(biāo)題區(qū)的空白、內(nèi)容和圖片周圍的空白、網(wǎng)頁(yè)背景空白等等。二是大面積的有色范圍。如在頁(yè)面設(shè)計(jì)中只放置極少的必要元素，背景則用大面積的單純色彩渲染，利用單純色彩的力量來突出和烘托網(wǎng)頁(yè)上的主要元素。三是頁(yè)面主要設(shè)計(jì)元素的

8、背景是重復(fù)出現(xiàn)的、在視覺上呈現(xiàn)出整體性的規(guī)則圖形的組合。這種為突出主體而留下的“白”，在網(wǎng)頁(yè)設(shè)計(jì)中只要處理得當(dāng)，依然會(huì)成為網(wǎng)頁(yè)設(shè)計(jì)留白的典范。[3]在網(wǎng)頁(yè)設(shè)計(jì)中，無論是頁(yè)面的空白，還是大面積的有色范圍，或是規(guī)則圖</p><p>　　2 Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)留白的功能 </p><p>　　留白是一種藝術(shù)形式，在Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)中，留白可以發(fā)揮重要作用。利用留白來達(dá)到頁(yè)面平衡，使整個(gè)頁(yè)面

9、布局松緊有度，形成虛實(shí)、濃淡、動(dòng)靜、輕重的效果，給人以跌宕起伏之感。[4]與其他藝術(shù)形式不同的是，網(wǎng)頁(yè)設(shè)計(jì)是以傳達(dá)頁(yè)面信息為主要目的的，留白更多的是服務(wù)和服從于網(wǎng)頁(yè)的可用性。無數(shù)的可用性研究證實(shí)了一個(gè)事實(shí)：在Web中，用戶對(duì)網(wǎng)頁(yè)信息是進(jìn)行瀏覽，而不是閱讀。簡(jiǎn)潔明快、富于美感的頁(yè)面更具有可瀏覽性，可使用戶獲得更加良好的瀏覽體驗(yàn)。 </p><p>　　2.1 可用性體現(xiàn) 一是突出設(shè)計(jì)主題。人們?cè)谕暾亟邮掌矫嬖?/p>

10、信息時(shí)，視線會(huì)形成一個(gè)習(xí)慣性的流動(dòng)順序：視點(diǎn)先落入視覺焦點(diǎn)，后隨個(gè)元素間的強(qiáng)弱變化而作有序流動(dòng)，最后完成對(duì)全部分元素信息的吸收。[5]認(rèn)知心理學(xué)的研究證明，留在空白之中的東西更容易被人注意和想起，留白對(duì)瀏覽起強(qiáng)調(diào)和停頓的作用，有助于視覺向主體元素集中凝聚，它所創(chuàng)造出的空間形成一種路徑進(jìn)而左右用戶的瀏覽方向。如在主題文字的周圍留出恰當(dāng)?shù)目瞻卓臻g，會(huì)比更改變主題文字大小和色彩更顯突出，同時(shí)也使的頁(yè)面在統(tǒng)一性上更易處理。 </p>

11、<p>　　二是簡(jiǎn)潔頁(yè)面元素。少就是多，簡(jiǎn)潔就是豐富，單純就是飽滿。在單純中求豐富，在簡(jiǎn)練中求明快。 </p><p>　　[6]網(wǎng)頁(yè)設(shè)計(jì)可用性的研究表明，簡(jiǎn)潔的、瀏覽性強(qiáng)的網(wǎng)頁(yè)能使用戶獲得更加良好的體驗(yàn)。過多的裝飾性元素或重復(fù)強(qiáng)調(diào)往往會(huì)導(dǎo)致讀者的拋棄性反應(yīng)，使刻意設(shè)置的形象失去震撼效應(yīng)。因此，無論從整體設(shè)計(jì)，還是結(jié)構(gòu)設(shè)計(jì)、顏色搭配等方面，網(wǎng)頁(yè)設(shè)計(jì)都要求簡(jiǎn)單明了，每一個(gè)符號(hào)、每一個(gè)標(biāo)題、每一個(gè)版塊

12、都要緊扣主題，堅(jiān)決去掉不必要的、與主題無關(guān)的東西，盡量做到用最簡(jiǎn)潔的元素來傳遞最豐富的意蘊(yùn)、最準(zhǔn)確的信息。當(dāng)然，簡(jiǎn)潔不等于簡(jiǎn)單，簡(jiǎn)潔的形式更需要網(wǎng)頁(yè)設(shè)計(jì)者具有概括濃縮的審美能力，對(duì)留白的理解有更高的要求。 </p><p>　　三是節(jié)約網(wǎng)絡(luò)帶寬。在網(wǎng)頁(yè)設(shè)計(jì)布局中，所有用戶界面設(shè)計(jì)的一般原則是：瀏覽器所有的設(shè)計(jì)元件中，如果少了某個(gè)設(shè)計(jì)元件，該設(shè)計(jì)仍然能夠工作，就把它刪掉。簡(jiǎn)潔總是比復(fù)雜要好，特別是在Web設(shè)計(jì)中，每

13、節(jié)省3字節(jié)就會(huì)減少千分之一秒的下載時(shí)間。[7]一個(gè)簡(jiǎn)單的例子就是如果選擇粗線或者空白區(qū)來區(qū)分兩段內(nèi)容的話，使用空白區(qū)的效果會(huì)更好，網(wǎng)頁(yè)的下載速度會(huì)更快。 </p><p>　　2.2 藝術(shù)性體現(xiàn) 網(wǎng)頁(yè)設(shè)計(jì)中的藝術(shù)性是從屬于可用性的，但這并不影響網(wǎng)頁(yè)藝術(shù)性的存在和它帶給用戶的美感體驗(yàn)。恰恰相反，網(wǎng)頁(yè)的藝術(shù)性是可用性延伸和擴(kuò)展。當(dāng)用戶被網(wǎng)頁(yè)上滿滿的文字、聲音、圖像等淹沒時(shí)，適當(dāng)合理的留白空恰似一個(gè)心靈歇息的驛站，讓

14、我們的神經(jīng)得到了有效的緩和，從而使用戶輕松瀏覽。當(dāng)下網(wǎng)站建設(shè)中，功利色彩非常濃厚，網(wǎng)頁(yè)上堆積的信息可以“多”、“擠”、“滿”、“亂”形容，從視覺的角度解決辦法之一就是運(yùn)用網(wǎng)頁(yè)留白，這種留白可以是空白，也可以是大面積的單純色彩，或者是規(guī)則圖形的組合，無一例個(gè)地，它使文字之間、圖形之間形成頁(yè)面節(jié)奏感、版塊層次感、內(nèi)容主次感，創(chuàng)造“透氣”的感覺，以化解大量信息聚集起來造成的壓迫感，尋求心理釋放，給瀏覽者帶來輕松、愉悅的享受和無限的想象空間，最

15、大限度地激發(fā)他們的藝術(shù)想象力，從而更好地體會(huì)頁(yè)面信息中所潛藏的深刻含意。這正是網(wǎng)頁(yè)留白在更高層次上的藝術(shù)韻律之美。 </p><p>　　3 Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)留白處理方法 </p><p>　　在版面設(shè)計(jì)中，處理好大與小、主與次、疏與密、虛與實(shí)，都是美的比例基礎(chǔ)，可謂是一種既可瀏覽又可休閑的兩全其美的藝術(shù)享受。[8]但對(duì)留白如果不加控制的任意使用，它不僅不能有效發(fā)揮作用，反而會(huì)造成版面

16、混亂，影響整個(gè)頁(yè)面設(shè)計(jì)。Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)留白可從兩個(gè)方面把握。 </p><p>　　3.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ò)展空間，使的頁(yè)面中的各個(gè)元素更加具有活力和結(jié)構(gòu)組織的多元性，激發(fā)出強(qiáng)大的視覺能量。這種留白的思維方式是把整個(gè)系統(tǒng)作為留白的載體，而不是單獨(dú)的某一頁(yè)、某一偵，這

17、需要設(shè)計(jì)師從設(shè)計(jì)的全方位去考慮網(wǎng)站的架構(gòu)，做到設(shè)計(jì)的全面統(tǒng)一，從整體氣質(zhì)上定義網(wǎng)站文化的含義，傳達(dá)更容易被識(shí)別和認(rèn)同的企業(yè)品質(zhì)。因此，留白在這里的表現(xiàn)已經(jīng)不在再單純的技術(shù)手段，而是融入整個(gè)網(wǎng)站系統(tǒng)的構(gòu)建的、不可或缺的一部分。這種系統(tǒng)的視覺說服力更為直接，可用性更強(qiáng)。 </p><p>　　3.2 網(wǎng)站頁(yè)面設(shè)計(jì)留白 在網(wǎng)頁(yè)設(shè)計(jì)中，也要注重細(xì)節(jié)的處理，尋求設(shè)計(jì)在不角度的精致表現(xiàn)，力求把設(shè)計(jì)延伸到每一個(gè)角落，無論從哪

18、一個(gè)角度審視，都展現(xiàn)出完美的設(shè)計(jì)魅力，從而達(dá)到局部帶動(dòng)整體的設(shè)計(jì)目的。具體說來，包含以下幾個(gè)方面： </p><p>　　一是網(wǎng)頁(yè)頂部（頭部）留白。保留傳遞網(wǎng)站的類型、風(fēng)格的logo和提供簡(jiǎn)單明了導(dǎo)航鏈接。 </p><p>　　二是頁(yè)面背影留白。去除阻礙視線順暢流動(dòng)的底紋等裝飾性元素，根據(jù)實(shí)際需要設(shè)計(jì)好頁(yè)面邊空。 </p><p>　　三是簡(jiǎn)化標(biāo)題表現(xiàn)，去除題花等

19、裝飾性元素，特別是頭條、置頂、圖版等，不作圍框、流動(dòng)、色彩變換等特效重復(fù)強(qiáng)調(diào)。 </p><p>　　四是版塊分離用空白而不是表格或線條。 </p><p><b>　　4 結(jié)語(yǔ) </b></p><p>　　留白作為一種經(jīng)典的傳統(tǒng)平面設(shè)計(jì)語(yǔ)言，已經(jīng)延伸到當(dāng)今設(shè)計(jì)的各個(gè)領(lǐng)域。它正在從設(shè)計(jì)的思維方法上給我們更多的思維空間。網(wǎng)頁(yè)設(shè)計(jì)留白是網(wǎng)頁(yè)藝術(shù)

20、性的需要，更是網(wǎng)頁(yè)可用性的要求。在網(wǎng)頁(yè)設(shè)計(jì)中以無襯有，以有襯無，適應(yīng)Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的要求，是無的可用，無的藝術(shù)。無論作為網(wǎng)頁(yè)設(shè)計(jì)者，還是網(wǎng)頁(yè)用戶，都應(yīng)當(dāng)把看待“留白”提升到一個(gè)新的高度。在這樣一個(gè)多元、開放的時(shí)代，它一定會(huì)擁有更大的應(yīng)用空間。 </p><p><b>　　參考文獻(xiàn)： </b></p><p>　　[1]屈一鋒.論現(xiàn)代水墨畫中虛與實(shí)的運(yùn)用[J].美

21、術(shù)大觀，2007（11）. </p><p>　　[2]愛娃·海勒[德].色彩的文化[M].吳彤譯，北京：中央編譯出版社，2004. </p><p>　　[3]韓兵.對(duì)設(shè)計(jì)中留白的再認(rèn)識(shí)[J].藝術(shù)與設(shè)計(jì)（理論），2009（03）. </p><p>　　[4]陳學(xué)軍，郝怡.藝術(shù)形式中的留白略論[J].書畫，2007（07）. </p>&

22、lt;p>　　[5]嚴(yán)荷菱.水墨畫的虛實(shí)留白在黑白書刊版式中的運(yùn)用[J].合肥學(xué)院學(xué)報(bào)（社會(huì)科學(xué)版），2009（01）. </p><p>　　[6]童鏵彬.淺談留白在平面設(shè)計(jì)中的應(yīng)用[J].美術(shù)之友，2009（06）. </p><p>　　[7]Gakob Bielsen[美].Web可用性設(shè)計(jì)[M].瀟湘工作室譯.北京：人民郵電出版社，2000. </p><