怎么样设计落地页，才可得到更高的转化率？

esc0rp · 发表于 2024-8-31 16:23:17

点击 ▲ 三分设关注，和 6 万设计师一块学习进步

知识库 2022 · 第 172 篇

前言：落地页的每一个元素都必须有它存在的目的，不可只是看起来很不错——它们必须是经过深思熟虑且有战略指向的。当咱们追求为用户创造更新颖、更沉浸的交互体验时，有时会忽略哪些能保证落地页高准化率的设计要点。倘若你想要转化更加多的潜在客户或是增多营销额，那样你需要的是一个高转化率的落地页 (Landing Page)。按照 Hubspot 的数据[1]，持有超过 30 个落地页的机构所获取的客户转化率，是少于 10 个落地页的机构的 7 倍。

Hubspot 关于落地页与用户流量的数据落地页是独立的网页，专为特定的市场营销活动或搜索宣传而设计。当用户点击搜索结果、电子邮件或宣传中的链接时，落地页便是用户“落地”的地区。与一般拥有许多目的并鼓励探索的网页区别，落地页一般会引导用户完成知道的行径召唤 (Call to Action)，例如购买、订阅新闻或是取得联络。首页和落地页之间重点的区别首要咱们要知道首页(Homepage)与落地页之间的区别是什么。从 unbounce [2] 给出的示例图咱们能够看到首页和落地页显著区别的布局，首页有许多链接，而落地页仅有一个。

unbounce 对首页和落地页之间区别示例首页一般会有许多潜在的干扰原因，落地页却非常聚焦。落地页上的链接越少，转化率就越高，这便是为何专业营销人员总会使用落地页来做为其流量的目的地。那样，咱们要怎样创建落地页面来引导用户，又不借助操控技巧或灰色策略 (Dark Pattern) 呢？关键在于知道的焦点、有说服力的宣传说明、经过深思熟虑的设计和连续的测实验证。起始设计之前，咱们必须要有一个知道的焦点，即清晰地定义咱们的价值主张 (Value Proposition)清晰地定义咱们的主张当用户拜访落地页时，你仅有不到 8 秒的时间来吸引她们的重视力[3]。创建落地页的第1步，是知道这个页面是用来做什么的，并尽可能简明有效地传递这个信息。这个信息一般被叫作为“价值主张”。咱们能够经过一句话来向用户传递价值主张。这句话由两个部分构成：你能处理什么问题 (或供给什么服务) ？你将怎样做到？例如 Skype 的价值主张是：“Skype 可让你容易保持联系，通话、聊天和协作。”第1部分概述了它供给的服务，第二部分则说明了服务的详细方式。

Skype 的价值主张同期表现了所供给的服务和服务方式但要重视，你的价值主张很容易变得毫无道理。例如“一流”、“友好”等修饰词是任何机构都能够拿来套用的。为了避免言之无物，审视一下你的价值主张的对立面是不是依然能阐述有效的立场。例如，倘若你的价值主张是：“咱们以恰当的价格供给高质量的制品。”那它的对立面将变得毫不可取：“咱们以天价供给劣质制品。”这就表现出你的价值主张言之无物了。但倘若你的价值主张是：“咱们向独具慧眼的买家供给手工制品。”那它的对立面将一样有效：“咱们向公众市场供给工厂制造的制品。”当然，你的价值主张不必局限于这一句话。你能够陈列出你能够供给的所有优良和特点并加以描述。

Pipedrive 很好地陈列出了制品的服务特点显示了价值主张后，接下来就该思虑你的行径召唤 (Call to Action) 了。知道你的的行径召唤每一个落地页都需要知道的行径召唤：你期盼用户做什么?为了让你的落地页聚焦，提高用户操作的几率，你要克制住设置太多行径召唤的冲动。例如，引导用户在社交媒介上关注你的同期，亦会分散她们完成主行径召唤的重视力。一般设置一主一次两个行径召唤是合适的。当主行径召唤是“取得联络”或“购买”时，次行径召唤就能够是“订阅新闻”，这为无选取主行径召唤的用户供给了一个合适的备选。次行径召唤的设计相对而言不消过于明显，能够展示在页面下方，乃至在退出页面时的浮层上。不外，部分用户对弹窗非常抵触，因此要小心运用弹窗。

尽管弹窗有时候挺烦人的，这仍是个不错的在退出时唤起次行径召唤的弹窗应用案例但即使你能顺利地引导用户达成行径召唤，有时亦仍然避免不了其他原因使她们失望。为了应对这种状况，你需要认识问题所在并找到处理办法，这便是咱们一般说的异议处理 (Objection Handling) 。理解用户异议阻止用户在落地页上操作的原由是什么？是由于要收取运费，或是担心隐私问题？相比竞对，你的商品看起来过于昂贵？倘若你不可容易地陈列出用户可能提出的反对意见，你可能需要经过用研来找到答案。不必担心这会花费非常多精力，只需在落地页加上一个单问题调查就可。你能够在用户无进行任何操作就离开网页时，向她们提出一个问题：“决定离开了吗？请告诉咱们不注册的原由吧，那将会特别有帮忙。”你能够向用户列出有些可能的选项，或让用户自动弥补。

单问题调查能够帮你晓得为何用户不进行操作一旦认识到原由，你就能够起始着手处理它们了。理想状况下，这寓意着你得消除阻碍，例如供给免费送货或退款保准。倘若没法消除，亦要尽可能在页面的文案中有相应的反馈。针对异议，处理总是好过忽略的。例如，麦当劳晓得许多人声叫作她们的鸡肉来自禽类肉质较差的部位。麦当劳没有没有视这些顾虑，而是直接经过她们的网站主动澄清。

麦当劳直面用户的担忧隐私安全便是一个很好的例子。人们在阅读隐私条例时不会担心关联问题，但在要提交邮件位置时就会起始有所顾虑。这便是为何在用户录入表单时，展示数据守护和隐私安全特别有必要。用户一般不会主动在你的网站上搜索答案，他们只会自觉联想到最坏的状况。

将隐私条例与订阅新闻的表单紧密地排版在一块，这一般会增多转化率价值主张、行径召唤、异议处理，完成为了这些理性工作后，接下来该给用户带来更感性的一面了。塑造你的个性咱们的行径经常取决于潜认识层面。按照发布在《行径与信息技术》杂志上的科研[4]，人们在 50 毫秒内就对一个网站产生了初步印象。因为光环效应 (Halo Effectt)，这些初始印象会始终连续。换句话说，尽管两者之间无直接的因果关系，网站的品牌和风格塑造了咱们对实质制品的印象。这说明了风格的重要性，但更重要的是，咱们要清楚地认识到咱们想传达的第1印象是什么，而后保证咱们的设计能够做到这一点。确定你想要传达什么你能够经过创建一个简短的关键词列表来着手，以此传达你期盼用户在拜访网站时得到的印象。有些关键词非常通用，例如你期盼你的落地页能传达“可信赖的”。但大部分的关键词还得取决于你的受众和制品特点。一旦有了关键词列表，设计师就会基于这些关键词去完成设计，下一步便是测试。测试你的设计风格倘若设计师供给了多个方法，那样简单的偏好测试就能够帮你做出选自。你能够询问用户哪种设计更“合适”。

简单的偏好测试一般是确定最佳设计方法的最佳办法倘若仅有一个设计方法，则能够进行语义差异调查[5]，让用户基于你的关键字对网站进行评级。

经过调查能够确定设计是不是运用户产生了正确的感知当然，风格并不是设计的独一思虑原因，视觉层级亦得是清晰正确的。创建你的视觉层级为落地页创立清晰的视觉层级能够保证用户在正确的机会看到正确的信息，并且不会因无关或次要的内容而分心。在正确的机会回答正确的问题首要，保证你在正确的页面位置向用户供给正确的信息。为此，你需要认识人们在看你的落地页时的思考过程。当然，咱们不可做到百分百确定，由于每一个人都是不同样的。可用性测试亦只能是给咱们供给一个参考，但咱们仍能进行有些有按照的推测。一般来讲，用户在查看落地页时会下认识地提出一系列问题。这些问题依次为：这个页面供给了什么？（价值主张）那对我有什么帮忙？（优良）制品怎样运作？（特点）为何我要信任此页面？（社会认同）接下来我该怎么办？（行径召唤）因此呢，页面的视觉层级在必定程度上能够映射用户提出的这些问题的次序是至关重要的。例如，典型的落地页层级可能如下所示：

一个落地页需要承载价值主张、优良、特点和社会认同页面内容以正确的结构次序展示只完成为了有效视觉层级的一半，另一个挑战是保证用户看到最关键的屏幕元素。咱们有多种方式来吸引用户的重视力，包含但不限于：定位颜色尺寸意象动画负空间不外，最有效的技巧可能是最小化页面上的其他干扰。简化你的界面咱们能够经过三个问题系统地检测落地页上的每一个元素。

简化落地页的过程第1个问题：是不是能够删除这个元素？倘若删除它，后果是什么？这些后果是不是会比其他元素导致的认知包袱更具破坏性？倘若不会，那最好将它删除。倘若你觉得这个元素非常有价值没法删除，那样第二个问题是：我能够隐匿这个元素吗？我能不可把它放在子页面、标签下或折叠面板中？

Vibecast 将次要内容收在了折叠面板内这种办法适用于次要内容，尽管部分用户会想得到更加多仔细信息，大都数人是不会太感兴趣的。最后，倘若这个元素用户必须知晓、没法隐匿，那样，是不是可以缩小这个元素呢？例如人们可能很想晓得你的退货政策，但这个信息并无你的制品功能或优良那样重要。咱们能够在视觉上进行适当的弱化，让它不外于抢眼。经过这种简单的办法以及其他设计技巧，你能够创建有效的视觉层级来将用户的重视力吸引到最关键的屏幕元素上，例如行径召唤。但为了保证万无一失，你还要进行验证。测试你的视觉层级幸运的是，有一种方便的办法能够测试用户是不是看到了必要的屏幕元素。这种办法叫“五秒测试”。顾名思义，测试过程是向用户展示你的设计，五秒钟后让用户回忆她们记住了什么元素。

Usability Hub 供给了方便的五秒测试按照用户记住的内容以及她们回忆的次序，你能更好地认识到页面层级对吸引注意力到最重要的元素上的有效性。在设计出色的落地页时，即使是上线后，验证亦至关重要。监控、迭代和测试无团队能够在创建落地页时一步到位，总会有改进的余地。针对落地页上线后的打磨优化，测试是非常重要的一环。一旦你的新落地页上线，必须运用类似 Hotjar 或 Fullstory 之类的用户行径监测工具仔细监控。这些工具能够让你观察页面上的用户行径，从而提出改进意见。你能够运用 A/B 测试来对文案、图像和色彩进行较小的改进，很强的改动能够经过可用性测试来验证设计原型。无论采用哪种办法，最后都会形成一个监控、迭代和测试的周期，这将保证任何落地页的长时间有效运作。

附录：

[1]https://blog.hubspot.com/blog/tabid/6307/bid/15424/the-key-to-more-leads-create-more-targeted-conversion-opportunities-data.aspx

[2]https://unbounce.com/landing-page-articles/what-is-a-landing-page/

[3]https://informatix.com.au/blog/3-ways-to-captivate-your-audience/

[4]http://news.bbc.co.uk/2/hi/technology/4616700.stm

[5]https://www.surveygizmo.com/resources/blog/how-to-measure-attitudes-with-semantic-differential-questions/ 原文标题：How To Create A Compelling Landing Page原创作者：Paul Boag 原文链接：https://www.smashingmagazine.com/2020/04/landing-page-design/翻译作者：王佳乐文案编辑：王翎旭该译文并非完整原文，内容已做部分调节。如在阅读过程中发掘错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自阅文体验设计微X公众号 ( id: YUX_design )

热门文案举荐

折叠式卡片的实践案例（文末附组件）

虚拟校园制品的用户体验升级OOUX一个面向对象的体验设计思维

2022 年 UXUI 设计趋势

诈骗、迷惑、拖延...五宗罪：用户体验的暗淡模式

设计师们应该多玩电子游戏，游戏化设计背面的极致体验

为数字项目制定用户体验策略的 6 个实用工具！

符号学分析导论，图标构建的 3 大要素

在校的学弟学妹们，想要进大厂实习，请务必提前准备！

Google 最新的设计语言 MATERIAL YOU 来了，7 年败兴最大更新

解密设计系统的 11 大优点，最终能够说服你的管理层

咱们一块聊设计