在UI設計中，理解產品最簡單的方法是識別組件以及它們在視覺是如何呈現的。很多時候，界面看起來非常相似，但只是簡單的一瞥，我們可以很容易地分辨出有一些會更好，而有一些界面給人的感覺就像是少了什麼。
“缺失”的部分實際上是一個視覺平衡，而設計兩個最重要的東西。它們被稱為負空間和行間距。
負空間不是浪費的空間
簡單地說，負空間是UI中對象周圍和內部的空白區域。負空間也用於指示這些區域，但這並不一定意味著空白區域總是白色。白色來自印刷設計，在早期印刷日期，文本主要印在白紙上，因此負空間默認為白色。負空間來自攝影，它指示背景和所有焦點，主要對象成為正空間。在UI設計方面，白色空間和負空間具有相同的含義且統稱留白。
“形式的真正含義會因其相反的存在而更加清晰。如果不存在夜晚，我們不會認出白天。實現對比的方法是無窮無盡的：最簡單的是大/小，淺/暗，水平/垂直，方形/圓形，光滑/粗糙，閉合/打開，彩色/素色; 近距離/遠距離，都提供了許多有效設計的可能性。“ - Jan Tschichold
正如Tschichold所說，為了在佈局中實現良好的視覺層次，我們使元素產生對比。負空間通過物體之間的距離產生對比度。
這就是負空間如何變成一個積極設計元素的方式。
負空間應作為積極設計元素
客戶通常認為，我們應該減少界面留白，而向用戶呈現更有價值的內容。但是在一個界面中顯示更多內容並不一定能實現這個目的。
如今，我們每天向用戶提供許多信息。我們作為設計師，通過為UI元素增加更多空間，可以為用戶體驗的情感方面做出貢獻。我們在UI中添加了更多的呼吸空間，可以放鬆用戶與整體UI上的互動體驗。
間距使UI具有呼吸感，讓用戶使用時感覺更舒適。
我們如何在設計中應用負空間
負空間有兩種類型，微觀和宏觀負空間。簡單地說，宏觀空間是佈局中較大組件之間的空間，微觀空間是佈局中較小組件之間的空間。
宏觀和微觀負面空間的例子。
我們在設計中操縱負空間的方法是填充，邊距，線間距。
為什麼負空間如此重要？
負空間的工作原理是基於我們的思維方式。
我們如何看待事物？
我們總是以一種相互關聯的方式來感知物體。這意味著我們將如何看待我們的UI中的主要元素，幾乎全部依賴於其周圍的對象。
正如安德爾森的幻覺所示，A和B場被認為是不同的顏色，實際上它們是相同的。由於我們的思維的運作方式，我們傾向於將它們視為陰影和周圍顏色的不同。即使我們意識到這兩個字段具有相同顏色的事實，我們也無法提取它們來比較它們的顏色值，因此我們繼續看到它們，就像它們具有不同的顏色一樣。
我逐漸刪除部分場景，以揭示A和B字段的真實顏色。
我們如何利用這些關於負空間感知的知識？
基於心理學中的格式塔理論，“整體不是各部分的總和 ”，定義了一套視覺定律，許多設計原則都是基於這一視覺規律。其中一個就是接近定律。
接近定律表明，彼此接近的元素更容易被感知到他們是一組的。
讓我們看看如何將接近性應用於簡單的標籤和輸入分組設計之中：
標籤和輸入組的樣本，它們之間使用不同的負空間。
在這裡，我們看到我們可以在兩種情況下輕鬆地將標籤與輸入框分組，因為它們彼此靠近。
如果我們採用以下示例並創建具有多個輸入的表單，我們將看到負空間如何影響接近度以及標籤和輸入框的正確分組。由於標籤和輸入框之間的空間是相同的，然後是表格中的下一個標籤和輸入框的距離也相同，我們很可能會將標籤與其所針對的輸入框弄混。
標籤和輸入組的樣本未正確使用鄰近法則。
對這個問題應用接近性原則，將意味著在每組標籤和輸入框之間有更少的微空間，而在表單設計中這些組之間有更大的空間。
標籤和輸入組的示例，它們在它們之間和內部正確應用了空間。
此外，接近性能夠幫助用戶更有效地分組，如下一章所述。
負空間如何幫助我們更快速，更輕鬆地處理數據？
分組是我們記憶的方式。每一個組都是有意義的元素的集合。
在UI中定義每一組的好方法當然是利用負空間。考慮到我們的記憶能力是有限的，我們可以輕鬆地使用空白來創建有意義的元素組。這將有助於用戶輕鬆地記住它們，當用戶更頻繁地與UI交互時，他可以輕鬆地回憶起部分以及它們可能出現的位置和含義。
此外，研究表明，我們的短期記憶能力限制在7±2。通常設計師和客戶認為這是因為人們的最大工作記憶是7±2，我們需要在UI設計中同時呈現不超過7個設計元素。這項研究的主要結論應該是，我們的短期記憶容量有限，因此我們需要通過使用有助於用戶輕鬆理解內容的分組，來向用戶展示有意義的數據。
使用注意力和焦點來增強視覺層次結構
周邊具有大量空白的對象可以用於將用戶的注意力集中在UI上的特定部分上。這就是我們如何創建有影響力的視覺層次結構，併為我們希望用戶最關注的塊添加額外的價值。
我們越多地增加對象周圍的負空間，它就越有可能被感知到。
通過在其周圍添加更大的負空間來示例我們如何強調UI元素。
行間距為負空間
應用負空間的一種方法是使用行間距。行間距只是在文本行與行之間應用的距離。行間距是文本行的2個基線之間的空間。
行間距，行距和行高在不同的設計領域具有相同的含義。
研究表明，文本理解與行間距之間存在成正相關係。這意味著，隨著行間距的增加，文本理解也會增加，並且最高可達20％。
我們怎麼知道線之間的空間足夠多
根據Web可訪問性指南（wcag 2.0），文本行之間的間距應至少比字體大150％。
這意味著我們不應該使用默認文本間距。例如，大多數瀏覽器使用110％到120％作為默認行間距，Sketch和Adobe創意套件使用120％，Bootstrap使用字體大小定義的142％和大於主體文本157％的行間距。
說明不同行間距對可讀性的影響。
增加負空間並不一定意味著默認是好事。它還取決於你的內容和應用類型。例如，在新聞應用中，有大量的內容是該應用的主要關注點，提供足夠的負空間是至關重要的，這樣才能達到良好的可讀性，並帶來對該應用的正確理解，比如動態內容和總是出現的新聞。對於在給定的UI中應該應用多少負空間，並沒有一個精確的公式，但是通過實踐和經驗，我們可以更好地應用它。
讓我們看兩個不同地應用負空間的例子：
左側：增加負空間 。右側：沒有考慮到負空間。
為了瞭解佈局的外觀，去除了任何有意義的信息，我們得能夠到以下視圖。在這裡更清楚的看懂空間留白如何有助於我們更好地理解UI:
在左側，我們看到正空間的結構和更清晰的視覺信息。
在右側，我們應用的負空間較少。對於信息的查看就沒有那麼容易吸收。
我們看到添加負空間可以應用於多個級別。在組件之間應用它：
在單元組件內使用微負空間。
使用負空間來調整段落中的行間距：
示例行間距如何影響可讀性和文本理解。
在左側，我們看到一個段落文本，其大小為17px，行間距為字體大小的1.58（150％），右側為17px字體大小，行間距為字體大小的1.23（123％）。
主要收穫
- 依靠心理學方面的知識以及我們的思維如何在感知，記憶和處理視覺數據方面工作，可以極大地幫助我們設計有助於用戶整體體驗的界面。
- 使用適當的負空間可以吸引用戶注意力，並創建有意義的視覺層次
- 段落和文本中適當的負空間增加了可讀性和文本理解。
- 更多的留白使用戶的體驗更輕巧，更輕鬆，更舒適。
原文鏈接：
https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203
作者：Viktorija Bachvarova
