加入我们Facebook社区

移动登陆页面转换的7个关键设计元素

张贴了Guest Blogger. 2017年6月21日 博客设计 0评论

7转换移动登陆页面的7个关键设计元素problogger.

这是Shane Barker的贡献。

如果您一段时间一直博客,那么您可能熟悉着陆页面,并且甚至可能为不同的广告系列使用了一些。无论您是试图驱动人们注册邮件列表,还是购买您正在推广的产品/服务,登陆页面都可以帮助您实现转换目标。但是您的着陆页是否针对移动用户进行了优化?它是否能够在移动设备上推动足够的转换?

想象一下你正在使用智能手机阅读别人的博客,而你点击链接了解某个产品的评论在帖子。但是你最终会看到一个很难查看和导航的页面。你要么斜视,要么放大来阅读页面内容。这可能会毁掉你的体验,甚至可能迫使你离开页面。结果呢?对于博主来说,这意味着他们失去了改变你的机会。

不要再犯同样的错误。当你在设计一个登陆页时,确保你优化为移动用户提供。以下七个关键设计元素可以帮助你设计一个针对转化率进行优化的手机登陆页面。

1.一个简短但有力的标题

登陆页面的标题应该总是清晰和简洁。对于一个手机登录页面,你的标题必须更短,因为你有更少的空间来工作。用不超过五个单词,描述你的网站是关于什么的,或者你的产品是做什么的。这可能很难,但也不是不可能。

看一下Squarespace例如,移动登陆页面。标题“建立美丽”是短暂的,但它清楚地告诉了人们产品是什么 - 建立网站。和“美丽”突出了使用该平台的好处。他们完全总结了他们的产品所做的事情,是什么让它特殊,只有三个字,具有令人信服的标题。

7转换移动登陆页面的7个关键设计元素problogger.

尝试围绕产品的主要功能和/或优点表格形成标题。也许它将帮助读者学习有用的东西,或者解决他们一直在面对的挑战。一旦你想出一个潜在的标题,请检查几次,看看你是否可以缩短它并仍然保持引人注目。例如,你可以缩短,“转换有美丽的着陆页面的人”,“创建转换的着陆页面。”

虽然很多登陆页都有一个关于产品功能的小标题,但由于空间有限,这可能不是移动登陆页的最佳选择。如果你一定要包括产品的更多细节或好处,你可以试着添加一些要点。确保每一点都简明扼要。

2. A.短期和有说服力的呼叫行动

您知道有说服力的CTA副本的重要性,以及它如何帮助驱动转换。通过移动登陆页面,您的CTA副本需要强迫用户采取行动,并且需要使用2-3个单词来执行此操作。类似的东西,“开始,”“抓住你的交易”或“建立你的网站”可能是理想的,因为他们直接到几个字的点。

例如,移动登录页面Shyp应用程序有明确的呼叫动作副本,敦促人们“获取应用程序”。

7转换移动登陆页面的7个关键设计元素problogger.

要提出对CTA的引人注目的副本,首先定义着陆页的目标。是否让人们参加比赛,下载电子书,或注册您的邮件列表?接下来,写一个简短的CTA,清楚地告诉人们你想要他们做什么,比如“输入赢,”或“下载你的指南”。

3.一个突出的CTA按钮

着陆页的目标是什么?让人们做点什么。那么如果它几乎看不见,在移动登陆页上有一个CTA按钮的重点是什么?如果您尝试让人们采取某项动作,请确保CTA按钮突出显示。如果可能,请选择与主页颜色形成对比的按钮颜色,以便它脱颖而出。

虽然美学是着陆页面设计的关键部分,但您不应该将元素混合,以至于隐藏CTA按钮。这新的平衡手机登陆页面下面用黑色突出显示一个CTA按钮。你可以看到,尽管按钮与页面设计的其他部分形成了鲜明的对比,但它并没有损害整体的美观。

7转换移动登陆页面的7个关键设计元素problogger.

移动登陆页面上的CTA按钮的最佳数量是一个,因为您要将用户指向一个特定的动作。你不想用太多选择混淆它们。如果您有几个目标,您可以尝试为每个目标构建单独的着陆页。但如果您绝对必须在页面上有多个CTA按钮,请确保使用其余设计突出显示主要的呼叫操作,并在其他方面混合。

例如,如果目标是让人们下载某些东西,则用于下载的CTA按钮应该是最突出的。辅助CTA按钮,“了解更多”或“联系我们”应该不那么明显。一个很好的例子是上面所示的Squarespace着陆页面,其中主要呼叫动作“开始开始”,比辅助CTA更加突出,“了解更多”。

4.最小的杂乱

当你瞄准手机用户时,你应该牢记屏幕空间有限。一个包含太多元素的繁忙页面设计可能会碍眼,特别是在移动登陆页面上。您需要尽可能简化页面设计。这意味着您需要删除任何不必要的混乱,并尽可能隐藏其他元素。

只保留最重要的元素。看看简单而优雅的着陆页摩托车360., 例如。该页面仅包含几个元素:强标题,产品名称,定价信息和呼叫到动作按钮。

7转换移动登陆页面的7个关键设计元素problogger.

现在让我们看看登录页的原始桌面版本。这里,格式有一些更改。尽管标题保持不变,这个版本有一个小副标题来描述产品。你还可以看到导航栏没有像手机版那样隐藏起来。

7转换移动登陆页面的7个关键设计元素problogger.

对于手机,只保留最重要的元素,删除不必要的元素,可能会使页面混乱。从你的移动登录页面移除不必要的混乱不仅提高了页面的美观性,还减少了页面的加载时间。更快的加载页面可以改善用户体验,提高转化率。

5.简化的形式

你真的需要人们在注册时填写7或8个表格字段吗?太多的表单字段会让你的登录页面变得混乱,让用户感到沮丧。如果你想让更多的人皈依,你需要简化皈依过程。这样做的目的是让他们在有时间改变主意之前完成任务。简化你的表单——无论是订阅、免费试用还是促销代码。

确保你的手机登陆页面上的任何表单只收集最重要的信息。例如,你可能需要用户的电子邮件地址来下载电子书、订阅时事通讯、免费试用、促销代码等等。但你可能不需要问他们的名字、地址或电话号码。

根据要使用着陆页面实现的内容来调整表单字段。这购物下面显示的免费试用登陆页只有三个表单字段。它要求电子邮件地址,存储名称和密码,以便用户稍后可以访问其帐户。它不会要求任何不必要的信息,如名称,电话号码或地址。

7转换移动登陆页面的7个关键设计元素problogger.

6.可读副本

下面哪个更容易读懂:problogger.或者problogger.?当然,你选择这两个字体大小的后者。您选择使用的字体样式和大小可能对移动登陆页面的可读性产生巨大影响。请记住,你正在研究一个小屏幕;因此,尽管空间很小,您需要确保您的副本很容易阅读。

这样做的目的是为了确保人们不需要眯着眼或放大来阅读你的登录页面上的内容。根据理想的字体大小而定谷歌是16 PX,但您可以根据您选择的字体样式自定义大小。不要忘记在文本线之间留下足够的空间以提高可读性。

如果你遵循了上面的技巧,你就已经简化了设计,缩短了标题。这意味着你的手机登录页将有更多的空间,允许你使用更大的字体,更容易阅读。另外,字体颜色要与页面上使用的主色调形成对比,但仍然可以与其他设计很好地融合。

这是一个例子Gumroad.。正如您在下面的图像中看到的那样,文本清晰可见。由于大型字体大小和简单的风格,很容易阅读。它也与主页颜色形成对比,同时仍在称赞其其余的设计。

7转换移动登陆页面的7个关键设计元素problogger.

7。整齐有序的元素

如果移动着陆页面过多,设计可以很容易地成为眼睛。也许是太多的文字,或者标题和描述太靠近CTA按钮。未经组织的元素可以混淆您的读者,并对他们的经验产生负面影响。

对于促进转换的移动登录页面设计,请确保所有元素整齐地组织。元素之间应该有足够量的空白,以便人们可以轻松导航页面,并找到他们正在寻找的东西。这也将提高CTA按钮的可见性。

看看手机登陆页面艾伯特下面的应用程序。虽然有比推荐的更多的文本,但是设计仍然很好,因为元素组织得很整齐。足够的空白隔开标题、副标题和CTA按钮,防止设计看起来混乱。蓝色的CTA按钮是突出的所有文本和空白。

7转换移动登陆页面的7个关键设计元素problogger.

接下来是什么?

一旦你用上述7个设计元素优化了手机登陆页面,你就需要检查它们是否适合你。一些小的调整可能是必要的,以最大化他们的效力。确保对每个元素运行A/B测试,并根据需要进行调整或更改。目标是确保您的页面:

  • 加载很快
  • 在美学上令人愉悦
  • 显然将人们指向所需的行动

所有这些都在您能够转换受众的程度中发挥作用。运行A / B测试或a多变量测试对于每个元素,要找出哪些方面需要进一步改进,哪些更改适合您。有些号召行动或标题比其他的更有效吗?哪种颜色组合驱动更多的转换?

对CTA按钮的不同颜色进行实验,以确定哪一个点击次数。测试几个头条新闻,了解您的观众更好地响应。实验不同的字体样式,以及尺寸,并检查是否存在基于这些更改的转换率的差异。

结论

现在你知道了设计高转化率的手机登录页面所需的关键元素。你以前尝试过这些方法吗?这对你的转化率有何影响?你对手机登陆页有什么问题吗?请在评论中分享你的想法。

如果您需要任何帮助优化您的网站,博客或降落页面的转换,您可以与我联系。我可以帮助您提出最好的解决方案提高你的转换

巴蒂尔巴克是一个数字营销顾问,专门从事销售渠道,目标流量和网站转换。他曾为《财富》500强公司、数字产品的影响者和许多一线明星提供咨询。你可以在推特上找到他这里

关于Guest Blogger.
这篇文章是由客户贡献者编写的。请在上面的帖子中查看他们的详细信息。
注释
  1. 非常好的文章。感谢分享..

  2. 谢谢你的分享。
    帮助和有趣的阅读。

    问候,
    Livears。

  3. 嗨谢恩,

    我喜欢强调简短。对于我的博客来说,我的CTA,标题和整体文案都是短小精悍的。制作类似的副本对于移动平台的登陆页面来说也是轻而易举的事。但你得弄清楚。超清晰。大多数博主都害怕变得清晰,因为这意味着你要放手才能变得清晰。

    放弃胖或臃肿。在句子上运行。多个CTA。没有必要的东西乱扔垃圾。甚至在你的博客上也是如此。我认为Zen习惯的Leo与他的200万用户。然后我看到他的极简主义博客设计。这家伙在他的名单上有数百万人的奇迹是什么意思?这是清晰度的力量,清单。这是如何像机器人一样转换,有效地,有效地转换。

    我会抓住这个建议来更清楚,因为我觉得我们都能更清楚。特别是整齐组织的元素。我的页面在我的Chromebook和其他Lappies上保持良好,但我需要确保元素也很好地看起来很好。到目前为止这么好,因为我的博客是移动响应,但有时添加弹出弹出或滑块形式可以从移动的对齐角度搞砸。要加倍,并确保所有看起来都很漂亮,以保持顺利流动的转换。并必须继续阅读PB并评论这些帖子以继续学习和发展我的名单;)

    感谢分享 :)

    瑞安

  4. 嗨谢恩,

    有一个良好的着陆页对覆盖读者潜在客户和买家来说非常重要。因此,如果他们希望投资回报率在其营销投资中,因此登陆页面可以影响您的投资回报率,并且如果他们想要ROI,则必须具有良好的着陆页。

    你的帖子确实提到了很多登陆页的关键设计元素,它们非常有用。感谢分享这篇文章。干杯!

  5. 你好巴蒂尔,
    我是新的博客,不熟悉着陆页,但在阅读这篇文章后我得到了一些知识。谢谢shane。还有一件事是谢恩是非常好的作家。

  6. 谢谢分享这个信息。写了五年博客之后,我刚刚通过mailchimp获得了我的第一个电子邮件服务,我的下一个项目是创建一个登陆页。我从听你的播客中学到了很多知识。欢迎使用手机版必发彩票再次感谢。

  7. 好的文章谢恩!你讨论了所有必要的元素,帮助你的登陆页面转换更多的访客成为线索。

  8. 的服务表示: 06/23/2017在下午4:41

    写得好,例子清晰,方向明确,分析简洁。

  9. Anubha Nautiyal说: 06/23/2017下午6:37

    伟大的文章。谢谢你的帖子。我喜欢读它。

  10. 感谢您分享有关移动页面中转换的有用信息。最初,我只专注于网站,并不多于网站的移动版本。阅读本文后,我想实现我的业务网站的移动版本。

  11. 这是一个伟大的读书!

    着陆页是铅转换中的主要组成部分之一。您的网站至关重要的是您希望您的受众或访客需要的每个行动都有一个很好的着陆页。

    移动登陆页面比其桌面版本更重要,因为移动网络比基于PC的Web快8倍

    研究表明,长期和短的形式着陆页面在接合转化时工作。

    这篇文章涵盖了一个更好的手机登陆页面的7个主要设计元素,我个人认为点击率在其中起着主要作用。

    一个良好而引人注目的CTR按钮肯定会用作铅磁铁。

  12. SF染料主要用于织物染料,纺织化学品和纺织辅助空间。为了满足染料的日益增长的需求,SF现已与已建立的染料和化工制造商进行制造和营销系列,使我们能够提供各种产品。我们对开发的核心关注导致我们提供了全面的产品系列染料和助剂。简要说明我们制造的产品范围以下。我们要求您详细了解表格中的查询以了解更多有关我们产品产品的更多信息。

    鞣革:皮革用的硫染料
    丁醇的皮革染料系列是硫磺染料,特别是设计以适应皮革构造。丁醇染料是水溶性的,不含盐和硫化钠。
    由于其优良的洗涤、排汗和耐光性,它们几乎可以用来染所有类型的皮革。鞣革具有很好的着色价值,能使染工生产出各种流行色调。

    用Tancols染色皮革,可以使染料很好地渗透到衬底中,这是Tancols特有的特性。

    DENIMOZ:专为牛仔布设计的纺织辅助
    SF的主要知识领域和开发技能之一是为牛仔布设计的产品。
    DeNimoz是一系列化学品,用于加工牛仔布线和织物。该系列支持硫织物染料以及靛蓝的染色。

  13. 黛西小吃说: 06/26/2017在下午5:38

    真棒博客.. !!!

    谢谢你分享这个

  14. 谢谢你的文章。我发现的一个挑战是使用针对移动优化的WordPress主题。它的好,但它意味着我在桌面版本中的任何东西都是翻译成移动的东西,有时候,有时不太好。它很难得到平衡。有小费吗?桌面设计如果大多数流量来到那样?或者为移动设计,知道移动到桌面的移动工作比桌面设计更好地移动到移动?

    • 重大问题,吉尔!我建议尝试不同的移动优化WordPress主题,直到你找到一个让你的网站在桌面和手机上都看起来不错的主题。市场上有很多这样的公司,有些有报酬,有些没有。我发现,通过试验不同的主题,我能够找到一个适合两者的主题。

  15. 你好巴蒂尔,
    我有一个关于登陆页面的询问!..在付出付费访问者和有机访客可以登陆页面应该是相同的吗?或者我们需要根据用于付费广告系列的关键字而设计?

  16. 你好,
    非常有用的文章。谢谢for sharing using information

  17. 非常广泛的列表。我刚刚建立了自己的网站,开始写博客。这个清单将极大地帮助我。谢谢

  18. 什么将是最好的字体家族,可以用于一个移动网站?

  19. 卢卡斯史密斯说: 08/28/2017在下午1:51

    当冲浪时,人们选择移动移动的原因是因为它的便利性,简单性和效率。具有与PC页面相同的元素的布局并不像移动用户那样具有吸引力。

    伟大的技巧,干杯!

  20. 很好的分享,另一个元素是,让它兼容和可点击,速度是关键,组织在一个单一的列,使用简短的注册表单。

  21. Mona Malik说: 09/23/2017在晚上10:58

    喜欢你的文章!给了我很多启发:)

  22. 登陆页面是最重要的部分铅转换。它是
    您的网站必须为每个行动有一个很好的着陆页
    你希望你的受众或游客带走。
    感谢分享此有用信息。

  23. 谢!

    问候页是铅变换的重要部分之一。对于您希望收集人员或客人的每项活动,您的网站是您的网站的基础。
    由于移动网络的增长速度是pc网络的8倍,因此一个多功能的演示页面比它的工作区形式更为必要

    分析人员发现,在绘制变化时,长框架表示页面和短框架表示页面都可以工作。

    帖子涵盖了7个值得注意的关键计划组件,用于卓越的便携式问候页面和我的信任,即CTR在其中的重要部分。

    一个体面和眼睛的CTR捕获将填充为铅磁铁。

一个实用的播客.....欢迎使用手机版必发彩票.帮助您构建一个更好的博客

必发365登录

一个实际的播客……欢迎使用手机版必发彩票

关闭
打开