2020年您需要看到的19个最佳着陆页设计示例

您如何说服访问者在您的网站上冒险?

一流的着陆页需要太多的元素,而使这些元素成为“最佳”元素通常取决于您的着陆页目标是什么。

以表格长度为例。 它只是您需要优化的众多组件之一,但是最佳实践将告诉您,短表单和长表单都表现良好-取决于您是否要生成大量(可能)质量较低的表单提交,还是数量较少的高质量提交。

因此,如果您正在寻找着陆页游戏 ,那么了解良好的着陆页中的内容并查看这些细微差别元素的实际操作示例将非常有帮助。

单击下面的链接之一,跳至文章的该部分:

  • 登陆页面设计实例
  • 登陆页面提示

出乎意料的是,当我开始研究目标网页示例时,我意识到几乎没有网站具有现代而令人印象深刻的目标网页设计,而不仅仅是首页上的注册表单。 因此,我们决定编制一份我们爱自己的着陆页清单。

免费资源

如何优化潜在客户的登陆页面

请在下面告诉我们一些有关您的信息,以便立即访问:

这里有个很大的警告:我无权访问这些页面的统计信息,所以我无法告诉您他们如何很好地转换访问者,潜在客户和客户。 尽管如此,这些示例-甚至那些不再在公司网站上活跃的示例-都具有我见过的那些细微差别的着陆页元素的最佳组合。

显然,如果您有灵感尝试在自己的网站上尝试任何一种策略,那么唯一确定它们是否对您有用的方法就是亲自测试一下。

登陆页面示例

  1. Shopify
  2. 枪口
  3. TransferWise
  4. 爱彼迎
  5. 团队位
  6. 威斯蒂亚
  7. 网络流
  8. Nauto
  9. 工业实力营销
  10. 入站情感
  11. Velaro在线聊天
  12. IMPACT品牌与设计
  13. 退弹
  14. Bills.com
  15. 特鲁里亚
  16. 陆地机器人
  17. 网络利润
  18. 布卢姆
  19. 转换实验室

注册登陆页面

1. Shopify

像这篇文章中的许多其他登录页面一样,Shopify的试用登录页面使它保持简单。 例如,面向用户的标题只是几个字,页面依靠简单的项目符号而不是段落来传达试验的详细信息和好处。 在开始之前,您只需要填写几个字段即可。 所有这些使您更容易理解:使用其工具在线销售。

Shopify注册​​登录页面

2. 枪口

登陆页面可帮助用户确定您的产品或服务是否真正值得他们宝贵的时间和精力。 有什么比让访客面对您的应用程序所解决的问题更好的,清晰,直接地传达您的价值主张的更好方法了?

Muzzle是一款Mac应用程序,可以使屏幕上的通知静音,它完全接受了这个节目,不会在他们的登陆页面保持最小的状态下显示出心态。 在页面的左上方,页面访问者受到令人尴尬的通知的猛烈抨击。 动画不仅很有趣,而且无需过多描述,就可以成功地传达应用程序的实用性。

Muzzle sign-up landing page with yellow download button

3. TransferWise

TransferWise允许您以不同的货币发送和接收资金,其登陆页面(如下所示)将每个单独的操作分开,因此您不会因不适合您的选择而分心。

如果您想汇款,汇款单就在右边,供您填写。 要收款,只需单击中间的选项卡,然后使用借记卡注册TransferWise,请单击最右侧的选项卡。

该着陆页上的每个标签都会根据您要注册的内容产生不同的号召性用语-每个标签都位于一个充满活力的绿色框中,以突出显示您在三个可能的起点之后的下一步。

带有CTA的TransferWise注册登录页面,用于汇款,收款和TransferWise借记卡

4.爱彼迎

为了帮助将访客转化为房东,Airbnb提供了一些诱人的个性化设置:根据您的位置估算的每周平均收入预测。 您可以在字段中输入有关潜在住宿的其他信息,以获得更自定义的估计。

如果您访问了已经确信的页面,则页面顶部的清晰的号召性用语可以方便地进行现场转换。

Airbnb注册页面

5. Teambit

当您想到HR软件时,通常不会想到任何异想天开的词,但是Teambit的插图页面非常着重。 一个简单的单场形式伴随着一个充满动物角色的令人愉悦的办公室-如果您想知道的话,所有人都对Teambit感到非常满意。 动物卡通出现在着陆页的每个信息部分旁边,使访客向下滚动以了解更多信息。

Teambit的登录页面是完美的证明,您无需拥有传统的“有趣”产品或服务即可创建有趣的登录页面。

带有CTA的Teambit登陆页面,可通过Google注册

[ 点击此处查看整个着陆页。]

6. Wistia

首先是Wistia的免费Wistia帐户的登录页面。 马上,您会注意到创建一个帐户的单一字段表单-蓝色,图案最少的背景与明亮的白色表单字段形成了鲜明的对比。

表单字段的长度加上突出的位置几乎消除了创建帐户的所有麻烦…但是,如果您有疑问,可以随时滚动下面以阅读常见问题解答。 通过以鲜明的色彩对比将这两个部分分开,Wistia使您更轻松地专注于转换。

wisita-landing-page-example.png

7. Webflow

Webflow是Web开发人员的设计工具,它将大量信息打包到GIF和三个表单字段中。 将整个注册表单放在一行上是一件很不错的事情-不仅使页面更短,而且从左到右填写每个框都向用户显示了他们与单击第四个蓝色按钮的距离有多近免费开始。

表单下方的GIF动画图片可在网站的同一帧中看到,因此用户无需滚动或单击到新页面即可查看产品的工作方式注册。

通过Webflow注册登录页面

电子书登陆页面

8. Nauto

Nauto是自动驾驶汽车的数据平台,可帮助管理自动驾驶汽车车队的公司提高自动驾驶的安全性。 当然,其客户需要各种信息才能在此平台上出售它们。 Nauto将其打包到一个超简单的电子书中,其登陆页面为您提供了简短的联系表和一些预览统计信息,以证明为什么此资源如此重要。

Nauto电子书登录页面,带有绿色的“下载”按钮

如上图所示,在页面顶部,一张温暖的汽车内部照片紧紧抓住了铅的形状 。 绿色的“立即下载”按钮甚至可能是故意的(毕竟,在旅途中,绿色意味着可以使用)。

向下滚动,您将看到另一个“获取电子书” CTA,以提醒用户正在等待的内容。 您还将看到有关车祸的三个令人不快的统计信息,以吸引用户了解更多信息。 在下面查看。

nauto-ebook登陆页面CTA-1

9. 产业实力营销

马上,这个着陆页就用引人注目的而有力的标题吸引我:“不要让我放大”。 当我们在手机或平板电脑上浏览时,这直接表明了我们大多数人所拥有的一种普遍的体验-这也有点令人生厌。

但这并不是唯一让我对该着陆页感兴趣的东西。 请注意,红色是如何策略性地放置的:它位于表单的顶部和底部,使您更加接近转换事件。

工业实力营销登陆页面example.png

另外,此设计是可启动的元数据:它在移动设备上的外观和效果也很好。 请记住,许多访问者将在其智能手机或平板电脑上访问您的登录页面,如果您的网站设计对他们而言效果不佳,他们可能会放弃并离开您的页面。

例如,Industrial Strength Marketing的员工将字体和表单字段设置得足够大,以使访问者不必费心缩放即可阅读内容并与之互动。

工业实力营销移动登陆页面1.jpg

工业实力营销移动着陆页2.jpg

10. 入站情感

即使您不会说西班牙语,您仍然可以欣赏此HubSpot合作伙伴网站的转换功能。 页面的两个我最喜欢的功能? 当您滚动浏览站点时,表单将保持固定的突出位置。 我也很喜欢将这些信息作为填写表格和与他人共享页面的方向提示。

inbound-emotion-1

11. Velaro在线聊天

有时,最小的细节会带来最大的不同。 例如,它们就是使Velaro Live Chat的登录页面很棒的原因。

功能图片上的小PDF符号有助于设定下载内容的预期格式。副标题前面的箭头有助于进一步将您的注意力吸引到他们希望访问者阅读的重要副本上。 像IMPACT一样,他们也有一个自动选中的框,可以按其表单订阅其时事通讯-如果将其变成“选择加入”复选框, 则是增加订阅者的好方法 。 所有这些细微的,看似微不足道的细节都有助于将扎实,令人钦佩的目标网页设计整合在一起。

velaro-landing-page-example-1.png

12. IMPACT 品牌与设计

全面披露:IMPACT是HubSpot的合作伙伴-但这不是为什么将它们包括在此处。 IMPACT的目标网页长期以来一直是设计灵感的来源。 我喜欢页面的简单布局,从大标题复制和详细的特色图像,到表单周围的轮廓,再到令人赏心悦目的颜色和字体。

IMPACT在此处提供下载的免费指南,也没有在蓝色按钮(强调您可以提交填写的表单)中强调下载本身。 相反,IMPACT邀请您“产生更多的转化”-将重点放在阅读指南后所能获得的收益上。

Impact-landing-page-example-2.png

登陆页面以了解更多信息

13. 退弹

毫不奇怪,Unbounce排在该列表的首位-他们实际上已经写了有关创建高转换目标网页的书 。 尽管此着陆页有很多令人惊奇的事情,但我绝对喜欢的两个是: 1)使用聊天窗口代替经典表格,以及2)表格下方的详细信息(但包装得很好) 。

第一种方法可以帮助您直接注意页面的目标-以便您填写表格-方式不会引起干扰,不会像家务事。 第二个选项使此页面获得SEO提升(搜索引擎将具有更多要爬网的内容),从而缓解了人们在交出信息之前需要了解更多内容的烦恼,而同时又不会分散人们对聊天窗口的注意力。

屏幕截图2017-07-20 at 11.21.12 AM.png

14. Bills.com

通常,人们认为登录页面是您网站上的静态页面。 但是使用正确的工具,您可以使它们变得交互式和个性化。

请从下面的示例Bills.com。 要查看您是否会从他们的咨询中受益,请在显示表单之前先回答三个问题。 它从这一点开始:

bills-dot-com-landing-page-example.png

然后,您再回答两个问题,如下所示:

bills-dot-com-landing-page-2.png

这是最终的登录页面表单,您可以在其中填写信息:

bills-dot-com-landing-page-3.png

我不确定算法的工作原理(或者根本没有算法),但是当我填写该算法时,我担心不合格。 一旦发现自己做的很高兴,我就很高兴填写表格,我敢肯定,大多数负有债务并使用此工具的人都可以。 通过在表单出现在目标网页上之前使此报价看起来更加排他,我敢打赌Bills.com会大大提高转化率。

15. 特鲁里亚

Trulia的着陆页做了与Bills.com非常相似的事情。 它以一个简单的形式询问“地址”开始(虽然这就是他们的意思,但听起来不像“您的地址”那么令人毛骨悚然)。 在此简单表单字段下方是一个明亮的橙色按钮,与表单后面的英雄图像形成鲜明对比,并强调估算将针对您的家进行个性化设置。

trulia-landing-page-example.png

当然,地址本身不足以估计房屋的价值。 它仅表示房屋的邻居。 这就是为什么下一页后面会出现更多关于房屋本身的问题,例如床位数和浴室数的原因。 在下面,您会看到“向我们发送报告的位置”副本-带有免责声明,通过输入此信息,即表示您同意与房地产经纪人联系。 这是一个很好的例子,该公司从一开始就为访客提供价值,同时设定访客对结果的期望。

trulia-landing-page-2.png

16. Landbot

Landbot是一项可创建基于聊天机器人的登录页面的服务,该服务将自己的产品放在以聊天为基础的登录页面的前面和中央。 友好的漫游器(带有表情符号和GIF)向访客打招呼,并鼓励他们以对话形式而非传统形式提供信息。

landbot.gif

17.网络利润

稍作对比…长目标网页呢? 仅需几个技巧,您就可以使最长的登陆页面也变短。 以下Webprofits的目标网页向我们展示了操作方法。

在顶部,有一个醒目的CTA按钮以了解更多信息-与背景形成很好的对比,使其突出,还有一个向下箭头以鼓励滚动。 通过不将表单字段放在前面,它们有助于减少摩擦,并为访问者提供机会以了解更多信息,然后为他们提供转换选项。

它们还使您轻松确定Webprofits的实际功能。 该页面的其余部分提供了有关当您放弃信息时会得到什么的详细信息。 另外,它还包括战略性的CTA,可将您带回到顶部以填写表格,例如“ Let’s Talk”。

屏幕截图2017年7月20日下午1.36.52 PM-1.png

18. 布卢姆

有时,您只是停下来欣赏美丽的着陆页。 使用高分辨率摄影和大量空白区域,H.BLOOM的着陆页令人愉悦。

除了美观之外,该页面还包含一些很棒的转换元素:折叠式表单,填写表单时将会发生的简洁明了的描述,甚至亮橙色的“提交”按钮。 我们唯一要改变的是什么? “提交”按钮上的副本-可能更具体于手边的报价。

hbloom-1

19. 转换实验室

尽管我通常不会在有关登陆页面的帖子中包含带有表格的主页示例,但该网站很特别。 主页是整个网站-导航链接仅会将您带到下面的信息。

当您单击“获取登录页面帮助”时,整个站点将移至为表单留出空间。 单击前的外观如下:

conversion-lab-landing-page-1.png

而且,当您单击该CTA时,请查看表单的显示方式:

conversion-lab-landing-page-2.png

我喜欢您不必离开页面即可填写表格的方式,但是该表格不会对休闲网站的访问者造成干扰。

登陆页面提示

精心优化的目标网页可以通过收集信息来帮助潜在客户转化潜在客户,这些信息可以帮助您更好地了解,营销和吸引访问者。 由于着陆页对于转换至关重要,因此务必确保其规划,设计和执行良好 。

创建登录页面时,请注意以下几点:

  • 美观:提供目标网页颜色和干净的UI只会有所帮助。 访客将想了解有关您的产品的更多信息,并查看您所提供的价值的证据。 看看我们列表中的第10名-Inbound Emotion-一个令人惊叹的网页的绝佳示例。
  • 少即是多:让要约或图片占据讨论的大部分内容,但请确保包括所有描述性标题和支持性文字,以使您的目标网页清晰明了。 这几乎适用于页面上的所有组件:尝试空格,简单副本和较短的表格。
  • 让访问者留在页面上:通过删除主导航或任何分散注意力的反向链接,不太可能出现潜在顾客摩擦 ,从而导致访问者放弃您的页面。
  • 社交共享:让访问者与您的目标网页互动的一种简单方法是包括社交媒体共享按钮,以便他们可以将您的内容传播给他们的社交关注者。 毕竟,客户是您的营销飞轮的中心。
  • A / B测试:着陆页对于正确设置很重要,而且由于消费者的心理有时令人惊讶,因此,最好尝试使用不同版本的页面,看看哪些具有最高的转换率(CVR)。 测试商品的位置,CTA的种类,甚至是配色方案。
  • 号召性 用语 号召性用语是到达网页的内容所在,或者潜在客户成为联系的转折点。 CTA可能会要求访问者订阅,下载,填写表格,在社交媒体上分享等等。但是,总的来说,CTA是使您的受众更加参与您的产品所必需的。 为了产生潜在客户,CTA应该大胆醒目,但最重要的是,它们需要有效地传达价值。

    创意CTA的一个例子是Landbot(在#16处看到),他拥有一个聊天框,他们的CTA在聊天中响应。