点击后着陆页设计灵感的 12 种技巧

已发表: 2017-07-14

您的点击后登录页面设计很重要，因为这些页面是您的数字店面——对于推广和销售您的产品和服务至关重要。正确优化后，页面可以显着提高转化率。由于它们对您的业务的整体成功至关重要，因此创建专业、高转化率的点击后登录页面是您营销策略不可或缺的一部分。

无论您是在为应用点击后登陆页面、产品点击后登陆页面、移动点击后登陆页面还是其他内容寻找灵感。有大量的各种点击后登录页面设计灵感可供使用。

在 Instapage，我们有一个完整的博客类别，专门用于点击后登录页面示例。我们经常就这个主题进行研究和写作，以从世界上一些最大的品牌中为我们的观众提供灵感。包括 Microsoft、Lyft、Marketo、Constant Contact、Oracle、Facebook、MailChimp 和 HubSpot。

在本文中，我们将展示一些点击后登录页面，重点介绍几种不同的设计技术，为您在创建页面时提供灵感。对于每个示例，我们将讨论页面的哪些方面做得好，以及可以进行哪些 A/B 测试以产生更好的结果。

点击后登陆页面是您的数字店面——对于推广您的产品和服务至关重要。

点击推文

点击后登陆页面设计灵感

引人注目的英雄形象

人类处理图像的速度通常比文本快 60,000 倍。如果在您的页面上正确使用，图像可以迫使访问者与您的页面互动足够长的时间以转换您的报价。是时候停止告诉您的访问者他们兑换您的优惠后会得到什么，而是开始向他们展示。英雄镜头可以帮助潜在客户想象体验您的报价的好处会是什么样子。

TaskEasy 明白这一点，他们充分利用了页面上的英雄形象。一旦访问者登陆页面，他们就会看到如果他们雇用 TaskEasy，他们的草坪会是什么样子：

什么页面做得好。

CTA 按钮颜色很突出，因为它没有在页面上的任何其他地方使用，除了“联系我们”按钮。
CTA 按钮文案使用第一人称，这让潜在客户感觉自己与报价有联系。
方向提示（CTA 按钮上的箭头和指向页面下方的箭头）向访问者显示他们接下来应该将注意力集中在哪里。
图标有助于引起人们对雇佣 TaskEasy 的特点和好处的关注。
信任信号和社会证明（安全徽章、奖章和类似 Facebook 的柜台）可能会让潜在客户感到舒适、安全，甚至被迫雇用 TaskEasy。
联系我们滑出表格允许访问者轻松联系公司以询问他们的服务。

A/B 测试的内容：

TaskEasy 徽标是超链接的，这意味着访问者可以轻松离开页面。
页面顶部的 Property Manager CTA 按钮将访问者带离此页面。尽管它确实打开了另一个潜在客户捕获页面，但它应该有自己的活动，与此活动完全分开。
添加副本将帮助潜在客户更好地了解使用 TaskEasy 的好处。目前，页面上没有副本，这可能会使访问者难以对公司和报价有良好的感觉。
页脚导航为访问者提供了太多无需转换即可退出页面的方法。
电话号码可以启用点击通话功能，使访问者更容易联系 TaskEasy，特别是因为该公司鼓励他们拨打“想给我们打电话？我们到了！”

要点

人们通常不想通读无休止的文字来找到他们想要的东西。他们宁愿快速扫描页面以查找特定信息——项目符号副本使这成为可能。项目符号副本（利用复选标记、箭头、图标等）是有效的，因为它允许访问者快速浏览页面并找到他们正在寻找的内容。

这个 Yodle 示例使用项目符号副本（复选标记）来突出其软件的优势。它也从页面上带有空白的副本的其余部分中脱颖而出：

什么页面做得好。

Yodle 的标志没有链接到他们的主页，让访问者可以看到他们在谁的网页上，而不会冒着点击离开页面的风险。
点击通话的电话号码使访问者可以轻松地与公司联系。
标题和副标题告知访问者该优惠是什么，以及它将如何使他们受益。
斜体副本从副本的其余部分中脱颖而出，吸引访问者阅读。
封装的表单引人注目，向访问者显示他们需要去哪里请求演示。
“个性化演示”让潜在客户觉得这个优惠是专门为他们准备的。
橙色的 CTA 按钮颜色r 在页面上“弹出”，引起人们的注意并增加人们点击的机会。
CTA 按钮上的箭头充当方向提示，激发人们对表单背后内容的兴趣。
信任信号（客户推荐、公司徽标和奖励印章）提高了潜在客户对 Yodle 的信任程度，这有助于说服访问者填写他们的个人信息。

A/B 测试的内容：

CTA 按钮副本不是个性化的，可能无法说服许多访问者点击。将其更改为“我想要演示”或“安排我的演示”可能会产生更好的结果。
包括与客户的爆头，推荐会让它看起来更风度翩翩，灌输对潜在客户的更多信任。
在页脚中的小字可以压倒前景和转换阻止他们。

F型

在设计页面时，请考虑访问者最有可能查看页面的方式。这样，您可以相应地放置最重要的元素。由于人们倾向于从上到下和从左到右阅读，因此将页面设计为遵循 F 模式是明智的。

下面的 Oracle 演示点击后登录页面遵循独特的 F 模式布局。每个重要元素都位于访问者在查看页面时自然会看到的 F-Pattern 路径上。

观看者首先会在左上角看到计算机图像。
然后他们的眼睛会跟随水平的茎，然后看到人们在微笑。
将页面左侧向下移动到下一个水平词干，访问者会将注意力集中在标题上，然后转到单个表单字段。
接下来，他们将沿着垂直主干继续 F-Pattern，在那里他们将扫描文本段落和项目符号点。
最后，他们的重点将放在鲜红色的 CTA 按钮上。

什么页面做得好。

微笑的人使页面更加人性化，这可能会让访问者感觉更舒服。
要点和粗体文字提请注意优惠的主要功能。
1-field 表单可以快速轻松地完成。
访问者的眼睛注视着表单和 CTA 按钮，这意味着他们应该专注于那里并进行转换。

A/B 测试的内容：

产品图片可以更大。目前，很难在屏幕上看到任何内容。
标题没有说服力，因为它没有向访问者提供有关该优惠如何使他们受益的任何信息。
CTA 按钮文案很弱。 “继续”没有说明任何有关优惠的内容，也没有诱人的点击。
包括社会证明，如客户推荐，可以提高公司及其报价的可信度。
页脚导航链接可能会分散访问者的注意力，使他们离开页面，并可能降低转化率。

Z-模式

与 F-Pattern 一样，Z-Pattern 还可以帮助查看者浏览您的页面，使其成为您页面设计的另一个不错的布局选项。

这是 Business-Software.com 中遵循清晰 Z 模式的示例。

访问者首先会看到左上角的粗体标题。
沿着顶部的水平 Z 轴移动，它们会到达红色的“注册下载”图章。
沿对角线向下和左下角移动，查看者会将注意力集中在报告的图像上。
最后，他们将使用另一个水平词干来完成 Z-Pattern，在那里他们最终会出现在页面上最重要的元素 - CTA 按钮上。

什么页面做得好。

左上角的徽标没有链接，因此访问者不会立即分心并离开页面。
标题和副标题可以有效地告诉访问者该报告提供了 10 大营销自动化供应商，并让他们知道他们可以如何从下载报告中受益。
具有最少副本的项目符号允许查看者快速浏览页面并了解关键要点，而无需通读大量文本。
“免费”一词用在两个地方。在被空白包围并且非常引人注目的红色图章上，以及在图像正上方采用粗体格式的副本中。
报告预览允许潜在客户了解报告的外观，如果他们选择下载报告。
黄色的 CTA 按钮与页面的其余部分形成鲜明对比，可能会吸引更多访问者点击它。

A/B 测试的内容：

右下角的公司徽标超链接到他们的主页，这为访问者提供了一种在转换报价之前离开页面的方法。
13 个表单字段对于营销漏斗的认知阶段的报价来说是很多的。在买家旅程的早期询问如此多的信息很容易阻止人们进行转换。
增加最重要元素周围的空白。例如图像和 CTA 按钮会吸引更多的注意力并吸引访问者下载报告。
添加社会证明可能会说服更多潜在客户进行转换。因为这会让他们对与 Business-Software.com 合作的想法感到更加舒适和兴奋。
页脚可以被删除。小字体似乎没有必要，公司徽标充当退出链接，使访问者远离此页面。

留白

说服访客集中注意力的另一种方法是添加空白。通过在某些元素周围包含足够的空白，这些元素在页面上更加突出。

除了增加对特定元素的关注外，留白也有帮助。

减少杂乱
使您的页面美观
提高可读性和理解力
提升用户体验

在下面的 MarcomCentral 示例中查看潜在客户捕获表单周围的所有空白区域。请注意，表单周围的空间实际上并不是白色的。空白可以是任何颜色，只要它有助于分隔不同的页面元素并与它突出显示的元素形成对比。在这种情况下，表格：

什么页面做得好。

点击呼叫电话号码为访问者提供了一种联系客户服务的便捷方式。
50 秒的视频让潜在客户无需通读副本即可快速轻松地获取信息。
表单标题和第一个 CTA 按钮中的“免费”是极具说服力的副本，因为每个人都喜欢免费。添加个性化副本可以使此页面更具说服力。
锚标记将访问者在单击时直接返回到表单，使他们更容易找到并完成它。
社会证明向游客灌输信任和信心。包括带有客户推荐的头像会增加更多价值。
在“如何运作”一节中的影像让前景更好地理解和预想一下每一步的描述。

A/B 测试的内容：

超链接的公司徽标有可能使访问者在看到整个报价之前离开页面。
标题应该改变，因为即使它很大而且很突出，但它并不引人注目。因为它不会给潜在客户带来任何好处。
橙色的 CTA 按钮并不突出，因为橙色在整个页面中被多次使用。
页面底部的社交媒体按钮可能会分散访问者的注意力并阻止他们进行转换。

锚定标签

锚标记链接到同一页面上的另一个位置，使访问者无需滚动即可跳转到页面的特定部分。由于锚链接可以毫不费力地将访问者带到他们想去的地方，因此它们有助于改善整体用户体验，这有助于转换过程。

PRWeb 在他们的页面上包含了两个锚标签——都是“立即开始！” 折叠下方的 CTA 按钮。单击后，将访问者发送回首屏上方的潜在客户捕获表单：

页面做得好的地方：

标题是具体的，并使用第二人称副本——这两种品质非常适合说服访问者进一步阅读报价并最终转换。
封装表单使其更引人注目，这可能会吸引潜在客户来完成它。
不选中表单上的选择加入框会让潜在客户觉得他们可以自由地做出自己的决定，而不是 PRWeb 为他们做决定。
“如何”和“为什么”部分中的图像和格式化副本提请注意有关 PRWeb 如何工作以及潜在客户为什么应该选择 PRWeb 的最重要细节。

A/B 测试的内容：

退出链接（公司徽标、社交媒体按钮和页脚导航）都可以使人们离开页面而无需转换。
项目符号副本可以更加突出。缩进它或放大箭头会引起更多的注意。
指南的图像被切断，这使它看起来像设计错误。它也是可点击的，但是当图像打开时，它仍然不是完整的图像或更大的图像。
7 表单域可能会吓到访问者并阻止他们完成表单。特别是因为他们可能仍处于买家旅程的考虑阶段。
CTA 按钮颜色（所有三个按钮）并不突出，因为整个页面都使用红色和蓝色。
CTA 按钮副本（同样，在所有三个按钮上）是模糊的。类似于，“我想要营销指南！” 更具吸引力，并且可能会带来更多点击。
客户评价未优化。没有 Craig Kasnoff 的头像，没有公司名称（媒体顾问后面不应该有逗号），而且推荐书本身也没有说任何具体的内容来鼓励潜在客户与公司合作。

动图

将媒体纳入您的点击后登录页面（以图像、视频或 GIF 的形式）有助于提高转化率，因为它们解释了您的产品或服务，同时还使您的页面更具视觉吸引力。

GIF 是动画图像，有助于以交互方式解释您的优惠。因此，与其向您的页面添加静态图像（例如软件仪表板外观的屏幕截图），不如添加 GIF 以直观地展示潜在客户如何执行不同的操作。

ActiveCampaign 在他们的页面上这样做：

什么页面做得好。

标题和副标题很吸引人。标题使用第二人称文案，副标题很好地补充了标题，让潜在客户知道超过 150,000 名其他营销人员使用 ActiveCampaign。
“无需信用卡”向访客保证此优惠是完全免费的。
只有两个表单字段使得更多潜在客户可能会填写表单。
客户推荐非常适合添加社交证明，但 Twitter 句柄可能会将访问者从页面上带走，而无需先进行转换。
滚动表单和 CTA 按钮增加了访问者采取行动的机会，因为无论他们在页面上的哪个位置，它都是可见的。

A/B 测试的内容：

CTA 按钮并不突出。颜色与页面上的其他蓝色混合在一起，副本并不令人印象深刻。
CTA 按钮下方的副本显示“通过单击“创建”...”，但 CTA 按钮未显示“创建”。
页脚中的导航链接很容易分散访问者对页面目标的注意力。

视觉提示

视觉提示在点击后登陆页面设计中发挥着巨大的作用。因为它们有助于保持视觉层次结构，让访问者保持参与，并将他们指向基本元素的方向。三个常用的视觉提示包括箭头、眼睛注视和战略性放置的对象，所有这些都指向与您的转换目标不可或缺的元素的方向。

箭头

箭头经常用于点击后登录页面，因为它们简单、直接且易于理解。它们可以是动画的或静止的，最常用于将访问者指向潜在客户捕获表单和 CTA 按钮，就像 Bridgeline Digital 在此示例中所做的那样：

什么页面做得好。

包括有关提高转化率的统计数据可能会激起访问者对营销自动化的兴趣。此外，粗体格式有助于引起人们的注意。
“免费”在两个不同的地方被提及，强调潜在客户不需要为此白皮书付费。
项目符号副本使潜在客户可以轻松找出他们的白皮书将包含的内容，而无需通读文本块。
橙色的 CTA 按钮突出并与表单标题和箭头很好地协调。
公司徽标为页面增加了信任价值，让访问者认为，“如果这些知名公司与 Bridgeline Digital 合作，那么我也应该这样做。”

A/B 测试的内容：

超链接的公司徽标和页脚链接为访问者提供了离开页面的途径，可能会增加跳出率。
增加产品图片周围的空白区域会使其更加突出。
CTA 按钮文案需要改进，因为“下载白皮书”没有任何说服力。添加面向利益和/或第一人称的副本可能会鼓励更多潜在客户点击。

视线

由于人们倾向于看其他人在看什么，因此使用人眼凝视作为方向提示在点击后登录页面上特别有效。例如，如果您页面上的人物图片正在查看标题，那么您的访问者的注意力也可能会被吸引到标题上。因此，这种技术对于让访问者看到您希望他们看到的地方很有用。

在下面的页面上，Vistage 包含了一张女性的图像，该图像正朝着潜在客户捕获表单的方向看。当参观者看着她时，他们下意识地觉得有必要看一下表格：

页面做得好的地方：

没有退出链接（隐私政策除外）使访问者无法在不单击浏览器中的“X”或填写表格的情况下离开页面。
对比色作为视觉提示，将注意力吸引到页面上最重要的元素：标题、女性和 CTA 按钮。由于页面的其余部分是灰色调，这三个组件比其他所有组件都突出。
包括隐私政策有助于向访问者灌输信任，让他们知道他们的信息对公司来说是安全的。

A/B 测试的内容：

添加社会证明，例如客户推荐或公司徽章，可能会吸引更多访问者了解他们是否有资格获得优惠。
有关优惠的最少信息可能会阻止人们进行转换。添加项目符号或小块文本以突出优惠优势可能会产生更好的结果。

对象

第三种常用的视觉提示技术是定位对象，使它们直接指向页面的特定区域。这样做会将潜在客户的注意力集中在某些重要的页面元素上。

在下面的示例中，Lyft 通过将车辆直接朝向并几乎接触到他们的潜在客户捕获形式来实现此目的：

页面做得好的地方：

只有一个表单字段非常适合说服人们交出他们的信息。
不选中协议复选框会使潜在客户在转换过程中感觉更加可控和舒适。
“查看您能赚多少钱”部分很有用，因为它允许潜在客户输入他们的信息并单击“计算”CTA 按钮而无需离开页面。在计算出他们的每周工资金额后，该按钮会变成另一个“立即申请”按钮，有助于转换过程。
“Lyft 驾驶的工作原理”部分使公司能够提供有关 Lyft 工作原理的分步信息 - 由于它是水平滚动的，因此不会使页面混乱。

A/B 测试的内容：

几个退出链接使访问者很容易分心并离开页面而无需转换报价。
由于背景繁忙，标题和副标题难以阅读。在更明显的不同位置测试它们可能会吸引更多注意力并产生更好的结果。
CTA 按钮副本非常模糊。 “下一个”根本没有说明要约的任何内容，并且可能不会强迫很多人点击。

视觉层次

每个点击后登录页面都应遵循特定的视觉层次结构 - 从最重要到最不重要的内容。旨在首先吸引访问者注意力的元素（通常是标题）应放置在页面顶部，因为这是层次结构的顶部，其余内容然后从最高优先级到最低优先级传递。

许多特征在创建视觉层次结构中发挥作用，包括但不限于：

尺寸
颜色/对比度
密度/接近度
留白
质地/风格

SendGrid 在其页面上使用了其中的几个组件。让我们看看他们使用了哪些，以及他们应该考虑改进哪些：

什么页面做得好。

大小变化和粗体格式有助于将注意力吸引到副本中最重要的部分，形成强大的视觉层次结构。
标题通过提及三个也在使用 SendGrid 的知名公司来迫使访问者使用 SendGrid。
多个合作 CTA 按钮为潜在客户提供了在整个页面的不同位置兑换优惠的多种机会。
产品图片显示了交付内容的预览。
具有最少副本的项目符号使潜在客户不必通读文本段落即可找到他们正在寻找的内容。
客户推荐和公司徽章可作为社会证明，可能会说服更多潜在客户与 SendGrid 合作，因为其他人正在通过他们取得成功。将 Dave Tomback 的头像添加到他的推荐信中会使其更加有效。

A/B 测试的内容：

图像中的女性可以低头看标题/CTA 按钮以添加视觉提示并鼓励访问者也这样看。
CTA 按钮可以放大并以不同的颜色进行测试，以吸引更多的注意力。页面上的其他地方有蓝色，所以它们不会尽可能地“弹出”。
增加一些元素周围的空白，比如 CTA 按钮和标题，将有助于它们更加突出。
应该删除“查看计划和定价”CTA 按钮，因为它将访问者带到另一个页面，分散他们对这个页面的注意力。

引人注目的 CTA 按钮

一个完美优化、引人注目的 CTA 按钮是包含在您的点击后登录页面框架中的最重要元素。它应该在所有其他元素之上脱颖而出，因此对于潜在客户需要点击哪里来兑换您的报价不会感到困惑。

WalkMe 创建了他们的两步选择加入页面，其中有一个大的、对比鲜明的 CTA 按钮，该按钮在页面上肯定会脱颖而出，吸引访问者的注意力：

什么页面做得好。

背景图像为访问者提供了他们的软件外观的真实预览。
CTA 按钮真的会在页面上弹出。除了大且对比鲜明之外，当用户开始滚动时，它还会重新出现在页面顶部。
两步选择加入表单减少了混乱并让用户感觉不那么害怕，因为他们不必在此处输入他们的信息。
项目符号副本使潜在客户无需阅读太多文本即可轻松了解有关报价的信息。
社会证明（客户推荐和滚动的公司徽标）可能会让潜在客户觉得有必要与这家公司合作。

A/B 测试什么。

将 CTA 按钮副本更改为更个性化（使用第一人称格式）和以利益为导向的内容可能会提高转化率。
用 GIF （折叠下方）替换图像将为用户提供更具交互性的页面体验，并有助于更好地解释产品。
在客户推荐信中添加头像会使其更值得信赖，从而提高其有效性。

哪些点击后着陆页设计技术激发了您的灵感？

使用点击后登录页面来推广和销售您的产品和服务是您营销策略不可或缺的一部分。这是因为当正确优化时——使用上述技术以及我们的设计最佳实践指南和点击后登录页面优化指南，它们可以显着提高您的转化率。

将广告点击转化为转化，为每个优惠创建专用的、快速加载的点击后页面。立即注册 Instapage Enterprise 演示，了解如何为所有受众提供独特的点击后登录页面。