如何使用专家提示创建着陆页线框

已发表: 2018-05-08

点击后登陆页面通常是人们对您品牌的第一印象之一，因此让它与众不同很重要。点击后登录页面线框可以帮助您在实际构建页面之前可视化页面元素的排列。

什么是点击后登陆页面线框？

线框是点击后登录页面的基本设计布局或骨架，让利益相关者了解页面的结构以及构建它需要哪些资产。

Instapage 的视觉设计师 Rares Cimpean 解释说：

在制作点击后着陆页线框时，您应该关注页面的流程、可用性和可访问性，人们获取所需信息的速度有多快，CTA 的可访问性和可识别性等。所有这些因素线框图阶段考虑。

以下是一些线框点击后登录页面示例，包括长篇和短篇：

点击后登录页面线框模板有几个主要目的：

作为你的纸笔草图和第一个原型之间的中间地带
呈现将在页面上显示的内容的概述
提供页面结构的蓝图
传达用户界面的整体方向

注意：没有适合所有活动的单一点击后登录页面线框设计。一些点击后登陆页面可能只需要一个标题、项目符号副本、表单和 CTA 按钮，而其他人可能需要突出额外的好处并展示社会证明。例如，销售页面通常需要更详细的产品描述，并且可能需要更长的时间。（请记住，您始终可以对短页面和长页面进行 A/B 测试，看看哪个会产生更好的结果。）

无论您要绘制哪种类型的页面，我们的图形设计经理 Rafal Bogdan 都表示一开始保持线框图非常简单的重要性，以免让相关利益相关者不知所措：

我不想太深入地关注下一阶段利益相关者可能拒绝的元素。 线框的主要思想是在点击后登录页面上显示特定的项目功能，并帮助他们了解这些功能在真实页面上的表现。

一旦你有了你的线框，是时候让设计让它发光了。以下是通常出现在高转化率点击后登录页面上的元素。

如何线框点击后登录页面

没有导航

由于点击后登录页面是为转化而设计的，而且目的单一，因此不应有导航链接会分散用户对转化目标的注意力。要么转换，要么离开——别无选择。

许多公司在移除导航栏后的转化率发生了重大变化：

在移除顶部导航栏并修改表单布局后，Career Point College 的转化率提高了 336%。
通过移除导航栏，Yuppiechef 见证了转化率提高了 100%（从 3% 到 6%）。
在他们进行 A/B 测试移除顶部导航的那一个月内，SparkPage 的转化率从 9.2% 增加到 17.6%。

Comporium Media Services 是另一个了解删除导航以最大化转化的必要性的品牌。甚至他们的徽标都没有链接，这使访问者留在页面上并专注于请求咨询：

在遵循最佳实践时，应该使用的唯一链接是那些提高可信度的链接（例如使用条款和/或隐私政策），以及增强用户体验的链接（例如锚标签和点击通话电话数字）。

标题和副标题

您的标题是最重要的元素之一，因为没有引人注目的标题，访问者就不会被说服继续评估您的报价。由于这是传递信息的主要方式，因此它必须引起注意，并在用户登陆页面后立即清晰可见，并且位于首屏。

您的副标题用于补充您的主标题，尤其是当主标题很长或需要额外的上下文（例如统计数据）时。

写一个好的标题的关键是确保它传达您独特的价值主张 (UVP)，或者是什么使您的产品或服务与竞争对手区分开来。

这个 Autopilot 点击后登录页面标题让公司知道，与其他营销自动化软件相比，他们可以在 Autopilot 上“增长得更快”。然后副标题通过描述它们如何可以更快地增长来补充这个想法：

除了包括您的 UVP 之外，还有四种主要类型的引人注目的标题：

新闻：向潜在客户介绍新的解决方案
自利：诉诸潜在客户固有的自利<
快速简便的解决方案：满足潜在客户对快速修复的渴望
好奇心：激发游客的兴趣和好奇心，吸引他们阅读更多

您可以使用一个或组合多个以获得更强大的标题。最引人注目的标题使用两个或更多。

媒体

由于人们处理视觉效果比处理文本更容易，因此引人入胜的媒体（图像、GIF 和视频）有助于传达报价的价值，甚至比文字更能传达。但是，视觉效果并不是一刀切的解决方案。您为点击后登录页面选择的媒体类型取决于您提供的内容。

点击后登录页面图像的类型包括：

英雄镜头：让访问者一瞥您的产品或服务将如何改善他们的生活
产品图片：使访问者能够查看您的报价的详细信息，包括其主要功能
信息图表：允许访问者更轻松地概念化数据和统计数据（图表、图形等）

看看 iContact 用来向潜在客户展示他们帮助创建的商业电子邮件的几个示例的图像：

除了图像之外，还存在多种类型的点击后登录页面视频：

解释视频：解释你的产品是如何工作的——特别是如果它是新的或复杂的——重点是它如何使你的潜在客户受益
介绍视频：展示新公司、发布新产品或突出新产品功能
视频推荐和案例研究：通过展示真实、满意的客户来解释他们对您的产品或服务的满意度和成功，以此作为社会证明

如果使用图像，请远离库存照片，除非它们传达了您报价的真实情况并且与主题相关。少一点，你就有可能降低你的品牌认知度和价值。

复制

无论您多么想告诉访问者有关您的报价的所有信息 - 都不要。注意力持续时间最多只有几秒钟，所以你的文案必须简洁并能立即吸引人们的注意力。

例如，要点（由图标、复选标记、箭头等标记）是传达重要信息的常用方式，允许访问者快速浏览页面，并确定要约的关键要点。

借助粗体部分标题、最少的副本和要点，潜在客户可以快速了解 Highfive 的视频会议解决方案：

社会证明

在转换之前，人们需要相信您的公司提供可靠的服务。这就是社会证明可以通过多种方式说服他们的地方：

客户推荐：向潜在客户展示您兑现了您的承诺，因为它是直接从您的客户那里得到验证的（通过引用包含特定信息、统计数据、全名、专业隶属关系和头衔以及头像）。
客户标志（和数量）：显示您已经合作过的知名公司（以及多少家），让访问者知道，“既然我们的产品或服务对他们来说已经足够好，那么它也将适合您。”
行业奖项：证明您已得到行业领袖、记者、新闻台、网站等的公开认可。
信任印章：确保潜在客户的付款信息安全可靠，不受外界影响。
隐私政策：向潜在客户保证他们的电子邮件地址将被正确使用，不会与任何其他人共享。

回顾之前的同一个 Highfive 点击后登录页面，查看他们用来说服访问者转换的所有社会证据——品牌标识、引用的推荐和行业星级：

这是另一个例子，这次来自 Splash Omnimedia，其中包括所有类型的社会证明——客户数量、品牌标识、案例研究视频和引用的推荐：

通过结合所有这些证据，您可以通过单击 CTA 按钮说服潜在客户进行转换。

潜在客户捕获表格

创建完美的表格并不容易。没有足够的表单字段，您将无法收集所需的所有信息；字段太多，您可能会吓跑潜在客户。表格的长度取决于您的报价在营销漏斗中的位置。一般来说，越高的形式越短，反之亦然。

Justworks 设计了这个点击后登录页面来提供定价信息。由于这是一个顶级的报价，它只包含三个来自字段并请求非常基本的信息是有道理的：

相比之下，Autopilot 的免费试用在漏斗的更深处，因此询问更多信息是可以接受的：

呼吁采取行动

您的 CTA 按钮是点击后着陆页转换发生的地方，因此它必须突出并渴望被点击。以下是优化 CTA 按钮的主要方面：

颜色：使用色彩理论找到一种色调、色调、色调或阴影，对比良好并从页面的其余部分中脱颖而出。
文案： “提交”和“下载”是通用的，没有灵感。相反，制作特定的、个性化的副本并合并“你”、“你的”、“我的”和“我的”，以产生更多的 CTA 按钮点击。
尺寸：不要让人们搜索按钮——让它引人注目。 它还可以提供视觉提示——比如 Volusion 点击后登录页面中的弹跳箭头
下面 - 引起更多关注：

最小的页脚

点击后登陆页面和网站页脚不一样。点击后着陆页页脚不应包含站点地图、产品页面链接或社交媒体帐户。您包含的每个链接都会造成另一种干扰，并让他们以另一种方式离开您的页面而无需转换。

看看 Infegy 为访问者提供的所有这些逃生路线：

如果您选择包含点击后登录页面页脚，请确保它只显示最新的版权信息、服务条款和隐私政策，就像 Tapstone 所做的那样：

留白

留白让您的页面呼吸，以便所有元素都吸引注意力，访问者可以更轻松地浏览您的页面。还添加空格：

减少杂乱
增强可读性
建立视觉层次
让您的点击后登陆页面看起来更专业

比较以下来自 NASM 和 Acquisio 的点击后登录页面：

NASM 的页面很拥挤，对于某些人来说可能会让人不知所措，因为很难决定先看哪里，以及如何浏览页面。 Acquisio 的页面有足够的空白空间，因此可以更轻松地从上到下导航，并提供更好的整体体验。

一切都始于点击后登录页面线框

创建线框可以让您的团队确定整个页面故事，查看需要哪些资产以及需要多少副本。从那里，您可以使用上述建议设计优化的点击后登录页面。但是要构建个性化的、100% 可定制的点击后登录页面，您需要一个功能强大的解决方案来完成这项工作。

借助 Instapage，营销人员可以使用我们对设计师友好的构建器、CSS 编辑器、对齐和分组、热键等来创建像素完美的页面。然后，使用内置热图进行 A/B 测试以获得更高的转化率，并使用 Instablocks™ 扩展您的生产。没有其他解决方案可以比较。立即注册 Instapage Enterprise 演示。