网页布局中的负空间:指南

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

截图负空间通常被误解为在某些需要简单美学的设计中实现的工具。然而,这实际上是你应该注意的,并且在你所创造的每一个设计中都要仔细构造。本指南讨论了什么是负空间,以及如何有效地使用它来分析和改进您的设计。

什么是负空间?

负空间,也称为空白,可以粗略地定义为页面中不被内容占据的区域。更恰当地说,它是特定项目之间的空间在页面上。

负空间必须是白色的,甚至是纯色的。它可以包含渐变、图案或背景对象。在下面的示例中,您将看到它包含复杂的图形内容,但它仍然在标题和搜索栏之间使用了负空格。

截图

负空间不是极简主义

与普遍的误解相反,正确使用负空间具有重要意义与极简主义无关.的确,极简设计的特点是大量的负空间,但即使是最繁忙的设计也有效或无效地实现了负空间。

为什么负空间在网页布局中很重要?

没有绝对的规则可以将好的设计和坏的设计区分开来。然而,在追求一个强大的布局时,有许多粗略的指导方针和一般原则可以遵循。

设计网页布局包括将不同的对象以一种吸引人的、逻辑的和功能的方式进行排列。要记住的关键概念是,设计一个网页布局远远超出了吸引力设计元素你使用。你可以展示由世界上最有才华的艺术家制作的漂亮的艺术作品,但仍然有一个糟糕的设计和不吸引人的网页设计。

和元素的美感一样重要的是每个元素所占用的物理空间与页面上的其他项目相关。如果你从未认真学习过设计理论,那么你可能会凭直觉来定位物体,而不真正知道你为什么要这么做。然而,就像许多技能一样,如果你想提高,你应该努力把你的直觉能力转化为明确的知识。

这将帮助你克服设计规则,并确定在特定布局中什么是有效的,什么是无效的。它将帮助你合理化为什么事情是这样的。你必须学会逻辑分析复杂和简单的物品排列,并识别和使用负空间是这门学科的关键。

学会看待消极空间

为了有效地利用留空区域,你必须重新训练你的大脑,不仅要看网页上的内容,还要看网页上的内容内容的倒数.下面的高脚杯/脸图是一个老生常谈的例子。你可以欺骗你的大脑对图像做出两种截然不同的解释。

你会看到一个酒杯或者是两个人的脸看着对方。截图

Logo设计中的负空间

许多标识设计师已经掌握了负空间的使用,并利用这一概念创造了一些优秀的视觉双关语。其中最著名的或许是联邦快递的标志,在“e”和“x”之间有一个隐藏的箭头。截图这类logo设计中我最喜欢的一个例子是下面这个极好的logo,它混合了正负形状,创造了一个高尔夫球手和一个斯巴达人的头。

截图上面的例子只是为了让你的大脑准备好开始思考负面空间,而不是专注于内容。在网页布局中,负间距很少被如此巧妙地使用,更多地是用于物体之间的简单间距。

简化设计到基本形状,以看到负空间

掌握在网页布局中观察和使用负空间的艺术最简单的方法是简化你的布局到基本形状,并检查对象的空间关系。例如,让我们以下面的设计为例,并将此方法应用于它。 截图为了消除所有不必要的干扰,我们将把它转换为黑白,并将所有的对象减少为简单的矩形。

截图现在我们可以快速轻松地在心理上清楚地区分内容和负面空间。记住,除了黑色区域外,还要注意白色区域的形状。强大的布局是微妙的,一切都在间隙中。

如您所见,这种设计实际上只使用了很少的负空间。不要让任何人告诉你这是一件坏事。良好的布局不是由负空间的大小决定的,但是分布它。

例如,注意到上面的复杂设计是如何在物体之间有一个精心构造的负空间。独特的对象被赋予了相似的间距,而对象组被放置在更紧密的一起。这就是的概念接近

简单地说,如果页面上有两个项目属于彼此从概念上讲,把它们放在更靠近的地方而不是其他物体。从视觉上来说,如果页面上的对象间隔相等,那么打破这种趋势的项目就会脱颖而出。截图再次强调,这似乎是显而易见的,但这里的关键是在你自己的设计中真正开始注意这些概念。

分析与改进负空间

现在我们已经概述了简化设计的方法,让我们应用这个技术来看看是否可以改进布局。我最近被要求评论一个网页设计这将是一个完美的例子。当我告诉设计师我总体上喜欢他的设计,但认为他对留白的使用需要改进,他对我的意思很困惑。

为了说明这一点,我在下面重新创建了基本布局。截图这是一个很好的例子,说明了为什么用大量的空白填充你的设计并不总是一个好主意。上面的布局利用了大量的空白——以至于设计师不知道如何处理这些空白。

让我们像之前的设计一样使用简单的形状来分解它。截图如您所见,这使得发现问题区域非常容易。这一页上几乎所有东西的分布都很奇怪。

大而不均等的差距分散了你的注意力,而不是重新集中。此外,许多元素都挤在一个区域的一侧,创造了一个不对称的设计。毫无疑问,设计师试图复制他以前见过的布局,但未能将任何逻辑应用到元素的间距上。

有什么问题吗?

让我们来看看这个设计中负空间的一些问题。截图上面的图表仅仅指出了这种布局的几个问题。

如您所见,标题中的对象没有对齐。此外,页面顶部和标题底部之间的负空间对于它所包含的稀疏元素来说太大了。此外,截图(在布局的右侧)看起来空间小得奇怪。

在对象周围使用空格以更好地吸引您的注意力是有很强的理由的,但这种技术在这种情况下就是不起作用,因为页面太复杂了,这种方法无法有效地工作。最后,标题和子拷贝没有与左上角的logo对齐,可以进行一些大小调整,以更好地利用它们所在的空间。

修复的问题

保持基本的线框设计,调整元素的大小和位置,以解决上述问题。试着密切关注页面上所有的间隔,这些间隔的大小应该是相似的,当你在视觉上使用相似性连接不同的元素时,要打破这种趋势。在这里,我们看到一个更有逻辑的负空间分布。

标题区域被缩小,其中的元素在空间中垂直居中。截图截图和标题已被放大,以消除尴尬的空白,并给页面明确的重点领域。子副本下面的区域看起来有点空,所以在这里添加了一个元素来帮助消化空间(注意在下面的截图中,这通过添加一个按钮创造了功能优势)。

下面是我们将更改应用到实际布局时的示例。截图

多不一定比少好

注意页上的负号空间实际上已经减少整体。不要将此误解为减少负空间总是一件好事,在很多情况下,事实恰恰相反。有效利用空间不是数量的问题。

“多比少好”),这是一个合理利用的问题。许多关于负空间的讨论往往错误地只关注于需要增加负空间的情况,并倾向于将最小的布局标榜为糟糕设计的万灵药。实际上,改进你的布局意味着分析当前金额而且适当性然后决定哪些区域的空间太多,哪些区域的空间太少。

这样做,你就是在优化网站的用户体验

野外的负空间

为了结束我们对网页布局中的负空间的讨论,让我们来看看一些网站,它们以完全不同的方式使用负空间来达到特定的美学效果。

宽,开放空间

正确使用大量固体负空间的设计通常会显得有档次和高档。简单、整洁的布局使内容易于在视觉上进行排序,非常适合突出显示页面的特定区域,如产品图片或JavaScript滑块。截图 截图 截图

100%的有机

并不是所有的空白都严格按照上面的指导原则进行结构。有机设计专门打破这些规则,为设计提供自然的随机性。记住要看差距,而不是内容。

以下设计的特点是不规则的间隔而且对象的大小调整在页面上。这种方法给人一种非正式甚至有趣的感觉,特别适合有大量插图的网站。 截图 截图

繁忙空间即负空间

有些设计师用漩涡、文字、复杂的艺术品和其他随机元素填充空间的每一个角落和缝隙。如果你仔细观察,你会发现这个页面仍然包含一个底层结构,主要内容和大量的负空间。不同的是负空间被复杂的细节所掩盖为页面添加视觉趣味。

截图 截图 截图

网格布局中的负空间

最后一种布局使用严格的空白分布。基于网格的布局消除元素之间间隙大小的大多数变化.这对于在一个相当小的空间中以一种有规律、有系统的方式组织大量内容是非常理想的。

截图 截图 截图 截图

对负空间的闭合思考

总而言之,负空间不是从你的魔术包中取出的东西。这是每一个设计的主要功能,它在很大程度上决定了页面的阅读方式以及它对观看者的影响类型。学会看到和使用负空间是创建强大的、一致的、具有清晰视觉层次的布局的关键。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!