LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

提升易讀性(ㄧ) 如何有效運用空白?

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、Medium  UX四神湯 / Shandy Tsai

 

 

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

 

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

圖1. 同樣都是Vintage Store,擺放的方式不同,帶給客人的感覺就完全不一樣

 

留白,是設計中重要的一環,從室內空間、網頁介面、甚至是報告、投影片,有效的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),不包含畫面元素 (文字、圖片等內容)。

圖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),以及適當的邊緣留白,讓使用者在視覺上更容易瀏覽。

 

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

1. Title 標題

2. Location 地點

3. Content 內容

4. 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. 試著將移動標題位置,加上黑色長條後,視覺焦點集中在底部。

 

 

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

 

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

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

 

 


 

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

 

 

文章轉載自「Medium  UX 四神湯」,已取得作者授權同意,原文為:提升易讀性(一):如何有效運用空白White Space

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w