留白设计:您打造出色登陆页面的秘密武器

从小到大,我一直对建筑工地着迷。 我喜欢看砖头堆积,门框被测量,干墙被锤打。 我渴望看到什么都没有变成什么。

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

只有在正确的位置使用正确的材料建造完成的建筑才会看起来很棒——登陆页面也是如此。

除了潜在客户捕获表格外,每个登录页面都包含各种元素的组合。 有标题、副本、图像、客户推荐、信任印章、客户徽章、号召性用语按钮以及视频或 gif。 每个元素都发挥着让访问者转化的作用。 例如,您不能少注意副本以使您的标题变得更加引人注目,也不能忽略表单以使 CTA 按钮成为焦点。

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

当你不保持这种平衡时, 这是那种页面 你可以期待看到:

登陆页面示例

当每一个元素都有机会发光时, 这个 是个 页面类型 您可以创建:

Freshdesk 登陆页面

那么,这两个着陆页有什么区别呢? 两个页面都具有对转换进行评分所需的必要元素。 什么 Freshdesk 页面具有 TaxSlayer 页面所没有的元素是登录页面经常忽略的元素 – 空白.

到底什么是“空白”?

Jan Tschichold 有话要说 关于留白:“应被视为主动元素,而非被动背景”。

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

空白登陆页面

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

这个空间被称为“白色”,然而,它 并不总是需要是白色的. 您可以将这个空间设置为任何颜色,只要它在页面设计中看起来很自然,并有助于吸引对每个元素(尤其是您的 CTA 和表单)的注意。

您几乎可以在登录页面的任何位置包含空白,以帮助所有内容脱颖而出并引起访问者的注意。

四种留白设计

四种主要类型的留白设计

  1. 微空白:这是较小元素之间的负空间(例如图像和标题之间以及单词和字母之间的空间)。
  2. 宏空白: 这是主要元素之间的空白区域(例如标题和副本之间的空间)。
  3. 活动空白: 这种空间是有意识地添加到页面中的,以使其更有条理。 它主要是不对称的,使页面看起来动态。
  4. 被动空白: 这是自然出现的空白,不是故意添加的。 它是一行上单词之间的空间或图形周围的空间。

所有四种类型的空白对于出色的着陆页设计都是必要的,以吸引人们对着陆页元素的注意。

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

[Ready to dig into landing page design? Check out our free guide à How to Make Great Landing Pages With Crazy High Conversions]

留白设计增强可读性

通过在副本中使用空白,您可以整理文本,让访问者获得更愉快的阅读体验。 为了演示,让我们看一下这段文案 没有任何空格

文字登陆页面

你读了多少行? 还是你做了我做过的事,甚至没有尝试阅读它?

杂乱是转换的杀手; 空白就像超级英雄一样,可以使您的页面免于成为混乱的受害者。

让我们看看添加活动空格后相同文本的样子:

空白登陆页面

更好的? 如果您是板球和庞廷球迷,您甚至可能会喜欢它。

行距(又名“前导”) 对可读性有很大影响. 这是文本行之间的微小空白。 根据经验,前导越大,阅读和理解页面上的副本就越容易。

哪个段落更容易阅读?

行距登陆页面

杂乱的字母不可读; 这同样适用于前导过多的字母。 例如,人们可能会将中间有太多空格的字母误认为是单词而不是字母。

确保在副本中添加适量的空白,就像 卤素 在其登陆页面上:

卤素登陆页面

留白空间设计引导访客的视线

有了。。的帮助 的空白,你可以 为访客建立视觉层次结构 通过规定他们应该首先看到哪个元素以及需要遵循哪个元素。 空白是您的访问者首先查看您的标题,然后移动到副本,继续到表单,最后是您的号召性用语按钮的原因。

空白允许您提供每个页面元素之间的空间关系——允许您引导访问者浏览页面。

看这个 可发送的登陆页面 举个例子:

可发送登陆页面示例

页面两侧的负空间将访问者的视线引导到中间,在那里他们可以找到主要和次要标题。 这不是什么 F 和 Z 页面模式决定 ——然而由于空白,你不得不从中间开始查看页面。

白色空间设计使您的着陆页高档

空白可用于为您的登录页面增添精致和优雅的感觉。 较少的空白通常会散发出低质量的氛围,而带有大量负空间的页面则给人以高档和奢华的感觉。

这两个广告 举个例子:

黑白登陆页面

哪个看起来更高级?

登陆页面也不例外。 终极税 不会散发出精致的氛围,因为它没有使用充足的负空间:

最终税收登陆页面示例

底部有很多空白区域,但登录页面的顶部文字非常多。

这个 电子文件页面另一方面,看起来更加干净和精致,因此更优质:

电子文件登陆页面

空白优化您的潜在客户捕获表格

潜在客户捕获表单可以决定或破坏您的着陆页转化率。 如果表单设计不正确,您可能会失去准备转换但被表单关闭的访问者。 空白消除了这种风险,因为您可以轻松地格式化表单字段。

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

当你点击这个 动画页面,你看到 页面和表格如下,它有足够的空白:

动画页面

空白不是浪费的空间

尽管空白有时被称为“空白空间”,但绝不是浪费空间。 这不是您无法填写的页面部分。 这是您故意留空的页面上的空间,以便其余区域可以引起更多关注。

空白空间为您的页面元素提供了喘息的空间,因此您设计的是一个简单、复杂的页面,它有能力说服访问者进行转换——这就是所有登陆页面的创建目的。

关于作者

Fahad Muhammad 是 instapage. 作为资深的Instapage作家,他见证了行业的快速发展。 他在 Instapage 博客上写作有关着陆页示例、营销趋势、Instapage 更新和转换心理学的文章。 当他不忙于寻找登陆页面示例时,可以发现他粘在 Top Gear 的一集中。

给TA打赏
共{{data.count}}人
人已打赏

如何在网上找到:我们针对本地服务企业的 9 大提示

2023-3-15 22:47:58

WordPress 教程

如何在WordPress中轻松克隆帖子和页面

2023-3-22 19:50:01

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索