WordPress divi主题

如何使用负空间创建令人惊叹的网站

by | May 11, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

网站和应用程序具有必须共存的各种视觉元素——按钮、列、图标、图像、线条、媒体和排版。 所有这些元素都需要一个画布(空白网页),而那个画布 需要 空格,即负数或空白。 没有它,观众的眼睛无法处理它所看到的东西。

google广告开户

订阅我们的 Youtube 频道

什么是负空间?

正空间是作品中充满主题或其他焦点的部分。 负空间占据了其余部分。 它可能是空白的或白色的,在颜色或设计上形成对比,一个微妙的背景图像——无论它是什么,它都会让人感觉空虚而不是充满或杂乱无章。 然而,仅仅因为负空间是空心的,并不意味着它不重要——它引起了对正空间的关注,有时甚至在不同的角度看也变成了正空间本身。

负空间的例子

负空间——及其对应的正空间——存在于各种艺术和设计中,包括网页设计。 让我们看看联邦快递的标志。 你看到紫色和橙色的字母,对吧? 但是,在空白处有一个箭头:

空白

隐藏的 FedEx 箭头使用负空间的方式与绘图和绘画类似——创建轮廓就像创建正空间一样。 在这样的示例中,创建负空间并不仅仅是因为它是正空间 不是.

NBC孔雀做同样的事情:

空白

而负空间的点是 通常 把重点放在积极的空间,它有时 变成 专注于巧妙的设计。 这是另一个例子——看看狼的牙齿是如何形成一棵树的:

WordPress divi主题

空白

资料来源:Guillaume Morellec on Behance

有一个术语:图地反转。 它基本上意味着前景色和背景色交换位置以改变视角和解释。 如果您对此感兴趣,请查看 MC Escher 的作品,尤其是他的变形版画。

https://www.mcescher.com/gallery/transformation-prints/

负空间在摄影中扮演着同样的角色。 看看我为表弟的儿子朱利安拍摄的这张照片。 黑色背景将所有焦点放在他身上:

空白

你可以在自然界中找到负空间,比如花瓣之间的空间,在功能设计中,比如通过咖啡杯把手的空间。

空白

资料来源:不飞溅

空白

fiverr建站WordPress程序员

资料来源:不飞溅

我们也在我们的网站上使用它。 我们的主页有大量信息,但由于我们将其隔开的方式,它并没有压倒一切。 尽管背景有一些颜色和一些形状可以添加到设计中,但它绝不会分散注意力——它仍然给人一种空旷而不乏味的感觉( 它是品牌的)。

空白

负空间的类型

负空间有几种类型。 微观和宏观是指构图中负空间的大小。 主动和被动是指这些区域为用户做了什么。

微观与宏观负空间

微负空间是指元素之间的小空间——文本行之间的间距或导航菜单中链接之间的区域。 这会影响内容对读者的可读性。 如果行与行之间没有足够的空间或文本超出边距,用户将很难阅读和理解它。

独立站选品工具

宏观负空间较大; 它是布局周围的空间和大型设计元素之间的空间。 一个例子是内容块之间的区域。 容纳整个设计的是容器的空白部分。

空白

具有少量宏观负空间的网站往往信息量很大。 具有大量宏观负空间的网站通常是极简主义或展示奢华的。 第一个例子是小宏观负空间,第二个例子是大宏观负空间:

空白

空白

高质量外链购买

主动与被动负空间

积极的负空间增加了页面结构,改善了内容的流动,并引导用户去你想让他们去的地方。 被动的负空间改善了网站的外观,但不会让用户通过任何特定的流程。 当空间偏离中心且不对称时,它通常是活跃的。 当它平衡和对称时,它通常是被动的——它引起的运动较少,这不会迫使用户以某种方式看待它。 这是一个主动负空间的例子:

空白

这是一个被动负空间的例子:

空白

负空间和构图

负空间对构图很重要,原因如下:

JasperAI 10000字免费额度试用
  • 您需要查看构图中的空间以使其保持均匀。
  • 它还允许您处理设计中不同对象之间的关系。
  • 在网页设计中,它可以发挥重要作用,让人们留在您的页面上。
  • 元素周围的空间量决定了元素的焦点程度——更多的空间意味着更多的焦点。

选择负空间和正空间的正确平衡

您使用多少负面和正面空间将取决于您想要的外观以及您想要在观众中唤起什么。

  • 如果你想要一个美观的设计,你可能会使用等量的负空间和正空间。
  • 对于故意看起来很鲜明和极简主义的设计,你会选择更多的负空间。
  • 为了看起来压倒性和面对面,您可以选择更多积极的空间。

设计师必须玩弄间距,直到他们为品牌和网站的预期目的取得适当的平衡。

用负空间整理文本繁重的网站

当您必须将大量信息挤在一个页面上时,找出放置负空间的位置变得很棘手——尤其是如果该信息是大量的文本,这可能看起来很快就会变得混乱。 HostingDude 是太多积极空间的一个很好的例子:

空白

另一方面,《纽约时报》已经想出了如何在不让你眼花缭乱的情况下将他们的新闻打包在他们的主页上,这一切都归功于间距(和颜色选择)。 虽然宏观空间没有太多空间,但他们利用了微观空间:

WordPress备份工具updrafplus

空白

尽管 HostingDude 上的元素更接近,但由于它们之间的额外空间,纽约时报网站上的元素看起来更加统一。 眼睛更容易理解页面,这使它具有更完整、更有凝聚力的设计。 当眼睛有机会休息时,它就能更好地吸收所看到的东西。 负空间相信少即是多。

用负空间分解文本

您已经看到设计师如何创建一个美观、文字丰富的主页,但是较长的文本块本身呢? 混合短段落和长段落、加粗标题、创建列表和在整篇文章中添加媒体都有助于在单词周围建立负面空间,使其更吸引读者。 外观很重要,即使是复制品,伟大的设计师也会考虑到这一点。

向客户解释负空间的意义

网站设计师可能会与客户就负面空间发生冲突。 客户看到了更大的空间来获取重要的、赚钱的信息。 他们觉得空白是浪费空间。 另一方面,设计师看到眼睛需要实际吸收已经存在的信息的视觉中断。 他们知道 全部 网站上的空间很重要,即使是没有内容的空间。

这就是模型和原型制作工具派上用场的地方。 向客户展示他们网站的两个版本,一个具有令人愉悦的负空间,另一个具有超载的正空间。 让他们并排查看网站,并让他们一起玩。 我的猜测是,他们会很轻松地浏览设计良好的网站,而对设计不佳的网站感到迷失。

包起来

网站有很多不同的元素,如果你想让这些元素和谐共处并吸引观众,你需要在它们周围留出空白。 您使用的空白数量及其功能取决于(a)您的品牌和(b)您希望用户采取的操作。 您也可以利用空白来获得创意,例如通过反转颜色或使用负空间绘图以有趣或令人瞠目结舌的方式定义它。

无论你采取什么方法,留白都应该让人感觉平衡——但这并不一定意味着对称。 相反,这意味着元素存在于页面上,不会相互竞争,并且会吸引您希望它们拥有的注意力类型。 对于浏览者而言,平衡意味着能够在浏览网站时不会感到困惑或不知所措。

尝试使用您网站上的空白区域。 添加一些,取出一些。 减少宏观,增加微观,反之亦然。 测试某些元素周围更多或更少的空白如何鼓励用户采取行动。 留白的美妙之处在于它是一种艺术技巧,这意味着没有一成不变的规则。

设计旅游网站? 您可能会使用大量的宏观空间。 查看我们的旅游网站 Divi 儿童主题综述。

特色图片来自 StockVector / Shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题