11 步登陆页面布局流程，实现更多转化 [2022]

平均着陆页转化率徘徊在 10% 左右。

不错，考虑到平均网站转化率徘徊在 3% 左右。

还是……10%？

我们可以做得更好。

这一切都始于更好的登陆页面布局。

真相？ 虽然设计一个高转化率的着陆页布局可能需要一点科学知识，但这绝对不是火箭科学。 在本文中，我们将证明这一点。

如何？

通过一劳永逸地揭开登陆页面设计的神秘面纱，并将登陆页面布局简化为 11 个简单的步骤。

我们还将分享 15 个我们最喜欢的完整着陆页布局，以供您获取灵感（和滑动文件）。

让我们开始吧。

经过多年的实践，10000多次转化率优化实验，无数的胜负，我们发现每一个高转化的落地页布局至少包含以下11个步骤：

1. 从创意简介开始
2. 收集副本
3. 定义您的信息架构（结构）
4. 建立视觉层次
5. 注意比例尽量接近1:1
6. 留下不可磨灭的第一印象（首屏）
7. 将独特的资产融入您的设计
8. 使用视觉辅助工具添加上下文
9. 支持功能的好处
10. 使用社会证明验证索赔
11. 再说一遍，但不同（页面底部）

根据着陆页类型，布局会有所不同（下一节将详细介绍）。 但是请考虑这 11 个步骤，以创建高质量的着陆页用户体验，无论是哪种类型。

与任何具有设计元素的东西一样，您的目标网页设计也需要一个盒子来发挥创意。

输入：创意简介。

大多数机构和企业都会破坏创意简报或完全排除它。

大错。

将创意简报想象成蓝图。 它复活了护栏，照亮了前进的道路，定义了目标，并作为设计师、文案和项目经理的单一事实来源发挥作用​​。

你的创意简介应该包括什么？

Get/Who/To/By（Julian Cole 的赞美）：

大多数使用 Get/Who/To/By 广告创意简要模板。 但它也非常适用于网页或着陆页广告素材。

• 获取：描述将遇到您的目标网页的目标受众
• 谁：描述您的目标受众面临的核心问题（不是猜测或直觉，而是在研究过程中发现的真实消费者问题）
• To：描述您希望目标受众在遇到您的目标网页时如何响应（即，这会让他们有什么感觉？您的转化目标是什么？免费试用？潜在客户开发？即时销售？更多下载？）
• 作者：描述您想要传达的信息以及将激发行动的价值主张

就是这样。

例如，我们想要……

• 获得年度营销预算不超过 30 万美元的中小型 SaaS 企业……
• 由于预算限制和人才获取而未能扩大绩效营销的...
• 报名参加免费咨询……
• 通过向他们展示我们的代理机构可以将转化率提高 25%，将每次转化成本 (CPA) 降低 25%，并将人员配备减少 18%

轰隆隆。

只有在您清楚地阐明了受众、问题、目标和价值主张之后，参与其中的每个人才能协同工作，以实现有意义的目标网页设计。

现在是时候开始设计了。 嗯，几乎……

我不会详细说明这一点，因为这篇文章是关于设计一个高转换的着陆页布局，而不是一个高转换的标题或正文段落。 （您可以在我们的登录页面标题博客中阅读如何做到这一点。）

但我把这一步放在第二位是为了提醒你，文字几乎总是应该在设计之前出现（对不起，平面设计师）。

为什么？

好吧，还记得我们如何谈论创建一个在其中发挥创造力的盒子吗？

如果您的创意简介（目标受众、问题陈述、目标、信息）充当盒子的框架，那么您的副本充当将其固定在一起的钉子和螺钉。

文案决定了大小、结构、空间和艺术方向。

设计师操纵文本的大小或位置比文案作者操纵您的信息以适应设计要容易（且明智）得多。 这就是为什么来自 Unbounce 或 LeadPages 等登陆页面构建器的免费登陆页面模板更容易表现不佳的原因。

言归正传，现在是时候选择布局的整体结构了，也就是你的信息架构。

在组织页面上的信息时，您有两个主要选择：

• F形
• Z形

F 形图案是网上最流行的信息层次结构。

并且有充分的理由。

根据一项使用眼动追踪软件的研究，大多数人会自然而然地从上到下阅读 F 形的页面。

对文本丰富的登录页面使用 F 形层次结构。

Z 形图案因其易于遵循的自上而下的锯齿形图案而位居第二。 为了使 Z 形图案起作用，它使用空白作为黄砖路，引导访问者的视线向下浏览页面。

为视觉丰富的登陆页面使用 Z 形层次结构。

您的视觉层次结构通过帮助访问者轻松浏览您的登录页面并强调某些部分而不是其他部分来支持您的信息架构。

如何？

• 对比度：使用对比色或阴影和色调可以微妙地提醒某些对象比其他对象更重要
• 比例：大、粗体标题与中等、半粗体副标题与轻段落文本
• 平衡：平衡的部分表示各部分之间的平等； 不平衡的部分表明一个部分（占用更多空间的部分）比另一部分更重要
• 重复：保持一致（无论您选择什么，通过在整个页面中重复您的视觉层次结构来使您的目标网页布局易于学习）

如果没有明确定义的视觉层次结构，任何着陆页设计都是不完整的。

为着陆页布局开发视觉层次结构的最佳方法是采用您的网站或品牌已经使用的相同视觉层次结构。

关注率是指页面上的链接数量与转化目标数量的比较。

例如，如果您的目标网页只有一个转化目标（例如免费试用）和一个链接（CTA 按钮），则关注比率为 1:1。

为什么 1:1 是最佳的？

没有分心。

每个向您的目标网页发送流量的广告系列都应该有一个目标，就像您的目标网页应该有一个目标一样。 就是这样。

添加不必要的导航链接、页脚链接或社交媒体图标会造成漏水管道。

设计着陆页时，请保持页眉和页脚干净； 不包括导航链接或页脚链接（条款和隐私政策除外）。

让访问者的注意力集中在一个目标上。

例如，请注意这个 Spotify 登陆器只有一个主要链接：在其 CTA 上转换的链接。 就是这样。

高质量的登陆页面设计坚持介绍：首屏。

首屏是指访问者在向下滚动之前首次登陆您的页面时看到的登陆页面的一部分。

例如，查看我们主页的首屏部分：

尽管许多访问者不会单独在折叠部分上方进行转换（他们需要向下滚动以收集更多信息），但通过包含所有基本元素来设计它，就好像他们可以：

• 标题：您的目标网页标题应该解释您的报价、定义您的利基并吸引您的访问者。
• 副标题：您的着陆页副标题应为您的标题添加上下文和详细信息。 如果你的标题描述了你打算创造什么价值，你的副标题应该解释你打算如何创造它。
• 英雄镜头：您的着陆页英雄镜头（主要视觉效果）应该为您的报价添加上下文。 不要使用抽象的形状或设计来填充空间； 相反，在现实生活中向访问者展示您的产品或服务（我们的服务就是我们的员工，这就是为什么我们在首屏展示米切尔丑陋的杯子）
• CTA：您的着陆页 CTA 副本应通过调侃承诺的土地和处理任何最后一刻的反对来吸引点击。
• 表单（如果适用）：您的登录页面表单需要做很多事情（因此请单击超链接并阅读全文）。 只需知道每个可靠的潜在客户捕获页面都需要将表单放在首屏的前面和中间，每个人都可以轻松地填写它。

独特资产是指您品牌的独特代码：徽标、颜色、吉祥物、风格、声音、字体等。

为什么它们如此重要？

来玩个游戏…

下面这个是哪个牌子的？

现在，下面是哪个品牌？

品牌 1： Mailchimp。

品牌2：团队合作。

即使没有徽标，你们中的大多数人也会因为其独特的黄色背景、视觉风格和字体二重奏而认出 Mailchimp。

关于第二个可能无法说同样的话。 事实上，你们中的大多数人可能会在 Teamwork 中摸不着头脑，因为它们的外观、声音和感觉都与其他所有项目管理软件一样。

总之，独特的资产很重要，因为它们创造了熟悉度。

很有可能登陆您的设计的人可能不会记得您的品牌名称，但一旦他们看到您的独特资产就会想起它们。 因此，将它们烘焙到您的目标网页设计布局中。

这显然意味着您首先需要拥有不同的资产，而你们中的许多人可能没有。 在这种情况下，请咨询您的品牌经理并开始编写您的品牌。

太多的登陆页面布局使用视觉效果作为空间填充物。

无论是原始图形、屏幕截图还是插图，都不要为了填补空白而花费时间和资源来制作视觉效果。 相反，使用它们为您的单词添加上下文和含义。

更好的是，使用视觉效果向访问者展示您在现实生活中的产品或服务。 让不可见的可见。

例如，请注意 Webflow 如何使用动画 GIF 来说明他们在副本中提出的观点？

或者注意 Buffer 如何做同样的事情，但使用半动画截屏：

您没看错：支持功能带来的好处。 不是反过来。

每个着陆页布局都需要一个专门用于说明客户通过使用您的服务或产品可以获得的具体利益的部分。 这些好处应该与核心功能相关联。

您不需要一个功能部分来解释您的产品或服务的作用，而不解释这些功能提供的好处。

例如，请注意 Jasper（前身为 Jarvis）从未提及 AI 或机器学习之类的功能，尽管它们是支持其各项优势的核心功能：

或者 ClickUp，他们通过使用标题为它们的功能的标签巧妙地探索了它们的好处：

您应该在着陆页布局的任何地方都添加社交证明或对您的产品或服务进行第三方验证。

什么被认为是社会证明？

• 推荐信
• 评论
• 星级
• 客户标志
• 信任徽章
• 奖项
• 客户数据或用户统计
• 客户数量
• 经商多年
• 用户生成内容
• 代言（名人或影响者）

还有更多。

你应该把社会证明放在哪里？

哎呀，将它放在首屏、CTA 按钮附近、福利副本旁边和注册表单上。 从字面上看，无处不在。

但无论你把它放在哪里，总是试着在你的设计中建立一个专门的社会证明部分。 许多网站访问者会寻找它。

例如，Jasper 从上到下对着陆页进行社交证明，但他们也在布局中设计了自己的部分：

精心设计的登录页面布局将在整个页面中包含多个 CTA 实例。

但是，正如您的首屏部分应该留下不可磨灭的第一印象一样，您的最终 CTA 部分也应该留下令人难忘的最后印象。

这一次，重申你打算提供的价值以及你打算如何提供它，只是用不同的词。

例如，使用上面相同的 Jasper 示例，请注意它们的首屏 CTA 和首屏 CTA 如何传达相同的号召性用语，但方式不同：

就是这样——11 个简单的步骤来制作一个高转化率的登陆页面布局。

现在让我们探索真实世界的示例和正确的设计。

现在有趣的部分：例子。

正如我们已经提到的，您的目标网页布局将根据您使用的目标网页类型而有所不同。

例如，潜在客户捕获页面包含表单，但点击页面不包含。

因此，在本节中，我们将通过展示以下着陆页类别中的一些最佳着陆页来尝试捕捉着陆页布局之间的细微差别：

• 铅捕获
• 通过点击
• 软件即服务
• B2C（电子商务/DTC）
• 移动应用

好消息是，我们针对上述每种着陆页类型都撰写了深入探讨的文章。 所以我们不会在这里潜水太深。

但我们将展示我们最喜欢的三个示例（带有完整着陆器的链接），以及使每个示例如此特别的原因。

让我们探索一下。

1. 管道
2. 客户提升
3. 奥斯卡

管道

我们喜欢什么：社会证明部分

就像我们之前提到的，每个高质量的登陆页面布局都需要一个社交证明部分。 Pipe 不仅包括一个充满推荐的干净滑块，而且这些推荐来自创业界的一些知名人士。 双赢。

客户提升

我们喜欢什么：面包屑技术（多步骤形式）

对于潜在客户捕获表单，没有比使用多步骤表单更好的方法来提高转化率了。

我们将此称为面包屑技术，或将较长的表格拆分为多个步骤，并首先提出威胁最小的问题，最后提出最具威胁性的问题（电子邮件、电话号码、姓名）。

为什么要多步骤布局？

面包屑技术利用行为心理学（是的阶梯）让潜在客户承诺一个小请求（你首先问的垒球问题）。 一旦他们承诺，他们更有可能完成。

奥斯卡

我们喜欢什么：视觉辅助+形式

Oscar 的潜在客户捕获表单会自动填充健康福利卡的图形。 辉煌。

为什么？ 它以视觉和具体的方式提醒潜在客户他们正在注册的内容 - 不仅是福利，而且当你需要时知道你的钱包里有那张小卡片，让你高枕无忧。

深入研究：要复制的最佳潜在客户捕获页面示例

1. 贾斯珀（原贾维斯）
2. 赛姆拉什
3. 编辑 X

碧玉

我们喜欢什么：独特的品牌代码

我们已经在本文前面提到了 Jasper 的社交证明部分，但这次，让我们关注他们独特的品牌资产：

• 深色背景
• 不同的品牌颜色（蓝色/紫色/粉红色）
• 机器人贾斯珀（吉祥物）

毫无疑问。 当有人访问过这个页面并且之前遇到过 Jasper 的创意时，他们会记住它。

赛姆拉什

我们喜欢什么：功能支持的好处

与前面的 ClickUp 示例一样，Semrush 也将其产品功能和优势置于选项卡式部分中。 再一次，像 ClickUp 一样，他们重视利益（访问者真正关心的内容）而重视功能。

编辑 X

我们喜欢什么：极简主义

您的目标网页布局不需要太多就能产生巨大的影响。 编辑 X 证明了这一点。

简单的。 复杂的。 简洁的。 有效的。

最小到什么程度？ 只有三个部分：

• 英雄部分（首屏）
• 福利部分
• 第二个 CTA

*尽管我们也建议添加社交证明部分。

查看更多布局：点击页面：定义、示例、最佳实践

1. 比兹
2. 现金应用
3. 奈良宝贝

比兹

我们喜欢什么：最终的 CTA 部分

老实说，有什么比使用包含 JK Rowling 的推荐和CTA 按钮的最终 CTA 更好的方法来关闭您的着陆页设计？ 美丽的。

现金应用

我们喜欢什么：CTA 部分

大多数应用登陆页面都有一个 CTA 按钮，可以打开应用商店下载应用。

这对于移动设备用户来说非常棒，但对于桌面用户来说，它创建了一个不必要的步骤。 首先，您需要点击链接，然后您需要从应用商店复制 URL，然后您需要在手机上向自己发送消息，以便下载。

CashApp 使用二维码代替了所有这些步骤。 您只需拿出手机，拍张照片，应用商店就会在您的手机上打开（就在您需要的地方）。

奈良宝贝

我们喜欢什么：不可磨灭的第一印象（首屏）

Nara Baby 的折叠部分上方检查所有框：

• 标题
• 副标题
• 英雄射击
• 号召性用语

深入研究：最佳应用登陆页面示例

1. 保持
2. 美元剃须俱乐部
3. 她的

保持

我们喜欢什么：视觉教具

这个很容易。 Keeps展示了真实的人在现实生活中使用他们的产品。 让不可见的可见，记得吗？

美元剃须俱乐部

我们喜欢什么：Z 形信息层次结构

Dollar Shave Club 对文字轻描淡写，使 Z 形信息布局最佳。

她的

我们喜欢什么：视觉层次

Hers 通过利用颜色对比、标题和正文段落之间的比例、项目符号点图标、平衡和重复，使他们的着陆页布局易于学习。

一目了然，您知道以下部分的哪些部分最重要以及它们之间的关系。

探索更多布局：增加销售额的电子商务登陆页面创意

1. 点击向上
2. 热罐
3. 帆布

点击向上

我们喜欢什么：社会证明部分

像许多 SaaS 布局一样，通常会找到第三方评论徽章作为社交证明。 ClickUp 也不例外。

但是，我们喜欢 ClickUp 颁发奖项的方式是，他们获得了 20 多个徽章并连续流式传输它们，因此实际上看起来更多。 微妙，但有效。

热罐

我们喜欢什么：视觉辅助

谁说视觉辅助必须是图形或照片？

Hotjar 将实际的热图（带有数据）嵌入到他们的登录页面中。 您可以试一试，在视图之间切换，并下载示例数据。

谈论让不可见的可见。 做得好。

帆布

我们喜欢什么：关注率

Canva 知道如何让他们的潜在客户专注于单一的转化目标。

没有导航栏。

没有页脚链接。

除了“注册”之外，没有其他 CTA。

探索更多布局：高转化 SaaS 登陆页面示例

很容易过度思考着陆页设计和 A/B 测试不同的布局。

但事实仍然存在 - 一个引人注目的目标网页设计转化并不需要太多。 坚持最重要的：

• 创意简介
• 信息层次
• 视觉层次
• 关注率
• 优于功能的好处
• 标题、副标题、英雄形象、CTA
• 不同资产
• 视觉辅助
• 社会证明

创建出色的登录页面布局可能是一门科学。 但这不是火箭科学。

既然您已经了解了良好登录页面布局的所有元素，请记住首先将其构建在出色的副本之上。 您可以在我们的下一篇关于编写登录页面副本的文章中了解如何做到这一点。

快乐转换！