点击跳转示例

点击跳转落地页:通往转化的那座桥

看怎样设计一页点击跳转落地页,把访客顺顺当当带到你的主要优惠。

点击跳转落地页的首屏图片
为什么这样有效:点击跳转页没有表单。它唯一的工作,是让下一次点击显得理所当然,所以主按钮从首屏起就已经指向目的地。

这座桥

活动与优惠之间的一页

一个方向,没有岔路

这一页上的东西都指向同一处。没有菜单可以逛,没有表单要填,也没有第二个优惠。访客要么看懂就点,要么再往下看懂,然后再点。

它把广告里的承诺再说一遍

访客来的时候,脑子里有一句话。第一屏把这句话重复出来,他们就知道自己没走错。

它补上目的地没有的上下文

结账页显示价格,商店页面显示截图。两者都不解释为什么。这座桥来解释。

它把已经热起来的访客交过去

等他们点击时,目的地只要确认这座桥已经说清的事。

蓝图,用来比喻点击跳转页背后的安排

结构

点击跳转页需要带上什么

六件事,大致按这个顺序。目的地已经做得好的,可以省掉。

信息和来源对得上

标题用带来访客的那则广告或邮件里的词。换一套说法,会像走错了路。

先说好处,再说怎么运作

访客的生活会有什么变化,然后再说它怎么工作。细节留给目的地。

预告另一边是什么样

让人看见点击之后会发生什么:一张截图、几个步骤、要花多久。意外会让转化掉下去。

证明,简短一点

一两句真实评价,或几个数字。这座桥很短;案例留给目的地。

一个目的地,重复出现

每个按钮都去同一个网址,文案也一样。放三处:首屏、证明之后、结尾。

别的都不要

不要订阅框,不要迷宫一样的页脚,不要聊天弹窗。只要不是这次点击,就是阻力。

这段路程

从广告到转化,一共四步

第 1 步:活动做出一个承诺

一则广告、一篇帖子或一封邮件只说一件事。这座桥必须把同一件事说得更清楚。

第 2 步:这座桥解释,也让人放心

好处、预告、证明。最多两三屏;这一页故意比销售页短。

第 3 步:访客点过去

去结账、注册或商店,而且已经知道那里会看到什么。

第 4 步:目的地完成转化

放弃的购物车和注册会少一些,因为顾虑在前一页就处理过了。

几个人围着桌子用笔记本工作

经验

什么留在这一页,什么留到下一页

点击跳转页是一座桥。表里写的是:什么留在桥上,什么等在对岸。

项目点击跳转页推荐目的地页面
目的地1需要几个就几个
表单字段0注册或结账
按钮文案相同,网址相同3看那一页怎么安排
证明一两句评价案例、评价、数字
价格
完整功能列表
第一个按钮之前有几屏0不用操心

另一边

点击之后会发生什么

把意外拿掉

告诉访客,目的地会向他们要什么、要花多久。没有未知数的点击,才是人们真正会点的那一下。

你会落到哪里

GitHub 上的 AstroWind 仓库:README、演示链接,以及 “Use this template” 按钮。

要花多久

装好 Node.js 之后,克隆并跑起这个模板只要几分钟。下载不需要账号。

要多少钱

不要钱。MIT 许可,个人和商业项目都可以免费使用。

一位开发者在笔记本电脑前工作

证明

这里有真实用户的两句话就够了

下面是占位,故意这样写。桥接页需要的证明比销售页少:一两句真实、具体的评价。

一句评价,确认广告里的承诺,并提到目的地实际是什么样。


客户评价的头像占位

客户姓名

职位,公司(示例评价)

短短一句,说整件事从点击到做完花了多久。


客户评价的头像占位

客户姓名

职位,公司(示例评价)

一句评价,对准让人犹豫要不要点的原因:价格、承诺,或时间。


客户评价的头像占位

客户姓名

职位,公司(示例评价)

常见问题

点击之前,大家会问的问题

回答要短:桥接页不该变成销售页。同样的回答也能在搜索里变成更丰富的常见问题结果。

什么是点击跳转落地页?

放在活动和真正完成转化的地方之间的一页(结账、注册、应用商店页面)。它自己没有表单;它的工作是把优惠讲清楚,让下一次点击变成容易的决定。

什么时候用点击跳转页,比把流量直接送到优惠更好?

当目的地本身很冷:结账先标价格、还没解释价值;注册就要绑卡;商店页面没有地方写背景。这座桥先把缺的上下文补上。

该放几个按钮,放在哪里?

放几个都行,只要它们去的是同一个地方,文案也一样。首屏一个、证明之后一个、结尾一个,分别接住早决定、中途决定和看到最后才决定的人。

按钮该不该在新标签页打开目的地?

通常不该。点击跳转页是把访客交过去;新开标签会把这座桥留在身后,注意力也被拆开。这一页在新标签打开仓库,只因为目的地是外部网站。

怎样衡量它有没有用?

看点到目的地的比例,以及目的地上的转化:走过这座桥的人,和没走过的人,分别是多少。如果第二个数字没有变好,这座桥就没有补上上下文,只是多了一步。

用 AstroWind 怎样改这一页?

改 src/pages/landing/click-through.astro 顶部的 destination 常量,换掉每个组件里的文案,保留顺序。每一块都来自 src/components/widgets,没有额外的自定义代码。

继续前往模板

这一页属于免费的 AstroWind 模板:Astro + Tailwind CSS,每一块都是可复用的组件。下面的按钮,就是这一页存在的理由。