为转换而生——着陆页设计最佳实践

登陆页面是访问者在点击营销号召性用语后到达的任何页面。 这可以是搜索或展示广告、电子邮件、社交媒体帖子或附属链接。

一些公司将来自这些引荐来源的流量发送到他们的主页； 这是一个错误。 登陆页面提供了几个好处，包括与任何引用来源一致的明确报价。 与简单地将新访问者发送到主页并希望他们弄清楚如何在点击时找到所提供的内容相比，这会产生更高的转化率。

通过遵循此处包含的登陆页面设计最佳实践，设计师可以创建更有效地转换的登陆页面。

强调好处

产品设计师倾向于关注功能； 消费者想知道这些好处。 他们想看看这些功能如何影响他们的体验。 一个人不买车是因为它有 300 马力； 他们买它是因为 300 马力让他们跑得很快。 这就是为什么许多汽车广告提到他们的 0-60 次，而不仅仅是马力数字。

在登陆页面上，这意味着使用标题和项目符号列表等元素来突出产品的优势。 这是用户首先想知道的：这个产品对我的生活或业务有什么好处？

使用相关图片

人是视觉动物。 图像的缺乏可能会让查看着陆页的人感到不安。 良好的图像增加了消费者和公司之间的信任感。

有许多类型的图像可以有效地用于登录页面。 产品图片是最明显的选择。

随着用户对真人照片的反应更好，使用该产品的人的图像更加引人注目。 另一方面，模型的库存照片不一定会增加用户的体验。

着陆页设计师应该致力于使用能够在访问着陆页的人中产生情感反应的图像。

测试你的 CTA

可以说，任何着陆页最重要的部分是号召性用语。 由于它们的重要性，设计师需要测试他们的 CTA 以确保优化它们以获得来自访问者的最高数量的积极响应。

A/B 测试是测试 CTA 的最简单方法。 设计师可以在一段时间内随机向访问者显示两个登录页面，除了 CTA 本身的差异外，每个页面都相同。 从那里，他们可以继续改进和测试，直到 CTA 获得所需的结果。

设计人员应该考虑测试诸如 CTA 按钮颜色、CTA 周围的语言（以及按钮本身）以及 CTA 在页面上的位置等内容。 （着陆页的其他部分也可以进行 A/B 测试以获得更好的整体结果。）

让它适合移动设备

考虑到有多少人在他们的移动设备上浏览网页，设计师忽略他们的登陆页面在小屏幕上的外观是错误的。 虽然创建在移动设备上看起来不错的设计是一种选择，但简化登录页面使其在移动设备上更有效是一个更好的主意。

移动友好性对于社交媒体帖子和广告或电子邮件指向的登录页面尤为重要。 2017 年，75% 的电子邮件用户报告说在移动设备上查看了他们的电子邮件（此后这一数字仅上升）。 全球 42% 的人（不仅仅是互联网用户）通过他们的移动设备使用社交媒体网站。 此外，在 2018 年，40% 的黑色星期五销售额来自智能手机或平板电脑。

人们不只是在智能手机上浏览社交媒体和阅读电子邮件。 他们进行购买、注册服务以及完成公司希望他们执行的其他操作。 忽视这一巨大市场份额的设计师充其量是短视的。

确保与引用来源一致

当有人点击电子邮件中的广告或链接时，必须与他们最终到达的目标网页保持一致。 这可以通过几种不同的方式完成，具体取决于引用源是什么。

例如，如果引荐来源是搜索广告，那么在广告和用户最终到达的目标网页之间使用一些相同的语言可以提供一致性。 如果引用来源是电子邮件，那么使用相似的图像和配色方案可以提供访问者所需的一致性。

在设计登陆页面时，设计师应该知道引用来源是什么，以确保它们至少在几个方面匹配。

包括社会证明

人们想知道他们正在考虑购买的产品是否让其他客户满意。 社会证明是提供这种保证的最佳方式之一。

有几种方法可以提供社会证明。 一种是在登陆页面上突出显示推荐或评论。 另一种方法是包括有关产品的社交媒体对话。 然而，设计人员在这样做时应该小心，因为自动显示所有社交提及可能最终会同时显示好与坏。

不要让登陆页面做不止一项工作

一个着陆页应该只有一项工作要做，这应该在设计之前确定。 一个要求访问者购买东西但也注册时事通讯的登录页面正在分散该访问者的注意力。 这使得他们不太可能采取最理想的行动。

设计师应该考虑什么是行动号召，并确保登陆页面上没有提示其他操作。 甚至像其他导航元素这样的东西也会引起访问者的注意并阻止他们完成所需的操作。

不要要求提供比要求更多的信息

要求太多信息可能是让访问者从登录页面反弹的一种快速方法。 然而，通常会看到登录页面的表单不仅要求提供姓名和电子邮件地址，还要求提供电话号码、公司名称、职位等。

除非访问者可以立即看到提供该信息的价值，否则会大大增加他们从页面跳出的机会。 为了降低着陆页的跳出率，设计师应该只要求提供最少的信息以完成报价。

登陆页面表单上常见的另一个关键可用性问题是它们没有针对移动设备进行优化。 表单字段的编码方式应为每个字段提示适当的键盘布局。

这意味着，例如，当用户输入他们的电子邮件地址时，键盘会在主屏幕上显示“@”符号； 或者当请求电话号码时，键盘切换到数字输入。 这个小细节极大地改善了移动设备上的用户体验。

不包括导航栏

不包括导航栏直接与单一目的登录页面的想法有关。 导航是登录页面上的视觉混乱，可能导致用户在未完成所需操作的情况下单击站点上的不同页面。

消除导航栏有助于保持访问者的任务。 如果设计师关心向访问者提供更多信息，则应将其包含在目标网页本身或页面下方的链接中，最好在第一次号召性用语之后。

通过给他们其他选项来分散准备注册或购买的用户的注意力是没有意义的。 尽管如此，许多登陆页面都包含额外的导航选项。

不要弄乱页面

登陆页面应仅包含登陆该页面的人员完成所需任务所需的信息。 访问者需要的投资越多，在大多数情况下，需要的信息就越多。

例如，不要求提供付款信息的免费试用是一个相当低风险的提议，并且不需要提供太多信息。

但是，请求用户进行购买的页面通常需要向用户提供更多信息。 随着价格的上涨，信息量只会增加。

设计师在创建登陆页面时应该遵循良好的设计原则，就像他们对任何其他页面所做的那样。 极简主义和简单的设计通常是首选，只要它们适合相关品牌。 内容周围的空白区域可防止用户不知所措，并使他们能够专注于重要的事情。

不要偏离既定模式

人们对登陆页面有一定的期望。 他们想知道好处，他们想要一个明确的价值主张，他们想要一个易于完成的号召性用语。

当设计师偏离已建立的登录页面模式太多时，他们可能会疏远用户并干扰他们完成手头的任务。 实验性设计很棒，但通常更适合其他类型的页面和网站。

不要通用

虽然坚持既定模式是个好主意，但这并不意味着登录页面必须是通用的。 设计师应该考虑如何在登陆页面中加入额外的细节和设计元素来改善用户体验，抓住用户的注意力，并加强产品的价值。

这可能包括视频内容、动画、幻灯片或许多其他设计元素。 适用于一种产品或服务的东西不一定适用于另一种产品或服务。 设计师应该在其着陆页上随意尝试非传统的内容，但要准备好针对更传统的方法进行 A/B 测试，以确保它们不会将访问者赶走。

结论

登陆页面是任何在线营销活动的重要组成部分。 他们的独特目的有助于在不分散访问者注意力的情况下推动转化。

遵循着陆页最佳实践的设计师可以通过创建转化率高于竞争对手的页面，为他们所服务的品牌创造更多价值。 保持登陆页面简单，专注于 CTA，保持表单简短，以及其他已经提到的指导方针，将使登陆页面更有效地执行，同时也改善用户体验。

• • •

进一步阅读 Toptal 设计博客：

• 如何设计有效的登陆页面
• 使用这些着陆页灵感转换访问者
• 美学和感知——如何处理用户体验图像
• 设计原则及其重要性
• 设计师的有效沟通策略