如何设计有效的登陆页面

登陆页面可以描述为将访问者推向单个操作的单页网站。 这种对单一目的的关注是使登录页面与其他网站不同的主要特征。

他们的主要目标是产生通常与电子邮件和社交媒体活动相关的潜在客户，并将这些潜在客户转化为买家和订阅者。 将访问者转化为潜在客户和买家的过程通常通过号召性用语按钮和潜在客户生成表单来完成。

登陆页面是互联网访问者在前往您希望他们在您的网站上执行的重要操作的途中首次到达的任何网页 – Tim Ash，登陆页面优化

登陆页面起源于微软在其 Office 套件中遇到的销售不佳的情况，并且已经扩展到电子邮件营销解决方案、客户管理和潜在客户捕获功能现在成为标准的地步，并且是通过营销手段留住和获取客户的强大工具和设计技巧。

尽管是一种狭隘且有些基本的客户获取和销售形式，但登录页面仍然是营销人员使用的最强大的工具之一。

有效的登录页面用于转换和面向销售的任务，例如：

• 推广新产品
• 不断增长的订阅者列表
• 增加销售和潜在客户
• 通过表单获取见解和数据

着陆页设计最佳实践

登陆页面虽然与普通网站非常相似，但用于不同的目的。 以下是有助于使着陆页看起来很棒并且转换良好的关键特征：

1. 视觉简洁

视觉简洁性考虑了登录页面用户界面的所有元素。 保持视觉简洁和简约设计很重要，因为它可以提高访问者的注意力并有助于展示价值主张。 以下是视觉简洁的一些特征：

• 视觉简洁性通过将访问者与其他元素隔离开来保持空白，将访问者集中在号召性用语 (CTA) 上。
• 视觉简洁性使关键功能和号召性用语很容易脱颖而出。
• 视觉简洁性通过以使它们脱颖而出的方式显示元素来创建对比。
• 视觉简洁性通过以引导用户继续阅读的方式放置元素来保持设计流程。

2. 伟大的登陆页面始于伟大的媒体

登陆页面上正确的图像和视频将有助于说服访问者采取行动。 出色的图像有助于讲述故事，有效地展示产品，并与访客建立个人联系。

显示图像的相关性至关重要。 显示友好、真实的人的图像而不是普通的库存图像有助于建立与访问者的信任。 包括相关的产品和服务图像可以让访问者更好地了解他们所购买的产品。

对视频对着陆页的影响的研究表明，视频比静止图像的影响更大，“71% 的受访者确认视频比其他内容的转换效果更好。” 视频有助于 SEO，保持用户参与度，并更好地向访问者解释产品或服务。 另一个有利于视频的因素是，如果使用得当，它们可以取代可能会损害转换的冗长副本。

3. 颜色的重要性

研究表明，颜色对我们的心理影响很大——影响我们的感受和行为方式。 适当的调色板可以改善用户界面并帮助指导用户的行为，从而提高登录页面的转化率。

以下是有关如何有效使用颜色的一些提示：

• 了解如何使用允许创建高对比度的高颜色和低颜色，这与复制可读性直接相关。
• 创建一个由兼容的颜色组合组成的调色板，并以互补/相反的颜色为基础。
• 从心理学和市场营销的角度解决颜色问题。 根据产品/服务，使用传达正确信息的颜色（例如，绿色是传达安全、信任和冷静的颜色，因此，它最适合与金融相关的产品使用）。
• 在针对不同的人口统计数据时考虑颜色象征。 不同的文化对颜色的解释不同，因此适用于一个用户群的可能不适用于另一个用户群。
• 了解颜色解释因性别而异，在挑选颜色时没有“防弹”解决方案。

5.登陆页面响应式设计

响应式网站成为行业标准已经有好几年了，登陆页面也不例外。 响应式登录页面旨在在移动设备上提供与全屏布局相同级别的用户体验和 UI。

通过移动设备进行的在线购买正在增长，因此手机将很快成为在线购物和购买的主要流量来源。 由于着陆页以转化为导向，因此了解移动受众的潜力并适应该流量漏斗非常重要。

下图显示了移动用户在着陆页响应式设计统计数据方面的百分比：

尽管大多数提供登陆页面的服务已经将响应能力集成到他们的模板中，但如果决定设计一个独立的登陆页面，那么登陆页面设计最佳实践要求响应能力是绝对必须的。 原因如下：

• 响应式布局提供与主登录页面相同的功能和内容。
• 响应式着陆页受益于来自手机和平板电脑的大量流量。
• 响应式登录页面与引导流量的 SMM 活动很好地集成在一起。
• 由于布局复杂性降低，响应式登录页面更容易构建。

内容——一个伟大的登陆页面的基础

1.醒目简洁的标题

标题是访问者到达目标网页时首先看到的内容，是吸引访问者的有效方式。 将标题视为吸引或失去访问者的“钩子”。

如果您没有在他们进入您的目标网页的最初几秒钟内吸引他们，您将失去读者。 除了给人留下深刻印象，作为最突出的元素的标题应该传达基本信息和独特的销售主张。

一个有效的着陆页标题是：

• 有说服力和吸引人的
• 简短但清晰，并说明它解决了什么问题
• 传达一种紧迫感

2. 强烈的行动呼吁

号召性用语按钮是出色登陆页面的核心组件，并且充当您的产品或服务与用户之间的主要网关。

应用以下提示可以改善您的 CTA“按钮游戏”：

• 把它放在首位，并把重点放在主要的 CTA 上。 始终让访问者轻松执行所需的操作。
• 使用暗示性图像和视觉提示将访问者引向 CTA。
• 使用强烈而明亮的颜色，通过创建对比度使 CTA 按钮脱颖而出。
• 在号召性用语中使用自然且可操作的短语，例如“立即开始”和“立即获取免费报价”。 避免使用像“提交”和“发送”这样的简单短语，因为它们在转换方面没有那么有效。

3. 心理方面

每个人都受制于心理原则和规则。 人们的动机、愿望、信念和偏见会引导他们做出具体的选择。 这些选择受到多种因素的严重影响，有意识的或无意识的，并且有一些方法可以影响它们：

• 利用与用户上下文相关的移情图像。 这可以在情感层面实现更好的连接，并向用户传达同理心。
• 登陆页面上的关键元素，例如标题和号召性用语按钮，应该为用户创造价值和紧迫感。 这可以通过编写适当的副本和使用对比色来实现。
• 信任徽章、评级和奖励等小部件应显示在首屏。 这传达了一种信任的感觉。
• 显示相关推荐书可以作为对访问者的社会证明，并提高可信度和可信度。
• 展示与服务或产品相关的标识和品牌有助于通过社会证明建立信任。

4.登陆页面上的人员使用

除了可用于从登录页面中获得更多收益的各种心理方面外，使用人和友好的面孔是一种经过验证的技术，可以提高登录页面的转化率。

使用真实的、日常生活中的人的图片而不是物品或库存图片有助于建立更加个人的联系，并引起访客的更多同情。 因为人们通常在情感和潜意识层面做出决定，所以通过图像建立情感联系是一种非常强大的技术。

探索在网页设计中使用人类图像的研究发现，包含面部特征的网站会激发人们认为网站值得信赖并因此更具吸引力的感觉。

另一个吸引 CTA 注意力的好方法是使用人们查看标题和号召性用语按钮的图像。 这种技术使用户更容易看到重要的 CTA，并导致转化率更高的着陆页。

登陆页面设计中的常见错误

1.没有图像或低质量的图形

一张图片胜过千言万语。 – 谚语

研究表明，人们对图像的感知更好，符号比文本快 1000 倍以上，这强调了使用高质量图像和视频的必要性。 通用的、像素化的、过时的图像和股票摄影会损害可信度，降低可信度，并使着陆页在读者眼中不那么真实。

2. 内容过多且复杂的页面布局

着陆页旨在易于使用且易于理解。 过于复杂而无法滚动、难以扫描以及 UI 元素过载的布局很少能提供价值并显着降低着陆页转化率。 应根据具体情况决定使用常见的网站元素，如导航栏、页脚和类似元素。

了解用户的观点可以更有效地发现设计中的弱点，有助于使页面流程更直观，并且扫描登录页面的过程更容易。

A/B 测试登陆页面是收集可用于改进登陆页面布局的见解的好方法。 另一种选择是使用基于证据的 UX 设计技术，例如 F 形和 Z 形图案布局。

这些类型的布局已经过彻底分析，并使用显示常见用户交互模式的数据进行备份。 展望未来，应用来自研究的数据会极大地增强用户与着陆页内容交互的能力。

3. 无法扫描的副本

登陆页面上的良好副本对于为访问者创造清晰直观的体验至关重要。 写得好的文案不仅具有启发性，而且令人兴奋。 由于营销人员、设计师和企业主了解出色文案的价值，因此为登陆页面编写文案需求量很大。

以客户为中心的文案的一个重要原则是讲故事。 过多的文本、语法错误、大量完整的文本以及乏味的语气可能会导致着陆页效果不佳。 如果访问者觉得文案是为他们量身定制的并讲述了一个引人入胜的故事，他们会更加信任你。

概括

登陆页面本质上是关于获取和留住访问者，以及将他们转化为买家和订阅者，它们目前是营销人员用来收集潜在客户的最受欢迎的工具之一。

各种营销和设计技术的使用可以对用户的参与产生强大的影响。 本文中概述的着陆页设计技术和心理学原理有真实数据支持，并被证明可以保证着陆页有效、转化率高且以结果为导向。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验