網頁設計也有留白藝術？點擊了解詳情

留白是藝術設計中的重要元素，它能夠讓畫麵有呼吸、想象的空間。這一點在網頁設計中也是非常重要的。網頁設計留白，是指讓網頁元素之間保持距離，使得圖像、文本空間有舒展的部分，讓布局排版顯得幹淨和精致。

盡管這個術語尤其指留“白”，但它所指的區域並不一定要是白色的。它隻是網頁布局中環繞各元素的空白空間。

空白空間的體現有多種不同形式，例如圖片、段落文字、圖標信息、縫隙、外邊距、列甚至一行行文字之間字間距，這些都可以留有一定的空間。盡管它似乎“空無一物”，裏麵沒有任何其他設計元素，但我們不能如此看待它。視之為“無物”，因為正是這些空白空間，給以網頁設計整體一種得體的布局，有呼吸感的美感與表現力。處理得當的話，留白確實可以為網頁設計帶來大量的益處。

Apple就是典型的以簡潔風格，大留白的布局方式進行設計的網站，看似留白的空間裏什麼都沒有，但實際上留白區域的作用相當大，給予設計呼吸的空間，提供了布局上的平衡，給予用戶視覺上很大的擴展性，視線能迅速的集中在Apple的主要產品上，極簡的風格也凸顯品牌的國際化。

不難發現很多知名的大品牌，網站設計都是以大留白，負空間來設計的。

很明顯，我們看到的留白運用的多的網頁設計，在視覺上確實比緊湊的網頁設計更具有美感和高級感，下麵就具體說說留白在網頁設計中的作用。

一、空白不代表無用

剛接觸網頁設計的設計師往往容易出現一個誤區，一些人可能認為頁麵上的空白越少越好，為了放盡可能多的文字，或者為了展現更多的圖片等信息內容，或整體縮小版麵。

畢竟互聯網的發展飛快，用戶的閱讀習慣也越來來越懶惰，很多人不願意進行過多的操作，於是網頁設計師就容易為了迎合用戶的閱讀習慣，把盡可能多的內容一下子放到一個頁麵中，以為這樣用戶就可以一眼獲取到很多內容。

但其實不然，頁麵上元素越多越容易混亂，讓人找不到正確的閱讀順序，沒有正確的視覺流線，不能引導用戶進行瀏覽，越多的內容就會越快引起讀者的厭倦，會導致用戶直接關閉頁麵，從而流失掉網頁的瀏覽量。

所以頁麵需要充分的留白，給與用戶視覺上的呼吸感，這樣才能留住用戶，進一步引導用戶進行瀏覽。當然過多留白也不好，頁麵空無一物就放一個很小的元素，也是對網頁空間的一種浪費，所以網頁設計關於留白，需要找到一個平衡點，既能有效將信息合理布局又能保留呼吸感。

一般來講留白過多比留白過少要好一些。所以設計時多調整，看哪一種比較舒服。

斯柯達汽車車型網站，的留白使用的很利索，突出了品牌信息，展現了主要產品。我們應該視留白為布局的最重要手段，多給元素點呼吸空間，這樣信息的層次感將更加明確，用戶指引效果也更好。

二、清晰的層級關係

不同的留白可以區分不同的版塊以及同一版塊的不同層次。留白能夠增加或者降低元素的易見性。元素周圍留白越多，顯得越醒目突出。字間距和行間距決定了文字的易讀性。

留白還有助於引導視線，為設計建立層次，區分什麼是重點和關鍵點。視線會立即移動到被留白包圍的元素上。留白為其中的元素增添了衝擊力。

jestina韓國購物網站

通過適當的留白把同類信息有效的分類布局，產品和對應的文案間距較近，視線會自動將他們分為一組，不同產品間的間距稍大，能看出是分別是該品牌幾款不同的產品。並且適當的留白能有效區分的不同的頁麵區域。

三、控製文本可讀性和易讀性

用好留白，任何網站的可讀性與易讀性都會得到改善。如果一個頁麵上的文字過於擁擠，它就會妨礙舒適的閱讀體驗，從而阻礙整體用戶體驗。更多的留白使文字更易瀏覽，從而提升閱讀體驗，也更易理解。

標題字號要最大，標題下的文本要緊跟著標題以示與標題有關聯。段落要有段間距，否則文本顯得冗長難讀。頁麵底部要適當留白。

BLK Wate高級堿性水飲料，豪華水飲食網站。網站對字號和文字留白的使用很讚，文案和產品左右分欄，采用適當的留白使文本和產品都具有空間感。重要文案很突出，文本的行間距也夠大，不同層級的文案采用不同的字號和間距，使用戶很直觀的看清哪裏是重要的文案，可以很順利的引導用戶的視線。

DigitalWerk設計公司網站

網站的首頁文本層次運用也很出色。標題占主要位置，大號字體加粗顯示。二級文案排在下方，特殊顏色處理，三級內容文案字體更小一些，位置再底部的位置，文字大小對比和空間留白，加強了文本塊與塊之間的區分，增強了各區塊的整體性。重點突出主要文案，弱化輔助性信息。

四、平衡頁麵布局

做出一個平衡的布局需要敏銳的眼光。

保時捷 New Panamera 豪華高檔汽車網站。通過留白和文案位置的擺放，雖然頁麵左右內容不同，但是整個頁麵非常均衡，文案層級清楚，位置和產品搭配也顯得非常有序。

Deepend的網站用了較大麵積的留白，但是聚光燈的唯一光點效果令瀏覽者馬上抓住了頁麵重點，這一束光亮似乎與外界瞬間隔離了。重點少了，極簡主義的風格就自然形成了，這一手法被設計師用的十分巧妙。

Begge女裝服飾網站。模特的姿勢和文案的搭配將首頁設計的很均衡，模特側坐顯得頁麵重心在右側，但是左側的紅色文案采用寬度短豎著排幾行的形式排在左側，將整體頁麵的重心呈現了平衡的感覺。

五、留白提升搜索流暢度

百度和必應搜索引擎，詮釋了留白簡潔有效，這個簡單的例子再適合不過了。

百度準確地理解了一點，正在搜索某個話題的用戶，不想被嘈雜的背景和廣告分散注意力。因此，留白支配了整個百度搜索引擎頁麵，沒有過多的東西去幹擾用戶的注意力，實際搜索框隻占據頁麵中央窄窄一絲空間。

類似的，必應搜索也體現了使用留白的妙處。也是采用大留白，不過是左上的位置有一個搜索框，頁麵中也沒有過多的元素，不同的是，必應每天會更新首頁的背景，但一般也都以大色塊的圖案為背景，雖然這個頁麵有背景圖，理念還是相同的：大量的留白，使用戶專注於搜索，別無他物。

小結

留白，留給了字體和設計作品足夠的空間。保持層次感，留白區域能夠很好的指引用戶，如果元素過多，那麼用戶的注意力會分散。留白能夠讓用戶盡快的尋找到所需要的信息，提高用戶體驗。可以把留白當做睡眠和空氣，兩者是生活不可或缺的元素。沒必要把留白當做必須遵守的規則，不如把它做可愛的設計幫手。