UX經驗談 | 橘專欄

善用負空間，讓設計更有層次！

2019.09.27

前言

在工作經驗中，發現幫忙看稿的時候，大部分是版面配置問題，常遇到客戶改稿需求是要把元素加大，因為不夠跳。其實除了直接放大的暴力解法之外，你也可以透過把負空間處理好，整理好元素與元素間的關係，來提昇辨識度。讓客戶覺得“不夠大”的東西變得比較清楚。所以整理這篇文章給大家，希望對大家工作有幫助。

本篇適合對象：初學者或是對設計有興趣的朋友高手大大們歡迎留言交流一下自己的小訣竅吧！

為什麼要學會運用負空間？

因為負空間掌握得好，它能給版面更多呼吸空間，讓版面元素間的關係井然有序。

負空間的概念

負空間簡單來說就是元素之間的空間。也可以套用格式塔原理的接近性原則。簡單說明一下格式塔接近性原則；我們的眼睛和大腦較容易將接近的事物組織在一起。如下圖所示，先來觀察圖(A)，它是由四個方塊均等分布組成，也因此我們的大腦很容易將這些視為一個整體。再來看圖(B)，若我們將間距拉開，很神奇的是，它們看起來就像是四條獨立的方塊組。這就是格式塔原理的接近性原則。

舉另外一個例子；先來看圖(C)，它是一個很基本的圖文配置，左邊大圖右邊圖加上文字。由於元素間的距離都是均等的狀況下，我們很自然會把左右兩塊看成是一個整體。再來看圖(D)，我們稍微移動了左邊大圖與右邊圖文間的距離，我們可以發現元素間的關係產生微妙的變化。現在看起來就把左右兩側的關係拉遠了，變成兩個整體！

這代表我們能藉由調整負空間來改變元素間的關係。

延伸閱讀

如果想多了解格式塔原理可以參考這篇，這位大大寫的文章寫得非常詳盡。

用「完形心理學」，增加介面設計有感度!

利用負空間，調整文字間的層級

文字跟文字之間的空間也可以視為負空間的一種，雖然我們通常把它稱作字距、行距。其實也能把剛剛提到的原則套用在這上面。透過調整文字的空間來改善文字的辨識度。調整文字的時候也有一套基本的層級關係可以遵循。首先我們先看圖(E)來理解一下這些單位。字跟字之間的距離就是字距，也是文章中最小的單位。再來第二層就是行距。

如果將彼此間的關係一層一層排列出，就會是下圖(F)的樣子，這樣的排法可以保證文字間有足夠的層次及合適的空間來辨識。

看圖(G)就可以發現，裡面的層級關係(這裡用px示意比較便於理解。)

天地留的空間是最大。還記得前面剛剛提到的格式塔原理嗎？

就像圖(A)一樣，我們的大腦會把標題跟內文當成一組，是因為我們把天地的空間留的都比裡面元素的空間都還要來得大的緣故。再來第二大空間就是標題與內文的距離，再來是行距，最後才是字距。一層一層，按部就班的排下來，可以看到文字彼此間的關係，可以藉由這樣的方式排出條理。

文字元素間的間距由大到小排列出來就是：天地 >標題>行距>字距。

利用負空間，改變視覺語言

不同的空間，給人的感受也不同。比如要表現力道，速度感，緊張感。在版面的編排上，元素跟元素之間可以使用較小的負空間。如下圖，元素與元素間的負空間基本上是非常靠近的，沒有什麼喘息空間，讓人感到一股緊迫感以及張力。但是，仔細看可以發現在區塊跟區塊之間，還是有少許的空間。這讓元素間保有最低限度的辨識度。也由於使用較大的字級的關係，所以文字還在可以閱讀的範圍內。

▲出處為Pinterest

若想表現出高級感，則元素周圍需要更多的空間，來展現其高級感。下面的圖例，字距行距都調整的得比較開，是為了要創造出較為舒適的閱讀體驗，就如同高級品給人的感覺，是一種享受。如果試著把高級品擬人化，我們可能會想像成一個紳士，舉止優雅，做事不急不徐，有條有理。就像下圖給我們的感覺一樣，每個元素都被賦予許多呼吸空間，看起來不擁擠，自成一格，營造出舒適優雅的高端氛圍。