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(洛杉矶网页设计公司和数字营销代理)相关联。