您在其他任何地方都找不到的最佳移动登陆页面设计技巧

网上有很多关于移动点击后登陆页面设计的资源，但没有很多具体的设计说明如何实际构建高转换页面。

手机观看推荐什么结构布局？ 按钮应该是多少像素？ 应该用多少像素来分隔元素？ 你应该使用“悬停”效果吗？ 表单标签应该在里面还是外面？

我叫 Cosmin Serban，Instapage 设计服务总监。 你可能会问，是什么让 Cosmin 有资格在移动点击后登陆页面设计上写作？

我一直在向客户介绍设计和构建点击后登录页面的最佳实践，以提高他们的转化率。 另外，我有：

• 审查了 1,000 多个点击后登录页面
• 与客户合作以确保他们的信息得到传达，并且他们的访问者有良好的体验，最终导致转化

此外，我所在的团队开发了 200 多个优化模板，用于创建和启动超过 200,000 个点击后登录页面，您可以在此处找到模板。

移动点击后登陆页面设计：开始之前需要了解的内容

本文中的一些概念是在创建我们的模板库时内部开发的。 这并不一定意味着所有这些提示都应该适用于您创建的每个点击后登录页面。 每个点击后登录页面都有其独特的挑战，但了解这些基本概念肯定会帮助您为从移动设备访问的任何人提供更好的体验。

让我们从桌面和移动体验之间最重要的区别开始。

结构

尽管在您的项目开始时看起来并不像，但拥有一个在正确的时间交付正确的元素组的结构比您想象的更重要。

首先想到的是我们的访问者扫描移动页面上的内容的方式完全不同。 我们都听说过桌面点击后登录页面上的 F 模式或 Z 模式，但移动设备的模式称为什么？ 我们不一定会给它一个名字，但很可能它是非常线性的。 上下滚动是了解点击后登录页面提供的内容的唯一方法：

由于这是访问者与点击后登录页面交互的最重要的限制之一，我们建议坚持一栏布局，而不是试图横向塞入大量内容。 （没有人喜欢捏合和缩放。）

在桌面上，大多数时候数字营销人员会考虑每个单独元素的位置及其影响。 在移动设备上，最好进行转变并考虑元素组以及如何将它们堆叠在一起以获得最大影响。

这个并排比较显示了桌面页面与移动页面的结构：

我们建议从左到右将每组元素放在一起。 让我们以标题区域（折叠上方）为例。 我们将在顶部放置徽标，然后是由主标题和辅助标题组成的组，然后在下方放置整个表单框组。

对元素进行分组的能力创建了一组原生的移动响应对象。 或者，可以将组配置为锁定复杂排列的纵横比，以在将它们转换为页面的移动版本时保持它们的精确比例。

移动纵横比锁定将您的分层分组保持在一起并锁定纵横比，无论它们是在桌面还是移动布局上。

任何两个或多个彼此密切相关或互补的元素都应始终结合在一起。 在这种情况下，将表单框放在页面顶部是没有意义的，因此将表单放在折叠上方区域的概念并不理想。 向访问者提供他们首先注册的内容比仅仅为他们提供一种尽快采取行动的方式更重要。

加载时间

无论您的访问者使用何种设备，页面加载速度都非常重要。 请注意，您的大多数访问者将使用他们的移动数据限制并产生费用来查看您的页面，因此请注意您向页面添加的图形或元素类型。 想象一下访问页面并自动播放视频。

如果您需要大量动画来支持内容，我们建议您坚持使用简单的移动图像。 简单来说，我的意思是您需要为特定部分创建自定义背景图像。 使用照片编辑软件调整照片的大小或布局可能值得花费额外的时间，因为这意味着您可以加快页面速度。

背景图像也是如此，因为您不需要 2,000 像素宽、300kb 的图像来加载您的部分，我建议让设计师创建一个定制的定制图像，您可以将其设置为您的部分背景：

大多数情况下，保持移动页面尽可能简单总是一个好主意。 例如，如果您有多个传达相同信息的图形元素，只需在移动设备上显示一个。

由于大多数手机会适应移动构建器中提供的内容区域的大小，一个好的经验法则是拥有至少 400 像素宽的图像，以确保两侧没有任何空白区域。

构建 AMP 点击后着陆页

在移动设备上创建一个积极的点击后登陆页面是必不可少的，因为点击后登陆页面是发生转化的地方。 如果您的页面加载速度过慢或造成从广告到点击后的脱节体验，访问者将会反弹。

然后，考虑到 Google 将点击后着陆页体验视为确定广告排名的一个因素，这最终会影响您的点击率。 将所有这些加起来，品牌就会面临一个重大问题。 幸运的是，AMP 框架存在。

AMP 页面对广告商尤其有吸引力，因为它们通过近乎即时的加载时间和平滑滚动提供更引人注目的移动用户体验，同时仍支持一些样式和品牌可定制性。 由于 AMP 限制 HTML/CSS 和 JavaScript，因此它可以加快点击后着陆页的呈现速度。 与传统的移动页面不同，AMP 页面由 Google AMP Cache 自动缓存，以加快在 Google 中的加载速度。

AMP 框架的好处确实超过了它的局限性：

• 在移动设备上更快的页面加载速度
• 更好的移动浏览用户体验
• 使用 AMP 页面有助于提高质量得分
• Google 会偏爱使用 AMP 的网页

截至 2018 年 6 月，Instapage 提供 AMP 点击后登录页面，数字营销人员可以在其中在应用程序中构建符合 AMP 标准的页面，而无需开发人员。 因为，归根结底，如果页面加载不是即时的，那就是不够快。

触摸设计

移动点击后登录页面设计面临的最大挑战之一是确保访问者尽可能轻松地采取行动。 该操作可以是表单提交或简单点击按钮。 您会期望大多数人会做出一些调整，但情况并非总是如此。

我们都经历过难以点击某些内容或体验不是为移动用户量身定制的页面。 尤其是文本链接——调整超链接的任何文本元素的大小非常有用。 您的访问者不必放大即可执行您想要的操作。

纽扣

但我们注意到的最大问题是点击后登录页面上按钮的大小。 我们的团队建议设计高度至少为 70 像素的按钮，不要害怕使它们尽可能宽，但不要将它们拉伸到整个宽度（400 像素），因为它们可能会与一小部分混淆。

悬停效果对桌面页面来说是一种很好的触感，因为它向访问者发出信号，他们可以对特定元素采取行动。 在移动设备上，通过，悬停效果是多余的。

边距

对于边距，我们建议在每一侧垂直留出至少 20 像素的安全区域，并避免因元素太靠近手机屏幕两侧而可能出现的任何视觉张力。

留白对于移动页面和桌面页面一样重要。 基本概念仍然适用，只是尝试将所有东西隔开，不要让元素彼此真正靠近。 这样做将帮助您避免视觉紧张。

拥有一致的利润率肯定会带来更好的用户体验。 我们的团队通常确保每个元素之间至少有 20 到 40 个像素。 您决定多少取决于您，因为每个块可能具有独特的元素结构。

这是非常主观的，但是一旦您建立了规则，请尝试在整个页面中复制它，这将使其具有更现代的外观：

可读性

您可能会认为能够清楚地阅读内容是理所当然的，但我们已经看到太多次点击后登录页面的文本太小或太大。 找到一个好的平衡很容易，用于特定元素的字体大小的一个很好的经验法则是：

• 主标题： 28 像素
• 副标题： 22 像素
• 段数： 17 像素
• 其他细节： 15像素

当然，您可以调整这些尺寸，因为没有一种尺寸可以满足所有需求。 但是，它应该作为设计移动点击后登录页面的良好基准。

另一个值得一提的项目是文本元素的行高。

在桌面上的某些情况下，使用 1.0 甚至 1.2 是有意义的，当您构建移动点击后登录页面时，请确保文本元素的行高至少为 1.4。

底线：字体越小，行高应该越大。

形式

由于表单是大多数点击后登录页面中最重要的部分，因此让人们轻松提交信息至关重要。

在我们的移动页面中，我们通常尽可能多地水平拉伸表单域，并避免表单域和按钮在同一行的情况。 这只是一个糟糕的经历：

经常出现的另一件事是处理具有很多字段的表单。

我们团队发现的最佳实践是，当页面有2 个以上的表单字段时，将标签位置设置为外部，使访问者更容易知道需要什么信息，而不是试图记住要输入的内容：

从今天开始增加您的移动转化次数

就像桌面页面一样，移动点击后登陆页面设计首先是关于用户体验，以及什么会说服人们参与和转换。 如果不考虑上述建议，您的移动转化率可能会受到影响，人们会反弹。

考虑实施这些建议，看看您的点击后登录页面如何转变为高度优化的转化资产。 立即获取 Instapage AMP 演示。