装有Shopify软件的手机图片

OB欧宝娱乐APP开始你的业务与Shopify

免费试用Shopify,并探索启动、运行和发展业务所需的所有工具和服务。OB欧宝娱乐APP

登陆页设计:如何创建更好的页面转换

一个登陆页面的模拟,一个女人拿着一个包在文本旁边,登陆页面转换

如果你给糟糕的登陆页面带来了巨大的流量,那么你花在付费广告上的钱就毫无用处了。如果有人第一次访问你的网站时看到的是一个令人困惑或设计糟糕的登陆页,那么他可能永远不会回来了。这意味着你正在烧钱来吸引对你的产品感兴趣的眼球,结果却耗尽了这些潜力,需要从头开始。OB欧宝娱乐APP

事实是,即使有些世界上最大的企业有一个或两个糟糕的登陆页面——这是一个常见的问题,但我们可以通过更深入地了解目标受众来解决这个问题。

登陆页面设计包括视觉和文字两种元素,这些元素组成了一个优化的网页,以转化新客户并鼓励重复购买。简单的视觉布局、利益驱动的文案和高质量的产品图像是引人注目的登陆页设计的三个指导支柱。

我们已经引进了几位专家来帮助您创建更好的登录页面设计,以培养潜在客户。

与专家会面

我们汇集了一位营销专家、一位转化机构总监、一位转化ob欧宝娱乐app下载地址研究专家和一位着陆页顾问,以支持您在创建销售着陆页设计的过程中。

  • 以斯拉费尔斯通他是Smart Marketer的创始ob欧宝娱乐app下载地址人,也是《BOOM》辛迪·约瑟夫著Ezra在BOOM自己超级成功的Shopify商店的产品页面上进行了实验和测试,完善了登陆页面。他在市场营销方面的专业知识源于他自ob欧宝娱乐app下载地址己的真实数字营销经验,这些经验在他的另一家公司Smart Marketer教授的课程中得到了体现。
  • 本LabaySpeero总经理/CRO &实验:Ben是一名熟练的研究人员和转换优化专家。他在学术界工作了10多年,拥有丰富的专业知识。
  • 迈克尔Aagaard, CRO顾问和Unbounce前高级转换优化师:Michael自2008年以来一直从事转换优化工作。他是转换研究方面的专家,使用真实试验和错误的结果来支持他的学习和建议。
  • 尼克·夏尔马,首席执行官Sharma品牌尼克帮助创造了超过1亿美元的在线收入。夏尔马品牌利用战略举措为企业增加数字收入。我们从他关于登陆页面的文章中汲取了一些见解,为本文分享的建议提供了依据。

如何围绕用户的需求构建登录页面

虽然我们分享了模板推荐的高转化率的登陆页设计,但它们只是一个起点基于你的目标受众和他们独特的需求。

根据Michael的说法,进行转化研究以获得基本见解是建立成功登陆页面的关键部分。转换研究通常包括比如用户测试、分析网络流量来源、文案测试和调查。

Michael说:“人们经常忘记登陆页面是更大用户旅程的一部分。“因此,他们最终会浪费时间去调整那些无关紧要的闪亮的东西。除了登陆页面本身,还有很多因素会影响用户的决策过程——从广告来源和设备到意识水平和动机。你对这些方面了解得越透彻,你就越有可能做出正确的决定,创造出真正能吸引更多用户的登陆页面。”

1.分析流量和设备来源

建立一个基于用户购物设备的登陆页面是开始你的转化研究的一种方式。谷歌分析是一个很好的合作伙伴,可以帮助您发现流量来自何处,并了解您的浏览器最喜欢在哪种设备上购物。

如果你的大多数客户都是通过移动设备访问你的网站,你就需要优化你的登陆页面,以获得更好的移动体验。或者,如果您了解到您的客户更喜欢桌面,您将更好地准备构建一个登陆页面,以增强桌面体验。在他的登陆页公式尼克建议更深入地研究这些流量,以了解人们来自什么样的平台,是TikTok、Facebook还是博客文章等。

正如Nik所写的,“如果你的页面不与它们所来自的平台相关联,那么你的跳出率就会飙升,而你的整体平台ROAS(广告支出回报率)就会一直很低。”

这种情境式倾听整体上推动了更好的客户体验,并为更好的成功建立了以下最佳实践。

当最佳实践与业务策略脱离时,它们就会失败。

本Labay

2.了解最佳实践何时失败

本文中的技巧对于经过测试和迭代的专家来说是成功的。但是在实现这些设计元素时要小心,不要理解它们与你的总体目标之间的联系。Ben警告说:“当最佳实践与商业战略脱离时,它们就会失败。”

如果没有上下文,最佳实践也会失败,而了解目标受众的需求是构建高转化率着陆页面的基础。

Michael分享道:“你越了解你的目标受众,你就能建立更好的登陆页面。不要被最新的设计趋势蒙蔽了双眼。相反,你应该确保自己掌握了所有基础知识,并进行深入的用户研究,这样你才能做出影响用户行为的明智决定,而不是简单地调整页面布局。”

值得一提的是所有这里列出的登陆页设计建议将为您的客户工作。你的选择很大程度上取决于你的目标受众和他们的需求。选择你最需要的元素——你不必使用所有的元素!

3.考虑整个登陆页面的信息流

你应该把重点放在整个页面的信息流上,而不是仅仅针对页面的上下部分进行设计。但还有更多的事情要做。这里有一些关于登陆页设计中神话般的“折叠”的背景,以及为什么这么多人建议将重要的内容放在顶部。

大多数网站访问者不会向下滚动

折页是网页上无需滚动即可看到的空间,它根据用户使用的设备而有所不同,无论是显示器、平板电脑还是移动设备,所有这些设备的屏幕尺寸都因型号而异。一般,折线是距离顶部600像素浏览器窗口的。

并不是所有的登陆页面访问者都会在桌面或移动设备上滚动页面的折叠部分。这个数据实际上很低,我们听到的是50%到85%的人不滚动屏幕。由于浏览过折页的浏览者的比例非常低,许多人推荐基于两部分的设计策略:折页上方的内容和折页之后的内容。

它不是关于折叠,更多的是关于信息层次

无论什么对你的客户最有效,你总是想要考虑你放在任何登陆页面顶部的文案和内容。但是,正如Michael所揭示的那样,“试图将大量内容塞进第一个屏幕往往会适得其反,并导致非常混乱的体验,让用户被太多的信息淹没。”

相反,Michael说:“营销人员应该少考虑‘ob欧宝娱乐app下载地址多余的’,而更多地考虑登陆页面上的整体信息层次和内容流。”

Aagaard建议在构建登录页面时思考以下问题。不过,有一点需要注意:答案取决于你对目标用户的整体用户旅程的理解,以及你希望登陆页面扮演的角色。

  • 你是否回答了正确的问题并解决了正确的障碍?
  • 你是否在管理期望并跟进广告来源中的“承诺”?
  • 你是否按照正确的顺序发布内容,并朝着转化目标建立动力?

如果你想知道CTA的位置,那取决于你的受众需要什么,太。你可以通过测试广告位置来判断是什么推动了更高的转化率。

如何创建更好的登陆页设计

你已经吸引了潜在客户的注意,现在你有几秒钟的时间来分享你的品牌和产品的独特之处。这是一个相当大的要求,通过几个单词或图片,更困难的是,当一个潜在客户对你的品牌知之甚少。

虽然性能取决于很多因素,比如你的目标受众和你销售的产品类型,但保持整体页面设计简单可以帮助人们看到你最想让他们看到的信息。如果他们没有拿走任何东西,你想要引起共鸣的是什么?

以下是如何设计更好的目标页面:

  1. 优化您的购买盒转换
  2. 添加客户推荐和评论部分
  3. 拍出很棒的产品照片
  4. 详述你的产品描述
  5. 包括证书和独特的销售主张
  6. 包括追加销售/交叉销售部分和其他产品建议
  7. 添加自夸栏和“为什么”部分

引人注目的登陆页设计要素的图解
一个引人注目的登陆页设计元素的例子说明。Shopify

根据您销售的行业和产品类型,您发送流量的登录页面可能看起来与产品页面相似,或者它可能是一个更精简的报价。

1.优化您的购买盒转换

埃兹拉·费尔斯通称“购买框”是产品登陆页面中最重要的部分。它是页面上的一个文字框,带有一组高度优化的转换资产,其中包括一个购买按钮。

什么是买盒?

购买框是你登陆页面的转换引擎。一般来说,如果你是在桌面上看,购买框会包含一个图像旋转带,左边是产品的照片,你的概述、销售文案、定价、评论星级、购买按钮或商店支付按钮,以及右边按钮下的独特销售主张。下面是一个桌面购买框的例子。

Peepers网站上进步眼镜的截图
其中一个Peeper的购买盒在桌面视图。私家侦探

购买框是每个登陆页面的一小部分,需要产生很大的影响。

正如埃兹拉告诉我们的,“大多数商家在购买框中没有销售文案,他们没有社会证明,他们没有独特的销售主张和添加到购物车按钮下的图像格式,产品传送带的图像看起来不太好。购物盒就是一切。”

有一些模板元素可以为你的副本和图像腾出空间,让它们真正发光。一个高度优化的购物盒包括以斯拉所说的“转换资产堆叠。”

    下面是一个在桌面上显示的示例:

    布莱特兰大蒜橄榄油产品的登陆页面设计
    Brightland将这个登陆页面提供给在网上浏览大蒜橄榄油的搜索者。Brightland

    2.添加客户推荐和评论部分

    最小的一个,以斯拉对买盒做的最具影响力的调整在他自己的Shopify商店里添加客户见证在框的顶部取代项目名称。这是它的样子:

    一个屏幕截图,一个标记购买盒上的BOOM由辛迪约瑟夫网上商店
    聪明的营销人ob欧宝娱乐app下载地址员

    在顶部提供报价可以建立信任,不会让人们去搜索评论,并让你自己的客户说话你。只要确保你选择的报价直接谈到每个产品解决的好处或痛点。

    此外,考虑将整个部分专门用于您的客户评论,以便购物者可以阅读实际购买您产品的真人的观点。确保至少展示一些差评和中等评价,这样其他人就能完全了解人们喜欢什么,不喜欢什么。

    包括星级评价

    如果你有积极的评价,在购买盒子里加上一个星级评价来建立信任。如果你有超过50条评论,考虑在星星旁边加上评论的数量。

    3.拍出很棒的产品照片

    您包含的产品图像可能是只有潜在买家在考虑购买你的产品时所拥有的东西,尤其是如果你是一个直接面向消费者的品牌。图片是指买家在没有能力为自己持有物品的情况下如何描绘物品。如果你发布的照片不能完全捕捉到你的产品有多棒,顾客就很难做到同样的事情。

    白色背景上的棕色靴子、皮带、裤子、衬衫、手表和太阳镜
    Unsplash

    优化产品照片的速度和兼容性

    注意小细节,以确保更流畅的体验。使用像这样的图像压缩器TinyPNG降低图像大小以加快加载时间。添加图像边框和上下文副本,以说明产品的优点,而不是特性。用你的网站建设者检查图像轮播和cta在桌面和移动设备上的渲染情况,以确保它们对两者都进行了优化。

    4.详述你的产品描述

    你可能在购买盒中包含的产品描述可能是一份简洁的副本,可以立即让人了解你的产品到底是什么是多少。在页面下方有更多的空间来提供详细信息,直接处理可能阻止客户完成购买的任何异议。

    眼镜商Peepers是这方面的专家:上面是大量的产品图片,下面你会发现细节和描述,列出了使用Peepers镜片的所有好处。

    Peepers在线商店的产品描述截图欧宝体育官网入口首页
    Peepers利用折页下方的空间分享深入的产品信息,如镜头细节、尺寸和客户评论。私家侦探

    当你开发你的产品细节副本时,首先写出你的产品是什么,它是做什么的。然后,列出独特的好处,这可以说明你想要解决的痛点或你想要填补的市场空白。ob欧宝娱乐app下载地址选择把所有的东西都放在购买盒里?考虑添加一个切换选项,就像Brightland为其橄榄油所做的那样,并进一步探索产品的好处。

    Brightland为The Duo设计的产品登陆页面截图
    Brightland

    5.包括证书和独特的销售主张

    认证对消费者有很大的帮助,有些人没有认证就不会购物。蹦蹦跳跳的兔子,非转基因生物,或认证的B公司就是三个例子。如果你有任何认证,把它放在你的登录页面上。

    Olipop网店的Olipop认证截图欧宝体育官网入口首页
    Olipop

    你的产品也可能有一些独特的卖点(USPs)。如果你还没有写好,那就花点时间来开发你的产品与竞争对手的不同之处。这个练习需要时间,但是你的USP文案会告诉你如何在市场中定位你的整体品牌,以及你如何构建你的登陆页面。ob欧宝娱乐app下载地址

    6.添加追加销售/交叉销售部分,提供其他产品建议

    你已经引起了顾客的注意,所以为什么不推荐他们会喜欢的其他产品呢?如果他们看到他们喜欢的东西,你提供了一个快速和简单的方法将其添加到购物车中。您可以向您的商店添加一个插件来实现这一点。如果你在Shopify上,重新转换向上销售和交叉销售蜂窝向上销售和交叉销售,一键销售- Zipify OCU都是很棒的应用程序。

    ReConvert Upsell & Cross sell在Shopify应用商店的截图

    7.包括一个自夸栏和一个为什么部分

    你有没有上过新闻杂志《福布斯》《纽约时报》,或《连线》杂志?在你的登陆页面上突出这些商标,并引用这些文章,这就是尼克所说的“炫耀吧”。这些出版物增加了你品牌的可信度,提到它们对寻找更多信息的购物者有很大的帮助。

    在Brightland的网站上,一个以Brightland为特色的商标的截图
    Brightland

    尼克开创的另一个登陆页面部分是“为什么”部分吗。不要在你的登陆页面上简单地解释为什么人们应该购买你的产品,尼克建议在单独的章节中明确指出。标题可以简单地写为“为什么(你的企业名称)?”下面还写了一段好处。或者,你可以选择几个代表你品牌的主要区别的图标,并为每个图标写一份文案。

    如果你进行测试,你就不会为了证明自己的观点而进行测试,而是为了挑战策略或测试与客户问题或商业机会直接相关的假设。

    本Labay

    测试登陆页设计

    一旦你有了登陆页面,并且有一些有意义的流量进入你的网站,你就可以开始对登陆页面设计的不同部分进行A/B测试,以确保它以尽可能高的速度转化。OB欧宝娱乐APP

    然而,这并不仅仅是找到最好的标语。Ben指出:“如果你进行测试,你不是想要证明自己的观点,而是想要挑战战略或测试与客户问题或商业机会直接相关的假设。”

    Ben说,测试应该与你的业务增长模式相关的因素成正比。如果你想获得更多的客户,让你的Instagram货币化,或者留住现有的客户,那么登陆页面的体验和测试假设需要做出相应的改变。


    登陆页设计示例

    私家侦探

    私家侦探出售价格实惠的时尚老花镜。从把它列入奥普拉最喜欢的东西清单,到使用积极的文案和利益驱动的语言,Peepers创建的登陆页面直接表达了目标受众的需求。

    Peepers产品登陆页面设计的截图
    窥视者买了一个盒子。私家侦探

    它的设计产品登陆页在桌面和移动设备上都是干净、清晰、易于导航的。购物盒里有大量的产品图片,用奥普拉最喜欢的东西标签建立社会证明,并拥有五星级的评价,列出了给出的实际评论数量。它还包括虚拟试戴功能,这样顾客就可以看到一副新镜框在他们脸上的实际效果。滚动后,访问者会看到一个产品描述,其中列出了这两个功能好处,和一个全面的细节部分,精确的测量,以确保一个伟大的适合。

    Brightland

    Brightland销售来自加州的特级初榨橄榄油。它的登陆页面采用模块化的方法,有明确的线条、流行的颜色、明确的好处,以及一个介绍配方配对的“如何使用”部分。

    这是Brightland登陆页面设计的截图
    艺术家胶囊在桌面上的产品登陆页面。Brightland

    Brightland的产品登陆页面设计在桌面和移动端是不同的。桌面登录页面(如艺术家胶囊页面)包括一个额外的享受部分,列出了最适合每种油的配对选项。这个奖励部分并不存在于移动设备上,因为用户只能在产品描述和更多图像信息之间切换。

    考虑根据使用桌面和移动设备访问的客户的不同需求或行为来优化桌面和移动登录页面的设计。找出效果最好的方法是测试登陆页面的变化,以确定桌面和手机上的赢家。

    Brightland的手机登陆页面截图
    同一登陆页面的移动版本略有不同,以优化简单性和不同的用户行为。Brightland

    为了在移动体验中看到购买按钮,客户必须向下滚动到产品描述部分,这鼓励他们阅读更多内容。其他的胜利包括健康益处部分(谁知道橄榄油有这么多?),让味蕾兴奋的有形复制,产品差异化(由磨坊主冷压橄榄),每种产品的定制配方,以及来自真实客户的好评。

    Olipop

    Olipop销售含有植物成分和益生元的健康苏打水,以支持健康的微生物群。它的登陆页面设计明亮、有趣、干净、简单——所有这些都是奥利波普视觉品牌标识的租户。

    Olipop使用利益导向的复制来直接处理反对意见(“但是苏打水含多少糖?”)将这种饮料定位为一种渴望治愈的狂热苏打饮料爱好者,他们正在寻找一种戒烟的方法。

    Olipop产品登陆页面设计的截图
    Olipop

    登陆页,比如的取样器如上图所示,它们采用了与该品牌产品相同的明亮色彩和时髦、干净的设计。其他突出的元素包括:清晰、粗体的文本、深入的产品信息(滚动时)、带有实际评论的星星、不占页面主导地位的小标题、直观、易于导航的布局以及出色的产品图片。

    节奏

    节奏销售可重复填充的旅行容器,磁性和水密。

    它的登陆页面设计简单,清晰,并将其产品的好处放在前面。Cadence还包括一个自夸吧,上面有下面每个商店的报价,以便在客户深入了解之前快速获得社会证明。

    Cadence产品登陆页设计的截图
    Cadence将Instagram上的付费广告流量发送到这个页面,其中包括产品照片和社交证明。节奏

    由于该品牌提供这样的视觉产品,所以登陆页上的图片和视频比文案更多。凭借如此简单、视觉描述性的设计,《Cadence》迅速给人留下了深刻的印象。

    Cadence产品登陆页设计的截图
    节奏

    产品登陆页面的设计喜欢胶囊如图所示,展示了产品的实际工作原理。复制说明可持续性和其他产品的好处,如防泄漏密封和可定制的胶囊。

    手机体验的特点不那么突出——用户必须向下滚动才能构建可定制的包或查看进一步的产品信息。

    使用你的登陆页来创建一个叙述

    当您开发不同的设计模块时,请记住,每个模块都是更大的登录页面故事的一部分。如果你不理解一本书的章节是如何与更大的叙事联系在一起的,你就不会去读它。你网站上的每个登陆页面都是一样的:你带着购物者走过你的产品和你自己的旅程我希望流能反映这一点

    当你在登陆页面上构建每个元素时,在将它们拼接在一起时检查它们的凝聚力。页面的流程是否感觉像是一个完整的叙述,讲述了你的产品的故事?还是这些元素感觉脱节了?最后的直觉检查将允许你在启动页面之前移动块或调整副本。