御用导航官方网站提醒提示页_硬核技能!着陆页设计制作——萌新小白一天上手着陆页...

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-23 00:01   2774   0

9d97864cfdd5051257df302172a74ada.png

互联网发展日益迅猛的今天,越来越多的传统企业意识到线上销售的重要性。通过线上资讯吸引更多的潜在客户关注已成为主流营销方式。在此背景下着陆页应运而生。

着陆页设计是一个非常实用的技能,可以全方位的展现产品的所有特点,做出一个吸引人的着陆页,可以极大提升用户的转化率。

学习着陆页(landing page)之前我们先了解下网页类型以及着陆页(landing page)与首页(index)的区别

网页的基本类型

I型 informative信息型网页

  1. 首页
  2. 分类页
  3. 文章类

P型 persuative说服性:landing page

  1. 获取页
  2. 销售页

着陆页(landing page)与首页(index)的区别是什么?

1、概念上:

着陆页(landing page):着陆页,用户点击搜索推广、信息流或其他形式的广告打开的第一个页面。着陆页可以是网站上的一个页面,也可以是公众平台里的一篇文章。

首页(index):一般为网站打开默认的页面,通常放在根目录,index的英文含义是索引。通常认为网站首页是全站内容的索引和导航,便于用户快速了解网站内容和主题,并进入相关页面。

2、应用上

首页:一般情况下网站都会有一个索引页(index)作为首页。

着陆页:严格的说跟网站没有关系。

着陆页概念的存在依赖于一次广告活动行为,假设你做了一个网页,为某次广告投放做准备,这个网页就是着陆页,没有广告活动,这个网页就是一个网页。不存在“着陆”的概念。

着陆页的经典结构

目前市面上的着陆页都包含了8大组件(价值定位、行动呼唤、产品特征、信用背书、用户评价、风险承诺、常见问题、终极呼唤。

25d7a7d327818586628f91241791f5fc.png

接下来我们开始一步一步制作着陆页了,以工具【上线了https://www.sxl.cn/s#/】为例。

1.百度搜网站名称“上线了”进入网站——2.点击创建网站——3.选择你需要的模板——4.开始创作

b6eae6d6ebf991b4172966604cac9344.png

c5ecd549f065c14a595cd1b985aea7e6.png

一、价值定位——标题和副标题

价值定位就是标题,标题要在显著位置包含价值定位+行动呼唤

标题的功能:吸引+引导用户。

一个好的标题是使副标题行到阅读。

一个好的副标题是使第一个句子获得阅读,如此,遍及整封信的内容,直到采取行动。

标题写作的法则

  1. DM公式:时间+结果+保证
  2. 落差公式:痛点问题+解决方式
  3. 人性法则:人性的八个弱点

好奇:当世界名画变成了GIF图,画面太美我不敢看

恐惧:史上最严地产调控,一场残酷的全球金融大战

痛苦:为什么你看了那么多书,依然过不好一生?

骄傲:不用香水的女人没有前途

懒惰:到底有什么用?5分钟快速了解引力波

愤怒:是时候给“港独”分子一次彻底的教训了

贪婪:4.9元如何淘到智利进口车厘子

色欲:这11种让人爽的方式,90%的人都没试过。

二、行动呼唤——可以是获取用户信息的表单/微信链接

ca34fd192f5dc53d048a25a36205ccc7.png

点击编辑,改文字和链接

43ae9f883762174c08facf3b8b9d1931.png

表单可以去【麦克表单】制作,这个是我写的简单的一个http://twwgp7rw24q8fwdw.mikecrm.com/asXnAnM

867a4d35edc9a4f514dcfbb7e0c280c1.png

着陆页的行动呼唤旨在告诉用户他们应该做什么、怎么做、什么时候做。

如何构建行动呼唤

一、四个方向:点击/获取/推荐/购买

二、创建CTA

1.巨大:离屏幕距离为一指+一个手臂的距离还能清晰看到;

2.具体:内容需要足够具体(比如,写注册和下载是需要写清楚下载什么,注册成为什么)

三、产品特征

产品特征这一part就是你的产品是什么,能给用户带来什么样的好处,在这一部分多采用AB型文案的方式。

A+B(吸引注意的事实+用户感知的利益)

例如:多才多能,让你不想放手;又轻又薄,让你不觉在手;充电两分钟,通话2小时。

69bb8af029a7ed6c083cdac748a23883.png

四、信用背书

媒体+红人

媒体:媒体报道的title,图标,报道链接等(不要单纯放链接,要把媒体的图标放上,再把链接嵌入)

红人:放上红人/牛人头像 、网站链接、说过的话等

6f959b8ec83bac4e7309a6e71a86f9a7.png

五、用户评价

如果你是做在线教育的就是学员评价,做设计的就是合作企业的评价,总之是你的客户

用户评价写法

1.正向评价:尽量收集多样角色的评价

2.反向评价:反转的运用,先抑后扬

  • 用户评价必须真实
  • 怎么撰写更具说服力的用户评价
  • 如何构建用户评价
  • 时间+结果+感受+人物
  • 多找一些不同维度的典型用户
  • 尽量放上用户的真实照片。

c30aa15183008c6fc00dab1a5a5b4661.png

六、风险承诺

风险承诺想传达给用户售后无忧的信息(风险在我,而不在你),让客户安心购买,假一赔十,7天无理由退款,不满意无条件全额退款这些都是常见套路。

0205156d5e052b1124db7de771e3c5e9.png

七、常见问题

常见问题的设置是有技巧的,这里小编把最实用的3个技巧和你分享:
(1)按频排序:把用户问的频率最多的问题放在第一个,以此类推
(2)三点原则:尽量把最重要的三个问题放在你的着陆页上
(3)链接跳转:可以把用户容易问的更多问题做一个跳转链接引导到单独的常见问题页面

b4f796f1dcaaf059956cc032bd979ae0.png

八、终级呼唤


终极呼唤承担转换的功能,所以终极呼唤要比前面的行动呼唤(CTA)更直接、更赤裸、更直白。

5742f5bfc85f952e14057dc6186e53b8.png

设置基本资料

这一块根据提示,给网站拟定标题,选择公司类别,网站的基本描述,搜索关键词,以及图标等。

4c51bcc1c8e06ee9b881b5e4918d9eb4.png

着陆页原型图的类别

创建过程中可能会漏掉什么元素,这就需要我们打个草稿,可以通过线条、图形等设计元素组合描绘出的产品框架图。工具如下:

  • 低保真:手绘
  • 中保真:墨刀、Balsamiq Mockups、http://Proto.io、Moqups
  • 高保真:keynote、Axure、Sketch、Photoshop、Invision

对于着陆页(落地页)的设计来说,因为它不像一整套APP的设计那么复杂。因

此,如果你需要制作着陆页的原型图,最快速、最推荐的办法就是:手绘。

无论是一个网页着陆页,还是一个海报着陆页,你可以拿出一张A4张+铅笔,

过最直接的方式构思整体的页面布局和文案。

85016bb716ac16459cafd3cc933c41c0.png

其他如墨刀等工具可以自行在网上或者他们公众号获取使用教程。

添加GA监测代码

如果你想要把百度统计等自定义代码的添加至上线了网站,请确保你已购买付费版本(目前试用版也不支持添加自定义代码),但是如果你使用免费版本,你可以使用 Google Analytics 来监测你的上线了网站

如何在上线了网站中添加Google Analytics统计代码?

上线了的网站都提供专业的数据分析及展示。如果你的访客主要来自海外,并且需要了解更多更详细的网站访问数据分析,我们推荐使用 Google Analytics 谷歌分析工具。

请注意:由于国内政策的原因,从国内访问添加了Google Analytics的网站,如果访客的电脑或者手机没有设置VPN,其访问数据可能会被屏蔽掉,导致Google Analytics无法追踪,出现数据不精确的现象。

这是 Google 提供的一款免费且强大的数据分析工具,让网站管理员了解到网站的每次访问以及每次的点击,包括新旧访客的对比,流量的来源,访问的时间分析等,十分的详细。

使用方法:

1. 创建一个 Google 统计的账户。

2. 登录“管理”-“媒体资源”-“跟踪信息”-“跟踪代码”。

3. 复制“跟踪 ID”下面的代码(例如“UA-XXXXXXX-X”)。

9fe039fd1f59d97252a77879fdea9b6e.png

4. 登录上线了网站编辑器,进入【设置】-【显示高级选项】-【服务与验证】,把Google Analytics的跟踪ID粘贴进“Google Analytics追踪器”里面,更新并重新上线网站,即可生效!

5ae9a5ae55a2af0ea37854483b197699.png

如何在上线了网站中添加百度统计代码?

上线了的网站都提供专业的数据分析及展示。如果你的访客主要来自国内,并且你希望了解更多更详细的网站访问数据,我们推荐使用百度统计站长版来获取网站的数据分析。

百度统计是百度推出的一款稳定、免费、专业、安全的数据统计、分析工具。能够为web系统管理者提供权威、准确、实时的流量质量和访客行为分析,助力日常指标监控,为系统优化、提升投资回报率等目标提供指导。

具体步骤:

1. 首先来到百度统计网站,点击【注册】,然后选择百度统计站长版。

816276584664fb3a522b5671450b01a2.png

2. 来到以下页面,输入账户信息和网站信息,进行注册。

95adf7a212436838fa45fffa7ed64bdd.png

3. 完成注册后,就会跳转到网站的统计代码处,如下图,然后复制代码。或者你可以根据百度文档【如何获取百度统计代码】一文来获取这个统计代码。

b637e298797675bd576f23cabaa80a83.png

4. 复制代码后,来到网站编辑器,点击【设置】→【选择高级选项】→【自定义代码】→【页眉/页脚代码】,将代码放置到【页眉代码】处。

c6e48d18c978c767bc08e8a93dac4632.png

5. 检测代码是否安装正确。

如果要检测代码是否安装正确,请在网站编辑器里先点击【上线】,这样百度统计才能检测到这段代码。然后来到百度统计的页面,点击【管理】→【代码管理】→【代码安装检查】,点击【代码安装检查】。

6d902a3a766a8e4a56c9b0ee542a012d.png

点击【代码安装检查】之后,百度统计就会开始检测。如果安装正确,就会看到提示【页面代码安装状态:代码安装正确】。如果提示安装不正确或者没有检测到,请按照步骤3和4检查你的操作,然后重复第5步。

4d94df3e78457b1ab059e33eafc511f4.png

6. 根据百度的安装说明,代码安装后20分钟才能查看到网站数据。请耐心等候一段时间,然后再点击【报告】查看网站的数据分析。

111ca4c74b3e6e034299bec735f87ac8.png

更多内容,可点击查看 上线了最新官方文档。

到这里我们的着陆页就顺利搭建完了,你get到了吗?

特别提醒

着陆页的8个经典结构可以根据公司或者产品特点调整,不是全都需要包含可以包含几个

着陆页不是单指网页,朋友圈、微信群的海报、引导报名的文章啊,这些都是着陆页的主要形式。

好了,小伙伴们,如果感觉对你有用,就点赞收藏吧。做是最好的学,萌新小白也可以上手制作着陆页哦!!

b8aa55714dd94a9377c0e7c72e9a6d45.png
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP