網(wǎng)頁(yè)設(shè)計(jì)中的留白

留白是設(shè)計(jì)中的一種高級(jí)運(yùn)用手法，它是一個(gè)空白空間，在極簡(jiǎn)主義的設(shè)計(jì)里最為常見了，留白聽起來(lái)很簡(jiǎn)單，然后是否運(yùn)用得當(dāng)，就要看設(shè)計(jì)師的水平到了那一個(gè)階段了，今天我們來(lái)說說關(guān)于留白的一事情，會(huì)告訴你如何運(yùn)用留白這種設(shè)計(jì)手段，把你的設(shè)計(jì)提升并給用戶一種整潔感覺。新人或進(jìn)階設(shè)計(jì)師都可以一看。

“Whitespace is to be regarded as an active element, not a passive background”?—?Jan Tschichold

“留白不單單是一個(gè)被動(dòng)的背景，而是一個(gè)活躍的元素。”

留白與空白的空間

”空白的空間“ 這個(gè)名詞是來(lái)自傳統(tǒng)藝術(shù)，主要的功效是用來(lái)更準(zhǔn)確的抓取物件的形狀。事實(shí)上，空間不用一定涂成白色才叫留白，任何空白的空間／并沒有和主要內(nèi)容比拼層次的空間都可以界定為”留白“。由于留白和白色并沒有真正的關(guān)聯(lián)，所以留白與空白的空間是一樣的意思。

在用戶界面上的留白

和傳統(tǒng)藝術(shù)一樣，在用戶界面上的物件也需要留白空間。文字，按鈕，圖標(biāo)和其他物件都需要呼吸。所有好的用戶界面都會(huì)從上到下的，規(guī)劃好頁(yè)面元素之間的留白，做到合適合理。
在用戶界面上的留白可以分為：

邊緣的空間

包圍圖片和影像的空間--

行距，字符之間的空間，表格之間的空間

在一個(gè)頁(yè)面上每一個(gè)留白空間和其他UI設(shè)計(jì)元素一樣重要，因?yàn)檫@些留白空間都有它們存在的意義和幫助保持布局上的視覺完整性。

留白主要有4大必要功效

1.   改善理解力
留白能令用戶在速讀或是閱讀時(shí)，更容易理解和預(yù)見文章的內(nèi)容。
可讀性和是否容易被理解之間取舍
文字之間的空間是很重要的，因?yàn)樗軒椭?yè)面去區(qū)分自身的內(nèi)容。你應(yīng)該盡可能有效的使你的內(nèi)容同時(shí)具備容易被理解（如何理解字句意思）和可讀性（速讀時(shí)能理解多少內(nèi)容）。

Wichita State University舉辦的一個(gè)實(shí)驗(yàn)測(cè)試中證實(shí)-雖然留白會(huì)減慢閱讀的速度，增加留白能有效增強(qiáng)閱讀理解能力。

Dmitry Fadeyev 曾指出：
Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%

適當(dāng)?shù)倪\(yùn)用段落之間的留白和左右邊距的留白能有效增強(qiáng)理解力高達(dá)百分之20.

在優(yōu)化文字內(nèi)容時(shí)，切記兩個(gè)重要的因素 – 段落與段落之間的距離和行距。行距能大大的優(yōu)化主要內(nèi)容的理解性。雖然過多的空間會(huì)打破整體性以及使設(shè)計(jì)沒有關(guān)聯(lián)，但是一般越大的間距，用戶在閱讀過程中的體驗(yàn)就會(huì)更好。可是在這得再次聲明一下，這是需要找到一個(gè)完美的平衡的。

2.   說明關(guān)系

布局是由一個(gè)個(gè)部件疊加構(gòu)成，內(nèi)容間的關(guān)系是由周圍的留白空間所界定的。我們可以理解為留白的地方形成視覺上的暗示。

相關(guān)的元素組合在一起

格式塔心理學(xué)家透過觀察人如何去組織視覺元素，發(fā)明了近接定律，當(dāng)一件物件很貼近其他物件時(shí)，它們會(huì)在視覺上很相近。

在用戶界面的角度來(lái)說，物件距離特別近的會(huì)被視為一個(gè)單位。例如，在網(wǎng)頁(yè)設(shè)計(jì)中，把標(biāo)簽放在相對(duì)應(yīng)的輸入框附近從而創(chuàng)造一個(gè)單位。

3.   吸引注意力

現(xiàn)在有很多的APP和網(wǎng)站都是塞滿太多的元素和資料而缺乏呼吸的地方。

如果資料塞滿的用戶界面會(huì)為你的用戶帶來(lái)過負(fù)荷，那減少元素就會(huì)變相增強(qiáng)理解力。清除了干擾，你的用戶就會(huì)強(qiáng)行的專注在那些“立刻可見”的部分。

帶領(lǐng)用戶的眼睛去看你想讓他看的內(nèi)容

距離和專注力是有關(guān)系的-大一點(diǎn)的距離會(huì)大大增強(qiáng)注意力。沒有其他元素只會(huì)令原本已經(jīng)存在的元素更突出。留白的空間對(duì)于吸引目光集中在某個(gè)元素上起了正面的影響。因?yàn)樵谄聊簧弦呀?jīng)沒有其他東西干擾注意力，額外的空間包圍著某個(gè)元素會(huì)吸引用戶的目光集中在那邊。

The more whitespace around an object, the more the eye is drawn to it

越大的留白空間包圍一個(gè)物件，越多的目光就會(huì)集中在這個(gè)物件身上。

創(chuàng)造視覺層次

當(dāng)留白使用恰當(dāng)，它會(huì)令一個(gè)頁(yè)面產(chǎn)生整體的流程和平衡，并幫助用戶去了解設(shè)計(jì)中的含義。

As designers, it’s our responsibility to create usable communication vehicles.

“作為設(shè)計(jì)師，我們職責(zé)就是去創(chuàng)造“溝通手段””

留白空間可以支撐整個(gè)頁(yè)面的層次。它可以制造對(duì)稱或是不對(duì)稱。對(duì)稱創(chuàng)造記憶和和諧；反觀，不對(duì)稱吸引注意力。不對(duì)稱是很好的帶領(lǐng)注意力去到頁(yè)面上某一個(gè)位置或是元素。當(dāng)一個(gè)元素使用了不對(duì)稱的間距，它會(huì)在這些圍繞著它的元素之中顯的非常突出。

4.   制造豪華的感覺

雖然留白時(shí)常用作為一種手段去提升用戶體驗(yàn)，但是它也可以單純的用在美學(xué)目的上。除了印刷和攝影外，在奢侈品市場(chǎng)還能看到大量的留白，設(shè)計(jì)師利用留白為奢侈品品牌去創(chuàng)造高雅的感覺?？瞻自鎏沓墒旌秃廊A的感覺，產(chǎn)品在頁(yè)面中的展示顯得好像價(jià)值比房子還要貴的感覺。

Let the products speak for themselves

讓產(chǎn)品自身為自己說話。

總結(jié)

留白不只是空白的畫布，它是一個(gè)功能強(qiáng)大的設(shè)計(jì)工具。留白是很難掌握的，留白的應(yīng)用是包含藝術(shù)與科學(xué)。真正了解多少空白位置才足夠創(chuàng)造一個(gè)良好的布局需要多實(shí)踐。你設(shè)計(jì)得越多，你就會(huì)學(xué)得越多。