善用負空間,讓設計更有層次!

基本觀念、排版層級、視覺風格、資源分享。

Howard Chen
May 22 · 6 min read
哈囉,我是Howard,目前在廣告公司擔任視覺設計。這是我在Medium的第一篇文章,如果文章內有錯誤或未提及的地方,歡迎各方大大留言指教或是提供意見給我,感激不盡。

前言

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


本篇適合對象:初學者或是對設計有興趣的朋友

高手大大們歡迎留言交流一下自己的小訣竅吧!


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

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

負空間的概念

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

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

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


延伸閱讀

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


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

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

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

看圖(G)就可以發現,裡面的層級關係(這裡用px示意比較便於理解。)
天地留的空間是最大。還記得前面剛剛提到的格式塔原理嗎?
就像圖(A)一樣,我們的大腦會把標題跟內文當成一組,是因為我們把天地的空間留的都比裡面元素的空間都還要來得大的緣故。再來第二大空間就是標題與內文的距離,再來是行距,最後才是字距。一層一層,按部就班的排下來,可以看到文字彼此間的關係,可以藉由這樣的方式排出條理。

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


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

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

出處為Pinterest
出處為Pinterest

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

出處為Pinterest
出處為Pinterest

透過調整元素間的鬆緊度,可以創造出不同的視覺語言。


結語

負空間並不僅僅只是版面上的空白區塊,而是排版上強而有力的工具。它並不容易駕馭,若想要學好,只有不斷的觀察案例,不斷練習才有辦法駕馭。
最後分享一個不錯的網站給各位

Grids

這個網站的特色是,它會利用格線來分析這些網站的版面配置。可以透過格線來學習其他設計是如何利用負空間來營造出網站氛圍的。


感謝閱讀到最後的你!

我是Howard,希望你們喜歡這次的文章。歡迎追蹤我,拍手鼓勵我,或有其他問題也可以來信:howard_chen76@hotmail.com,謝謝! 我們下次再見👋

1-5  claps:既然看過了,就來簽個到吧!
6-10 claps:表示你喜歡這篇文章!
11-20 claps:看完這篇文章我認為很有幫助!
21-50 claps:Oops!看來你對這篇很有感覺,我會更努力分享,謝謝你!

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Howard Chen

Written by

住在台北的網頁設計師、關注UI設計、研究UX心理。

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com