​​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. 
  • ​​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
​​                                                   
​​But other items like the theme gallery widget are meant to be spaced out. More space between the text and images (combined with a contrasting color) forces visitors to draw their attention to that gallery widget since nothing else is distracting. It’s a handy little technique for links, buttons, or featured content where you’d like to see more user interactivity.                
​​但其他項目像是主題迴廊小工具（theme gallery widget)注定空間要隔開來，由於沒有其它東西令人分心，更多地空間在文字和圖片間（和對比色結合）迫使參觀者專注在迴廊小工具上。對於連結、按鈕或是想要看到更多使用者互動地特徵內容而言這是一個方便的小技巧。
​​ 
​​Portfolio sites are another great source of white space inspiration since designers take great care to frame their work with taste and sensibility. A great website design wraps all of this visual information in a spectacular gift box. 
​​由於設計師花很大的心力用品味和感性把他們的作品匡列出來，作品集網站是另外一種很棒地白色空間靈感來源，一個偉大的網頁設計把所有視覺資訊包裝進壯麗地禮品盒裡。
​​ 
​​ 
​​ Source: Drew Wilson
​​                                                                                 
​​While there are many great examples available, we recommend checking out Drew Wilson’s website. The white space on his port- folio is based entirely on the content structure to enhance certain blocks of text & imagery. 
​​儘管有很多合宜的棒例子，我們推薦你看看Drew Wilson的網站。在他作品集上的白色空間完全憑藉內容架構去提升某些區塊文字和意象。
​​      
​​His layout is also meant to be a single-page design. Without extra pages, all of the content is forced into a small layout which requires a keen sense of white space and compositional balance. 
​​他的網站佈局注定是單一頁面設計（single-page design)，不需要額外地頁面，所有的內容押入小型佈局裏頭，這需要白色空間和組成平衡的敏銳感。 
​​ 
​​You should notice that his website doesn’t just rely on typography, color, space, animation, or any other single design technique. All of these principles are combined together so that they fit quite naturally into the overall layout. 
​​你應該注意到他的網站不單單只是依賴字文排版學、色彩、空間、動畫或是任何其它單一的設計技巧。這些所有原則都結合在一起，所以它們相當自然地融入到整個佈局裡面。
​​                                        
​
​2. PragmaticApplication 
​​務實應用
​​ 
​​Although each website design is unique, you should always pair white space with other design techniques that work well off each other. 
​​雖然每個網站設計是獨一無二的，你應始終搭配白色空間和其他設計技巧使得彼此間互相運作。
​​                                        
​​Here’s some more tips for practically applying white space: 
​​這裡有更多實際應用白色空間的使用秘訣：
​​                                                                                 
  • ​​ Variety is a good thing – Some areas may need less white space, others may need a lot more. Go with the flow and rely on your designer’s intuition. 
  • ​​各式各樣是件好事情一些區域也許需要較少的白色空間，其它區域也許需要更多，就跟著流向（flow)走並依賴設計師的直覺。  
  • ​​ 
  • ​​Prioritize legibility and readability – Before you start design- ing, create an interface inventory to assess the scope of your content. Once you’re done, try creating some rough content wireframes to assess how much space is required for legibility (how well you can discern the letters and words) and readability (how well you can scan the content). 
  • ​​優先化易讀性和可讀性－在您開始設計前，創造介面盤點清單(interface inventory)來評估你的內容範圍，一旦完成這項任務，嘗試創造出一些粗略地內容線框圖（content wireframes)來評估易讀性（你可以辨識字母和單字間有多麼地好）和可讀性（你可以掃描內容有多麼的好）需要多少的空間。 
​​ 
​​ 
  • ​​Break out of the vacuum – Use contrasting colors, disparative font sizes, and asymmetrical white space to add extra style into a layout. Understand that white space is a reactive design element and affects the perception of all surrounding elements. 
  • ​​擺脫真空（vacuum)-  使用對比色、不同的字型大小、以及非對稱白色空間來增加額外的風格進去佈局裡。瞭解白色空間是種反應性的設計元素而且會影響到所有周遭元素的感知。
​​The application of white space is both aesthetic and pragmatic. It affects digital design just like it would affect a painting – but a website is not a painting. A website is meant to be touched, clicked, scrolled, and used by as many people as possible.
​​白色空間應用是美觀且務實的，它影響數位設計就好像影響一幅畫－但是網站不是一幅畫，網站意味著可以被觸碰、點擊、捲動和儘可能被越多人使用。
​​ 
​​Pragmatic white space creates a structure around content which is vital to the success of any design. Take a peek at why whitespace matters to learn more about designing space for content. 
​​務實的白色空間在內容周圍創造出任何成功設計關鍵的架構。可以看一眼為何“白色空間重要”來學習更多關於為內容做設計空間。                                
​​                        
​​                
​​                                                                        
​​                        
​​                
​​ 
​​