提升易讀性 — 如何有效運用空白 White Space

0

文/ UX 四神湯 Shandy Tsai

【本文適合想增進設計實力、對介面設計抱有好奇心的讀者】

想像走進一家你最喜愛的服飾店,一家未按照分類,充斥著琳瑯滿目的商品,另一家同樣的空間大小,卻有明亮的燈光、木質的走道,以及明確的分類。哪一家讓你的購物經驗比較舒適?

▲ 同樣都是 Vintage Store,擺放的方式不同,帶給客人的感覺就完全不一樣(圖片來源:UX 四神湯)

留白,是設計中重要的一環,從室內空間、網頁介面、甚至是報告、投影片,有效的 White Space 讓畫面有了呼吸感(breathing room)、增加資料的易讀性(Readability/Legibility)。

上篇文章我們介紹了極簡主義的歷史及原則,其中提到了負空間 Negative Space,今天我們來更加深入探討實際運用。以下是此篇文章的架構:

  1. Definition 定義
  2. Types(Readability)種類 
    • Margins and Consistent Spacing 善用邊緣與間距的一致性
    • Micro-level Spacing 細微間距
  3. Practice 實際演練(so exciting!)
    • Step 1 根據內容性質對齊
    • Step 2 減少實線 & 增加項目間距
    • Step 3 強調標題 & 確保間距的一致性
  4. Conclusion 結論
  5. References 參考資料

我們常常聽到留白、留白,卻很少思考如何運用,藉四神湯的機會,好好介紹留白的作用,並運用實例練習,讓我們一步一步往更好的設計師邁進 :)

1. Definition 定義

留白 White Space 在網頁設計中是基本元素、無所不在,非常非常非常重要,但也最容易讓人忽略。

留白是兩個不同元素之間的空間,不論是頁面上不同區塊的空間、或是文字的行距,都是留白的運用。

大多數的例子,我們利用留白去區隔內容,讓觀看者可以更容易閱讀、更快速的瀏覽,無需使用實際的分隔元素(實線、顏色、形狀等)。White Space 並不ㄧ定要是「白色」。這個空間可以是一種顏色或是材質(texture),不包含畫面元素(文字、圖片等內容)。

▲ HBO Game of Thrones 官網(圖片來源:HBO

▲ HBO Game of Thrones 網頁中的空白negative space運用(圖片來源:UX 四神湯)

順帶一提,對易讀性有興趣的朋友,可以去看看心理學的 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.

適當的留白,無需使用分隔的元素(顏色、線、形狀等),即可以用最乾淨俐落的方法區分段落。

▲ 你可曾經想過,我們的眼睛如何辨別、歸納群體?

▲ 根據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 的使用。

另外,相同層級的內容,間距若是不同,會讓視覺上產生混淆。因此,將同等層級的內容,有一樣的間距,會讓讀者更容易的消化資料。

▲ The difference between Margin and Padding (圖片來源:Mohamed Fahmy Blog

以下我們用 FKJ 專輯介紹作為例子:圖一跟圖二是相同的內容,專輯圖片在左,文字在右。為什麼我們在視覺上會覺得不同?為什麼圖二好像比圖一更容易閱讀?

▲ FKJ 專輯介紹:為什麼同樣的內容,圖二會比圖ㄧ在視覺上更為俐落?

透過細微的微調,將相同層級的內容對齊(Align),以及適當的邊緣留白,讓使用者在視覺上更容易瀏覽。

首先,我們先歸納資料的重要性及層級

  1. Title 標題
  2. Location 地點
  3. Content 內容
  4. Social Media Links 社群連結

我將 Title & Location 對齊,利用字體粗細及大小,區別層級。再來,將內容與超連結對齊,利用顏色及留白區分這兩個元素。另外也在專輯封面及文字中留了點空間。

這些細微的調整,可以將原本稍嫌凌亂的資料,變得更易於閱讀,增加使用者觀覽的意願。

▲ 說明如何利用留白及對齊,增加資料的易讀性

2–2 Micro-level Spacing 細微間距

細微間距即是兩個最小頁面元素間的距離,例如文字在文章的行距。行距雖然細微,但是產生的效果卻非常顯著。不論是行與行之間的距離、還是段落之間的距離,能夠使閱讀者視覺上更為舒適,更願意繼續往下 scroll。

當然,若是太大的行距,視覺上會有落差,讓人無法區別段落。

▲ 利用世大運的報導說明細微的調整行距,可以讓閱讀產生顯著的差異

3. Practice 實際演練

Table/List 表格/清單

這次實際操作的是表單!表單隨處可見,菜單、購物明細、預算表、帳單等,全都屬於表單,是非常生活實用的例子。接下來的內容,我會最簡單、輕鬆的方式,一步一步運用 White Space,讓表單不需要分隔線,也可以看起來井然有序、清楚明瞭。

以下是利用 Google Spreadsheet 製作的用戶資料,包含 User ID, Email, Phone, Items, Price, Quantity, Purchase Amount,黑色框線與 Arial 字體是普遍的格式。

我們該如何運用 White Space,讓表格更有設計感、不那麼單調?

▲ 黑色框線與 Arial 字體是常見的表格樣式

Step 1. 根據內容性質對齊

首先,第一大原則是:

文字向左對齊,數字向右對齊

根據習慣,我們一般閱讀文字是從左到右。數字由於位數可能不同,若是向左對齊或是置中,會讓閱讀上造成困難。因此,確保數字顯示相同的小數位數數量,將其向右對齊是最自然的閱讀方式。

▲ 簡單的調整 Alignment,可以讓資料更容易閱讀

Step 2. 減少實線 & 增加項目間距

接下來,很重要的一點是

能不要有實線,就盡量不要有實線

實線固然有它的作用,但在視覺上帶給人拘謹、侷限感,我們真的需要實線來區分項目嗎?根據 Gestalt Law,若是靠近的物體,人類的眼睛會自動將他歸類在一起。

因此,去除了實線,同時增加項目間的間距,讓畫面乾淨許多。

▲ Step 1 根據 Gestalt Law,利用 White Space分隔項目

Step 3. 強調標題 & 確保間距的一致性

再來,為了強調標題,將標題的字體加粗並放大(28pt)。同時,增加內容的行距(24pt),確保每一項目的間距是 24pt,可以根據個案去做調整。

▲ 讓間隔一致化,視覺上更為平衡

這三個簡單的步驟,可以讓你的表單看起來更簡潔整齊,無需任何多餘的裝飾與線條,就可以擁有 Minimal Design Style。

Step 1. 根據內容性質對齊

Step 2. 減少實線 & 增加項目間距

Step 3. 強調標題 & 確保間距的一致性

▲ 經過調整後的前後差異

再舉另一個例子,這是根據 Invison 2016 Product Design Report 對在美設計師薪水的統計資料,說明了不同稱謂的設計師平均薪水與中位數薪水:

▲ 根據 Invsion 2016 Report 中的設計師平均薪水統計資料

根據前面三個步驟,我減少了不必要的實線,淡化剩餘的實線,將標題用粗體代替,畫面看起來就乾淨許多。

▲ 利用前段落的三步驟,使表單看起來更乾淨俐落

再來,我試著加淺灰色色塊,讓行列的對比更為明顯。

▲ 加了色塊後,更加深了行列的關係

如果想要增加趣味性的話,可以試著調整標題的位置,另外加上了黑色長條,讓視覺效果集中在底部,增添了層次感。

▲ 試著將移動標題位置,加上黑色長條後,視覺焦點集中在底部

最後,讓我們看看所有的版本,每個版本都有其優缺點,根據不同的需求,也會產生不同的格式。大家可以試著用現有的表單做些變化,例如不同的字型、增添顏色等。

表單雖然常見,透過調整間距與線條,沒想過可以有這麼多視覺變化。下次如果有機會接觸到表單,可以利用這些小撇步,試著玩玩看所有的組合,也許你有更棒的視覺呈現,也歡迎大家分享!

▲ 每個版本有其優缺點,你喜歡哪種呢?試著玩玩看不同的組合!

5. Conclusion 結論

空白一直都是我很有興趣的元素,他不引人注目,但留白的力量卻不容小覷。稍微的調整間隔,可以讓畫面更乾淨,減少讀者的負擔。

我們常常說留白很重要,但很少文章說明如何使用。因此這次的內容,特別一步步帶著大家參與設計的過程,試著解析設計的步驟。而表單是非常好的練習,不論是設計介面、製作投影片,或是寫報告、點菜,我們每天都會遇到表單。其中的細節大家可能比較少注意,希望大家都可以有所收穫,或是提供不同的看法。

有人說美感是天生的,我不這麼認為。我們可以透過不斷的練習,與臨摹大師的作品,提升自己的設計實力。就像任何運動,運動員也是每天鍛鍊,才可以拿到好成績、突破自己。

謝謝大家的閱讀,我們下週見!

6. References 參考資料

  1. Using White Space (or Negative Space) in Your Designs
  2. Why whitespace matters
  3. How to Design With White Space
  4. Whitespace in Web Design: What It Is and Why You Should Use It
  5. Gestalt Theory and Intuitive Interfaces
  6. Gestalt Principles for Designers — Applying Visual Psychology to Modern Day Design

授權來源:UX 四神湯 〈提升易讀性 — 如何有效運用空白 White Space〉

Share.

About Author

vide 編輯群

Leave A Reply