选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

高转化率的着陆页(Landing Page)设计必要的10个元素

以前一直把landing page叫登录页,今天才知道最合适的叫着陆页,网站运营的三个关键因素,就是捕获(让人访问你的网站或者着陆页面),转化(说服他们进行你期望的操作,这里可以是点击,注册或者直接购买),保持(加深与顾客的关系,提高其终身价值)要想达到高的转化率,着陆页(landing page)就显得尤为重要了。

你有没有看到一个让你不能离开的着陆页(单页网页)?不是因为它引人入胜的内容,而是因为它的设计形式阻挡了你关闭浏览器。这是一种吸引眼球的方式,但绝对不是最好的。而且这也不是我们所谓的着陆页类型。我们所谓的着陆页,是不用依靠流氓弹窗和打折噱头,就可以创造美丽的网站,既能吸引用户眼球,又可以有很高的转化率和回头率。

所以,要坦诚,当你第一次看到着陆页(landing page),你最关心什么?

我们很多人都会把着陆页和可疑的营销页面看作同一类。认为它们就是一些放有自动播放的视频广告和永无止境的重复内容。

也许你觉得着陆页是个公司或项目启动页面。的却,许多创业公司设计“即将推出(coming soon)”页面,是为了让你对产品产生兴趣,并收集电子邮件为产品正式发布做推广准备。

但是,即使你不是在做公司营销推广或新项目启动,你仍然可以使用着陆页这样的形式去设计。你可以通过谷歌Adwords去推广你的设计服务,并且发送消息给潜在的用户,让他们看你的这个广告页面。你可以会有客户需要设计一个着陆页,而且他都不知道着陆页是什么东西。你学到了这些技能你就可以去向那些客户去推销着陆页(landing page)这种新的设计模式。

学会如何去设计一个杀手级的着陆页会让你的设计服务的价值提升。准备去看一眼么?让我们从最基础的开始吧。

什么是着陆页?

从技术上来讲,当一个用户来访,一个着陆页代表所有的页面内容。但是,本文只是在介绍一种去引导你的访客具体行动的专门的着陆页。如:吸引他们注册,或者购买的你的电子书,或者聘请你去做他们的设计师。

和你的网站其余的部分不同,着陆页的运作像一个孤岛。它没有链接到您的网站其余的部分,它只有一个重点:说服访问者做你想让他们做的一件事。

在普通的网站上,你欢迎访客随时随地访问:关于你、联系你或者是你的博客等。但是着陆页没有这些,着陆页为什么运营得更好,是因为他们直截了当。

你为什么需要一个着陆页?

一个着陆页面的唯一目的就是推销。无论你是卖设计服务还是信息资讯或者书籍下载、设计赠品、字体、课程等。你可以看到,也不总是需要货币交易。

不管你如何使用一个着陆页,我们的目标是把访客变成客户或者是会员。

每一个设计师都可以在一个着陆页中获益,为什么呢?因为很多设计师都患有“这只是兴趣,但是只要给钱,它会很酷”的毛病。有些设计师也还怕谈钱或者乱收费。

如果这听起来像你,让你的着陆页帮你说话吧。在着陆页上你可以分享你的水平和告诉别人为什么你是一个很棒的设计师。而且别人也不会觉得你自负,因为这只是你的着陆页。

你也可以建议客户做着陆页的方案,这样能产生更多收获。或许你的客户已经有要求了,那说明哥们你来到了正确的地方,让我们开始吧!

1. 导航

跟着我念:成功的着陆页没有导航!

为什么呢?因为你不希望访问者被菜单上的选项所分心。相反,你希望他们专注页面上的内容,直到产生转化。

如果你在着陆页上做了完整的菜单,访问者会被诱惑,去了解你的关于页面,或者看你的投资组合,或者查看你的blog。久而久之,他们就会做跳跃式试用并关闭你的网站。他们会彻底忘记你的内容。

删除所有能产生杂念的东西。除非你有视频,在网页上唯一可点击的选项应该是你的行动按钮。

2. 排版

虽然没有固定的规则,当涉及到排版,这里有一个基本原则:

(Pardon the stock images. Only used for illustrative purposes.)

用一些富有视觉冲击力的大图去迎接你的客人。如果你是做一个捐款的网站,你就显示那些接受捐款的孩子们的照片。如果你是卖软件或者应用的,那就放你的软件在工作中的动态视频效果。

接下来,你要在图片旁边放置独特的销售主张,使用列表式要点,以便于访问者快速获取信息。

在你的主张下面,需要包含一个“行动”按钮,并且使其特别明显。

所有的这些信息必须在首屏。这样访客不需要滚动鼠标滚轮才能点击行动按钮。一个最近的数据统计显示,80%的人都只愿意花费自己的时间在首屏上,只有20%的人才会往下滚。

这并不是说你可以完全不管首屏以下的内容,很多着陆页(landing page)用长页面表现更加合理,这样可以把你的产品和服务介绍得更清晰,如果你选择这样做,你可以把“行动”按钮放置到每一屏,以便访问者在时时刻刻都能找到它。

3.有故事的色彩

颜色影响心情。谷歌知道这一点,这就是为什么他们测试了41种深浅不一的蓝,目的是要看看哪一种能与他们的用户产生共鸣。可口可乐、必胜客、Frito Lay、麦当劳和纳贝斯克也知道这一点,因此他们使用红色和黄色,可以刺激用户的饥饿和兴奋。

所以,让我们做一个实验。当你看到这些颜色,有什么感觉?

Colors & Emotion

如果科学是被信任的,这是你应该感到的:

色彩与情感

应用这些色彩属性到你的着陆页,使用红色是一种吸引人注意力和产生兴奋感的正确方式。蓝色会让人感觉很好沟通和有信任感。这两种色彩是最好的“行动”按钮色彩。

当你选择背景色时,灰和白是要优先考虑的,因为选它们总是没错。

不要使用太多的色彩在你的着陆页上,选择两、三种和谐的色彩来传达你的信息即可。

4. 图片

每个人都喜欢漂亮的图片,用图片更妙,大脑处理图像比文字更快。

使用能捕获购买你产品或服务人的情绪的照片。而且在这里,你可以注入你的个性。

我们都知道,很多东西是难以用文字传达语气的。这就是为什么你的文字需要图片和色彩去传达“故事”。我可能不明白,也可能相信,你的产品或服务非常适合我的业务,但是当你拿出人们使用你产品的场景图片时,我就确信了。

但是,以下是一个非常大的警告,请不要做:

stock image of a random business guy

使用一些毫不相关的图库图片的时候是没有灵魂和关感觉的,因为你们没有人使用你的产品,没人知道你的产品,不知道你的存在,而且很可能都不知道自己在哪里。

相反,使用授权了的上面有人真正在使用你的产品的照片,不是专业的照片没关系,但是这些能真正代表你的产品。

为什么呢?因为你是在建立你与用户之间的信任,你希望他们对你有信心,而且页面上每一个元素都可以支持这种信任。

我会使用一些图库图片在某些案例中,但是从来不会在要证明你的真实性的着陆页中使用。

如果你不想使用照片,而使用一个插图或者是某些展示模型,注意,不要使用那种满大街都是的素材。

5. 视频

视频是着陆页的热门选择,理由如下:在页面上使用视频转化率可以提高86%。选择视频用户可以更好的、更完整的了解你的产品和服务。

视频不宜过长,要甜,要直击关键点。你的视频不要解释如何使用你的产品,而要告诉用户你的产品使用起来多么简单。

访客用户一般会在一个“它能给我带了什么”的视角,去看一个着陆页,你在文字和视频里都要一遍又一遍的来回答这个问题。

6. 副本

不知道副本和内容的区别吧?内容是信息,副本只为了满足销售。

在您的着陆页面,使用副本。

我不会骗你说写一个副本是很容易的事情,因为它不是。有效的副本可以推动用户去行动按钮。为了达到效果,你必须理解内容情感和为什么人们开始对你的服务感兴趣。

例如,一个人为什么要买你的书,或记住你的服务?(提示:这个不是你脑子里在想的,而是用户脑子里想的东西)

简单的回答是,那些潜在的客户是为了学习知识和改进他的网站。您的副本应该深刻的回答这个问题,不是说你的服务或产品有多伟大,而是从侧面让他感受到你的产品和服务的好处。

最直接的就是,要关注客户的需求,以及他们关心什么。

7. “行动”按钮

这样的例子不胜枚举和。这里的关键是要制定一个号召性的行动,反映了你的目标网页的基调。它应该是风度翩翩,而且可以很有趣,或严肃的,根据话题。

“行动”按钮是你的着陆页上最重要的元素,它告诉用户该去做什么,你提供了什么。

不要在按钮上写”提交”这样的字眼,因为没有人会去点,“提交”是一个可怕的字眼。

相反,使用一些文字描述正在发生或即将要发生的事情。这里有些参考:

1.加入我们的社区
2.我希望得到免费
3.现在,获取结果
4.雇佣我
5.感谢你的捐赠
6.给我的免费电子书
7.立即下载
8.我希望有一个更好的网站
9.我喜欢打折

这样的例子不胜枚举。这里的关键点是要制定一个行动动作,能反应你的网页目标基调。它可以是,风度翩翩的、很有趣的或严肃的,需要根据你网站主题和具体情况。

8. 信息表格

要填写的信息表格应该是简单的。事实上,我是电子邮件的大拥护者。如果你问生日、电话号码、邮寄地址和血型,的话,很多用户都会转身离开你的页面。因为没有什么比只提交一个电子邮件更简单。

人们不会轻易给出这些信息,是因为他们不知道你是否可信,请尊重这一点。

但是,一旦你们建立关系,你可以随时要求更多的信息。

9. 社会认同

人们很想知道,他们并不孤单。所以一个了不起的着陆页必定会加入一些社会认同的证明或者其他的形式。

如:真实姓名、照片、网站和微博等工具在旁边做见证。有了这些就能很好的增加社会认同感。

另一种增加社会认同的方式是,增加用户数显示,在你的“行动”按钮上。如:15702人注册了这个网站!

这些看起来很简单,但是它们可以大大提高转化率。

10. 响应式设计

你的着陆页必须是响应式的。超过80%的互联网流量来自于移动设备。如果你的目标用户看到的网页是错位的,那你所有的努力都是白费。

请保证你的着陆页能适配任何显示窗口。

总结

希望这篇关于着陆页设计的引子能给你带来灵感,让自己设计出属于你的精彩的着陆页(landing page)。这里面的内容都是一些非常有用的互联网运营设计的常识,设计师了解后,会让你设计目标和思路更清晰,有任何想法和建议请在下面留言,enjoy!

 原文:http://webdesignledger.com/trends-2/10-essential-elements-of-a-landing-page(云瑞译
云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。