想像走進一家你最喜愛的服飾店，一家未按照分類，充斥著琳瑯滿目的商品，另一家同樣的空間大小，卻有明亮的燈光、木質的走道，以及明確的分類。哪一家讓你的購物經驗比較舒適？
圖1. 同樣都是Vintage Store，擺放的方式不同，帶給客人的感覺就完全不一樣
1. Definition 定義
留白White Space在網頁設計中是基本元素、無所不在，非常非常非常重要，但也最容易讓人忽略。
留白是兩個不同元素之間的空間，不論是頁面上不同區塊的空間、或是文字的行距，都是留白的運用。
大多數的例子，我們利用留白去區隔內容，讓觀看者可以更容易閱讀、更快速的瀏覽，無需使用實際的分隔元素(實線、顏色、形狀等)
White Space並不ㄧ定要是”白色”。這個空間可以是一種顏色或是材質(texture)，不包含畫面元素 (文字、圖片等內容)。
圖2. HBO Game of Thrones 官網
圖3. HBO Game of Thrones 網頁中的空白negative space運用
順帶一提，對易讀性有興趣的朋友，可以去看看心理學的Gestalt law。
在1910年，德國心理學家Max Wertheimer特別針對人類在視覺上吸收資訊(visual perception and interpretation)的方法歸納出五大類別 。
其中Law of Proximity是這麼說的：
When elements are closer to one another on the page, they’ll automatically be grouped in the user’s mind.
適當的留白，無需使用分隔的元素(顏色、線、形狀等)，即可以用最乾淨俐落的方法區分段落。
圖4. 你可曾經想過，我們的眼睛如何辨別、歸納群體？
圖5. 根據Gestalt law: Law of Proximity 越靠近的物體，用戶會自動的歸納成一群體
2. Types 種類
這裡指的種類，focus在閱讀的功能性。留白除了增加易讀性，同時也有裝飾、強調的功能，在此我們不特別探討。主要有兩項：
- Margins and Consistent Spacing 善用邊緣與間距的一致性
- Micro-level Spacing 細微間距
2–1 Margins and Consistent Spacing 善用邊緣與間距的一致性
首先，Margin指的是元素與外界的間距，藉以區別不同的物件。Padding則是在同個物件裡的間隔，例如內容與邊界的間距。適當的使用Margin，可以讓閱讀更輕鬆，視覺上也較舒適。但如果間距太大，則會讓內容看起來不連結，必須特別注意Margin的使用。
另外，相同層級的內容，間距若是不同，會讓視覺上產生混淆。因此，將同等層級的內容，有一樣的間距，會讓讀者更容易的消化資料。
圖6. The difference between Margin and Padding
以下我們用FKJ專輯介紹作為例子：圖一跟圖二是相同的內容，專輯圖片在左，文字在右。為什麼我們在視覺上會覺得不同？為什麼圖二好像比圖一更容易閱讀？
圖7. FKJ 專輯介紹：為什麼同樣的內容，圖二會比圖ㄧ在視覺上更為俐落？
透過細微的微調，將相同層級的內容對齊(Align)，以及適當的邊緣留白，讓使用者在視覺上更容易瀏覽。
首先，我們先歸納資料的重要性及層級：
- Title 標題
- Location 地點
- Content 內容
- Social Media Links 社群連結
我將Title & Location對齊，利用字體粗細及大小，區別層級。再來，將內容與超連結對齊，利用顏色及留白區分這兩個元素。另外也在專輯封面及文字中留了點空間。
這些細微的調整，可以將原本稍嫌凌亂的資料，變得更易於閱讀，增加使用者觀覽的意願。
圖8. 說明如何利用留白及對齊，增加資料的易讀性
2–2 Micro-level Spacing 細微間距
細微間距即是兩個最小頁面元素間的距離，例如文字在文章的行距。
行距雖然細微，但是產生的效果卻非常顯著。不論是行與行之間的距離、還是段落之間的距離，能夠使閱讀者視覺上更為舒適，更願意繼續往下scroll。
當然，若是太大的行距，視覺上會有落差，讓人無法區別段落。
圖9. 利用世大運的報導說明細微的調整行距，可以讓閱讀產生顯著的差異
3. Practice 實際演練
Table/List 表格/清單
這次實際操作的是表單！表單隨處可見，菜單、購物明細、預算表、帳單等，全都屬於表單，是非常生活實用的例子。
接下來的內容，我會最簡單、輕鬆的方式，一步一步運用White Space，讓表單不需要分隔線，也可以看起來井然有序、清楚明瞭。
以下是利用Google Spreadsheet製作的用戶資料，包含User ID, Email, Phone, Items, Price, Quantity, Purchase Amount，黑色框線與Arial字體是普遍的格式。我們該如何運用White Space，讓表格更有設計感、不那麼單調？
圖10. 黑色框線與Arial字體是常見的表格樣式
Step 1. 根據內容性質對齊
首先，第一大原則是：
文字向左對齊，數字向右對齊
根據習慣，我們一般閱讀文字是從左到右。數字由於位數可能不同，若是向左對齊或是置中，會讓閱讀上造成困難。因此，確保數字顯示相同的小數位數數量，將其向右對齊是最自然的閱讀方式。
圖12. 簡單的調整Alignment，可以讓資料更容易閱讀
Step 2. 減少實線 & 增加項目間距
接下來，很重要的一點是
能不要有實線，就盡量不要有實線
實線固然有它的作用，但在視覺上帶給人拘謹、侷限感，我們真的需要實線來區分項目嗎？根據Gestalt Law，若是靠近的物體，人類的眼睛會自動將他歸類在一起。
因此，去除了實線，同時增加項目間的間距，讓畫面乾淨許多
圖11. Step 1 根據Gestalt Law，利用White Space分隔項目
Step 3. 強調標題 & 確保間距的一致性
再來，為了強調標題，將標題的字體加粗並放大(28pt)。同時，增加內容的行距(24pt)，確保每一項目的間距是24pt，可以根據個案去做調整。
圖13. 讓間隔一致化，視覺上更為平衡
這三個簡單的步驟，可以讓你的表單看起來更簡潔整齊，無需任何多餘的裝飾與線條，就可以擁有Minimal Design Style。
Step 1. 根據內容性質對齊
Step 2. 減少實線 & 增加項目間距
Step 3. 強調標題 & 確保間距的一致性
圖14. 經過調整後的前後差異
再舉另一個例子，這是根據Invison 2016 Product Design Report 對在美設計師薪水的統計資料，說明了不同稱謂的設計師平均薪水與中位數薪水：
圖15. 根據Invsion 2016 Report中的設計師平均薪水統計資料
根據前面三個步驟，我減少了不必要的實線，淡化剩餘的實線，將標題用粗體代替，畫面看起來就乾淨許多。
圖16. 利用前段落的三步驟，使表單看起來更乾淨俐落
再來，我試著加淺灰色色塊，讓行列的對比更為明顯。
圖17. 加了色塊後，更加深了行列的關係
如果想要增加趣味性的話，可以試著調整標題的位置，另外加上了黑色長條，讓視覺效果集中在底部，增添了層次感。
圖18. 試著將移動標題位置，加上黑色長條後，視覺焦點集中在底部
最後，讓我們看看所有的版本，每個版本都有其優缺點，根據不同的需求，也會產生不同的格式。大家可以試著用現有的表單做些變化，例如不同的字型、增添顏色等。
表單雖然常見，透過調整間距與線條，沒想過可以有這麼多視覺變化。下次如果有機會接觸到表單，可以利用這些小撇步，試著玩玩看所有的組合，也許你有更棒的視覺呈現，也歡迎大家分享！
5. Conclusion 結論
空白一直都是我很有興趣的元素，他不引人注目，但留白的力量卻不容小覷。稍微的調整間隔，可以讓畫面更乾淨，減少讀者的負擔。
我們常常說留白很重要，但很少文章說明如何使用。因此這次的內容，特別一步步帶著大家參與設計的過程，試著解析設計的步驟。而表單是非常好的練習，不論是設計介面、製作投影片，或是寫報告、點菜，我們每天都會遇到表單。其中的細節大家可能比較少注意，希望大家都可以有所收穫，或是提供不同的看法。
有人說美感是天生的，我不這麼認為。我們可以透過不斷的練習，與臨摹大師的作品，提升自己的設計實力。就像任何運動，運動員也是每天鍛鍊，才可以拿到好成績、突破自己。
6. References 參考資料
- Using White Space (or Negative Space) in Your Designs
- Why whitespace matters
- How to Design With White Space
- Whitespace in Web Design: What It Is and Why You Should Use It
- Gestalt Theory and Intuitive Interfaces
- Gestalt Principles for Designers — Applying Visual Psychology to Modern Day Design
臺灣清大畢業的UX海外工作者
原文出處UX四神湯；政府網站營運交流平台授權轉載
|