登陆页设计，登陆页设计案例，20个极品登陆页设计

根据定义，着陆页存在是为了提供一个唯一的目的：让您的网站访问者转换到他们的买家旅程的下一个阶段。虽然在理论上它们的目的很简单，但在实践中，事情只是有点不同。而把A +登陆页放在一起可能会很棘手。

实际上，设计一个成功的登陆页面，转换需要几步，从决定你的买家旅程到哪个阶段，到规划，设计测试，当然还有很多着陆页灵感

当然，如果你想拥有顶级的目标网页，你应该考虑很多元素。通常，着陆页的目标是使这些元素成为“最佳”键的起点。因此，看到一个有效的登陆页面，并且几个这样的细微差别的例子将帮助您在这个游戏方面提升酒吧。

无论您的业务销售或您打算获得的转化操作如何，通过查看其他优秀着陆页的外观来获取一些着陆页灵感总是有用的。即使有一些设计着陆页的最佳做法，也没有一个正确或错误的做法。当然，通过查看为购买过程的不同阶段设计的目标网页的几个示例将激励您。

当我开始研究这篇文章时，我发现许多网站拥有现代和令人印象深刻的登陆页面，这不仅仅是简单的注册表单。因此，我们决定将我们所爱的20个登陆页面设计列表。

Wistia

在免费Wistia帐户的着陆页上，您会注意到用于创建帐户的单一表单字段。浅蓝色与微型图案背景与明亮的白色表格区域很好地对比，明确了着陆页的目标：注册一个免费的帐户。形式的长度，结合中心位置，几乎使得它毫不费力。但如果您有任何疑问，您可以在下面的滚动页面找到问题的答案。由于这两个部分是由鲜明的色彩对比分开的，所以专注于转换要容易得多。

巴斯卡普

Basecamp也成为他们的首页，拥有一个非常漫长而深入的登陆页面，下面有许多信息。在设计方面，顶尖的滑稽动画告诉我“2017年是一年的一起”，这种微薄的页面让我立刻赢得了这个。我也喜欢在页面顶部放置注册表单，直接引导访客的注意力。不能比这更好。但是如果您不太注意注册，您还可以阅读少数支付客户的证言，以及与越来越多的注册帐户相关的一些数据。

Zendesk

 

我只是喜欢Zendesk的免费试用登陆页的设计和副本中的简约和简约风格。这里唯一重要的是两个CTA按钮。如果你有足够的关注，你也会注意到上面的蛋绘图，它似乎正在开裂。

表单本身简单易用，只需要一个工作电子邮件地址和密码来创建一个帐户。或者，您只需使用Google Apps登录信息即可进一步缩短转化路径。

4. IMPACT品牌与设计

当然，IMPACT的着陆页可能是很大的灵感来源。我喜欢这种布局的简单性，从大而大胆的复制和详细的功能图像到围绕形式的轮廓，以及令人愉快的访客眼睛的对比色和字体。

我必须注意现场复选框以订阅他们的博客，这也是增加订阅者的好办法。但是最好不要勾选，让用户选择加入，否则可能会增加许多低质量的订阅者给您的联系人。

5. WebDAM

即使WebDAM的着陆页没有太多的功能，我最喜欢的（到目前为止）是表单。文字背后的小星星都表示您需要投入的信息。该表格还有一个蓝色的背景，从背后的英雄形象脱颖而出。而对于定制和引人注目的副本，“ 立即下载 ”按钮的功能在闪亮的深粉红色背景上，这是与浅蓝色的互补色。

反弹

 

Unbounce的登陆页面非常棒，这并不奇怪。他们实际上写了一本关于创建高转换着陆页的书。即使这个着陆页设计有许多惊人的事情，引起我注意的两个方面是：

1） 从支持图像到CTA按钮的方向提示，以及

2） 表格下面的详细但是很好的打包信息。第一个帮助引导您注意页面的目标 – 填写表单。另外，第二个给这个页面一个SEO提升，因为搜索引擎将有更多的内容爬网。

正方形空间

与上面提到的着陆页不同，Squarespace选择了一个使用一个巨大的背景图像的着陆页，显示产品在行动中。这样的登陆页面 – 保持设计简单，没有任何形式填写的页面 – 可以在有效的情况下工作得很好，Squarespace保持了美观，简单易用。

布鲁姆

有时，我们只是停下来欣赏一个登陆页面，使其美丽。使用高分辨率摄影和大量的白色空间，H.BLOOM的着陆页是很高兴看到的。除了它的美丽，页面有一些很好的转换元素：一个叠加的形式，清楚和简明的描述，当你填写表单会发生什么，甚至亮红色的“提交”按钮。

Velaro Live Chat

有时候，最小的细节是最大的区别，当然，它们使得Velaro Live Chat的着陆页非常棒。功能图像上的小PDF符号有助于设置下载格式的期望。每个子目前面的箭头有助于进一步将观众的注意力引导到他们想要访问者阅读的重要副本。

像IMPACT一样，他们也有一个自动复选框，用于在表单上订阅他们的通讯。这可能是增加订阅者的好办法。所有这些细小的，似乎无关紧要的细节帮助汇集了一个坚实而令人敬佩的着陆页设计。

10.购物

像许多其他着陆页一样，Shopify的试用着陆页保持简单。用户导向的标题只是几个字，页面依靠简单的段落，来传达试用的细节和好处。开始之前，您只需填写几个字段即可填写。所有这一切使您更容易了解到：使用Shopify的工具在线销售。而且由于其灵敏的设计，这个着陆页看起来很棒，并且在任何设备上都可以使用。

11.转换实验室

即使通常，我不应在关于着陆页的文章中包含主页，这种布局是特别的。这是一个一页的网站，导航只是发送到以下信息。

当您单击“获取帮助与着陆页”时，表单从右侧显示。您会注意到，您不必离开页面来填写表单，而且表单也不会对您造成干扰 – 如果您想滚动查看更多信息，或者访问休闲网站。

以下是您点击CTA后的样子：

启动学院

我喜欢启动学院着陆页的简单性和清晰度。考虑到没有人愿意在不知道他们将要得到什么的情况下提供个人信息，启动学院使用这个着陆页预先设置预期。在完整和兼职申请登陆页面上，他们清楚地知道访客申请后会发生什么，请在表单旁边列出问答。清除空气，也可以清除不认真服务的人们。

13.Breather

这是登陆页面的巧妙而令人愉快的设计的另一个例子。一旦你访问breather.com，就可以立即采取行动，让网站的访问者指出他们想要找到一个空间。

有趣的是，呼吸器如何使用简单的点对点副本来让访问者知道该公司的工作，然后立即由CTA选择一个城市。如果您需要向下滚动以获取更多信息，您可以看到他们如何使用锥体和设计来使我们更接近品牌。负空间和舒缓配色方案也与产品对齐。

小谎

我喜欢Lyft的登陆页面，因为它向我们展示了我们如何处理他们的转换路径中的两种不同类型的人：准备做出决定的人以及在转换之前仍需要更多信息的人。第一个是将填写“立即申请”表单的驱动程序（由于形式和背景之间的对比，顺便提及）。但是当访问者想知道他们可以赚到多少钱时，他们会填写这些信息并按“计算”。而不是指向新页面，访问者将看到一个美元金额，然后是一个新的号召性用语按钮“立即申请”（一旦点击，将驱动程序带到表单）。

特鲁利亚

Trulia的登陆页面是一个很好的例子，一个公司给予访客价值的一个很好的例子，同时设置访客对将会发生什么的期望。它开始简单的一个简单的形式要求“一个地址”。在这个简单的表格栏下方是一个明亮的橙色按钮，与形式背后的英雄形象形成鲜明对比，并强调估计将被个性化到您的家庭。在下一页，在回答有关您的财产的更多问题后，您会看到副本“告诉我们发送报告的位置”。通过输入此信息，即表示您同意与房地产经纪人联系。

加州大学戴维斯分校

在加州大学戴维斯分校的案例中，美丽的网站设计延伸到他们的登陆页面，以获得关于制作起泡酒的艺术的免费样品课。在设计方面，形式的不透明的蓝色背景是顶部的英雄图像的延伸，其向下朝向表格。虽然他们有一个箭头，在“ 观看示例课程”CTA在窗体底部，设计也是一个很好的方向提示。

汗学院

将首页用作目标网页的难点在于您必须解决多种不同类型的受众群体。汗学院的主页做得很好。这个页面是针对三种不同类型的访问者：想要学习东西，想要教学的人，以及有兴趣为孩子们使用汗学院的家长。

Instapaper

Instapaper是阅读后续应用程序中最成功的应用程序之一，具有简单，简约的应用程序界面。它的登陆页面跟随着，具有令人难以置信的沉重的在白色的空间方法，拥有您需要的一切，没有一个cruft。

对讲机

对讲机的登陆页面具有相当复杂的想法，可以轻松了解产品的工作原理，以及为什么它可能是有益的。对于这个设计，我真的很喜欢这件事情，就是说旧的工作方式，而不是对讲机的简单方法。

20.广告监控

创建简单而优雅的着陆页并不容易，但是  Campaign Monitor  已经做得非常惊人。这是我看到的最简单但最漂亮的页面之一。它也勾勒出所有正确的方块：它有一个强大的标题，一个写得很好的介绍，让你知道使用软件的好处和一个非常明显的，不可能的错过的行动呼吁。