梅州网站开发：如何设计有效的移动着陆页

2019.08.13 mf_web

在设计目标网页以在线推广产品或服务时，您最终会将用户指向一个目标。这一目标通常与通过销售或潜在客户创造业务有关。您可能希望用户立即购买产品，或者您可能只是希望他们注册邮件列表。无论目标是什么，您都希望确保用户体验的每一部分都能实现这一目标。

梅州网站开发如果您还没有考虑目标，请从定义目标开始。您是否希望合格潜在客户增加10％？您是否希望将销售额提高20％？根据对您的业务有利的因素建立明确的关键绩效指标最终将帮助您了解如何正确接近目标网页。

每个目标都应该与明确的业务成果相关联。例如，假设您经营一家软件即服务公司，并已确定100名新客户将提供您实现年度收入目标所需的收入。如果您已经建立了适当的分析并且正在仔细跟踪您网站的结果，那么您可能知道注册邮件列表的人中有10％可能会成为付费客户。因此，您建立了获得1,000个新电子邮件注册的目标，这可能会导致您的最终目标为100个新客户。

有关建立现实目标并将其与在线目标相关联的更多信息，请参阅Avinash Kaushik的文章“ Web Analytics 101：定义：目标，指标，KPI，维度，目标。”从能够跟踪正确数据和构建的基础开始从那里建立您可以寻求改进的指标。

最终，在移动登录页面上转换用户的最佳方式是提供您所提供内容的清晰描述，以及与您联系的明显方式。清楚地描述您的产品的作用以及您如何解决目标客户的问题。例如，“有史以来最好的真空”说“用真空吸除99％的过敏原更容易呼吸。”清晰的联系方式包括简单，突出的形式和可见的电话号码，这样访客就不必费力去寻找如何与您联系。

了解您的销售情况，并向用户展示如何购买或与您联系。无论是从内容还是技术角度来看，缺乏任何干扰都有助于确保页面支持您转换用户的目标。

遗憾的是，企业经常设计登陆页面而没有清楚地思考用户将查看页面的每个环境，包括他们将要使用的设备。创建以移动用户为目标的登录页面将有助于您专注于如何最好地在智能手机上转换人。

选择你的工具

要创建符合我们将要讨论的指南的目标网页，您需要选择合适的工具来构建和托管它。如果您拥有正确的编码专业知识，当然，您可以从头开始构建页面。但是，存在许多用于简化登陆页面创建的平台。虽然本文的主要目的是帮助您规划目标网页的元素和结构，但以下是一些建立工具的简要建议。

首先，如果您已经拥有托管服务，那么WordPress为构建响应式登录页面提供了一个很好的起点，该页面可以轻松地与表单和其他元素的插件集成。您将在诸如ThemeForest等网站上找到许多预先构建的模板。

接下来，其他几个工具允许您在其平台上创建和托管页面。Unbounce和Wishpond是两个流行的平台，它们不仅可以构建页面，还可以实现A / B测试，我们将在上一节中讨论。Neil Patel 详细介绍了各种登陆平台。

考虑内容

快速谷歌搜索将为您提供数以千计的文章，为登陆页面内容推荐各种最佳长度。一位消息人士称至少包含500个单词，而另一位消息人士建议最多包含1,000个单词。实际上，理想长度取决于您的销售情况和受众群体，您可以测试以确定最佳转换长度。但是，一旦内容被压缩为移动格式，您就需要特别考虑用户愿意阅读的内容以及在您失去转换机会之前它们将滚动多远。您可以使用A / B测试工具（稍后详细讨论）测试具有更多或更少内容的页面（例如，针对1,000字的页面测试500字的页面），监控转换率以确定用户是否更多可能会通过更多或更少的单词与您联系以便阅读。

要确定哪些内容长度非常适合您的用户，您可以测试一下他们平均浏览内容的时间。除了滚动之外，您还应该通过观看视频，点击链接或填写表单来考虑人们参与内容的可能性。使用热映射工具可以测量这种活动，我们将在本文后面深入讨论。

此外，您可以从一些假设开始，例如认为大多数移动用户停在屏幕底部的“折叠”处。但是，一些研究表明，只要页面提供了用户友好的界面，大多数网站访问者都会自然滚动。例如，“ 时代”文章分享了页面上66％的活动发生在首屏下方。考虑到这一点，仍然尽可能保持重要内容和元素的可见性，但不要回避在副本中提供更多细节。

如果您希望为空调维修业务创造潜在客户，那么人们更有可能希望能够直接打电话或填写表格。如果有人的空调机组在90度的日子里被打破，他们可能不会想要读一篇关于空调内部工作的2000字的文章。它们可能会在到达包含联系信息的部分之前滚动浏览冗长的文本而关闭。他们希望能够找到可以来修理他们单位的人，并确保他们联系的人能够快速到达以解决问题。

但是，如果你以每个5000美元的价格销售奢华金表，你可能会更好地包括一些关于什么让你的手表与众不同的详细解释。在这种情况下，您的目标是那些希望阅读和可视化产品详细信息以便做出购买决策的富裕受众群体。他们不太可能在信息有限的情况下做出购买决定：他们希望看到展示奢侈手表各个角度的图片，一个关于每块手表如何用最优质材料手工制作的视频，以及关于终身保证的写作。

无论内容的长度如何，请注意在移动设备上查看时各个段落不会变得过长。虽然段落可能在桌面屏幕上仅延伸到四行文本，但当压缩到移动屏幕大小时，同一段落可能会占用十行。更频繁的段落打破将提高易读性。

专注于转化

无论是通过付费搜索还是社交媒体广告系列进行宣传，目标网页都应该专注于将用户转化为销售或潜在客户。在确保品牌完整性和撰写副本以呈现产品或服务的过程中，不要让这个主要目标落在路边。特别是在移动设备上可用的有限空间内，您将有一个简短的窗口，可以吸引用户的注意力，并最终让他们进行转换。

对于寻求生成潜在客户的服务相关业务，例如空调维修示例，您应该在所有设备上突出显示电话号码。当用户希望立即解决问题时，尤其是在通过电话浏览时，他们通常更愿意拨打电话进行维修。确保在页面的移动版本中包含点击通话功能。

Progressive Insurance登陆页面 — Progressive Insurance的登陆页面（查看大图）

例如，查看上面用于付费搜索的着陆页。在桌面格式中，唯一的转换选项是报价表单。但是，一旦页面缩小到移动设备大小，右上角会出现一个电话图标，提供单击呼叫的选项。此更改为移动设备提供了积极的转换焦点，因为从智能手机搜索保险的用户可能希望与代理商交谈。

除了电话号码，请确保表单在移动设备上占据显着位置。包含表单的某些响应式设计模板可能会缩小到表单不再以移动设备大小显示的程度。这很可能会导致更少的潜在客户。

确保表单的字段足够大，可以用手指轻松点击。虽然表单可能在桌面大小上完美运行，但字段可能缩小到难以在手机上选择的程度。有关设计登录页面表单的更多信息，这些表单将有助于移动设备上的转换过程而不关闭用户，请参阅UserTesting的文章，其中介绍了可用性资源。

避免用户体验障碍

在创建移动登录页面时，营销思维经常导致忽略用户体验。在介绍每个可能的内容或呈现注册表单的方式的过程中，您最终可能会关闭可能需要时间阅读页面并进行转换的用户。在启动任何广告系列之前，请检查具有多个用户的多个设备上的目标网页，以确定可能需要解决的问题。以下是潜在障碍的几个例子。

非页内形式

插页式表单是“强制”用户转换的诱人选项。但是，他们倾向于创建比转换用户更多的恼人用户，尤其是在移动设备上。例如，谷歌的一项研究显示，推广Google+应用下载的插页式广告导致69％的用户立即离开该页面而没有参与其中。

虽然插页式简报注册表单可能很容易在桌面上关闭，但手机上的相同弹出窗口可能会缩小到“x”很难点击的程度。特别注意这种转换策略，这些转换策略会成为移动用户的挫折障碍。具有讽刺意味的是，人们可以被那些旨在增加额外转换机会的元素所拒之门外。例如，根据在VentureBeat的引用的研究，“观众是2X一样可能有负面的情绪反应全页插页式广告，而不是一个奖励，选择加入广告。”此外，请注意，谷歌最近开始惩罚网站的一些突兀的插页式格式。

响应式设计缺陷

此外，考虑如何将响应式设计因素融入移动体验中。从理论上讲，响应堆叠元素以适应屏幕尺寸的想法很有效。但是，如果您没有仔细规划元素在移动设备上的堆叠方式，则此设置可能会导致用户不得不过度滚动以获取表单。模板化网站可能会在底部堆叠一个表单，但您应该重新调整布局以将表单放在页面的较高位置，或者包含一个清晰的“联系人”按钮，该按钮会滚动用户的活动并在单击时直接指向表单。

文本注意事项

另外，考虑一下压缩到移动尺寸时文本的外观。会不会太小？颜色是否易于辨认？例如，下面页面的白色文字在大尺寸的深色背景上看起来很好，但在移动尺寸下与浅蓝色背景混合。但是，从积极的方面来说，看看表单字段从四个变为一个，使得在移动设备上完成表单的过程更简单。

此外，请勿将用户置于目标网页上。虽然您确实希望专注于转换，并且不一定需要您网站的完整导航栏，但您也不希望挫败正在寻找有关您的品牌的更多信息的用户。使您的徽标可以点击回主网站，或者提供页脚链接。

测试经验

为了更好地识别网站的哪些元素是不可用的，请在移动设备上测试网站的体验。让人们在Android和iOS上使用不同的手机模型，找到您认识的人或使用UserTesting等网站。

通过启动页面，您可以使用Optimizely或Google Analytics的免费内容实验等工具A / B测试网站上元素的位置。例如，如果出售给利基受众的高价产品，您可能想要测试这些人是否确实会对他们立即看到的表单做出回应，或者他们是否需要在决定转换之前阅读内容并查看图像。有关更多想法和提示，请参阅Shopify的“ 初学者简单A / B测试指南 ”。

此外，安装一个热映射工具，如Crazy Egg或Hotjar，通过插入您网站的跟踪脚本来测量点击和滚动活动。通过这些数据，您可以更仔细地查看人们如何滚动以及他们与之交互的页面元素。通过这种方式，您可以确定普通用户可能阅读的内容的距离，以及可能产生响应的按钮和表单配置。

请务必查看特定于移动设备的热图。虽然桌面热图可能没有显示任何问题，但移动设备可能会显示不同的故事。当然，数据会因网站而异，但您可能会发现，与移动用户相比，您的桌面用户中有更大比例的用户滚动浏览整个页面（反之亦然）。或者您可能会发现桌面用户更倾向于填写更长的表单，而移动用户填写前两个字段然后由于移动设备上的错误功能而退出。在下面的示例中，查看用户如何滚动浏览桌面上的更多内容而不是移动设备上的内容。根据这些数据，开发人员明智地可以在移动版本的页面上删除一些冗长的内容。

此外，使用Google Analytics查看目标网页上的移动设备效果。在查看数据时通过设备进行细分，以识别移动使用的特定问题。例如，在下面显示的示例中，我们在“行为”→“目标网页”报告下选择了一个特定的目标网页，并使用“辅助维度”下拉菜单按设备类别划分效果。在这里，我们可以看到移动会话导致转换率显着低于桌面（0.65％对2.35％），这表明用户体验不佳的潜在旗帜。

了解感知绩效

虽然页面加载速度对于任何设备上的任何网站都至关重要，但您应该特别考虑页面在移动设备上加载的速度。等待图像加载所花费的额外时间可能意味着不耐烦的移动用户放弃了。为了引起用户的注意，请确保在用户眼中尽快加载资源。

一个有用的解决方案涉及在登录页面上预加载资源。您可以使用HTML5预取来获取将在用户单击目标网页上的号召性用语按钮时显示的页面上使用的某些素材资源。此外，您还可以动态注入资源提示，告诉浏览器提前下载所需的资源。有关此主题的更多信息，请参阅Denys Mishunov关于“ 为什么性能重要 ”（包括第2 部分和第3部分）和CSS-Tricks关于预取的文章。