虛與實的和諧論文

虛與實的和諧論文

摘要： 網頁留白內涵的包含三個方面：頁面的空白部分、大面積的有色範圍和重複出現的、在視覺上呈現出整體性的規則圖形的組合。從網頁的可用性和藝術性兩個方面闡述了網頁留白的功能，從網站整體設計和頁面設計兩個方面闡述了網頁留白的處理方法。

Abstract: The intentional blank 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 space 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.

關鍵詞： 虛實；留白；網頁設計

Key words: virtual and real；intentional blank space；web design

引言

“留白”作為中國畫特有的繪畫語言之一，隨着現代數字媒體技術與藝術的發展，在現代設計藝術中的重要地位和作用越來越突出，在網頁設計、版面設計、室內設計等設計中多有運用。網頁設計是Web設計中最直接可見的部分，簡潔、單純、可用是當代Web標準網頁設計的主流，迅速、有效地傳達信息，少用裝飾，強調虛實、留白的運用成為網頁設計的時尚追求。在網頁設計中有效運用留白的技法和觀念，無疑是對Web標準網頁設計技術與藝術思維的極大豐富和拓展，也必將促使我們對這一思維方法展開更高層次的研究和探索。

1 關於網頁設計的“虛實”和“留白”

“留白”是中國傳統繪畫藝術千錘百煉的結晶，這種藝術思想源於傳統的中國哲學思想，基於陰陽辯證、虛實相生的原理。虛與實作為我國古代美學的一對範疇，在古代哲學思想中有很深淵源。古代的虛實相生正是哲學上的樸素辯證法在藝術領域的應用。[1]網頁設計通過網頁上的文字、圖形、音視頻、動畫等元素向用户傳達信息，把各種網頁元素做藝術而合理的處理，讓用户在接受信息的同時享受到美感，獲得良好的用户體驗。虛實與留白是網頁設計要遵循形式美的法則之一。網頁設計留白的內涵包括三個方面：一是頁面的空白部分。“白色是一切色彩中最完美的顏色，我們幾乎找不到白色有消極意義的情境。”[2]如logo區的空白、標題區的空白、內容和圖片周圍的空白、網頁背景空白等等。二是大面積的有色範圍。如在頁面設計中只放置極少的必要元素，背景則用大面積的單純色彩渲染，利用單純色彩的力量來突出和烘托網頁上的主要元素。三是頁面主要設計元素的背景是重複出現的、在視覺上呈現出整體性的規則圖形的組合。這種為突出主體而留下的“白”，在網頁設計中只要處理得當，依然會成為網頁設計留白的典範。[3]在網頁設計中，無論是頁面的空白，還是大面積的有色範圍，或是規則圖形的組合背景，都是頁面的“虛”，是為了強調主體，明晰層次，突出主要的、關鍵的元素這個“實”的。

2 Web標準網頁設計留白的功能

留白是一種藝術形式，在Web標準網頁設計中，留白可以發揮重要作用。利用留白來達到頁面平衡，使整個頁面佈局鬆緊有度，形成虛實、濃淡、動靜、輕重的效果，給人以跌宕起伏之感。[4]與其他藝術形式不同的是，網頁設計是以傳達頁面信息為主要目的的，留白更多的是服務和服從於網頁的可用性。無數的可用性研究證實了一個事實：在Web中，用户對網頁信息是進行瀏覽，而不是閲讀。簡潔明快、富於美感的頁面更具有可瀏覽性，可使用户獲得更加良好的瀏覽體驗。

2.1 可用性體現 一是突出設計主題。人們在完整地接收平面元素信息時，視線會形成一個習慣性的流動順序：視點先落入視覺焦點，後隨個元素間的強弱變化而作有序流動，最後完成對全部分元素信息的吸收。[5]認知心理學的研究證明，留在空白之中的東西更容易被人注意和想起，留白對瀏覽起強調和停頓的作用，有助於視覺向主體元素集中凝聚，它所創造出的空間形成一種路徑進而左右用户的瀏覽方向。如在主題文字的周圍留出恰當的空白空間，會比更改變主題文字大小和色彩更顯突出，同時也使的頁面在統一性上更易處理。

二是簡潔頁面元素。少就是多，簡潔就是豐富，單純就是飽滿。在單純中求豐富，在簡練中求明快。

[6]網頁設計可用性的研究表明，簡潔的、瀏覽性強的網頁能使用户獲得更加良好的體驗。過多的裝飾性元素或重複強調往往會導致讀者的拋棄性反應，使刻意設置的形象失去震撼效應。因此，無論從整體設計，還是結構設計、顏色搭配等方面，網頁設計都要求簡單明瞭，每一個符號、每一個標題、每一個版塊都要緊扣主題，堅決去掉不必要的、與主題無關的東西，儘量做到用最簡潔的元素來傳遞最豐富的意藴、最準確的信息。當然，簡潔不等於簡單，簡潔的形式更需要網頁設計者具有概括濃縮的審美能力，對留白的理解有更高的要求。

三是節約網絡帶寬。在網頁設計佈局中，所有用户界面設計的一般原則是：瀏覽器所有的設計元件中，如果少了某個設計元件，該設計仍然能夠工作，就把它刪掉。簡潔總是比複雜要好，特別是在Web設計中，每節省3字節就會減少千分之一秒的下載時間。[7]一個簡單的例子就是如果選擇粗線或者空白區來區分兩段內容的話，使用空白區的效果會更好，網頁的下載速度會更快。

2.2 藝術性體現 網頁設計中的藝術性是從屬於可用性的，但這並不影響網頁藝術性的存在和它帶給用户的美感體驗。恰恰相反，網頁的藝術性是可用性延伸和擴展。當用户被網頁上滿滿的文字、聲音、圖像等淹沒時，適當合理的留白空恰似一個心靈歇息的驛站，讓我們的神經得到了有效的緩和，從而使用户輕鬆瀏覽。當下網站建設中，功利色彩非常濃厚，網頁上堆積的信息可以“多”、“擠”、“滿”、“亂”形容，從視覺的角度解決辦法之一就是運用網頁留白，這種留白可以是空白，也可以是大面積的單純色彩，或者是規則圖形的組合，無一例個地，它使文字之間、圖形之間形成頁面節奏感、版塊層次感、內容主次感，創造“透氣”的感覺，以化解大量信息聚集起來造成的壓迫感，尋求心理釋放，給瀏覽者帶來輕鬆、愉悦的享受和無限的想象空間，最大限度地激發他們的藝術想象力，從而更好地體會頁面信息中所潛藏的深刻含意。這正是網頁留白在更高層次上的藝術韻律之美。

3 Web標準網頁設計留白處理方法

在版面設計中，處理好大與小、主與次、疏與密、虛與實，都是美的比例基礎，可謂是一種既可瀏覽又可休閒的兩全其美的藝術享受。[8]但對留白如果不加控制的任意使用，它不僅不能有效發揮作用，反而會造成版面混亂，影響整個頁面設計。Web標準網頁設計留白可從兩個方面把握。

3.1 網站整體設計留白 在網站設計的整體方案中，廣泛利用留白的方法構建設計框架，創造統一的視覺傳達意境，使整個設計理念能夠準確而有效，形成網站獨特的風格和廣闊的系統擴展空間，使的頁面中的各個元素更加具有活力和結構組織的多元性，激發出強大的視覺能量。這種留白的思維方式是把整個系統作為留白的載體，而不是單獨的某一頁、某一偵，這需要設計師從設計的全方位去考慮網站的架構，做到設計的全面統一，從整體氣質上定義網站文化的含義，傳達更容易被識別和認同的企業品質。因此，留白在這裏的表現已經不在再單純的技術手段，而是融入整個網站系統的構建的、不可或缺的一部分。這種系統的視覺説服力更為直接，可用性更強。

3.2 網站頁面設計留白 在網頁設計中，也要注重細節的處理，尋求設計在不角度的精緻表現，力求把設計延伸到每一個角落，無論從哪一個角度審視，都展現出完美的設計魅力，從而達到局部帶動整體的設計目的。具體説來，包含以下幾個方面：

一是網頁頂部（頭部）留白。保留傳遞網站的類型、風格的logo和提供簡單明瞭導航鏈接。

二是頁面背影留白。去除阻礙視線順暢流動的底紋等裝飾性元素，根據實際需要設計好頁面邊空。

三是簡化標題表現，去除題花等裝飾性元素，特別是頭條、置頂、圖版等，不作圍框、流動、色彩變換等特效重複強調。

四是版塊分離用空白而不是表格或線條。

4 結語

留白作為一種經典的傳統平面設計語言，已經延伸到當今設計的各個領域。它正在從設計的思維方法上給我們更多的思維空間。網頁設計留白是網頁藝術性的需要，更是網頁可用性的要求。在網頁設計中以無襯有，以有襯無，適應Web標準網頁設計的要求，是無的可用，無的藝術。無論作為網頁設計者，還是網頁用户，都應當把看待“留白”提升到一個新的高度。在這樣一個多元、開放的時代，它一定會擁有更大的應用空間。

參考文獻：

[1]屈一鋒.論現代水墨畫中虛與實的運用[J].美術大觀，2007（11）.

[2]愛娃·海勒[德].色彩的文化[M].吳彤譯，北京：中央編譯出版社，2004.

[3]韓兵.對設計中留白的再認識[J].藝術與設計（理論），2009（03）.

[4]陳學軍，郝怡.藝術形式中的留白略論[J].書畫，2007（07）.

[5]嚴荷菱.水墨畫的虛實留白在黑白書刊版式中的運用[J].合肥學院學報（社會科學版），2009（01）.

[6]童鏵彬.淺談留白在平面設計中的應用[J].美術之友，2009（06）.

[7]Gakob Bielsen[美]可用性設計[M].瀟湘工作室譯.北京：人民郵電出版社，2000.

[8]曾紀綱.留白：現代報紙版面設計藝術之韻味[J].新聞戰線，2004（10）.