留白 – The Power Of Whitespace

2021/12/25

留白是設計中的一種高級運用手法，它是一個空白空間，在極簡主義的設計里最為常見了，留白聽起來很簡單，然後是否運用得當，就要看設計師的水平到了那一個階段了，今天我們來說說關於留白的一事情，會告訴你如何運用留白這種設計手段，把你的設計提升並給用戶一種整潔感覺。新人或進階設計師都可以一看。

「Whitespace is to be regarded as an active element, not a passive background」 — Jan Tschichold
「留白不單單是一個被動的背景，而是一個活躍的元素。」

」空白的空間「這個名詞是來自傳統藝術，主要的功效是用來更準確的抓取物件的形狀。事實上，空間不用一定塗成白色才叫留白，任何空白的空間／並沒有和主要內容比拼層次的空間都可以界定為」留白「。由於留白和白色並沒有真正的關聯，所以留白與空白的空間是一樣的意思。

和傳統藝術一樣，在用戶界面上的物件也需要留白空間。文字，按鈕，圖標和其他物件都需要呼吸。所有好的用戶界面都會從上到下的，規劃好頁面元素之間的留白，做到合適合理。

在用戶界面上的留白可以分為：

在一個頁面上每一個留白空間和其他UI設計元素一樣重要，因為這些留白空間都有它們存在的意義和幫助保持布局上的視覺完整性。

1. 改善理解力

留白能令用戶在速讀或是閱讀時，更容易理解和預見文章的內容。

可讀性和是否容易被理解之間取捨

文字之間的空間是很重要的，因為它能幫助頁面去區分自身的內容。你應該儘可能有效的使你的內容同時具備容易被理解（如何理解字句意思）和可讀性（速讀時能理解多少內容）。

Wichita State University舉辦的一個實驗測試中證實-雖然留白會減慢閱讀的速度，增加留白能有效增強閱讀理解能力。

Dmitry Fadeyev 曾指出：

Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%

適當的運用段落之間的留白和左右邊距的留白能有效增強理解力高達百分之20.

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

2. 說明關係

布局是由一個個部件疊加構成，內容間的關係是由周圍的留白空間所界定的。我們可以理解為留白的地方形成視覺上的暗示。

相關的元素組合在一起

格式塔心理學家透過觀察人如何去組織視覺元素，發明了近接定律，當一件物件很貼近其他物件時，它們會在視覺上很相近。

在用戶界面的角度來說，物件距離特別近的會被視為一個單位。例如，在網頁設計中，把標籤放在相對應的輸入框附近從而創造一個單位。

3. 吸引注意力

現在有很多的APP和網站都是塞滿太多的元素和資料而缺乏呼吸的地方。

如果資料塞滿的用戶界面會為你的用戶帶來過負荷，那減少元素就會變相增強理解力。清除了干擾，你的用戶就會強行的專註在那些「立刻可見」的部分。

帶領用戶的眼睛去看你想讓他看的內容

距離和專註力是有關係的-大一點的距離會大大增強注意力。沒有其他元素只會令原本已經存在的元素更突出。留白的空間對於吸引目光集中在某個元素上起了正面的影響。因為在屏幕上已經沒有其他東西干擾注意力，額外的空間包圍著某個元素會吸引用戶的目光集中在那邊。

The more whitespace around an object, the more the eye is drawn to it
越大的留白空間包圍一個物件，越多的目光就會集中在這個物件身上。

創造視覺層次

當留白使用恰當，它會令一個頁面產生整體的流程和平衡，並幫助用戶去了解設計中的含義。

As designers, it』s our responsibility to create usable communication vehicles.
「作為設計師，我們職責就是去創造「溝通手段」」

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

4. 製造豪華的感覺

雖然留白時常用作為一種手段去提升用戶體驗，但是它也可以單純的用在美學目的上。除了印刷和攝影外，在奢侈品市場還能看到大量的留白，設計師利用留白為奢侈品品牌去創造高雅的感覺。空白增添成熟和豪華的感覺，產品在頁面中的展示顯得好像價值比房子還要貴的感覺。

Let the products speak for themselves
讓產品自身為自己說話。

留白不只是空白的畫布，它是一個功能強大的設計工具。留白是很難掌握的，留白的應用是包含藝術與科學。真正了解多少空白位置才足夠創造一個良好的布局需要多實踐。你設計得越多，你就會學得越多。