How to Apply White Space
Every website uses space differently based on the purpose of the content.
每個網站會根據不同的內容目的使用不同的留白。
Source: Raphael Malka
For example, a landing page may leave plenty of negative space because the focus is mostly on a call-to-action button (download button or “Learn More” type of button, as you can see above).
例如，著陸頁／目標網頁可能會留下大量的主設計圖或文字外的空間，讓視覺焦點停留在為行動召喚而設計的按鈕（「下載」或「知道更多」類型的按鈕，就像你在上圖所看到的。
Source: Over Clothing
On the contrary, an eCommerce store like Over Clothing has a lot more content which needs to be squeezed into a layout. There will still be a need for white space but it probably won’t be as lavishly care-free as you’d find in a simple landing page.
相反的，像Over Clothing這樣的電子啇務網站，有很多的內容需要被擠進一個版面。雖然它可能不必需像簡單的目標網頁般奢華地不需考慮太多，但它仍然需要留白。
The bottom line is that white space should be used within context, which means there aren’t many hard-and-fast rules to apply onto every website. But here are some general tips to keep in mind:
最起碼，在脈絡中需要留白，也就是說，沒有太多的硬性規定適用於所有的網諳。不過，以下有些基本訣竅必需常置於心。
- Get a feel for each website and its organization – In fact, designer Paul Boag suggests you limit a page to 15 points of attention. For each item you add to the interface, subtract one point.
- 感受一下每個網站和其組織－實際上，設計師Paul Boag建議你一個頁面限制15個專注點(points of attention)，當你介面加入一個項目時，扣掉一點。
- Compare your ideas with other similar designs – Consider how other designers put together white space in layouts. For example, this gallery from awwwards is a fantastic starting point.
- 把你的想法跟其他相同設計比較看看－想想看其他設計師如何把白色空間一起放進去佈局裡。舉個例子，Awwwards收集的網站是個夢幻的起始點。
- Understand that content relationships are defined by surrounding white space – Passive white space creates breathing room, while active white space leads users eye’s towards relevant content.
- 了解周遭地白色空間定義了內容關係－被動白色空間創造出喘息空間，而主動式白色空間帶領使用者的眼睛朝相應地內容觀看。
Now, let’s dive a little deeper into the spatial elements of white space and how to apply it practically.
現在咱們再深入一點來鑽研白色空間的空間元素以及如何實際地應用。
1. Spatial Design Features
空間設計特徵
Composition is the gestalt. It’s the whole website which arises from the sum of its parts. To fully understand what works and why, you must study white space from a compositional and microscopic level.
結構佈局（Composition) 是種完形，整個網站源自於部份的總和，為了充分了解什麼可以運作、如何運作，你必須從組成層面和微觀層面研讀白色空間。
Source: Themes Kingdom
Themes Kingdom is a good example because their layout uses a variety of different spatial elements for different reasons. The negative space found between top navigation links (shown above) feels more compact than the space between block elements on the bottom of the homepage. Nav links are crammed into a closely-packed navbar, the text is smaller, and the links feel like a more subtle piece of the header. On the other hand Themes Kingdom uses many big links with extra padding lower on the page. These links feel more spacious and captivating in comparison to the smaller navbar.
Themes Kingdom 是個好例子，因為它們的佈局基於不同理由使用了各樣不同的空間元素，頂端導覽連結間（上方圖）可以發現負形空間，它感覺比首頁底端區元素之間地空間更加緊密。導覽連結塞進去密集堆積的導覽列裡面，文字較小，而連結感覺像是種更細微的標題。另一方面Themes Kingdom在頁面底端使用了很多額外填補地大連結，這些連結跟較小地導覽列比起來感覺更有空間、更迷人。
Although the navigation links are smaller, they still come across as one large collection of links. White space for grouped elements should be used to convey similarities of links. To forge a close relationship between content it’s a good idea to float elements side-by-side. Take for example the various theme category links found directly underneath the header. These links are quaint yet distinct featuring thin line icons for aesthetic appeal.
雖然導覽連結比較小，它們依舊看起來像是連結的大集合。針對分組元素的白色空間應該用來傳遞連結的相似性。為了在內容間鍛造密切地關係，讓元素並排地飄浮著（float)是個好主意。以就在標題下方各種主題類別為例子，這些連結精巧卻有顯著特徵和美感訴求的細線圖標。
As described in Web UI Design for the Human Eye, the laws of Gestalt dictate that objects in closer proximity will appear as one “unit” whereby the white space acts as a visual cue.
就如同在 Web UI Design for the Human Eye所描述地，完形定律口述了更接近一點地物件將表現為一個「單位」，其中白色空間擔任視覺提示。
Source: Themes Kingdom