Because screens are limited, web design is also limited. It can be said that in the small box of the screen, each pixel is a piece of real estate.

由于屏幕有限，因此網頁設計也受到限制。 可以說，在屏幕的小盒子里，每個像素都是一塊房地產。

Even a novice, I know that a page cannot be loaded with too much content, but it involves a lot of blank space, including experienced designers.

即使是新手，我都知道頁面無法加載太多內容，但是它涉及很多空白，包括經驗豐富的設計師。

Leave blank, the other is “negative space”, and the two words are often used interchangeably. They all refer to a relationship between the elements that appear on the screen. The so-called white space is not necessarily white or black. Even a pattern, color, or textured background can be called white space. Negative space is to create a blank environment outside the content so that the viewer can focus more on the content.

留空，另一個是“負空格”，這兩個詞經常互換使用。 它們都引用出現在屏幕上的元素之間的關系。 所謂的空白不一定是白色或黑色。 甚至圖案，顏色或帶紋理的背景也可以稱為空白。 負空間是在內容外部創建空白環境，以便觀看者可以將更多注意力放在內容上。

In this article, we will discuss how to use the super winning tool of the designer’s tricks: blank space.

在本文中，我們將討論如何使用設計師技巧的超級贏家工具：空白。

空白原因 (Reason for blank)

As has been discussed by everyone, negative space was initially an integral part of aesthetics.

正如每個人都討論過的那樣，負空間最初是美學的組成部分。

Where to leave blank space is even more important in web design. It can be said that it is not only in the need of visual aesthetics, it has to play a more important role, that is, to achieve a perfect balance between visual aesthetics and guiding users. Moreover, if there is a paragraph of text now, the blank also needs to make the text clear on this basis and create a readable environment.

在網頁設計中，留出空白的位置更為重要。 可以說，它不僅需要視覺美學，??而且還必須發揮更重要的作用，即在視覺美學和引導用戶之間達到完美的平衡。 此外，如果現在有一段文本，則空格也需要在此基礎上使文本清晰并創建可讀的環境。

In general, the direct effects of blank space are as follows.

通常，空白的直接影響如下。

1.眼球掃描 (1.Eyeball scan)

In a webpage, the space between two larger content elements (herein referred to as a large space). This type of white space can attract and guide users’ eyes to scan the page. When used properly, it can lead the user’s attention to the elements you want to highlight. This is most effective when brand identity is displayed or user interaction is increased.

在網頁中，兩個較大的內容元素之間的空間(在此稱為大空間)。 這種空白區域可以吸引并引導用戶的眼睛掃描頁面。 如果使用得當，它可以使用戶注意要突出顯示的元素。 這在顯示品牌標識或增加用戶互動時最有效。

2.清晰度 (2. Clarity)

The space between two smaller content elements (herein referred to as a small space) such as a text, or a line of text, a list, an icon, etc. Proper white space can also make these elements easier to identify.

兩個較小的內容元素(例如，文本或一行文本，列表，圖標等)之間的間隔(適當的空白)也可以使這些元素更易于識別。

3，視覺美學 (3.Visual aesthetics)

When you see a big picture, white space plays a big role in visual aesthetics. For example, if the content is messy, it will never be a good picture.

當您看到大圖時，空白在視覺美學中起著重要作用。 例如，如果內容雜亂無章，那將永遠不是一張好照片。

4.高等級 (4.High grade)

Rich white space will infuse your page with a refined and elegant atmosphere.

豐富的空白空間將為您的頁面注入精致優雅的氛圍。

In order to better understand and use it, we will sort out the different types of white space (large and small spaces) and different methods (passive and active) of using them.

為了更好地理解和使用它，我們將整理出不同類型的空白(大空間和小空間)以及使用它們的不同方法(被動和主動)。

大大小小的空間 (Big and small spaces)

Where and how negative space is used in web design will depend on their role. In short, we roughly divide these roles into large and small elements.

網頁設計中負空間的使用位置和方式將取決于其作用。 簡而言之，我們將這些角色大致分為大大小小的元素。

1.大元素空白 (1.Large element blank)

Large element blanking involves the blanking between two large elements. Mainly used for:

大元素消隱涉及兩個大元素之間的消隱。 主要用于：

• Overall content
  整體內容
• Separate elements
  分開的元素
• Text column
  文字欄
• Margin
  保證金
• Padding
  填充
• Distance between pictures
  圖片之間的距離

Translator’s Note: Margin and Padding here refer to the area outside the element tag in web design. Refer to the figure below to help understand.

譯者注：此處的邊距和填充是指網頁設計中element標簽外部的區域。 請參考下圖以幫助理解。

This type of white space greatly affects the user’s visual flow. Whether it is potential guidance or strong push, it can let the attention lead to where you want them to stay. But a rule to be emphasized here is that ### The greater the distance, the stronger the motivation. I want to break the balance, however, because too much white space violates the Gestalt principle, the result is to weaken the relationship between the objects.

這種類型的空白會極大地影響用戶的視覺流。 無論是潛在的指導還是強大的推動力，它都可以使注意力引向您希望他們留下的地方。 但是這里要強調的一條規則是，距離越大，動力就越強。 但是，我想打破平衡，因為太多的空白違反格式塔原理，其結果是削弱了對象之間的關系。

Let’s take a look at the following website as an example to illustrate how white space can induce user interaction.

讓我們以以下網站為例，說明空白如何引起用戶交互。

Tomasz Wysocki的 (Tomasz Wysocki’s)

Most users first notice the title of the page, which is the phrase “Digital art & Experiments”, and a large area of ??white space around it, so that the user’s attention is completely focused on it.

大多數用戶首先注意到頁面的標題，即短語``數字藝術與實驗''以及其周圍的大片空白區域，以便用戶的注意力完全集中在頁面上。

Although the top and bottom of the page are left blank on one side, they are equally noticeable. All in all, here, the blank area plays a good role in attracting attention, and the design seems unbelievably simple.

盡管頁面的頂部和底部在一側都留為空白，但它們同樣引人注目。 總而言之，此處的空白區域在吸引注意力方面起著很好的作用，而且設計似乎簡直難以置信。

The designer actually uses a blank area as a blank curtain to surprise the audience so that we can see the rich details of his work. Once the mouse is moved to any of the navigation columns at the bottom, the picture of the work will appear on the screen as a full screen background display. This effect creates a joy of discovery and discovery similar to a young age: accidentally broke into a blank place, and found that each drawer hides a colorful visual feast.

設計師實際上使用空白區域作為空白窗簾，以使觀眾感到驚訝，以便我們可以看到他作品的豐富細節。 將鼠標移至底部的任何導航列后，作品的圖片將以全屏背景顯示在屏幕上。 這種效果創造了一種發現和發現的樂趣，類似于年輕時的發現：不小心闖入空白處，發現每個抽屜都隱藏著豐富多彩的視覺盛宴。

You can try the dramatic effect that happens on the screen when you mouse over.

您可以嘗試將鼠標懸停在屏幕上時產生的戲劇效果。

By leaving a blank area as a tool to draw the user’s attention to his work, the designer has created a fresh and strange experience. After the first work appeared, we wanted to see what other works he had. This feels very attractive, because you will be tempted to find the most important content. But it all depends on a perfect entry point that ignites your curiosity.

通過留出空白區域作為吸引用戶對其作品的注意力的工具，設計師創造了一種新穎而奇特的體驗。 在第一部作品出現之后，我們想看看他還有哪些其他作品。 這感覺非常誘人，因為您將很容易找到最重要的內容。 但這一切都取決于能激發您好奇心的完美切入點。

2.小??元件毛坯 (2. Small element blank)

On the other hand, when designers talk about small element blanks, they usually refer to smaller elements or secondary elements of larger elements. They include:

另一方面，當設計人員談論小元素毛坯時，他們通常指的是較小的元素或較大元素的次要元素。 它們包括：

• Font
  字形
• Line spacing
  行間距
• paragraph
  段
• List
  清單
• Button
  紐扣
• icon
  圖標

Small elements of white space are mostly used to emphasize the overall clarity of the website, especially in terms of typography. When you try to use the white space between the text to break the balance, keep it clear and easy to read, and not let it deviate from the important content. I am here, just a suggestion, suggesting that the English line spacing is set to 1.5px is the most perfect. (Translator’s note: The author here does not consider the line spacing of Chinese fonts)

空白的小元素通常用于強調網站的整體清晰度，尤其是在排版方面。 當您嘗試使用文本之間的空白打破平衡時，請保持文本清晰易讀，并且不要讓其偏離重要內容。 我在這里只是一個建議，建議將英語行距設置為1.5px是最完美的。 (譯者注：作者此處未考慮中文字體的行距)

As mentioned in Gestalt Law, making closer elements visually closer will imply that they have the same function. Small elements of white space will let users know the relationship between buttons and links, and the same white space will strengthen this mechanism, which further enhances awareness during the user’s use.

如格式塔定律中所述，使更接近的元素在視覺上更接近將意味著它們具有相同的功能。 空白的小元素將使用戶知道按鈕和鏈接之間的關系，而相同的空白將增強此機制，從而進一步增強用戶使用時的意識。

Although the white space is divided into two types of large elements and small elements, each type also has two uses of active and passive.

盡管空白分為大元素和小元素兩種類型，但每種類型也有主動和被動兩種用法。

被動和主動消隱 (Passive and active blanking)

Blank applications are all content-dependent.

空白的應用程序都依賴于內容。

As mentioned earlier, the more white space, the more attractive the content is. However, you don’t want every element of the page to have the most appeal, let alone limited screen space.

如前所述，空白空間越大，內容就越有吸引力。 但是，您不希望頁面的每個元素都具有最大的吸引力，更不要說屏幕空間有限了。

Let’s see how passive and active white space can help negative space reach visual balance.

讓我們看看被動空間和主動空間如何幫助負空間達到視覺平衡。

1.被動空間 (1.Passive space)

We see passive white space as empty minimization.

我們將無源空白視為空的最小化。

Without enough white space, a website will become unreadable and disoriented, and all the energy will be used to combat visual confusion. Passive white space is to use white space to try to make the site easy to understand.

沒有足夠的空白，網站將變得難以閱讀和迷失方向，所有精力都將用于消除視覺混亂。 被動空格是指使用空格嘗試使站點易于理解。

Look at the example above, the distance between each link in the navigation, and then look at the following line of text, line spacing, word spacing, etc. Can you see anything unusual? …… The answer is you can’t find it. That’s right! These spaces and distances are so trivial that they won’t catch your attention at all. This is called passive white space.

看上面的示例，導航中每個鏈接之間的距離，然后看下面的文本行，行距，單詞間距等。您能看到異常之處嗎？ ……答案是您找不到它。 那就對了！ 這些間隔和距離是如此瑣碎，以至于根本不會引起您的注意。 這稱為被動空白。

For the blanking of large elements, passive space means enough space for borders and margins to emphasize the differences between the elements and avoid confusion. For example, it’s like navigation and registration are at the top of a webpage, but separated by a certain distance.

對于大型元素的消隱，被動空間意味著有足夠的空間用于邊界和邊距，以強調元素之間的差異并避免混淆。 例如，就像導航和注冊在網頁頂部一樣，但相隔一定距離。

For small elements, the passive space includes the maximum readability of characters, text, and paragraphs, and the independence of each line of text or each option when a list or drop-down menu appears.

對于小型元素，被動空間包括字符，文本和段落的最大可讀性，以及出現列表或下拉菜單時文本的每一行或每個選項的獨立性。

The application of passive space should be natural. In fact, the main purpose of ### passive blanking can even be said to be unnoticed. When you try to create a passive space, then you want to make it look less noticeable, and simply treat it as normal.

被動空間的應用應該是自然的。 實際上，甚至可以說###被動消隱的主要目的未被注意到。 當您嘗試創建一個被動空間時，您希望使其看起來不那么引人注目，只需將其視為正常即可。

When all the passive spaces are in place, the active part comes next.

當所有無源空間都放置到位時，有源部件將位于下一個位置。

2.活動空間 (2. Active space)

韋爾施塔特 (werkstatt)

In this page above, there are several elements in the page: menu bar buttons, drop-down arrows, drop-down tips, etc. However, the dominant black text on the screen is in the middle, which allows other elements to be placed around and designed The teacher enlarged the blank area in the middle, and then placed the most important information here, so that the user’s attention was completely focused on it.

在上面的此頁面中，頁面中包含幾個元素：菜單欄按鈕，下拉箭頭，下拉提示等。但是，屏幕上的主要黑色文本位于中間，這允許放置其他元素周圍的環境和設計教師擴大了中間的空白區域，然后將最重要的信息放置在此處，以便用戶的注意力完全集中在該區域上。

At the same time, reducing the distance between two rows of elements may be a “hidden” way. Just like the legal notices and copyright information you often see on websites. Consider the following example. The effect of “FiberSensing is an HBM Brand” is easy to ignore.

同時，減小兩行元素之間的距離可能是“隱藏”的方式。 就像您經常在網站上看到的法律聲明和版權信息一樣。 考慮以下示例。 “光纖傳感是HBM品牌”的影響很容易被忽略。

Large element blanks are often used to create primary attention or to disperse a bunch of important information.

大型元素空白通常用于引起主要關注或分散大量重要信息。

However, sometimes the blank space of small elements can also be taken in an active way. Some designers use active space to separate important quotes or paragraphs to form a paragraph of text to attract attention. This is indeed a good way to emphasize key points.

但是，有時也可以以主動方式占用小元素的空白。 一些設計師使用活動空間來分隔重要的引號或段落以形成一段文字以引起注意。 這確實是強調關鍵點的好方法。

極簡主義 (Minimalism)

The more white space you have, it can be said that the more your pages tend to be minimalist, you can avoid clutter by deleting many elements.

您擁有的空白空間越多，可以說頁面越趨于簡約，可以通過刪除許多元素來避免混亂。

Minimalist style is a design philosophy. It can be said that it is not good but not bad. It removes all the clutter that can cause visual distractions to users, and lets users focus on the important content you show. Without noise, the rest of the essence is presented in an elegant blank.

極簡風格是一種設計理念。 可以說這不是好事，但還不錯。 它刪除了所有 混亂 可能會使用戶分心，并使用戶專注于您顯示的重要內容。 在沒有噪音的情況下，精華的其余部分以優雅的空白呈現。

Minimalist style affects your website in two ways: the number of existing elements, and the high-quality atmosphere.

極簡風格會以兩種方式影響您的網站：現有元素的數量和高品質的氛圍。

1.元素數量 (1.Number of elements)

The fewer elements your page has, the more important the remaining elements of the page are.

頁面上的元素越少，頁面上其余元素越重要。

If the page has only one element, even if it curls up in the corner, it will still be the focus of your users’ attention. If your page has thousands of small elements, your users may randomly look for their points of interest, or give up because they have too many choices.

如果頁面只有一個元素，即使它在角落彎曲，它仍將是用戶關注的焦點。 如果您的頁面有成千上萬個小元素，則用戶可能會隨機尋找他們的興趣點，或者因為選擇太多而放棄。

Such a correlation, let us know that the easiest way to increase white space in your design is to reduce the number of page elements. But we know it’s easier said than done. Minimalism can be said to be applicable to any website, you will never want to fill the web page with what users don’t need. However, as a visual aesthetic, minimalist style may not be suitable for all websites, especially for content-rich websites, you would not want such a bare and sweeping picture.

這種相關性讓我們知道，增加設計中的空白的最簡單方法是減少頁面元素的數量。 但是我們知道說起來容易做起來難。 極簡主義可以說適用于任何網站，您永遠都不想用用戶不需要的內容來填充網頁。 但是，從視覺上看，極簡主義風格可能并不適合所有網站，尤其是內容豐富的網站，因此您不希望有如此裸露而又一覽無余的圖片。

When it comes to minimalism, please remember that we are not just talking about aesthetics, it is not our goal. Properly reaching a minimalist level is to streamline page elements until they are unusable. This requires a lot of testing among users and then stops when you reduce the most.

關于極簡主義，請記住，我們不僅僅是在談論美學，這也不是我們的目標。 適當地達到最低要求是精簡頁面元素，直到它們不可用為止。 這需要在用戶之間進行大量測試，然后在減少最多時停止。

沃吉 (voghi)

As in the example above, the entire page has only two clickable elements: a menu bar icon and a drop-down arrow. The Information has been streamlined on the right side of the screen. There are so few elements, so the user’s attention is focused on the very infectious picture in the middle, and the sight will be guided to the drop-down arrow.

如上例所示，整個頁面只有兩個可單擊元素：菜單欄圖標和下拉箭頭。 信息已在屏幕右側簡化。 元素很少，因此用戶的注意力集中在中間的傳染性很強的圖片上，并且瞄準具將被引導至下拉箭頭。

How you balance the importance of the elements is entirely up to you. Some pages only have a clickable link, which ensures that users go where the designer wants them to go. Some pages have multiple drop-down options for users to choose from. You can consider removing banners, highlighting content, and simplifying navigation, of course, it all depends on your brand and product.

如何平衡元素的重要性完全取決于您。 某些頁面僅具有可單擊的鏈接，可確保用戶進入設計者希望的位置。 某些頁面具有多個下拉選項供用戶選擇。 當然，您可以考慮刪除橫幅，突出顯示內容并簡化導航，這完全取決于您的品牌和產品。

2.高品質的氣氛 (2.High-quality atmosphere)

Minimalist style has now become synonymous with high-grade, it can magically create a fine, stylish and elegant atmosphere. Websites in the fashion industry tend to be minimalist in terms of digital design, but for some companies in the retail industry, similar designs are rarely seen.

極簡風格現已成為高檔的代名詞，它可以神奇地營造出精致，時尚和優雅的氛圍。 在數字設計方面，時尚行業的網站往往是極簡主義的，但是對于零售行業中的某些公司而言，很少看到類似的設計。

The high-quality atmosphere is directly related to blank space:

高質量的氣氛與空白直接相關：

• Severe blanking: Can be seen in some luxury, high-end brands.
  嚴重消隱：在某些豪華高端品牌中可以看到。
• Moderately blank: relatively balanced but still quality.
  中等空白：相對平衡，但仍然質量。
• Low white space: can be seen in some cheap, low-quality, messy display effects
  低空白：可以在一些便宜，低質量，混亂的顯示效果中看到

亞馬遜 (amazon)

You can use Amazon’s website to compare it with the one just above. Amazon’s website is cluttered and has many navigation options. Both websites sell high-end fashion products, but which one would a typical fashion customer prefer? And which rational shoppers like to chase cheap and good quality?

您可以使用亞馬遜的網站與上面的網站進行比較。 亞馬遜的網站混亂不堪，有許多導航選項。 這兩個網站都出售高端時尚產品，但是典型的時尚客戶會選擇哪個呢？ 哪些理性的購物者喜歡追求便宜和優質？

These are whitespaces applied to large and small elements, but just as important are the images used on the site. Browse the pictures used by those fashion websites and you will find that they are more artistic than the pictures used by other ordinary websites.

這些是應用于大型和小型元素的空白，但站點上使用的圖像也同樣重要。 瀏覽那些時尚網站使用的圖片，您會發現它們比其他普通網站使用的圖片更具藝術感。

In short, you still need to start by understanding your customer needs. Research your users, their characteristics, and then consider how much space to use to display your information to optimize the user experience.

簡而言之，您仍然需要從了解客戶需求開始。 研究您的用戶，他們的特征，然后考慮使用多少空間來顯示信息以優化用戶體驗。

As a visual art, design cannot ignore the most important basic principles of visual art. It needs to satisfy aesthetics and also create longer-term practical values, such as more interactions and more humane interactions.

作為視覺藝術，設計不能忽略視覺藝術最重要的基本原理。 它需要滿足美學要求，還需要創造長期的實踐價值，例如更多的互動和更多的人道互動。

For entry-level designers, doing web design is just adding an operable element of a page. But for senior designers, how do web design cleverly use white space to guide users to interact.

對于入門級設計師而言，進行網頁設計只是在添加頁面的可操作元素。 但是對于高級設計師而言，網頁設計如何巧妙地利用空白來指導用戶進行交互。