Written by Alan Smith

由艾倫·史密斯 ( Alan Smith)撰寫

Negative space is a key design element that you may come across in the fields of art, architecture, interior design, landscaping and web design. Rather than serving as awkward, empty areas with no purpose, properly implemented negative space directs a viewer’s attention and contributes to a seamless user experience.

負空間是您在藝術， 建筑 ，室內設計，美化環境和網頁設計領域可能遇到的關鍵設計元素。 正確地實現負空間可讓您毫無目的地呆在笨拙的無用區域中，而可以引導觀看者的注意力并有助于實現無縫的用戶體驗。

擺脫空白是不好的想法 (Getting Past the Idea That Blank is Bad)

Those who commission websites may use reasons such as a desire to do more with fewer pages or a desire to maximize advertising inventory, to advocate for a “more is more” website design. Unfortunately, websites that follow that approach tend to create online spaces that are difficult to read, understand, and enjoy. When approached correctly, users who reach a well-designed web page with negative space will not notice the blank areas.

那些委托網站的人可能會出于諸如用更少的頁面做更多的事情或最大化廣告庫存的愿望之類的理由來提倡“更多就是更多”的網站設計。 不幸的是，采用這種方法的網站往往會創建難以閱讀，理解和享受的在線空間。 正確使用時，訪問設計良好的網頁時帶有負空格的用戶將不會注意到空白區域。

Instead, they can easily focus on the point and purpose of the subject matter. As in many other areas of life, web design is all about striking a balance. To get the most out of a website investment, every company should consider how negative space impacts the user experience. In the majority of cases, “less is more” is the right approach.

相反，他們可以輕松地專注于主題的重點和目的。 與生活中的許多其他領域一樣，網頁設計也要保持平衡。 為了從網站投資中獲得最大收益，每家公司都應考慮負面空間如何影響用戶體驗。 在大多數情況下，“ 少即是多 ”是正確的做法。

案例：五金店網頁設計 (Case in Point: Hardware Store Web Design)

Balancing negative space is as much an art as it is a science. What works for one website may not provide the best experience for another. However, looking at two similar websites illustrates the importance of using negative space to convey key messages.

平衡負空間既是一門藝術，也是一門科學。 對于一個網站有效的方法可能無法為另一個網站提供最佳體驗。 但是，查看兩個類似的網站說明了使用負面空間來傳達關鍵信息的重要性。

The above website is filled with very bright colors, fine print, and navigational cues. The only negative space appears in the coupon-like section around certain tools. With so much going on, users who want to check out the company and see what they have to offer may have a difficult time finding what they need.

上面的網站充滿了非常鮮艷的色彩，精美的印刷品和導航提示。 唯一的負數空間出現在某些工具周圍的類似優惠券的部分。 進行了如此多的工作后，想要結帳公司并查看要提供的產品的用戶可能很難找到所需的信息。

Using the same type of store as the basis of comparison, the second approach to hardware is sleek, drawing the reader’s attention to key elements, including particular brand logos, sale items, and store information. The site contains an abundance of white space, highlighting certain visual cues. An overcrowded website design can create confusion and distraction that prevents a user from diving deeper into the content. Negative space also allows marketers to carefully craft an inviting message in a calm and focused space.

使用相同類型的商店作為比較的基礎，第二種硬件處理方法是時尚的，吸引讀者注意關鍵元素，包括特定的品牌徽標，銷售商品和商店信息。 該站點包含大量空白 ，突出了某些視覺提示。 過度擁擠的網站設計會造成混亂和分散注意力，從而阻止用戶深入研究內容。 負空間還使營銷人員可以在一個安靜而集中的空間中精心制作邀請信息。

將負空間視為主動元素的好處 (Benefits of Thinking About Negative Space as an Active Element)

Some website design elements, such as flat design and parallax scrolling, may or may not add value to the overall experience, but the strategic use of negative space is an essential component of modern web design. Keep negative space on your list of must-haves because it:

一些網站設計元素，例如平面設計和視差滾動，可能會或可能不會增加整體體驗的價值，但是負空間的戰略性使用是現代網站設計的重要組成部分。 在必不可少的清單上保留負數空格，因為：

• Creates a break in the page: When too many items or messages appear in one space, a reader may not easily discover the purpose of the page or the key information needed to take action (and all websites are designed to inspire some sort of action).

  在頁面上造成混亂 ：當一個空間中出現太多項目或消息時 ，讀者可能不會輕易發現頁面的目的或采取行動所需的關鍵信息(并且所有網站都旨在激發某種行動) 。

• Highlights a centralized message: Negative spaces give users the ability to hone in on specific items and develop a strong emotion or insight associated with the page’s message. Effectively used negative spaces can make a page more readable, without changing a font style or size.

  突出顯示一條集中的消息 ：負空格使用戶能夠磨練特定項目并形成與該頁面消息相關的強烈情感或洞察力。 有效使用負號可以使頁面更具可讀性，而無需更改字體樣式或大小。

• Directs the flow of a page: Will your reader move from the above-the-fold section of your website to a different landing page, scroll down for more information, or view elements in a certain pattern? The way a designer places negative space can subtly redirect movement, signify importance and create visual relationships between subjects on a page.

  指導頁面的流動 ：您的讀者是否會從網站的折疊部分移動到其他著陸頁，向下滾動以獲取更多信息，或以某種方式查看元素？ 設計師放置負空間的方式可以巧妙地重定向運動，表示重要性并在頁面上的主題之間建立視覺關系。

• Makes specific visual elements ‘pop’: When studying negative space, most students come across an optical illusion known as Rubin’s vase. As you can see from the image below, the use of negative space affects how your brain interprets the same subject matter. How a designer uses negative space can completely change the visual message a reader sees.

  使特定的視覺元素“流行” ：研究負空間時，大多數學生會遇到一種被稱為魯賓花瓶的錯覺。 從下圖可以看出，負空間的使用會影響大腦解釋同一主題的方式。 設計師如何使用負空間可以完全改變讀者看到的視覺信息。

While some negative space actively shapes a user’s experience, beware of empty spaces that act passively. The screen grab of the second hardware store example shows some well-placed negative space, but it also contains some passive spaces. These spaces may make a reader wonder if the website glitched as it loaded or if the web designer misplaced a line of code, creating an offset visual element. In short, passive negative space appears unprofessional — even to the untrained eye.

盡管某些消極空間會積極影響用戶的體驗，但請注意會被動起作用的空白空間。 第二個硬件商店示例的屏幕抓圖顯示了一些放置良好的負空間，但其中還包含一些被動空間。 這些空間可能使讀者懷疑網站加載時是否出現故障，或者網站設計者是否放錯了一行代碼，從而創建了偏移的視覺元素。 簡而言之，即使對于未經訓練的人來說，被動的負空間似乎也不專業。

負空間創建引人注目的網站的提示 (Tips for Creating Compelling Websites with Negative Space)

Understanding the visual impact of negative space is different from developing it within a design layout. Most laypeople can identify the effective use of negative space, but designers must have a practiced eye to create thoughtful negative space during website development. Use these tips to compose active negative space elements that support the overall design of a page:

了解負空間??的視覺影響與在設計布局中開發負空間不同。 大多數外行人都可以確定負空間的有效利用方式，但是設??計人員必須具有實踐的眼光，才能在網站開發過程中創建周到的負空間。 使用這些技巧來構成支持頁面總體設計的活動負空間元素：

1. Remember that negative is not equal to white. While negative space can appear white in the background, it can also include other non-active colors. You may notice that particularly modern websites such as Apple.com use a combination of white and light gray negative space to break up the page without losing visual interest.

   請記住，負數不等于白色 。 負空間在背景中可以顯示為白色，但也可以包含其他非活動顏色。 您可能會注意到，特別現代的網站(例如Apple.com)使用白色和淺灰色負空格的組合來破壞頁面，而不會失去視覺吸引力。

2. Take an art or photography class. Many designers start to get a feel for negative space as they work. If creating balance with negative space is difficult for you, consider taking a short art or photography class. Sometimes viewing negative spaces through a different medium can enhance the creative thinking process.

   參加藝術或攝影課 。 許多設計師在工作時開始對負空間有一種感覺。 如果您很難在負空間上保持平衡，請考慮參加短期美術或攝影課。 有時，通過不同的媒介查看負面空間可以增強創造性思維過程。

3. Look for negative space in everyday life. Identify negative space in logos on storefronts, on the websites you visit every day and in art pieces. Additionally, be on the lookout for the ineffective uses of white space — visual elements that appear too cluttered and confusing with a lack of visual flow. Try to envision how the elements would appear in a properly-balanced piece.

   在日常生活中尋找負面空間 。 在店面徽標，您每天訪問的網站上以及藝術品中找出負空間。 此外，請注意空白空間的無效使用-視覺元素顯得過于混亂和混亂，缺乏視覺流動。 嘗試設想元素將如何正確平衡。

4. Go minimalistic. Minimalism, by nature, uses negative space to create focal points. Use a few, carefully arranged website elements to create a strong emotional reaction/connection in readers. Minimalism is a particularly effective approach for designers working on content that readers may access from multiple devices with varying screen sizes.

   簡約化 。 極簡主義本質上是利用消極空間創造焦點。 使用一些精心安排的網站元素在讀者中產生強烈的情感React/聯系。 對于設計者來說，極簡主義是一種特別有效的方法，讀者可以從屏幕大小不同的多個設備訪問內容。

5. Pay attention to micro negative space. A micro negative space appears within individual design elements rather than broad spaces between elements. Line spacing and letter spacing both profoundly affect the visual experience. Text (including headers, footers, and button text) should never appear constricted and difficult to read. Navigational menus and links should also include micro negative space that enhances readability.

   注意微小的負空間 。 微小的負空間出現在各個設計元素中，而不是元素之間的寬大空間。 行距和字母間距都深刻影響視覺體驗。 文本(包括頁眉，頁腳和按鈕文本)不應顯得狹窄且難以閱讀。 導航菜單和鏈接還應包含微負片空間，以增強可讀性。

6. Layer elements in order of importance. Differentiate a value proposition from actionable information on how to get started to different product offerings with balanced negative space. Place the key messages near the top of the page and use negative spaces to guide a reader’s eye from one content asset to another.

   按重要性順序分層 。 將價值主張與關于如何開始使用的可行信息區別開來，以平衡的負空間來提供不同的產品。 將關鍵消息放在頁面頂部附近，并使用負號來引導讀者將目光從一種內容資產轉移到另一種內容資產。

7. Avoid monotony. Negative space requires balance and not necessarily symmetry. Even a website built entirely of blocks of images, such as Pinterest, will likely avoid using images of the same size. The negative space all appears even surrounding the elements, but the elements themselves vary in size. Negative spaces only work with well-designed positive spaces. Keep your positive spaces interesting, natural and layered or surrounded with negative spaces for a stunning visual display.

   避免單調 。 負空間需要平衡，而不必對稱。 即使是完全由圖像塊構成的網站，例如Pinterest ，也可能會避免使用相同大小的圖像。 負空間甚至出現在元素周圍，但元素本身的大小各不相同。 負空間只能與設計良好的正空間一起使用。 使您的正空間有趣，自然，分層或被負空間包圍，以實現令人驚嘆的視覺效果。

Negative space is not a website afterthought. It is a strategic method of enhancing visibility, readability, flow, and depth. Every website has negative space. Take advantage of yours to take your design practice to the next level. Think about how to use empty space as you create each visual element to make an effective, functional, and aesthetically pleasing web design that readers will come back to time after time.

負空間不是經過深思熟慮的網站 。 這是一種增強可見性，可讀性，流程和深度的戰略方法。 每個網站都有負數空間。 利用您的優勢將您的設計實踐提高到一個新的水平。 在創建每個視覺元素時，請考慮如何利用空白空間來制作有效，實用且美觀的網頁設計，讀者會不時地回來。

想了解更多？ (Want to learn more?)

If you’re interested in the intersection between UX and UI Design, then consider to take the online course UI Design Patterns for Successful Software and alternatively Design Thinking: The Beginner’s Guide. If, on the other hand, you want to brush up on the basics of UX and Usability, you might take the online course on User Experience (or another design topic). Good luck on your learning journey!

如果您對UX與UI設計之間的交叉點感興趣，請考慮參加在線課程“成功軟件的UI設計模式”和“ 設計思維：初學者指南” 。 另一方面，如果您想了解UX和可用性的基礎知識，則可以參加有關用戶體驗 (或其他設計主題 )的在線課程 。 祝您學習愉快！

(Lead image: Alexis via Pixabay)

(圖片： Alexis通過Pixabay )

Originally published at UsabilityGeek by Alan Smith, who is an is an out of the heart writer voicing out his take on various topics of social media, web design, mobile apps, digital marketing, entrepreneurship, startups and much more in the cutting edge digital world. He is associated with SPINX Digital a Los Angeles web design company & digital marketing agency.

最初由艾倫·史密斯 ( Alan Smith)在《 可用性》雜志上發表，他是一位發自內心的作家，他在社交媒體，網頁設計，移動應用，數字營銷，企業家精神，創業公司以及新興數字世界等諸多主題上發表自己的見解。 。 他與SPINX Digital(洛杉磯網頁設計公司和數字營銷代理)相關聯。