留白的力量

留白(或「負空間」)是一個頁面元素之間的空白區域。儘管許多人認爲這是在浪費寶貴的屏幕空間，但留白是設計中必不可少的元素。

「留白被視爲一個活躍的元素，而不是被動的背景」- Jan Tschichold

今天，我將介紹如何在你的設計中使用留白來給人一種乾淨整潔的感受。

留白和負空間

 

「負空間」一詞源於傳統藝術，它用來更精確地捕捉物體的外形。實際上，空間並不須要是有色的，任何與焦點內容無關的空白空間均可以被歸類爲「留白」。因爲與實際的顏色沒有真正的聯繫，術語「留白」和「負空間」能夠互換。

                          

 ALT：構成至上主義: 飛行的飛機 。-梅爾魏契。「負空間」是組合元素之間的空間。

圖形用戶界面中的留白

與傳統藝術同樣，圖形用戶界面中的對象也須要負空間——文本、按鈕、圖標和其餘對象須要有本身的一席之地。全部好的用戶界面都會適當地留白且從上到下融合到全部頁面元素中。GUI中的留白元素有:

• 頁邊的空白，邊框的填充及元素標籤外部範圍的區域

• 圖形和圖像的距離

• 文本內容中的行間距和字母間距，及列間距

頁面上的留白與UI元素佔用的空間同樣重要，由於即便是留白也能夠達到想要的效果，並支持視覺完整性的佈局。留白有4個主要的功能:

1.易於理解

留白應該使掃視和閱讀內容變得更容易及可預測。

優先考慮易讀性和可讀性

文本之間的留白很重要，由於它有助於定義頁面內容自己。你應該優化你的內容使其易讀(你能更好地分辨字母和單詞)和可讀(你能更好地掃視內容)。

威奇托州立大學的一項實驗室研究證明，增長的留白實際上提升了閱讀理解能力，儘管它可能會下降閱讀速度。正如德米特里·法耶夫所指出的:

正確使用段落之間的留白及左邊和右邊的頁邊距能夠提升對內容20%的理解力。

在優化文本內容時要注意的兩件重要事情是段落間距和行間距(每行之間的留白)。行間距能夠極大地提升正文的可讀性。通常來講，間距越大，用戶在閱讀時就會有更好的體驗，雖然間距太多會破壞統一，使設計不連貫。固然，你須要在二者之間進行權衡。

   ALT：左:文本之間靠太近，缺少留白讓讀者看起來不適。右:良好的間距有助於可讀性。圖片來源:蘋果

2.明確關係

整個佈局是由各小部分組成的。內容關係由周圍的留白定義。留白做爲一個視覺線索。

相關元素的分組

在觀察人們如何組織視覺信息時，完形心理學家創建了近距離法則，該法則認爲靠近彼此的對象看起來是類似的。

                       

ALT：近距離法則規定，近距離的對象將做爲一個「單元」出現，即留白空間做爲視覺線索。

在GUI的背景下，這意味着鄰近的對象將顯示爲一個「單位」。例如，在Web表單的上下文中，將標籤靠近相關字段放置以建立單個單元是一個好的想法。

ALT：當標籤被放在與他們相關的領域更近的時候，信息就會更加清晰地傳達出來。

3.吸引注意

許多應用程序和網頁在沒有足夠的展現空間的狀況下，會有太多的元素和信息被夾在一塊兒。

ALT：凌亂的界面承載給用戶太多的信息。尤爲是在沒有視覺層次的狀況下，一個凌亂的頁面對用戶沒有吸引力，也不會讓用戶想閱讀內容。

若是凌亂的界面承載給用戶太多的信息，那麼減小凌亂會提升用戶的理解能力。經過消除干擾，你會迫使用戶只關注眼前的東西。

引導用戶關注相關內容

距離和注意力之間有一種關係——距離越大，也就越吸引注意力。缺少其餘元素只會使現有元素更加顯眼突出。利用留白來吸引你的眼睛進入某些頁面元素。因爲屏幕上沒有其它東西能夠吸引人們的注意，因此在某一特定的內容部分上額外的填充能夠將用戶的注意力轉移到該區域。

一個對象周圍的留白越多，它就越吸引人的眼睛。

ALT：正如上圖你所看到的，Mailchimp在他們的設計中是留白的主要倡導者。當快速在Mailchimp的主頁瀏覽時，很明顯，「免費註冊」按鈕幾乎當即吸引了你的注意。

建立視覺層次結構

當適當地使用留白時，它容許頁面建立通常的流程和平衡，這有助於傳達設計的意圖。

做爲設計師，咱們有責任創造可用的通信工具。

留白能夠支持整個層次結構。它能夠是對稱或不對稱。對稱留白創造了記憶和和諧，而不對稱吸引了人們的注意。不對稱留白很是適合於將人們的注意力吸引到頁面上的某個特定區域或特定元素上。當一個元素使用不對稱的留白時，它會比周圍的其餘元素顯眼。

ALT：當一個元素使用不對稱的留白時，它會比周圍的其餘元素顯眼。

4.創造奢侈的感受

儘管留白一般被認爲是提升用戶體驗的技術，但它也能夠用於純粹的審美目的。設計師使用留白來爲高檔品牌創造一種優雅的感受。伴隨着印刷和攝影的敏感使用，慷慨的留白在奢侈品市場上隨處可見。經過創造一種感受，即產品的價值比房地產更重要，在一個通用的頁面中，留白能夠增長高雅和奢侈的感受。

讓產品爲本身代言

ALT：時尚界在他們的營銷材料中使用了大量的留白來告訴讀者他們是複雜的，高質量的，並且一般是昂貴的。

結論：

留白不是一個空白的畫布，它是一個強大的設計工具。留白可能很難掌握:它的應用是藝術和科學。真正瞭解應該使用多少留白來建立好的佈局，須要大量實踐。你設計得越多，學到的就會越多。

 

原文做者：Nick Babich

原文連接：http://babich.biz/whitespace/

更多設計類相關乾貨（文章及經驗教程），盡在：UI/UX專業博客