关于登陆页面设计你需要知道的一切

无论谁说“你没有第二次机会给人留下好的第一印象”，这句话都说得很有道理。你和别人的第一次互动只有一次机会，你最不希望的就是第一次的互动很糟糕。毕竟，人类是众所周知的记住消极的经历要比积极的经历更生动．

当你与某人见面，去一个新地方，甚至是访问一个网站时，良好的第一印象都很重要。

在一个虚拟的世界里每一个当你的目标受众通过搜索引擎结果页面(SERP)点击你的网站时，创造一个积极的第一印象是至关重要的。这是因为你的着陆页你的网站的“目标页面”，还是第一页当访问者打开你的网站时，他们会登陆。

也,真的施加压力，你只有大约7秒在普通访问者决定他们是否会留在你的网站之前，给你的网站留下良好的第一印象。

那么，你如何确保你的目标受众与你的网站的第一次互动是积极的呢?

答案是:出色的登陆页面设计。

着陆页面设计

登陆页面设计是为你的目标受众和网站访问者创建一个吸引人的网站页面的过程。它应该鼓励他们从潜在客户转变为订户或客户。有效的登陆页面设计是基于品牌的，包括你的产品或服务和公司信息，并包含相关的报价和行动号召(cta)。raybet电子竞技

响应设计

你可能也听说过响应设计，或响应式网页设计。

一个网页响应设计可以通过任何设备自动查看-意思是，网页根据需要改变，以适合任何屏幕或设备(即台式机，笔记本电脑，平板电脑，或智能手机)。

源

由于越来越多的人从不同的设备和地点搜索互联网，响应式设计是必要的，以确保访问者和客户在您的网站上有一个愉快的体验。

虽然我们建议你的整个网站都是响应式的，但是有响应式的登陆页面设计是非常重要的——再说一次，这是第一页每一个当访问者打开你的网站时，他们会与你互动并看到你的网站，非常出色用户体验(UX)是至关重要的。

没有响应式设计的网页会给访问者带来令人沮丧的体验——他们要处理的图像和文本不适合他们的屏幕。这可能会导致访问者完全放弃你的网站，甚至访问竞争对手的网站。

请注意:取决于登陆页面设计软件雷竞技苹果下载官方版你选择与(我们将很快介绍一些选项)，响应式设计可能是你的自动功能。在这种情况下，你不必担心响应式设计——当你设计登陆页面时，它已经是响应式的了。

除了响应式设计，还有许多其他方面创建和设计一个登陆页面影响你将访客转化为客户和增强用户体验的能力。那么，让我们回顾一下在设计登陆页面时需要考虑的一些最常见和最重要的步骤。

1.确定你的目标受众和他们的需求。

不管你的业务是做哪一部分，你都应该考虑你的目标受众是谁，你应该如何解决他们的痛点——设计你的登陆页面也不例外。

在规划登陆页面的设计时，考虑一下你的目标用户在打开你的网站时希望看到什么。问自己以下几个问题来帮助你:

• 登陆页面需要立即回答哪些问题?
• 你怎样才能让你的用户知道他们在正确的地方?
• 你可以在你的登录页面上包含哪些引人注目的标题、相关内容和CTA，以有效地满足你的受众的需求?
• 你如何确保你的登陆页面与你的竞争对手相比是独特的?
• 你如何证明你的公司、产品和服务为你的受众提供的价值?raybet电子竞技

如果你需要额外的帮助来思考你的目标用户是谁，那就试试吧为您的业务创建买家角色．

2.确保登陆页面有特定的目的。

为了让你的登陆页面设计成功，它需要一个明确的目的。当访客来到你的登陆页时，他们应该立即知道为什么这个页面存在。

例如，你可以使用着陆页设计来明确定义你的页面的目的，方法如下:

• 提高转化率,分享相关的商品交易顾问基金
• 通过以下方法提高品牌知名度包括一个电子邮件通讯注册表格raybetapp
• 促进销售,展示你们最畅销的产品
• 对你的产品或服务产生更大的兴趣结合他们如何解决访问者的痛点的信息

如果没有明确的登陆页面的目的，你的访问者可能会感到困惑，不知道他们登陆页面后要做什么，或者不确定他们是否在正确的地方。这可能会导致他们失去兴趣，完全放弃你的页面。所以，使用你的设计来确保你的登陆页面有一个明确的目的。

3.选择一个登陆页面设计软件。雷竞技苹果下载官方版

有许多软件可以帮助你雷竞技苹果下载官方版建立和设计一个登陆页面．关键是找到一个适合你的。检查以下是我们雷竞技苹果下载官方版推荐的五个软件选项以及他们各自提供的各种功能。

4.写诱人的页眉。

标题的目的是吸引你的访问者的注意力和/或让他们想做些什么——意思是，标题应该是诱人的，有影响力的，以行动为导向的。

这很可能是第一个(如果不是的话)的第一，网站访问者了解到的公司信息。raybet电子竞技出于这个原因，你的登录页标题也应该补充语气和复制在你的网站(和你的元数据描述)．

当你在你的登陆页标题中使用诱人的和价值驱动的词汇时，你确保你的访问者知道他们将从转换和花费时间在你的网站上得到一些有价值的东西。

例如，看HubSpot的买家角色生成器登陆页面．标题写着:“让我的角色成为HubSpot的买家角色生成器。”多亏了页眉，访问者知道他们在哪里，以及他们将从访问登陆页得到什么。

源

然后，访问者会被自动引导到登陆页面的第二部分，其中也包括诱人的和价值驱动的语言。

源

该设计包括两名cta用户可以根据自己的需求和兴趣进行点击。这个登录页的标题是有用的，相关的，引人注目的，和品牌

5.使登陆页面美观和有帮助的。

我们已经说过很多关于登陆页面是网站访问者打开网站时看到的第一件事。所以，除了引人注目的标题和语言，你还希望你的页面是美丽的和有用的．

让你的登陆页面漂亮的方法:

• 使用一致的、品牌上的颜色和字体
• 保持页面的组织性
• 记住少即是多而设计
• 包括美观的视觉效果(图像和/或视频)
• 设计明显和令人兴奋的cta

使您的登陆页有帮助通过:

• 整合与目标受众需求和挑战相关的内容
• 设计为访问者提供价值的cta
• 包括告诉访问者的信息为什么他们应该转换
• 确保访问者知道如何转换
• 确保访问者能够方便地获得您的联系信息

6.发布和测试您的着陆页面设计。

设计完成后，就可以在用户中发布和测试它了。在您的登陆页面发布后，您可以A/B测试不同的设计元素(例如颜色，CTA按钮，短语，字体等)，以查看哪些选项导致最高的转换数量。

通过这种方式，你可以确保你的登录页面满足你的受众的需求，同时也确保你得到了影响你的业务底线的最佳结果。

除了记住这些着陆页的设计步骤，还要考虑这些着陆页的最佳实践。您会注意到，其中一些最佳实践还直接与我们刚才回顾的具体步骤相关联。

当我们回顾下面的最佳实践时，我们将引用下面的带注释的图像公司HubSpot的着陆页：

1.在整个设计过程中都要记住你的用户。

正如我们上面所述，设计登陆页面的第一部分是确定你的目标用户——在整个设计过程中记住他们。这样你的设计和内容才能与你的受众产生共鸣。通过这样做，你将有更大的机会增加网站访问者之间的转换。

2.写一个有说服力和有帮助的标题。

添加一个引人注目的标题到你的登陆页面，立即抓住你的访问者的注意力。一个伟大的登陆页标题应该是引人注目的和有用的。

例如,公司HubSpot的着陆页说:“有更好的成长方式。”这个标题让访问者觉得HubSpot就是他们想要的需要改善和扩大他们的业务。

此外,“生长的更好HubSpot在所有营销材料中都使用了这句话。这是该公司每天都在做的事情——帮助其他raybet电子竞技企业更好地发展。这也成为了品牌上的头条(这是另一个我们马上会讲到最佳实践)．

3.包括独特和吸引人的视觉效果。

在你的登录页面上包含引人入胜的视觉内容。无论是照片、视频还是动画，你都希望你的登录页面设计能以某种方式激起访问者的兴趣。

HubSpot登陆页面的视觉内容对该公司来说是独一无二的——动画设计和颜色都是品牌的。raybet电子竞技他们也不会把注意力从页面上的书面内容上转移开。

4.保持简单。

虽然你想在你的登录页面上包括标题、书面内容、CTA和视觉内容，但这并不意味着你想让你的设计太忙。事实上，你想要的正好相反。

记住:少即是多当涉及到你的登陆页面(以及你的整个网站)的设计时。这样可以保持页面的整洁、有序，便于访问者理解和导航。

正如您在HubSpot的登录页面上所看到的，尽管视觉效果占据了页面的大部分，但标题、书面内容和CTA都以一种简单且美观的方式组织起来。

页面顶部的导航非常简洁，右下角的实时聊天功能可以折叠起来，让登录页面看起来更加清晰。

5.确保它有一个响应式设计。

记住，通过移动设备或平板电脑访问你的网站的访问者、潜在客户和客户的机会是很高的。所以，确保你的登陆页面有一个响应式设计，可以根据浏览设备自动改变格式。

例如，这是HubSpot在我的iPhone上的登录页面。如你所见，所有的内容都是一样的，它包括相同的CTA和视觉效果，但它的组织和格式是适合我的屏幕的。

源

6.保持新的篇章。

当访客来到你的登陆页，他们应该自动知道它属于你的业务。以一种与其他营销内容、徽标和颜色相辅相成的方式打造你的登陆页面。你的访问者应该能够立即知道你的登陆页属于你的企业，因为你的品牌。

HubSpot的登陆页面在这方面做得很好——它遵循了HubSpot的品牌指导方针．HubSpot标识位于登录页面的顶部。

7.用cta优化你的登陆页面。

你的登陆页应该包括至少一个相关的CTA，位于折叠的上方(意思是，访问者不需要滚动到表单，因为它在他们点击页面时就在视图中)，所以访问者可以来到你的登陆页并在几秒钟内转换。这个CTA可以用来了解更多关于您的产品或服务，购买您的产品，注册一个特别优惠，或订阅您的电子邮件通讯。raybetapp

HubSpot的CTA按钮是登陆页面上最明显的功能之一。CTA按钮清楚地说明了访问者从转换中得到了什么。由于CTA按钮中有“免费”这个词，它变得更加诱人了……谁不喜欢免费呢?最后，它位于页面折叠的上方，所以每个人打开它的时候都可以看到。

8.添加您的联系方式。

您的访问者可能会直接访问您的网站，以搜索您的联系信息或确定他们想联系您的帮助或支持后，在您的页面上花费了一些时间。

为了避免浪费他们的时间和造成任何不必要的挫折，而试图找到你的联系信息，把这些细节放在你的登陆页。这使您的访问者联系您的过程尽可能简单和直接。

HubSpot在登录页面顶部的导航栏下列出了联系人信息。如果你想让你的登录页面尽可能的简洁，这是一个很好的选择。

9.在登陆页面上包括实时聊天。

如果可能的话，附上一张即时聊天功能在您的着陆页。这样，访问者可以从打开你的页面的那一刻起立即得到他们想要和需要的帮助。

HubSpot的登陆页面有一个实时聊天功能，可以方便地获得即时支持。可折叠聊天框的位置使页面看起来有组织。

一旦你设计好了你的登录页面，不要觉得自己被锁定了——这是一个迭代的过程。例如，你可以在你的目标受众中测试你的设计，以确定哪些颜色、CTA按钮、标题、视觉效果和书面内容最能引起他们的共鸣(并导致最多的转换)。

为此，你可以对设计进行A/B测试。在回顾你的结果之后，你就会知道哪种设计最适合你的目标受众，并增加转化率——坚持那个设计，直到你有一个新的和改进的设计可以分享，你的产品线改变，或你的品牌更新——然后，重新开始这个过程。

接下来，让我们来看看让你的登陆页面启动和运行的软件选项，这样你雷竞技苹果下载官方版就可以开始将更多的访客转化为客户。

登陆页面设计软件雷竞技苹果下载官方版

有许多登陆页面设计软件可供选择，所有这些软件都可以帮助你设计整个网站雷竞技苹果下载官方版只是你的着陆页)。以下五个选项简化了设计过程，不需要你有任何以前的网页或设计经验。

1.HubSpot免费登陆页面生成器

HubSpot的免费登录页面构建器可以帮助您免费创建多个登录页面设计。该软件包雷竞技苹果下载官方版括一个免费内置的响应式登陆页面模板库和一个用于添加图像和复制的页面编辑器。

当您升级到付费计划时，您还可以为访问者创建个性化的cta、内容和表单，以帮助您提高转化率。HubSpot还提供了测试和分析登陆页面设计性能的功能，以便您可以进行改进。

2.Instapage

Instapage允许您自定义设计和发布post-click登陆页面具有多种模板选项。页面构建器易于使用，并提供A/B测试不同设计的能力，以确定哪种最适合你的用户。该软件还雷竞技苹果下载官方版帮助您优化您的着陆页与动态文本替换，所以您可以自动选择在您的页面上的内容。

3.Unbounce

Unbounce拥有超过100个模板可供选择的登陆页面创建者，使您的设计补充您的品牌和内容。模板是按业务类型组织的，包括SaaS公司、代理机构和电子商务企业的选项。Unbounce着陆页面是响应和完全可定制的。

4.Mailchimp的

Mailchimp的允许你在几分钟内设计你的登陆页面，感谢他们的拖放页面构建器。你也可以设置其他网站内容来填充你的登陆页面，进一步简化设计过程。添加定制的cta，以吸引你的目标受众转换或注册。此外，如果你需要帮助来个性化登录页面，可以查看和参考Mailchimp提供给用户的各种教程视频。

5.Leadpages

Leadpages是一个登陆页设计软件，带有拖放构建器，可以轻松定制雷竞技苹果下载官方版你的登陆页，以适合你的品牌，你可以用软件a /B测试你的设计，以有效地确定哪个选项转换最多的访客。

当你开始思考你的登陆页面设计，并通过我们在本指南中提供的细节进行工作时，你可能会觉得你需要额外的设计灵感。如果是这样的话，请查看我们的博客出色的登陆页面设计．

下载几十个免费登陆页面的例子，以激发您的企业设计。

开始设计你的登陆页面

登陆页面是任何访问你网站的人看到和体验的第一件事。这就是为什么伟大的登陆页面设计是如此重要——它是每个访问者对你的网站的第一印象，也可能是他们对你整个业务的第一印象。

一个好的登录页面能够帮助你产生更多的线索，达成更多的交易，增强你的网站的用户体验，给访问者留下深刻印象，并确保你的网站有一种专业的、基于品牌的感觉。通过以上这些登陆页设计步骤和最佳实践，确保你的登陆页准确地代表你的业务，并使你的线索想要成为客户。

编者按:这篇文章最初发表于2017年8月，现已进行了更新。