7个提高着陆页转化率的设计技巧(上篇) - 优设网 - UISDC

7个提高着陆页转化率的设计技巧(上篇)

2014/02/28 12202评论区

设计一个最优的着陆页并不是一件非常容易的事。如果你想获得一个可观的转化率,那就更不简单。然而,对于以转化为核心的设计理念你懂得多少呢?

以转化为核心的设计(CCD)是一门学科,专门针对为实现某个单一的业务目标的设计经验。它的意图在于,通过使用有说服力的设计和心理诱因来引导访客完成一个具体的行动,来增加转化率。
着陆页是CCD设计的核心。着陆页的设计元素会同电子邮件的设计保持一致,它的目的是使来到页面的访客能够有效的转化至目标路径的终点,走完整个转化路径。而在着陆页面上,我们可以收集到访客的浏览数据或在访客到达下一个页面之前获取你的产品和服务的细节信息。

那么,该如何通过设计来说服访客完成你想要的转化目标呢?有很多设计元素,可以将访客的注意力牵引至你所期望产生互动的区域当中来,心理的诱导也能激发参与感。让我们来深入了解这两种类型的设计元素,使你设计的着陆页可以实现真正的转化。

1) 聚焦

制造出隧道的视觉效果,这是一种比较典型的用来吸引访客眼球的方法。你可以考虑在着陆页中这样的视点上设置call-to-action。例如下面左侧这幅图,圆拱的建筑特征可以防止访客的视线停留在别的地方,而是被锁定在中间部位。右侧的图则是将你的注意力驱动至隧道的尽头。

2) 对比色

使用对比色是一种简单的理念,整个光谱的颜色都是适用的,但是单色是最简单的的。

使你的call-to-action从周围的区域中脱颖而出,就是使它一眼就很容易被发现。假如你在白色的背景上设置了一些黑色或灰色的文字,这时使用黑色或白色的call-to-action都不能体现出对比度,因此你需要更丰富多彩的元素来突出call-to-action。但是,如果你除了一个非常简洁的设计之外没有太多的细节或文本,那么较大的黑色或白色按钮就会显得很突出。
颜色可以用来给访客制造一种情绪反应。例如橙色,可以使人产生一种积极的情绪,使用橙色作为call-to-action是个很不错的选择。下面分析了很多颜色给人们带来的心理暗示:

另一个重要因素是颜色的对比效果。这个方法是借用了空白区和对比度来显现不同之处。有人说call-to-action的颜色是无关紧要的,但其实这是对比色的问题带来的假象。举个例子,正常情况下,红色的call-to-action可能会输给蓝色的call-to-action,但如果你的页面背景是蓝色,那红色的按钮一定比蓝色更吸引人。
我们来看看下面这两个图例,左侧图片中的颜色对比如此极端,导致你很难不被其吸引,而相比之下,周围的区域显得很低调。而右图,在整个着陆页中使用一个单一颜色的不同色调,而除了那个呼之欲出的call-to-action。

记住:整个页面都是以你的转化目标为导向!

3) 视觉引导

视觉引导是将访客视觉引导至着陆页上重点区域的一种指标。这可以帮助你将访客的目光引导至你期望的区域内,并且在到达着陆页后很快就能转化完成你的目标。这种视觉引导的类型包括方向箭头、公路路径以及视觉的冲击效果。

方向箭头

对于视觉引导来说,使用方向箭头的效果非常明显,因为它直观、一针见血。在访客到达着陆页的短暂时间内,能够直观的将访客聚焦在预期的区域内是非常成功的引导方式。这样的箭头其实是在告诉访客:你不用关心其他的内容,只要将注意力转移至我指向的位置区域就可以了!

上面是一个关于使用箭头的非常出彩的设计案例,被箭头指向的男人,用他的目光将你的注意力引导回到这个拿着箭头指示牌的人身上,最终你的目光会停留在箭头指示牌上,这样就轻而易举的吸引你去弄清楚指示牌上写的什么。

公路
使用公路的设计思路是以现实世界中寻找道路的方式来触发并引导我们的大脑思维进入所要陈述的事物。这个例子使用了一个长长的公路,引导你的视线直达照片上方的山崖。 在我们的潜意识中,道路是一种很明确的,毫无阻力的路径指引方法,所以我们自然而然的会接收这种引导。

LandingPage着陆页设计提示:
设计有趋向性的线条来将注意力吸引到call-to-action,三角形是最有活力的形状,它们自然的指引特性使他们成为特殊的设计工具,同理,箭头则是更天然的路径指引设计。

眼神暗示
作为人类的我们很自然地了解目光的意图和使用方法,无论它来自人类还是动物眼睛。让我们一起来看看下面的案例:
第一张图例中的猴子专心地注视着手中的香蕉,这时好奇心会迫使我们不得不寻着猴子的目光去一探究竟。第二张图:你会无法控制地像土狼一样往下看。

伴随着目光的移动,头也会一起移动。第二张图例中,你不但会好奇草里面有什么,而且会本能的朝着狼注视的位置看。因此,如果将你希望转化的目标设置在这个位置,到达的访客也同样会在这里聚焦视点。
第三张图例中,视觉引导的设计方法很奇妙,首先是右下角的麋鹿驱动你的目光,这个位置你可以设计主题或独特的营销策略,然后跟随着麋鹿的目光聚焦在从水上飞过的候鸟群上,在这里设置你的call-to-action。

婴儿和有吸引力的人物
图案也是设计非常重要的一个因素,因为它会在图片和你之间创建一种连接。当考虑到使用一些有刺激效果的图像时,婴儿和人们熟知的有影响力的人物是最有效的。而在这两者当中,最有说服力的则是婴儿的图案。研究表明,我们都会将call-to-action设置在婴儿脸部的位置。

在着陆页的人类元素设计中,有吸引力的女人也被证实是非常有说服力的。下面的图例显示了强有力的感觉互通产生的效果,你的主角吸引着你的注意力。这种目光接触是一个非常好的视觉引导方式,是延长访客在页面停留时间的好方法,为访客提供更多深入了解你的内容的时间。

在着陆页的设计当中除了设计因素外,心理因素的考虑也会为提高转化率带来意想不到的作用,敬请期待:提高转化率的7种着陆页设计技巧【下篇】!

参考文章:hubspot

【优设网 原创文章 投稿邮箱:2650232288@qq.com】
 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量63万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/call-to-action-landing-page-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里