利用空白空間(或負空間)在你的設計裡

空白空間 (White Space) 是設計的基本原理之一,它亦是最被人低估的原理。如果能夠掌握如何控制空白空間,我們就可以控制到設計裡最細微又最有決定性的元素,並能夠好好利用它。

概括地說,空白空間是不同設計元素之間的空隙,它可以是設計裡各元素之間的空隙,或是字和字之間的空隙。在大多數情況下,我們用空白空間(又稱為負空間 (Negative Space))來把內容分開,令用戶 (User) 能夠更加容易和更快地瀏覽到資料。

現在,我們將會介紹如何使用負空間在你的設計裡,並且研究它是如何讓設計給人一個乾淨和整潔的感覺。

什麼是空白空間?

正如我剛才解釋,空白空間(或負空間)是不同元素之間的空隙。為了便於比較,所有被使用的空間就是「正空間」 (Positive Space)。事實上,負空間可以塑造出積空間,看看下面的錯視圖像。

你看到什麼?花瓶還是兩副面孔?如果你看到的面孔,這是因為在這個特殊的設計裡,白色的部分成為了負空間,而兩側黑色的部分就是正空間。如果我們逆轉來看,我們就會得到一個完全不同的觀點,因為兩側一起塑造了一個形狀出來。

花瓶還是兩副面孔?

這個例子顯示出負空間的重要性,它可以定義出哪些內容是在正空間裡,哪些在負空間裡。你千萬不要當空白空間為內容剩餘下來的空間,你應該把它看作為你設計裡最重要的元素。

空白空間是有兩種級別的,就是宏觀 (Macro) 和微觀 (Micro) 的空白空間,它們分別是核心元素之間的空隙和較小元素之間的空隙。

谷歌

谷歌 (Google)
你可以得看到,他們很擁護在他們的設計裡運用空白空間。這個搜索引擎常被視為一個乾淨的設計,主要是因為它專注著每一個頁面的主要目的,而他們(不像某些人)不把頁面所有空位全部塞滿。

Webdesigntuts+

Webdesigntuts+
我非常欣賞 Envato 他們設計的網站,它的標題和內容每部分之間都有適當的空白空間。

星巴克

星巴克 (Starbucks)
負空間實際上並不一定要單一種顏色的。在攝影界裡,任何沒有焦點的區域可以被歸類為負空間。在這個例子裡,沒有焦點的背景吸引你的眼睛到那隻有焦點的杯上。(而且,星巴克不是早前就已經換了他們的標誌嗎?)

當一個人設計時,他通常會注重在正空間上,負空間就像潛意識接著就設計出來,協助於塑造出正空間會怎樣在網頁裡佈局出來。這種性質可以之後才去修改,來制造出更適合經驗,讓用戶能在正空間更好地閱讀和互動。

比喻

假設你在一間商店裡,如果走廊由於過份擠迫,你走動會有麻煩,店裡售貨員又不斷促使你商店的特別優惠。這樣你是不會有舒適和愉快的購物經驗,因為那個商店裡有太多東西給你看,你又沒有時間和耐心去找你來買的東西,這不是太好的。

這就是其中一個主要原因為什麼蘋果公司 (Apple) 的專賣店就是如此出色的,它們的店鋪佈局是非常簡約,大部分的舖位是給自己的產品。不過如果你去另一間電腦店,你會被無數不同外型和功能的機器埋沒。在我的經驗裡,簡約的購物經驗是比較愉快的。

你問,這是和網頁設計有什麼關係?其實是很多的。在網上我們不會在大量毫無意義的內容裡去狩獵一個我們想找到的字。負空間可以幫助解決這兩個問題,仍留下一個乾淨的設計,並同時間吸引人們的注意力到網頁的重點上。

蘋果公司的專賣店

負空間可以提高可讀性

你可能會問,我為什麼要浪費時間去確保我的負空間是否適當的呢?

在網絡上的文字是比其他媒體的文字不同,在網上我們可以度身定制我們的設計,讓用戶容易地閱讀網頁裡的內容。網頁是和報紙不同,嘗試找尋你感興趣的內容會令人沮喪的。雜亂的設計不能提供乾淨、輕鬆的閱讀經驗,原因是用戶需要仔細看才能識別出每個網頁裡的元素。空白空間在元素之間留下一個緩衝空隙,所以讓我們能夠容易地找到我們關心的內容。

你看看我最近寫關於字體編排 (Typography) 的文章,它談論八種有助於字體編排的重要因素。明白了空間元素 (Spatial Element) (如字體的行距 (Line Spacing) 和字符間距 (Letter Spacing))我們就可以增加內容的可讀性 (Legibility)。在這種程度去設計空白空間表示我們正在設計「微空白」。

簡單地說(和之前提到的不同),空白空間能夠隔開所有任何設計元素,讓每個元素有足夠的空間去被用戶識別到。

網頁設計的負空間

負空間常常用在許多創造性的學界裡,尤其是攝影界。在攝影界裡,負空間是沒有影到任何主題的空間,這是和它在網頁設計裡的作用有些相似。我們看看蘋果公司的網頁,它理所當然用了宏觀和微觀兩種空白空間把來元素們分開,讓它們在網頁上各有自己的空間。

蘋果公司的設計

蘋果公司的設計採用了宏觀和微觀兩種空白空間(在圖中用紅色和綠色表示)。這種效果是一個乾淨和優雅的設計。你可能不知道,但用戶的注意力是會被沒有內容的空間影響的。在網絡上時,人們的注意力是更短,所以紙上的凌亂設計不能轉讓到網頁設計裡。

當然,空白空間不一定需要是白色的,總之不是和內容競爭用戶注意力的空間都可以被歸類為「空白空間」,如下面的設計。

玩具

複雜性和豪華性

在紙上的設計中,你可能會發現,你的客戶希望用所有空間來推廣他們的產品。但網頁設計是不同的。空白空間可以添加的複雜性和豪華性的感覺,因為它顯示出產品是比網頁的空間更重要的。運用「少即是多」的原則,它可以使產品顯得更豪華。你看看蘋果公司的網站,一個作為高級牌子,它並不需要推廣它的產品,由於產品已經可以自己推廣自己,只需要一些簡約的標語就足夠了。這種現象就是利用公司的名譽去同客戶溝通,需要很少內容就能夠宣傳到公司產品或服務的大意。

通常,比較便宜牌子的公司盡可能把大量資料塞進所有夠位的空間裡。不同市場,不同用戶。惠普 (HP) 和蘋果的網站就是這樣不同。蘋果是出了名自信,讓自己的產品推廣自己。如果你想要買東西,你就來看看,如果不是的,你就離開。而另一方面,惠普的網站使用向上和交叉銷售,推廣優惠及便宜價格到用戶的腦袋裡,以及展示各種各樣你可能會感興趣的替代產品。

改善負空間

你現在應該知道什麼是負空間,並應該能夠在你的設計裡辨認到它。如果你是這門學科的初學者,當有人建議你去改進你設計裡的空白空間,你可能會感到很困惑,你有可能會回答:「那些只不過是剩下來的空間。」但其實,負空間是可以改進的,你只需要解決幾個常見的問題,它就會變得更加有效。

一致的邊距和間距

不一致的間距 (Margin) 可以是在設計裡最大的問題之一,不過好在的它是很容易去解決。當元素有一致的間距,它就會看起來更加平衡,而且設計整體也會變得更好看。看看下面的例子(我們的姊妹網站 ActiveTuts+),右邊的設計看起來比較好看,因為它每個元素之間的間距是一致的。

一致的邊距和間距

間距也不應該令人覺得元素太過分離。太大的間距可以打斷元素之間的關連,減少設計的統一感覺。太大的間距亦會浪費你設計裡的空間,可能會降低你設計的有效性。

微觀間距

正如之前解釋過,微觀間距是細元素(例如文章裡的字)之間的負空間。

行距可以大大提高文章的易讀性,它可以決定你的設計是會是否成功的。行距是每行文字之間的「微觀空白空間」。一般來說,越大的行距,用戶閱讀文章時會有更好的經驗,不過,太大就會打散設計的統一性。

我曾經用了下面的圖片在幾篇我的文章裡,而我想在這裡再次指出這點。右邊的例子有更大的行距,當用在更寬的文章裡,應該會令文章更容易閱讀。

行距

同樣地,字符間距可以在很好用負空間裡做出貢獻。逼仄的字是很難讀的,但太分散的字也是一樣的,最重要的就是找到適當距離。

個別地分析每一個項目

設計和修改你的設計時,你最好就從頭開始分析,這樣,你這次的設計判斷力,不會被上一次的設計選擇影響到。每個項目都是不同的,設計不會有次次一樣的指引或數目給你使用,你要用你的經驗豐富的眼睛去個別地分析每個產品。

後記

正如我這篇文章裡提過,負空間可以整理你的設計和幫助吸引用戶注意力到你的內容裡。沒有人會想白費氣力來去達到自己的目標,相反地,他們希望他們的目標送到自己身邊,並且不想被對他們毫無意義的東西打擾。

總之在大多數情況下,我們要讓間距保持一致,還要記得注重字體編排和微觀間距。在理想的情況下,你應該個別地分析每個項目,以便找尋該設計中的最佳間距大小。

負空間除了可以創造一個乾淨和整潔的網頁,它還可以讓內容自我介紹,這樣才能給用戶一種優雅感。

【原文】
http://webdesign.tutsplus.com/articles/design-theory/using-white-space-or-negative-space-in-your-designs/

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s