如果你正在阅读这节内容,想必已经明白优质落地页对于保持信息一致性和提升转化率有多么重要。
但是,你是否曾思考过那些让落地页真正高效的设计决策背后所遵循的原则?
就像转化优化的专业艺一样,高效的设计优化也关乎重点突出、流程顺畅,以及将潜在客户引导至我们希望他们到达的位置。
好消息是,你无需成为专业设计师也能运用这些基础设计原则来打造高效的落地页。
准备好了吗?让我们先从这些落地页设计技巧开始吧!
设计原则一:视觉重点突出
吸引用户关注并提升转化的最常用方法可能就是制造视觉上的重点。
但关键在于要清楚知道什么时候该突出,什么时候不该。
许多营销人员和企业主在制作落地页时倾向于想突出所有内容,因为他们觉得每样东西都很重要。
毕竟你把它放在页面上总归有它的理由。
然而当你试图突出所有东西时,其结果就是什么都突出不了。
在落地页上,通常值得运用视觉重点突出的元素包括:
- 主标题
- 按钮
- 价格表
- 表单
- 限时/紧迫性提示
- 用户评价
- 其他关键信息
而通常不需要刻意突出的元素则有:
- 大段正文内容
- 图片与图形
- 装饰性设计元素
- 背景元素
如何在你的落地页上运用视觉突出重点?
以下是一些可以在落地页上突出重点元素的方法。
请记住!只突出必要的部分,并考虑重点如何与页面上的其他元素关联呈现。
主标题
突出重点标题的方法多种多样。最常见的是使用更大、更粗的字体。你也可以使用彩色字体,以及边框、箭头等装饰元素和背景色。
示例:在花费大量时间思考如何创意性地突出标题之前,可以先判断一下,是否仅用更大、更粗的简单字体就足够了。
Basecamp是这种突出方式的完美范例,设计简洁,并巧妙的加入了一些额外的社交证明。

看起来相当简洁美观——图片来源
按钮
当人们开始关注如何突出重点时,按钮往往是最先想到的元素。
关于按钮,一个好的思考角度是其具体的颜色或样式并非最关键,更重要的是它能否在页面其他元素中脱颖而出。
示例:在我们的一个客户案例中,我们注意到原本明亮的橙色汽车可能会分散用户对实际行动号召按钮的注意力。因此我们进行了测试。我们将原页面与另一个版本进行了A/B测试,新版本使用银色汽车和橙色行动号召按钮:

原版:橙色汽车,深蓝色行动号召按钮

改版:橙色行动号召按钮,银色汽车
你认为哪个版本获得了更高的转化率?如果你选择了银色汽车配橙色行动号召按钮,那么恭喜你答对了。

测试结果图表:银色汽车版本胜出
价格表
价格表是一个极佳的工具,它能快速突出产品特点,促进转化,即使是针对单一产品的落地页也同样有效。
示例:Sean D'Souza经常在他的信息产品销售页面上使用这种技巧。
通过对赠品和价格进行微小的差异化设置,能在几乎不提高价格的情况下显著提升产品感知价值,让用户做出注册决定变得轻而易举。

看起来不是最现代的设计,但设计依然重要——图片来源
表单
表单是潜在客户生成类落地页不可或缺的一部分。
如果你的落地页主要目标是让用户注册某项服务或成为潜在客户,那么打造一个突出的表单就至关重要。
示例:Shopify在突出注册表单方面做得非常出色,它运用了对比鲜明的白色和绿色,让访客一眼就能看出如何注册。

shopify很懂漂亮的设计
紧迫性提示
过去几年,我注意到落地页和销售页上关于紧迫性提示的负面反馈相当多。
许多人需要时间来做决定,不喜欢被催促。
这里的技巧在于,只有当某件事真正具有紧迫性或稀缺性,并且人们确实需要知晓时,才使用紧迫性提示。这可能适用于活动报名、名额有限或限时促销等情况。
示例:亚马逊在突出限时送达信息方面做得很好,既有效又不令潜在客户感到突兀或厌烦。由于送货时间确实是有限制的,这种方式显得真实自然,没有压迫感。

看到那个“Order within...”的小提示了吗?
用户评价
用户评价是为落地页上的产品建立可信度的绝佳方式,尽管其重要性通常仅次于主要的行动号召。你可以把它们想象成满意的支持者正在帮你提升转化率。
这里的经验是确保你的评价真实可信。
这意味着评价应包含头像、全名(如有可能),甚至可以以视频形式呈现。如果你试图造假,肯定会有人查察觉,那样的话可能还不如完全不展示评价。
示例:Muckrack 通过添加评价者所在公司的Logo,将重点突出更进一步。这让用户立刻明白这些评价是真实的,来自于真实的人。

要让你的评价能够消除用户的疑虑——图片来源
设计原则二:引导线
你是否曾留意过线条在我们周围无处不在?
快速环顾一下你所在的房间。
你的桌面或桌子构成水平线,房间的墙角形成垂直线,窗户则带有斜线。
根据你的视角,几乎所有东西都至少包含一条线。
在现实生活中,我们依赖线条来定位和指引方向。在落地页上,它们的作用完全一样。
线条的类型
- 垂直线:垂直线能传递稳定感和向上的动势。它们会自然的引导视线在页面上上下移动。
- 水平线:水平线带来一种稳固和安定的感觉,能营造平静与休憩的氛围。它们在网站和落地页上使用非常普遍,但在具体应用场景中并非一直是最佳选择。下文会详细说明。
- 斜线与角度线:这类线条能传递动态和运动感。当你想要打破常规,或想表现紧迫性、戏剧性或能量感的概念时,这类线条非常有效。
- 曲线:曲线比直线更随性、不拘谨。当你的页面需要营造有趣且更具活力的感觉时,最适合使用曲线。
- 细线:细线给人轻柔、优雅、不突兀的感觉。你在网页设计中看到的大多数线条都是细线。
- 粗线:粗线最适合用于做出醒目的声明。它们暗示着力量与强度,但过度使用很容易显得过于抢眼,喧宾夺主。
- 箭头:箭头就像具有指向性的线条。它们能有效吸引注意力,但需谨慎使用,以免分散访客对页面其他内容的关注,造成干扰。箭头形态大小各异,可以附加在各种类型的线条上。

线条类型示意图
如何在你的落地页上运用线条?
线条的一大优点是能极其有效的将访客的注意力引导到你希望他们关注的地方。
一个高转化率且高效能的落地页其核心就在于引导注意力和浏览动线,让访客轻松找到所需信息。
以下是如何在落地页上运用不同类型线条的示例。
垂直线
落地页和销售页本质上往往是垂直结构的,因为所有信息都需要集中在一个页面上,而你通常不希望将用户引导到其他地方。
在这种情况下,垂直线能创造一种自然的向下浏览动线。
这可以通过让整个页面处于一个带垂直侧边的“盒子”中来实现,或者确保页面上的元素以垂直堆叠的方式排列,从而形成天然的视线引导线。
你是否一直在努力把所有内容都放在“首屏”之内?有了良好的垂直线条和动线引导,这就不再是必需的了。
示例:OZO Watch的产品页面创造性的运用了垂直线,鼓励访客向下滚动查看更多页面内容。这是一种富有创意的“邀请查看更多”的方式。

注意其明显的线条运用
水平线
水平线在网站和落地页上极为常见,因为它们能很好的划分不同区块。
但也会给人带来一种无休止感和“到此为止”的感觉。
你需要避免的是,不要让访客误以为你的落地页“已经结束”,从而在你希望他们查看更多内容时停止滚动。
解决这个问题并保持落地页各区块间区分的一个实用方法是使用交替的背景色来代替边框。
示例:以下是我们为客户设计的一个销售页面的片段就运用了这项技巧。
从一个区块过渡到另一个区块非常微妙,既能提供区分感,又不会产生终结感。

你的视线会不自觉的想继续阅读下一部分
斜线与角度线
在落地页设计中融入能量感、动感和趣味性,可以成为一个绝佳的策略,尤其适合需要强化速度感或紧迫感的页面。
示例:Science of Play 网站通过微妙的动画和斜线,完美诠释了“玩趣”的概念。

有趣落地页示例图
曲线
在基于网格和盒式布局的数字设计领域,曲线比较罕见。
使用曲线可以很好的吸引人们对有趣、异想天开的产品和服务的注意。
示例:在这里,我们使用曲线箭头引导访客向下浏览每个区块,既补充了品牌趣味感,又向下引导了浏览动线,并将注意力吸引到文案的标题上。

简洁而美观
细线
当你需要在落地页布局中界定和区分不同区域,又不想分散对行动号召的注意力时,细线是很好的选择。
你在网络上看到的大多数线条都是 1 px宽度。
除了用这类线条进行视觉分隔,也常用于创建方框。
在扁平化设计趋势中被大量用作行动号召的透明按钮和表单。
示例:Weather Jams应用程序网站在使用透明按钮方面做得很好。页面其余部分的简洁性将所有注意力都吸引到了下载按钮上。

渐变落地页示例图
粗线
粗线能非常有效的帮助行动号召脱颖而出,尤其是当它们与细线形成对比时。
示例:在这些例子中,粗线单独看起来可能并不出彩。
但是与页面上其他地方的细线形成对比后,选择特定兴趣点的行动就变得更加清晰了。

使用粗线来突出事物
箭头
在落地页上如果使用得当,箭头极其有效。一个很好的经验是只在主要行动号召或上文概述的其他需要特别强调的元素上谨慎的使用箭头。
示例:这是我们在Ambitionally首页上看到用箭头的一个实例。

也叫作方向性指引
设计原则三:节奏感
节奏感有助于在你的落地页上建立流畅的浏览动线,让访客建立信心,并更轻松的找到他们所需的信息。
没有良好的节奏,一切都会变成混乱嘈杂的一团。
在高效的设计和以转化为导向的落地页中,运用节奏感的方式包括:
- 风格一致性
- 元素重复
- 良好过渡
风格一致性
这正是提前准备好优秀的品牌标识和风格指南能派上用场的地方。
我们经常看到客户在落地页上难以保持风格一致性和流畅度,仅仅是因为他们参考外部案例,试图模仿其他品牌的风格。
要解决这个问题并不难,只需有意识的保持色彩使用一致,坚持使用统一的图案和装饰元素,并沿用你主品牌所使用的字体及其他装饰元素。
示例:Formstack 首页在保持风格一致性和流畅度方面做得非常出色,它始终围绕着品牌主色调绿色和蓝色,并使用橙色来突出按钮和图标。

这种风格不仅体现在首页,还贯穿其所有营销材料
元素重复
重复使用同类型的元素对于建立访客对网站的信任感大有帮助。
这可能意味着用相同样式重复标题、用相同背景色重复信息框,或者在长篇幅的销售页中在合理的位置重复使用按钮。
示例:在这个例子中使用了一种独特的按钮样式进行强调,并在页面上下文和动线合理的位置向下重复使用了这些按钮。

谁说闪亮的效果只能用于装饰?
良好过渡
良好的过渡其核心在于为访客创造自然的动线,引导他们从落地页的一个区域顺畅的移动到下一个区域。
如果你曾学习过写作或文案技巧,你可能已经知道在每段结尾使用过渡性语句来引入并引导读者进入下一段落是多么重要。
同样的概念也适用于设计。
示例:Purple Rock Scissors 在他们的案例研究页面上出色的运用了过渡技巧。
通过一种视觉叙事的方式,鼓励访客向下滚动页面,同时左侧的交互式导航目录也提供了引导。

如果你能做到动态过渡是值得鼓励的
实用检查清单
综上所述,如果你并非设计师,那么在搭建和设计落地页时要牢记所有这些转化优化技巧可能颇具挑战性。
这里有一份便捷的检查清单,供你在下一个落地页项目中使用。
1. 你在落地页上重点突出了哪些元素?
- 主标题
- 按钮
- 价格表
- 表单
- 紧迫性提示
- 用户评价
- 其他需要访客看到的重要信息
2. 你正在落地页上使用哪些类型的线条来提升转化率?
- 垂直线
- 水平线
- 斜线
- 细线
- 粗线
- 曲线
- 箭头
3. 你如何提升落地页的节奏感和流畅度?
- 风格一致性
- 元素重复
- 良好过渡
学到新东西了吗?请与你的同行分享吧!