留白不僅是空白!99%的人在做網站設計時都用錯了留白!

一提起留白,很多人都覺得SO EASY,這留白誰不會呢?留出一塊白色,騰出空間不就是了么?

在回答這個問題之前,先來看看以下4個案例,你覺得哪個案例才是運用了留白的手法呢?

A圖:

B圖:

C圖:

D圖:

正確答案是……全選,以上4個案例都有留白的應用。如果對「留白」只是望文生義,認為留白就是留出白色,就很有可能單選A誤答了。

事實上,留白並不能從字面意思地進行解讀,它不局限於白色。所謂留白,指的是「沒有被使用的空間」,無物,無信息,無裝飾,處於空白的狀態,所以留白也被稱作「負空間」,不僅是一片白,也可以是任意一種顏色,甚至連非純色的紋理都能算作留白。

由此可見,留白指代的含義其實遠比我們想像中的更廣泛,也有多種不同形式的體現,以下結合案例總結出幾種常見的的留白應用。

1、為視覺主體增加留白

以下是來自「凡科建站」的服裝行業網站模板,你的視覺很容易就集中到模特身上,除了因為模特的配色比較鮮艷搶鏡,環繞模特周圍的留白也起到了很好的作用,花瓣剪影的裝飾也是點到即止。沒有了多餘的東西分散了你的注意力,視覺主體自然就突顯出來了。

2、元素與元素間的縫隙

留白,是不是就只能保留主體,其他一律刪去?其實不一定,像以下這個來自「凡科建站」的飾品行業網站模板,雖然內含元素很多,卻不會給你一種很擁擠很凌亂的感覺,因為元素與元素之間都留有了適度的距離,呈現出一種呼吸感。

元素的多與少並不影響留白的應用,關鍵是看你想傳達怎樣的調性。以上的網站我們再拿另一幅BANNER圖對比,多元素的留白顯得更活潑親和,而少元素的留白則顯得更大氣逼格,兩種設計並沒有優劣之分,抓准了產品定位和目標人群就是對的設計。

3、放大圖片中的無裝飾部分

很多時候我們會需要在圖片上插入文字,當圖片沒有足夠的適合排版文字的空間,而你又不想把字體縮小,那麼可以把圖片中的無裝飾部分放大。像以下這個例子,原圖的近景和遠景接近了五五比例,近景部分明顯不太適合排版文字,所以我們放大圖片的遠景部分,這樣一來就能順利地進行文字排版了,留白給了文字理想的展現空間。

4、文字間距的調節

文字間的行距、字距也屬於很重要的一種留白元素。像以下這個來自「凡科建站」的蔬果行業網站模板,中間的文案採用了不同的字體、顏色、大小、間距拉開了對比,讓文案變得更容易閱讀。

5、增加邊框

增加邊框,劃分出留白空間。這種留白形式常用於網站BANNER,在居中位置划出邊框圍繞文本,諸如以下這個來自「凡科建站」的日用品行業網站模板,邊框配以卡通元素的點綴,小清新的感覺立馬出來了。

6、背景虛化

對!你沒看錯!過度模糊的圖片也是一種留白,雖然圖片里含有信息元素,但由於被虛化得看不真切,相當於被藏起來了,所以也能看作是留白。背景虛化在攝影上用得尤為廣泛,像以下這幅圖片,將景深變淺,視覺聚焦在帆船瓶子,也讓畫面看起來通透純凈。

從以上的案例,我們不難看出留白應用在網站設計的好處。

1、平衡頁面布局

像以下這個來自「凡科建站」的餐飲行業網站模板,從BANNER到通欄,都有充分而均衡的留白,顯得寬敞而舒適。

2、讓版塊層次區分得更鮮明

像以下這個來自「凡科建站」的禮品行業網站模板,我們很容易就區分出「關於我們」和「新品上架」這兩個不同的版塊,留白在這裡就充當了一條分割線,讓不同版塊之間的層次更鮮明易見,不會讓內容糅雜在一起。

3、焦點元素的突出呈現

這個相信大家都深有體會了,再用以下兩幅簡單的圖片來舉例子,和A圖相比,B圖肯定更容易讓你抓准重點的心型元素,這就是留白的功勞。

A圖:

B圖:

4、緩解用戶的閱讀疲倦

這對於信息量大的網站來說特別重要,密集的內容顯得冗長難讀,會讓用戶感到透不過氣來,從而放棄了瀏覽。所以要留白,要有行距、間距、邊寬,給予用戶「喘息」的機會。以下兩種文本排版,相信右圖會讓你更有閱讀的慾望。

我們總是在想,要把設計做得有多麼的「大包圍」,有多麼的鶴立雞群,有多麼的另類怪誕,才能讓閱物無數的用戶停下來多看一眼,事實上都是在鑽牛角尖。捨棄繁雜的留白並不是削弱存在感的做法,相反,其實是突出美感的妙方。少即是多,無物勝有物,正因為是簡單的東西,反而能讓用戶一眼就看出你的美。

從今天開始,試試留白,不僅是在設計上,生活上也給自己留白,騰出空間,允許自己發獃,允許自己浪費時間。不用把所有的格子都填滿,人生也可以很圓滿。


推薦閱讀:

如何實現只用一把筆刀實現平留白?

TAG:網頁設計 | 留白 |