钟盛_医疗(医院)网络营销|摄影|博客

合作&联系:
邮箱:t@zhongsheng.org
Q Q:120678954
微博:钟盛 钟盛
返回网络营销目录

着陆页面九招设计 让你网站也成转化率英雄

zhongsheng, 2014-4-18 9:2:23, 次阅读, 0人评论

  你,也可以变身成为着陆页的设计英雄!发生了什么事?你精雕细琢出完美的着陆页文案,字字珠玑,简洁却有说服力。文案切中了产品的核心,聚焦了访客,你放佛马上就能听到。他们对你的着陆页的连声赞叹了。

  你的在线营销活动开始了!广告带来了大量流量,你开始观测效果。一两天后,你笑着观测数据。等等,一定有哪里出错了!效果比以前好,但却不是与你预期的令人“赞叹”的效果。

  到底哪里出错了?嗯,可能是你把大部分的精力放到了文案,而忽视了设计。

  以下是9个着陆页设计技巧,想把你的着陆页的转化率真正提升到新的高度吗?使用这些技巧吧。

  1. 选择对比色

  

  关于行动召唤按钮的颜色的案例研究随处可见。有些人认为,某种颜色比另一种更好,但很多时候,其实是颜色间的对比,增加了转化。使用不同但是互补的颜色,可以使着陆页的某些设计元素成为页面的焦点。这样做的目的是创造出一个视觉层次,告诉访客哪些是主要的,哪些是次要的。

  当我们Pushing Social把页面模糊处理后,看看哪些元素突出了:

  

  看,行动召唤按钮和红色字体的文本都突出了。完美!使用字体的粗细对比是让人们关注文本的另一种方法,也就是说,把你想要突出的和让访客留下印象的字体加粗。为什么不大胆一些,像下面这样,同时使用颜色对比和字体粗细对比:

  

  需要说明的是,我不太认同Pushing Social展示产品的做法:把平板电脑的正面偏离文本。如果把平板电脑的正面变成朝向文本,来吸引访客的注意,相信测试后会有意想不到的效果。

  2.配图用真人实物的照片

  

  Webex没有理解在着陆页上使用照片的意义。照片不是用来填补空间,而是用来提升整个着陆页体验的价值。Webex把无用的图形塞满了大片的黄金位置,而没有寻找那些体验过Webex服务的真正的客户的好照片。因为,对于这些没有商标、被当做素材用烂了的图片,绝大多数访客都会视而不见。

  这意味着,Webex基本上放弃了首屏三分之二的空间位置——这些位置本应该用来打动访客,让访客相信注册成为Webex的用户是很有价值的。这同样适用于客户评价。不要使用无关的照片,更不要放弃使用照片,要使用真实的照片,这样才可以增加评价的影响力,并真正提升你的转化率。

  记住,确保着陆页的每张图片都有一个目标。如果它没有给你的网页增加价值,马上替换它。

  3. 提示访客该往哪儿看

  

  一个养眼的人物的图片不一定会多有效。这个人在做什么却会极大地影响你的访客,利用图片上人物的行动来告诉访客,该看页面的哪些位置,发现那些重要的内容。如果图片的目的让访客是去看相机,那么相机朝向文本和偏离文本两种方式产生的效果将大相径庭。

  你注意到了吗?在上面的例子中,沃伦·巴菲特目光朝向了标题。这将鼓励访客首先去看标题。

  下面这个眼动跟踪研究提供了,如何利用女性在照片上的视觉热力点,增加产品和标题曝光度:

  

  使用目光朝向标题或产品的人物的照片,可以吸引访客的注意力,并帮助他们专注到你的行动召唤上来。请注意,这个视觉技巧并非万能,尤其对于那些鸡肋的标题而言。所以,在你测试不同的图片之前,多花些精力撰写一个优秀的标题吧。

  4. 植入视觉提示

  

  将访客引到正确的方向并不总是一件容易的事。在着陆页,除了使用有朝向的面孔之外,你还可以植入一些视觉提示,比如箭头和边框,以此把访客的注意力吸引的注册表单、标题或高质量的客户评价。

  来看看Salesforce是怎么做的:他们建立了指向注册表单的箭头,这样就可以很自然地把访客的注意力从标题和其他描述性文案中转移到注册表单。而且,他们把表单的背景框设为蓝色,如此一来,表单就从着陆页中脱颖而出了。

  你也可以使用元素的边框来设计行动召唤按钮,来看看visual website optimizer的例子:

  

  5. 不要忘记设计匹配

  

  这是druva的一则横幅广告。

  

  这是广告的着陆页。注意:在着陆页,要使用和广告相同的背景图片。

  这个着陆页的例子也许不够完美(页面包含了主导航),但是却是设计匹配的生动示例。设计匹配和信息匹配的原理相同。设计匹配是指,让广告和着陆页的设计元素保持一致– 在内容处理和视觉设计上都保持一致。

  访客从广告到着陆页时,不应该为看到的内容感到诧异。如果整个访问漏斗上的元素是一致的和彼此相关的,那么访客就会把的时间聚焦在页面想传达的信息上,相反,访客就要花时间去琢磨:咦,怎么跟我想看的东西不一样?

  在营销活动的广告物料中,尽量使用相近相似的颜色,图片和图标,并贯穿始终,以确保访客理解每一个步骤。

  喂,Druva,该瘦身啦,去掉你们着陆页的主导航吧。以后你会感谢我的。

  6. 选择正确的颜色

  

  你想影响访客吗?在着陆页用鲜艳的颜色,这样你可以很快地吸引到访客的注意。但是要注意,错误的色彩搭配会导致访客流失。

  我们刚才讨论过颜色之间的对比,但是颜色的选择,决定了网站的外观和感觉,也在改变着访客的感受。假设你在向行政高管推销办公椅,如果你在设计时选用了粉色,那么这单生意很可能会黄。因为粉红色没有传达正确的感觉。

  GoToMeeting使用了非常鲜艳的颜色来搭配他们所提供的产品。试想,如果这个着陆页用了紫色,你认为它还具有相同的影响力吗?

  7. 可视化

  

  Crazy Egg使用了一些超长的着陆页,这个截图只显示了一小部分。

  有时候,即使是使用带要点符号的文本去解释产品,也是一件困难的事。这个时候,将大段文案替换成一张图片或图表,可以帮助访客快速理解一个新的概念。

  Crazy Egg深谙此道。他们用图片恰如其分地地阐释了热力图的作用(这种以图代文的方式,尤其适用于那些之前从来没有接触过热力图这一概念的人)。

  不要自以为是地认为访客可以轻易地理解你的产品的价值。如果你能用图片辅助你的文案来解释这一价值,一切就都变得简单了。

  8. 定制超大号

  

  想吸引更多的关注到你的网页上?尝试把它放大,放大到你的奶奶在10英尺之外都能看到它。

  Intuit使用了这一技巧。他们把行动召唤按钮放大到着陆页页面宽度的三分之一,再搭配上鲜艳的颜色,这样,访客就不可能注意不到了。只把你想要突出的元素放大。页面上最大的元素将占据访客视觉层次的顶部。如果你把多个元素同时都放大,那么突出的效果将会大打折扣。

  事实上,放大你的按钮或表格并不能解决所有问题。有时,它可能还会适得其反,降低转化,但是值得一试。

  9. 拥抱空白

  

  是什么把所有着陆页的设计元素连接在一起?答案不是那些让页面更加混乱的线条或其他元素,而是空白。

  使用空白不仅可以帮助你组织着陆页的设计元素,而且可以用来强调某个元素,比如你的行动召唤按钮或一张产品图片。空白同时提高了页面的可读性。如果文字冗长密集地挤在页面上,很少或根本没有“喘息空间”,阅读感受可想而知。

  在着陆页增加空白有两种方法:

  1,使用更短的段落;2,使用要点式列表。这并不是说要把文案全都变成一大片的带要点的超短段落,只是说这两种方式在提升文字可读性上效果不错。

  看看LinkedIn在做法。在着陆页,通过加大元素之间的距离,促使访客关注页面的标题,内容和底部的快乐客户标识。他们还穿插使用了要点式列表,使文字更具阅读性。

  好吧,让我们认真想一下。这篇文章自始至终都没出现过“提交”按钮。但我猜房间里总会有麻烦制造者。我在LinkedIn期待得到你们的更多信息。

  采取行动行动吧。开始测试着陆页,并完善设计元素。

  伟大的设计搭配伟大的文案,才能形成真正有效的着陆页,让转化率一飞冲天。

分  类:网络营销  |  日志标签: 网络营销  转化率  着陆页面  交互设计  

上一篇: « 上一篇

下一篇: 下一篇 »