留白设计:优秀落地页的秘密武器

从小到大,我一直对建筑工地很着迷。我喜欢看砖头堆起来,门框被测量,石膏板被敲打。总之对这个从无到有的过程十分着迷。

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

设计一个登陆页面很像建造一个建筑——当你开始的时候页面上什么都没有。但当你开始添加必要的元素时,你会看到一些令人惊奇的东西变得鲜活起来。

只有当你在正确的地方使用了正确的材料,完成的建筑才会看起来很棒——登陆页面也是如此。

除了客户捕获表单,每个登录页面都包含各种元素的组合。有标题,副本,图片,客户感言,信任印章,客户徽章,号召行动按钮,和视频或gif。每个元素都扮演着让访问者转换的角色。例如,你不能减少对副本的关注,这样你的标题就会变得更引人注目,你也不能忽略给CTA按钮聚光灯的表单。

所有的元素都应该在你的专用页面上有一个明显的位置,因为这是这些元素之间的平衡,有助于说服访问者转化为潜在客户/客户。

当你不保持这种平衡,你可能会看到以下页面:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

当每个元素都有机会闪耀时,这就是你可以创建的页面:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

那么,这两个登陆页面有什么区别呢?这两个页面都具有为转换评分所需的必要元素。Freshdesk页面上有而TaxSlayer页面上没有的东西,是登陆页面经常忽略的一个元素——留白。

“留白”到底是什么?

关于留白:它“应该被视为一种主动的元素,而不是被动的背景。”

留白又名负空间,是页面上未标记的任何部分,即页面上的空白。在设计术语中,空白可以定义为文本、页边距、列、图形和任何其他页面元素之间的空间。

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

正是这个开放空间让所有其他的登陆页面元素看起来更明显,并吸引了人们的注意力。说留白是将登录页面粘合在一起的粘合剂是没有错的。如果没有空格,就会留下一个混乱的页面(就像上面的TaxSlayer),不值得转化。

这个空间被称为“留白”,然而,它并不总是需要白色。您可以使用任何颜色的空间,只要它看起来与页面设计自然,并有助于吸引人们对每个元素(特别是您的CTA和表单)的注意。

你可以在登录页面的任何地方都加入空白,这样可以让所有东西都显得与众不同,吸引访问者的注意。

四种留白设计

四种主要类型的留白设计:

  1. 微空白:较小元素之间的负空间(例如图像和标题之间、单词和字母之间的空间)。
  2. 宏空白:主要元素之间的空白(如标题和正文之间的空白)。

3.主动留白:这种留白是有意识地添加到页面中,以使页面更具结构化。它主要是不对称的,使页面看起来动态。

4.被动空白:这是自然出现的空白,并不是故意添加的。它是一行字与字之间的空间或图形周围的空间。

所有四种类型的留白都是一个优秀登陆页的必需设计,以吸引人们对你的登陆页元素的注意。

负空间在登录页面设计中起着重要的作用。让我们讨论一下为什么你应该在你创建的所有登陆页面中包含这个页面元素。

留白设计可以增加文章可读性

通过在你的文本中使用空白,你能够整理文本,让访问者有一个更愉快的阅读体验。为了演示,让我们看看这段没有任何空格的排版:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

你读了几行?还是你和我一样读都没有读过?

混乱是转化杀手;留白就像一个超级英雄,让你的页面免受混乱的困扰。

让我们看看添加活动空格后的文本是什么样子的:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

效果是不是更好了?

行间距“前导”对可读性有很大影响。这是文本行与行之间的微空白。一般来说,引线越大,就越容易阅读和理解页面上的内容。

下面哪一段更容易读?

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

乱糟糟的字母让人看不清;同样的道理也适用于有太多引线的字母。

例如,人们会把中间有太多空格的字母误认为单词而不是字母。

确保你在你的拷贝中添加了适量的空白,就像Halogen在它的登陆页所做的那样:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

留白设计可以引导访问者的目光

在空格的帮助下,你可以为访问者建立一个视觉层次结构,指示他们应该先看到哪个元素,然后再看到哪个元素。这就是为什么你的访问者会首先看你的标题,然后移动到副本,进入表单,最后是你的号召行动按钮的原因。

留白可以让你提供每个页面元素之间的空间关系-允许你引导你的访问者通过页面。

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

页面两侧的负空间将访问者的视线引导到中间,在那里他们会找到主要和次要的标题。这不是F和Z页面模式所规定的,但是由于留白,您不得不从中间开始查看页面。

留白设计让你的登陆页面更高级

留白可以用来给你的登录页面增加一种复杂和优雅的感觉。较少留白空间通常会给人一种低质量的感觉,而拥有大量空白的页面则会给人一种高级和豪华的感觉。

这两个广告为例:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

哪一个看起来更贵?

登陆页面也不例外。The Ultimate Tax page没有给人一种高级的感觉,因为它没有使用足够的负空间:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

底部有很多空白,但是登陆页的顶部有很多文本。

另一方面,这个E-file page看起来更干净和复杂,因此高级:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

留白优化您的线索捕获表单

Lead capture表单极大地影响你的登陆页面转化率。如果表单设计不当,您可能会失去那些即将转化但被表单拒之门外的访问者。留白可以消除这种风险,因为可以方便地格式化表单字段。

格式塔原则解释说,游客倾向于忽略彼此接近的元素。您可以通过在字段之间留出足够的空白来避免这种情况,以便访问者在输入信息时不会感到困惑。

当您点击此Animoto页面时,您会看到下面的页面和表格,其中有足够的留白:

留白设计:优秀落地页的秘密武器
留白设计:优秀落地页的秘密武器

留白绝不是浪费的空间

尽管留白有时被称为“空白空间”,但它绝不是浪费空间。这不是你无法填满的部分,而是你故意在页面上留下的空白,以便其他区域能够吸引更多的注意力。

空白空间让你的页面元素有呼吸的空间,所以你的设计是一个简单的,复杂的页面,有能力说服访客转化——这是所有登陆页面创建的目的。