Landing Page是自我建站以来最薄弱的一个短板,这次也花了很多的时间在这块,打算这次能有一个比较大的突破。今天我终于算是初步完成了一个比较还算完整的Landing Page的设计了,但是发现仍然有美中不足的地方,这样分享下我设计的流程,也希望能够得到各位大神的建议,解决掉我依然存在的问题。

一、设计思维

优秀的Landing Page(登陆页)一般是只基于PPC而设计的,我这次设置的登陆页可能两者都能用上,PPC可以用这个,自然流量过来的客户,也是可以用的。总体思维是想和客户实现一个交换(exchange)的功能,这里我是用download功能来实现的,因为我之前操作过,有成功的案例,所以就延续了。我的基本思维是这样的。
 
Step 1# Email 输入页
这个页面我设计的是两栏,左侧是表单,右侧是这份即将要下载的文件煽动性的文字描述。这一页的目的就是能够让客户输入email地址,也是最关键的一个页面。然而,其实并不让我满意,因为谈不上设计,全是功能性的东西。原因只是一个,不会。
 
Step 2# 跳转下载页面
这个页面很简单,就是展示即将要下载的链接。以前我设计的案例用的是输入表单信息,点击submit按钮,然后会弹出下载链接,不需要跳转页面,这个插件我用的是email before download ,contact form 7和Form Lightbox弹出工具。其实我现在还是觉得这个功能不错,因为这样的话我只需要两个页面就可以实现转化追踪,但是现在我用了三个页面追踪,而且追踪页面很坑爹的,待会我会描述。
Step 3#跳转 Thank You 页面
这个页面的设计就是为了插入代码,用来追踪转化率的。因为后期需要设计这样的download landing page太多了,这样不是为了ppc,而是为了方便客户体验的,这也是我为了在短期内可以利用有效的自然流量获取询盘的一个途径。但是这么多的landing page,我不可能设计那么多的转化追踪页面,所以我的想法就是三个页面,中间那个下载页面是过渡的,最终都会到这个Thank you 页面。这个是最终页面,为了追踪转化率而设置的。

二、设计工具

设计这个landing page,我主要用了这几个工具。
1、插件:
1)email before download    这个工具很好的帮我实现了让客户输入邮箱才能下载我的whitepaper的功能,是最关键的。
2)Contact From 7   这个是我暂时在用的表单工具,但是做newsletter感觉还是不那么方便,后期可能会改动。
3)download monitor  这个是用来上传管理文件的,在建立一个download之后,它会有一个和contact form 7 一样的代码在那里,然后你复制插入到text文本里,然后网页上就会显示一个下载的页面。

4、Contact Form 7 – Success Page Redirects   这个插件也是必备的,它是和Contact form 7 组合在一起用的。安装这插件之后,你在设置表单那里会自动出来一个redirect setting 的设置,在用户填完表单,点击提交之后,页面会自动挑战到另一个页面,我就是利用这个插件实现表单跳转下载页面的。

landing page 1

以上四款是必要插件,一定要用的,要不然很难实现我说的那些功能。

2、Page 工具
Page 可以分成两种,一种是目录页,也就是我把所有的landing page 放到同一个页面,我把它叫做download页面,这个页面是放到导航上的,客户点击导航里的download,就可以一览所有可以下载的item,就跟博客的排版一样。这个也是网站的一个亮点之一,一般我看到download是很想去看看的,然后下载。另外一种就是内页,这个内页就是我前面讲的,由三种页面做成的。这两种页面我用到了这两个页面工具:
1、Post 
利用post 这个 工具,我可以很轻易的把我所有想要下载的item排布的跟博客文章一样整齐,我的download 页面就跟我的另一个博客页面一样,还可以有feature 图片。avada的主题貌似有一个bug,那就是post 的页面没有fusion builder 这个功能,这个我之前是看到巴比的一个帖子里有解决这个问题,大家可以去问一下。我现在已经解决了这个问题了,很是方便。这个Post 的功能我只用在了Email 输入页的排版上,其他的几个页面全部都是page页面。

2、Page

这个功能我用在了download展示页面,下载页面,还有thank you 页面。download页面不用说了,要用在导航上,肯定要用page 功能了。下载页面和thank you 页面是为了查了代码,追踪方便。

三、案例展示

现在我假设自己是个客户,以客户的身份去完成这一整套的操作。
1、客户先进入我的首页,然后点击download 页面
landing page 2
2、看到以下情况,这里客户可以根据标题及图片选择自己想要详细了解的页面
landing page 3
3、选择其中一个item,然后进入详细了解,这就是我设计的email输入页,实在是汗颜,反正还远没有达到我期望的要求。看到我的logo了吗?哈哈,当时在和女王讨论logo设计时,由于女王属鸡的,所以我提议为毛不干脆用凤凰呢?万鸟之王,你的生肖,然后就这么愉快的决定了。
landing page 4
4、在输入表单信息,然后点击提交就进入到这个下载页面。这里就出现问题了,你看到那个那个大大的button了吗?哎,那是我为了跳转到thank you 页面而特意加的,这个设计的缺陷就是客户有可能不帮忙点击,那就不能统计到所有的转化了。我现在能够想到的最好的解决方案有两个,第一就是客户点击那个下载的链接,然后在下载的同时可以跳转,另外一个就是客户进入到这个页面之后,系统给予30s的时间给客户下载使用,30s之后系统自动进行301跳转,进入thank you 页面。但是第一个方案我还遇到过可以链接点了下载的同时还可以跳转的。另一个也有bug,,万一客户是个懒癌晚期患者,30s不够那怎么办?或者网速烂到爆,始终下载不下来,再没完成下载或者加载页面就跳转了页面,那就很影响用户体验了。landing page 5
此外,还有另外一个问题,那就是301跳转,一般都是立即跳转,我想延迟跳转就不行了如下图我用的是meta redirect,一旦选择了这个功能,页面立马显示不出来,当机了。这里就说下我用的那个插件,

Quick Page/Post Redirect Plugin,这个插件安装之后,每个页面后面自动会有一个跳转选项。

landing page 6

5、Thank you 页面,这里除了做统计,我也尝试性的用了一个外链,引导客户去浏览我其他的页面,这个设计还值得用数据去检验。有经验的大神,也可以发表下见解,看看这设计是否合理。

landing page 7

这就是一整套的设计了,几天的构思,操作起来也费了很多工夫。其实还是没满意,我也尝试用了Landing page的插件,其实也算不错的,更加专业,但是由于我更多的是从客户体验着手,所以还是设计了这套。Landing Page的插件我暂时用的是这款,如下图。

landing page 8

我觉得我在ppc中还是会用插件自带的那些landing page,因为自带A/B Test,我自己设计的是没有的。而且他直接由很多现成的模板页面可供选择,如下图。

landing page 9

四、问题讨论

1、这样的landing page设计还算是雏形,测试期。有更好的设计欢迎各位指点交流,可发我邮箱biaojie520@yeah.net;也可以加入表姐物语QQ群284470121 和大家一起讨论。
2、301跳转的延迟跳转功能如何实现?
3、有没有更好的跳转及数据统计方法
4、欢迎大家与我交流自己的landing page方案。
5、Landing Page的工具介绍,这块知识急需,就需要各位大神的指点了。
表姐记于2016年4月29日