什么是空間？ (What is Space?)

Space is the dimension of height, depth and width within which all things exist and move. Space or Empty space or White space or Negative space are alias given to describe intensional spaces made in design. In a

空間是萬物存在和移動的高度，深度和寬度的維度。 空格或空白空間或空白或負空格是別名，用于描述設計中的內涵空間。 在一個

Negative space creates a vacuum of content, which draws more importance and adheres attention to the existing content. Not only these they helps in readability, provide feedback and increase usability. These spaces creates room to breath and users feel comfortable looking or exploring it.

負空間會造成內容真空，這將引起更大的重視并持續關注現有內容。 它們不僅有助于提高可讀性，提供反饋并提高可用性。 這些空間為呼吸創造了空間，用戶在尋找或探索時都感到舒適。

“Good visual hierarchy isn’t about wild and crazy graphics or the newest Photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.”

“良好的視覺層次結構與瘋狂的圖形或最新的Photoshop過濾器無關，而在于以對日常站點訪問者可用，可訪問且合乎邏輯的方式組織信息。”

Brandon Jones — Former Editor of Tuts+

布蘭登·瓊斯 ( Brandon Jones) -Tuts +的前編輯

Space takes its major role in other field of design as well like Architecture. Architects have their in-depth analysis of spaces which is widely called Space Planning. Its a in-depth analysis of how floor space is used without wasting space. But in context of digital spaces we just focus on how we do our layouts right.

空間需要它的主要作用在設計的其他方面，以及類似的結構 。 建筑師對空間進行了深入的分析，這被稱為空間規劃。 它深入分析了如何使用地板空間而不浪費空間。 但是在數字空間的背景下，我們只專注于如何正確地進行布局。

In Graphic design, we generally see the term Negative space used. The graphical element used in graphics with any hidden shapes or identity inside design which can completely change the aesthetic of the element designed.

在圖形設計中 ，我們通常會看到術語負空間。 圖形中使用的圖形元素，在設計內部具有任何隱藏的形狀或標識，可以完全改變設計元素的美感。

If everything yells for your viewer’s attention , nothing is heard.- Aarron Walter “Design for Emotion”

如果一切都引起觀眾的注意，那么什么也聽不見。-Aarron Walter“情感設計”

空間類型 (Types of Space)

The types of spaces in digital world can be classified by functionality and size. According to functionality it can be active or passive and according to size it can be micro and macro white space as well.

數字世界中的空間類型可以按功能和大小進行分類。 根據功能，它可以是主動或被動的，根據大小，它也可以是微觀和宏觀的空白。

Micro Space: It is the space between the small elements like letters, lines, icons, forms, paragraph, buttons and graphical element. Adding micro space whenever our design needs a little more breathing room but you don’t have enough canvas left to work with. Tweaking the amount of space between our smallest elements will help us to express clearly and become noticeable which ultimately improve our design and look rather less over cluttered.

微小空間：它是小元素之間的空間，如字母，線條，圖標，表單，段落，按鈕和圖形元素。 只要我們的設計需要更多的呼吸空間，但您沒有足夠的畫布可以使用時，就可以添加微空間。 調整最小元素之間的空間量將有助于我們清晰表達并變得引人注目，這最終改善了我們的設計，并且看上去不太凌亂。

Macro Space:It is the term given to larger volumes of white space. The space between bigger elements like text columns and graphics. It also refers to paddings and margins. These areas have a greater impact on the user’s journey through our product and macro space is often pretty accurately planned. It separates and groups elements giving visual clues of functionality and uplifts readability.

宏空間：這是賦予大量空白空間的術語。 較大的元素(如文本列和圖形)之間的空間。 它還指填充和邊距。 這些區域對用戶使用我們產品的旅程產生更大的影響，并且通常非常準確地計劃了宏空間。 它對元素進行了分離和分組，從而提供了可視化的功能線索并提升了可讀性。

Active White Space:This is the space that you make a conscious effort to add to your design for emphasis and structure. Active white space is often asymmetrical, which makes the design look more dynamic and active. It draws a user’s attention and to emphasize certain elements like a headline, logo or graphic inside our design.

活動空白空間：這是您有意識地努力添加到設計中以強調和結構化的空間。 活動空白通常是不對稱的，這使設計看起來更加動態和活躍。 它引起了用戶的注意，并強調了我們設計中的某些元素，例如標題，徽標或圖形。

Passive White Space:The space between small objects that goes unnoticed. The designers use it to create texts or arrange paragraphs or icons. It generally occurs naturally, such as the area between words on a line or the space surrounding a logo or graphic element. Though it goes without being noticed, this white space is intentionally added there in a very subtle way, to allow the eye to easily read the design/text.

被動空白：小對象之間的空間不被注意。 設計師使用它來創建文本或安排段落或圖標。 它通常是自然發生的，例如行中單詞之間的區域或徽標或圖形元素周圍的空間。 盡管沒有引起注意，但還是有意以非常細微的方式在其中添加了此空白區域，以使眼睛能夠輕松閱讀設計/文本。

空間的重要性 (Importance of Space)

Designers love it, website owners want to fill it. Whitespace seems to be one of the most controversial aspects of design.

設計師喜歡它，網站所有者想要填充它。 空白似乎是設計中最具爭議的方面之一。

— Paul Boag

保羅·波格

The importance of space are countless. The problem I mostly face during times is lack of realisation among business stakeholders is they want to squeeze more into the screen as mentioned in the quote.

空間的重要性無數。 我有時遇到的主要問題是業務涉眾之間缺乏意識到，因為他們想像報價中所提到的那樣擠進屏幕。

1. Separation and Grouping of elements can be clearly seen and users can easily distinguish and differentiate between elements based on proximity.

   可以清楚地看到元素的分離和分組 ，并且用戶可以輕松地基于接近度來區分和區分元素。

2. Adds luxury and sophistication to the element as a whole. White space can actually become a central element in a design when it’s used to create a certain mood or look.

   整體上增加了奢華感和精致感 。 當空白空間用于營造某種氛圍或外觀時，實際上可以成為設計中的核心元素。

3. Adding emphasis to the design can be really helpful with space. The negative space is giving you visual clues about where you should be looking, providing plenty of buffer room around an element so that your brain can quickly process it.

   在設計上增加重點對于節省空間確實很有幫助。 負空間為您提供視覺提示，讓您知道應該去哪里，并在元素周圍提供足夠的緩沖空間，以便大腦可以快速處理它。

4. Spaces invokes imagination, when we see space in design, it allows us to imagine and roam free.

   空間激發了想象力 ，當我們看到設計中的空間時，它使我們能夠自由想象和漫游。

5. It creates visual hierarchy to the elements when gaps are created to ensure that the users can find and digest information presented more easily.

   當創建間隙時，它會為元素創建視覺層次結構 ，以確保用戶可以更輕松地查找和消化所呈現的信息。

6. Enhancing the usability in a sense where users will be able to easily read and comprehend the content you want to serve them. They should not be intimidated by a large amount of text — when its spacing is not big enough, it will look difficult to comprehend and it will result in a higher rate of leaving the website or application. Whereas enough white space will prevent that happening.

   從某種意義上說， 增強了可用性 ，使用戶能夠輕松地閱讀和理解您想要為他們提供的內容。 它們不應被大量文本嚇倒–當其間距不夠大時，將難以理解，并且導致離開網站或應用程序的比率更高。 而足夠的空白將阻止這種情況的發生。

7. More spaces makes the experience of the user more lightweight, easy and comfortable to explore.

   更多的空間使用戶的體驗更輕便，易于探索。

明顯的用法 (Noticeable Usage)

The industry leaders and leading tech companies have been using this actively to get the advantages provided by the power of space. Let’s see some of the example in real world.

行業領導者和領先的科技公司一直在積極使用此功能，以獲取太空力量所提供的優勢。 讓我們看看現實世界中的一些例子。

Zendesk has awesome use of white space into their design despite use of awesome color combination. We can see that our eyes flows into the design and it’s obvious to see the text with high visual weight and spaces creates more attention to it.

盡管使用了很棒的色彩組合， Zendesk在設計中還是大量使用了白色空間。 我們可以看到我們的眼睛進入了設計，很明顯看到具有高視覺重量和空間的文本會引起更多關注。

Dropbox have moved to a vast surprising rebrand. The colors and whitespaces used to make the content separate out from each other is awesome and well achieved. The separated blocks help keep the copy contained while still providing ample breathing room for the content, we’ll see whitespace is also used on a micro-level through the line-height, font size, and kerning are all taken into consideration.

Dropbox已經改頭換面了。 用來使內容彼此分離的顏色和空白很棒，而且效果很好。 分隔的塊有助于保留副本，同時仍為內容提供足夠的喘息空間，我們將在行高度，字體大小和字距調整等所有方面都考慮到了空格的空白。

Apple are the early adopters of whitespace. The screen of apple would always have more focus to product and declutter the UI with empty spaces. Also one of the most noticeable thing they do is interactivity as well.

蘋果是空白的最早采用者。 蘋果的屏幕將始終將更多的精力放在產品上，并用空白填充UI。 他們所做的最引人注目的事情之一就是交互性。

Not only does Apple execute active whitespace throughout the website well by placing imagery strategically to draw the users eye to specific elements down the page, but the company also uses passive whitespace to guide the user through the content without a hitch.

蘋果公司不僅可以通過戰略性地放置圖像來吸引用戶注意頁面上的特定元素，從而在整個網站上很好地執行主動空白 ，而且該公司還使用被動空白來引導用戶瀏覽內容而毫不費力。

WealthSimple homepage is just to its notch. Its so simple and pleasure to navigate through the screens and also an excellent example of how to use whitespace as well. The angles used in images also provides generous whitespace. Users eyes are also drawn into the animation used and distinguished CTA sections.

WealthSimple主頁即將到位 。 在屏幕上導航是如此簡單和愉快，也是如何使用空白的一個很好的例子。 圖像中使用的角度還提供了寬敞的空白。 用戶的眼睛也被吸引到所使用的動畫和出色的CTA部分中。

As a designer we cannot neglect one of its core fundamental principle. It’s really useful for the basic functions of a site or app like readability and navigation. But making smart use of whitespace can drive to success of the product and make users happy in making the interaction with the product.

作為設計師，我們不能忽略其核心基本原則之一。 對于網站或應用程序的基本功能(如可讀性和導航)確實非常有用。 但是，聰明地使用空白可以推動產品成功，并使用戶高興地與產品進行交互。

So, we should bear in mind that the power of white space goes far beyond aesthetics and can be strategically used to further more enhance business related goals and making users engaged.

因此，我們應該記住，空白的作用遠不止于美學，而且可以在戰略上用于進一步提高與業務相關的目標并吸引用戶的參與。

參考閱讀 (Reference Reading)