Let’s start off by answering this question: What is negative space? It is the “empty” space between and around the subjects of an image. In the context of web design, your “subjects” are the pictures, videos, text, buttons and other elements on the page. Contrary to what it might sound, negative space is not a negative thing. It’s actually a fundamental design principal used to direct the eyes and clarify points of interest. Rather than being empty and awkward spaces, properly implemented negative space directs the user's interest and provides a big boost to UX (remember, “user experience).

讓我們從回答這個問題開始：什么是負空間？ 它是圖像主體之間和周圍的“空白”空間。 在網頁設計的上下文中，您的“主題”是頁面上的圖片，視頻，文本，按鈕和其他元素。 與聽起來相反，負空間不是負東西。 實際上，這是用于指導眼睛并闡明興趣點的基本設計原則。 正確實施的負數空間不是閑置而笨拙的空間，而是引導用戶的興趣，并極大地提高了用戶體驗(請記住，“用戶體驗”)。

…properly implemented negative space directs the users interest and provides a big boost to UX

…正確實施負空間可以引導用戶的興趣，并極大地促進用戶體驗

空白還不錯 (Blank is Not Bad)

Sometimes, people may ask for a website design with the approach of getting more information in fewer pages. Using this approach, however, often leads to web pages that are difficult to read, lack structure and are difficult to navigate. For this reason, learning how to properly use negative space is critical.

有時，人們可能會要求網站設計采用在更少的頁面中獲得更多信息的方法。 但是，使用這種方法通常會導致網頁難以閱讀，缺乏結構并且難以導航。 因此，學習如何正確使用負空間至關重要。

One very good example of proper white space use is Apple’s website, and of course we would expect no less from a top tier tech company. Let’s look, for example, at one of their product pages.

正確使用空白空間的一個很好的例子是蘋果公司的網站，當然，我們希望頂級技術公司也能提供同樣的服務。 例如，讓我們看一下他們的產品頁面之一。

Apple’s product pages strike a nice balance, though they definitely sit on the edge of too much negative space. Think about this, when you look at image 1, which is the top of the product page, what is the first thing you see? Very obviously, you see the beautiful, sleek image of the MacBook Air. Being that the whole point of the MacBook Air is to be thin and light, this striking image builds a very strong first impression with the user.

蘋果的產品頁面雖然處于絕對的負面空間邊緣，但卻取得了不錯的平衡。 考慮一下這一點，當您查看產品頁面頂部的圖像1時，首先看到的是什么？ 很顯然，您會看到MacBook Air的美麗，光滑的圖像。 鑒于MacBook Air的整體要輕薄，這一引人注目的圖像為用戶建立了非常強烈的第一印象。

Continuing down the page, to image 2, you can see how the negative space benefits readability. Your attention is not-so-subtly directed to the first heading of the page, “Light. Speed.” You then can drop down to the paragraph. Notice how the paragraph doesn’t hug tightly to the heading text, but instead leaves some breathing room. It’s all very easy to distinguish and helps the eye to flow naturally from subject to subject.

繼續瀏覽頁面至圖像2，您可以看到負空間如何提高可讀性。 您的注意力不是那么巧妙地指向頁面的第一個標題“ Light。 速度。” 然后，您可以下拉至該段落。 請注意，該段落與標題文本之間的關系并不緊密，而是留出了一些喘息的空間。 這一切都非常容易區分，并且可以幫助眼睛在不同的對象之間自然流動。

…if every section of that page were stacked right on top of each other, the page would begin to feel burdensome rather than minimal.

…如果該頁面的每個部分都彼此堆疊在一起，那么該頁面將開始感到負擔重而不是最小。

If that heading were placed directly below the image of the MacBook Air, your attention might be equally divided between the two elements, confusing you as to which was more important. Further, if every section of that page were stacked right on top of each other, the page would begin to feel burdensome rather than minimal.

如果該標題直接位于MacBook Air的圖像下方，則您的注意力可能會平均分配在這兩個元素之間，從而使您更困惑哪個更重要。 此外，如果該頁面的每個部分都彼此堆疊在一起，則該頁面將開始感到負擔重而不是最小。

負空間是一個積極元素的思考 (Thinking of Negative Space as an Active Element)

An active element is defined as something that contributes directly to the usability or visual perspective of a design. Negative space should be thought of this way. It is not just a by-product of a design, but rather something that should be consciously considered and used as a tool.

有源元素是指直接有助于設計的可用性或視覺效果的元素。 負空間應該這樣考慮。 它不僅是設計的副產品，而且應該被有意識地考慮并用作工具。

…proper negative space when used deliberately is always going to meaningfully add to the UX of a page.

…故意使用適當的負空間總是會有意義地增加頁面的用戶體驗。

Other active elements, such as parallax scrolling or animations, may or may not add to a pages usability. In contrast, proper negative space when used deliberately is always going to meaningfully add to the UX of a page. Here are some benefits to adopting this mindset:

其他活動元素，例如視差滾動或動畫，可能會或可能不會增加頁面的可用性。 相反，故意使用適當的負空間總是會有意義地增加頁面的用戶體驗。 采用這種思維方式有一些好處：

1. Provides a nice break: If too many elements or words appear in a small space, it can be overwhelming to the user. Adding a nice chunk of negative space can correct this issue.

   提供一個不錯的休息時間：如果在一個很小的空間中出現太多的元素或單詞，可能會使用戶不知所措。 添加大量的負空間可以糾正此問題。

2. Highlights important elements: Using negative space, as we saw with Apple’s product page, does wonders to draw attention to key points and thoughts on a page, even without the use of different font styles or sizes and colors.

   突出顯示重要元素：使用負空間，就像我們在Apple的產品頁面中看到的那樣，即使不使用不同的字體樣式，大小和顏色，也確實引起了人們對頁面關鍵點和思想的關注。

3. Direct the flow of a page: Often the placement of a single element in a largely empty area can signal where a user should go. For example, and empty white page with a headline at the bottom may prompt a user to scroll down. A designers use of negative space is an effective tool for leading a user through the intended flow of a page.

   指導頁面的流向：通常將單個元素放置在一個很大的空白區域中可以表明用戶應該去哪里。 例如，底部帶有標題的空白頁可能會提示用戶向下滾動。 設計人員使用負空間是一種有效的工具，可以引導用戶完成頁面的預期流動。

負空間的其他提示 (Additional Tips for Negative Space)

Here’s some tips on using negative space in your designs.

這是在設計中使用負空間的一些技巧。

1. Negative space doesn’t mean white: Negative space simply refers to empty or blank areas in between elements. This does not mean that area needs to be white. It can be any color, even a subtle pattern. Look for example at how Apple’s page uses both white and light gray as background negative space, or how this articles cover image makes use of negative space in a variety of colors.

   負空間并不意味著白色：負空間只是指元素之間的空白區域。 這并不意味著該區域需要為白色。 它可以是任何顏色，甚至是微妙的圖案。 例如，查看Apple的頁面如何使用白色和淺灰色作為背景負片空間，或者本文的封面圖片如何利用各種顏色的負片空間。

2. Micro negative space: Large elements and sections are not the only places where negative space is used. The spacing between lines of text, even individual letters and other small elements can have an impact on readability and the flow of the page. (we will discuss some of this in the typography article later)

   微小的負空間：并非只有大的元素和部分使用負空間。 文本行之間的間距，甚至單個字母和其他小元素，都可能影響頁面的可讀性和流程。 (我們將在稍后的排版文章中討論其中的一些內容)

3. Order of Importance: Layer your content into it’s proper order, and use negative space to guide the user’s eyes from one element to the next. Variations in the negative space between certain elements can provide context as to which items go along with others. For example, a header and it’s paragraph (1.) may only have a small gap between them, while following that with a larger gap before the next heading (2.) will separate those thoughts from one another as seen in the example image. Further, if you had 3 of this same section, increasing the negative space around one of them would make it stand out visually as more imortant.

   重要性順序：將您的內容按正確的順序分層，并使用負數空間引導用戶的視線從一個元素移到另一個元素。 某些元素之間負空間的變化可以提供有關哪些項與其他項一起出現的上下文。 例如，標題和它的段落(1.)之間可能只有很小的間隙，而在下一個標題(2.)之前，標題和段落之間的間隙較大，如示例圖像所示。 此外，如果您在同一部分中有3個，則增大其中一個的負空間會使它在視覺上顯得更加突出。

4. Don’t Get Too Repetitive: Patterns are great, and provide consistency, but they can also get boring. Try to think of ways to break things up by varying the size of your positive elements. If you don’t design your positive spaces well, your negative space will not be as effective. Even Pinterest uses images of different sizes to keep things visually interesting, while the negative space between those images keeps things looking nice and even.

   不要太重復：模式很棒，可以提供一致性，但是它們也可能很無聊。 嘗試思考通??過改變積極因素的大小來分解事物的方法。 如果您沒有很好地設計正空間，那么負空間將不會那么有效。 甚至Pinterest也使用不同大小的圖像來保持事物的視覺趣味性，而這些圖像之間的負空間則使事物看起來更均勻。

重要要點 (Key Takeaways)

Remember that negative space should never be an afterthought. Use it actively throughout your design process, and think about how using it can help direct the user through the page and highlight the importance of specific elements. Doing this will improve your designs’ UX and keep viewers on the page.

請記住，負面的空間絕不應該是事后的想法。 在整個設計過程中積極使用它，并考慮使用它如何幫助引導用戶瀏覽頁面并強調特定元素的重要性。 這樣做可以改善設計的用戶體驗，并使查看者留在頁面上。