web design uiApril 12, 202610 min read

着陆页设计:转化率最高的页面有哪些共同点

优秀的落地页都遵循相同的结构原则。它们是什么?为什么有效?以及哪些原则可以借鉴到你自己的页面上。

By Boone
XLinkedIn
landing page design

高转化率的着陆页并非偶然的创意。它们都遵循着特定的结构模式,能够按特定顺序吸引注意力、建立信任并消除阻碍。那些掌握了这种模式的品牌不再每六个月就重新设计一次,而是开始积累成果。

本文将深入剖析着陆页的结构,列举六个值得深入研究的真实页面,并阐述区分高转化率页面和普通页面的规则。


高转化率页面的结构

每个高转化率的着陆页都按相同的顺序解决三个问题:吸引注意力、建立信任、促成行动。

大多数设计师在确认结构有效之前就只关注美观。顺序至关重要。一个漂亮的行动号召按钮,如果因为首屏内容而无人点击,那它就成了一个昂贵的按钮。

| 层级 | 功能 | 位置 |

|-------|-------------|----------------|

| 吸引注意力 | 解释页面内容和目标受众 | 首屏内容(首屏上方) |

| 建立信任 |证明声明可信 | 社会认同、功能证据、用户评价 |

| 行动 | 消除下一步操作的阻力 | CTA 位置、表单设计、微文案 |

每个部分都对应着这三个任务之一。如果一个部分不能吸引注意力、建立信任或促成行动,那就是阻力。应该删除或折叠它。

顺序也不容更改。在建立信任之前,你不能要求用户采取行动;而对于一个没有认真阅读的人,你也无法建立信任。优秀的页面之所以让人感觉自然而然,是因为它们遵循了这种顺序。

视觉层级是使顺序易于浏览的工具。如果你想深入了解层级结构如何控制阅读顺序,Brainy 关于视觉层次结构的论文将介绍其机制。


体素图展示了高转化率着陆页的三层结构:吸引注意力(通过主图)、通过社交证明建立信任、以及通过行动号召 (CTA) 促成行动。
体素图展示了高转化率着陆页的三层结构:吸引注意力(通过主图)、通过社交证明建立信任、以及通过行动号召 (CTA) 促成行动。

6 个值得研究的落地页

这些页面能带来丰厚的利润,而其背后的结构设计并非独有。每个页面都以不同的方式解决了“关注-信任-行动”的流程,并且每个页面都有值得借鉴的实用技巧。

Stripe

Stripe 的落地页首页醒目位置采用简洁明了的标题,并以面向开发者的功能网格展示产品特性,在页面下方使用 API 代码片段作为产品证明。
Stripe 的落地页首页醒目位置采用简洁明了的标题,并以面向开发者的功能网格展示产品特性,在页面下方使用 API 代码片段作为产品证明。

在 stripe.com 上查看实时信息

Stripe 的页面以一个简洁明了的标题(“互联网金融基础设施”)开篇,迅速筛选出目标受众。没有含糊其辞,没有逗号分隔的值列表,也没有“强大而灵活”之类的说法。只有一个主张,一个目标。

在页面下方,Stripe 使用了一个面向开发者的功能网格,作为产品证明而非描述。他们展示了 API 代码片段和实时图表,因为他们的目标客户是技术人员。社会认同来自机构(例如亚马逊、谷歌、Lyft 的徽标),在页面开头就放置,旨在用户阅读任何功能介绍之前就建立企业信誉。

值得借鉴的是:在首页醒目位置使用筛选标题,并在功能介绍部分采用“展示证明”而非“声称证明”的方式。

⟦品牌4⟧

⟦图片2⟧

⟦链接4⟧

⟦品牌5⟧ 将页面精简到几乎无任何元素,让产品本身成为焦点。首页醒目位置只有两行标题、一个副标题、一个行动号召按钮 (CTA) 和一个占据整个视口的产品截图。没有导航栏杂乱的内容。没有辅助 CTA。没有分散注意力的用户评价轮播图。

用户界面截图的视觉质量本身就起到了结构性的作用。⟦品牌6⟧ 的目标受众是注重设计的工程师,他们一眼就能看出质量。展示一个精准美观的界面本身就是一种社会认同。页面展现了用户对产品的信任。

值得借鉴之处:避免首页功能堆砌。Linear 证明,移除所有非必要元素是为了提高转化率,而非出于极简主义的偏好。

Notion

Notion 的落地页展示了一个灵活的主标题,标题下方紧邻着一面巨大的品牌标识墙。
Notion 的落地页展示了一个灵活的主标题,标题下方紧邻着一面巨大的品牌标识墙。

在 notion.com 上观看直播

Notion 面临着比大多数案例更棘手的问题:一款试图面面俱到的产品往往无法有效地传达任何信息。他们的解决方案是:一个灵活的首页标题,并以位于首屏下方的大型Logo墙作为视觉中心。

Logo墙发挥了关键作用。在访客阅读任何功能介绍之前,他们就已经看到了自己公司或他们所敬重的公司的Logo。如此早地展示社会认同感,能够将怀疑转化为好奇。Notion 然后,他们使用基于标签的功能导航来服务不同的受众群体,同时又不会让页面显得像宣传册。

值得借鉴之处:将Logo墙放在访客看到的第二个位置,而不是第五个。

Vercel

Vercel 的首页醒目位置嵌入了实时部署演示,并带有真实代码预览,自助式 CTA 在视觉上占据主导地位,远超企业路径。
Vercel 的首页醒目位置嵌入了实时部署演示,并带有真实代码预览,自助式 CTA 在视觉上占据主导地位,远超企业路径。

在vercel.com上观看直播

Vercel 摒弃了千篇一律的“更快部署”宣传语,直接以实时演示开场。首页整合了真实的部署数据和代码预览,这意味着演示结果直接嵌入页面之中。对于开发者而言,这比引用客户评价更具说服力。

他们的行动号召策略也值得关注。“开始部署”和“获取演示”并列,层级结构清晰明了。自助服务是主要且主导的。企业级路径在视觉上处于次要地位。两个受众群体,一个页面,清晰的层级结构。

值得借鉴之处:在首页而非产品描述中展示产品运行情况。如果能在销售页面上展示产品运行情况,那就这样做。

Arc 浏览器

Arc 浏览器首页以个性和产品设计可信度为先导,而非功能列表
Arc 浏览器首页以个性和产品设计可信度为先导,而非功能列表

在 arc.net 上观看直播

Arc 的页面以个性为核心,这既罕见又冒险。它并没有用功能列表来解释浏览器,而是传递了一种感觉。“更好的上网方式”这句话虽然有些含糊,但却很有效,因为其下方的视觉设计和产品视频立刻表明这是一款与众不同的产品。

该页面通过设计而非标志赢得了信任。Arc 的目标受众是那些已经被臃肿的浏览器折磨过的早期用户。展示一个与 Chrome 截然不同的界面就是其全部论点。

值得借鉴的是:如果你的产品有独特的视角,那就让设计来传达它,而不是用文案来解释。

Loom

Loom 的着陆页在首屏上方自动播放产品演示视频,让视频在文字说明之前先展示产品。
Loom 的着陆页在首屏上方自动播放产品演示视频,让视频在文字说明之前先展示产品。

在 loom.com 上观看直播

Loom 的首页顶部会自动播放产品演示视频。在您阅读 Loom 的介绍时,您同时也在观看 Loom 的演示视频。这消除了购买流程中最大的障碍:即“听起来有用”和“我能想象自己使用它”之间的差距。

Loom 页面上的文案几乎是次要的。视频才是真正的说服力所在。文字只是为访客提供说服团队的理性依据。这对于视频工具来说恰到好处。媒介即信息。

值得借鉴:将演示形式与产品的核心价值相匹配。Loom 销售的是异步视频。因此,页面以视频作为开头自然是理所当然的。


需要一个真正能带来转化的落地页吗?Brainy 打造的是结构清晰、而非寄希望于结果的页面。


首页顶部决定一切

如果您的首页顶部无法在 5 秒内回答“这是什么?我为什么要关注它?”这个问题,那么页面的其余部分就毫无意义。

英雄只有一个任务:让访客决定继续阅读。只有被英雄吸引而留下来的人才能看到产品特性、价格和用户评价。英雄同时扮演着门卫、广告牌和握手礼仪的角色。

一个有效的英雄包含四个要素。不是三个,也不是六个,而是四个。

| 要素 | 功能 | 常见错误 |

|---------|-------------|----------------|

| 标题 | 阐明核心价值主张 | 过于花哨,不够清晰 |

| 副标题 | 明确目标受众和改变 | 用不同的措辞重复标题 |

| 行动号召 (CTA) | 提供一个清晰的下一步 | 提供多个选项,标签模糊,例如“了解更多” |

| 视觉元素 | 展示产品或结果 | 使用库存照片或插图,但未展示实际产品 |

标题必须通过“那又怎样?”的测试。阅读你的标题。问问自己“那又怎样?”如果答案不是显而易见的,那么标题的作用就不是转化,而是文案。

如果副标题描述的是产品而非结果,那就失败了。“一款带有人工智能的项目管理工具”是产品描述。“无需早上 9 点的站会,即可按时交付项目”是结果。访客购买的是结果,而不是工具。


社会认同是架构,而非装饰

徽标、客户评价和案例研究链接是结构性的承重元素,而不是事后随意添加的点缀。

大多数页面将社会认同视为调味品。页面完成后,在底部附近添加客户评价部分,因为那里“合适”。这是本末倒置。社会认同应该出现在所有需要获得信任的地方。

| 证明类型 | 转化率最高的位置 |为什么 |

|-----------|----------------------|-----|

| Logo栏 | 紧邻主图下方 | 在销售开始前建立信誉 |

| 用户评价 | 紧邻其所验证的功能声明 | 证明具体功能,而不仅仅是泛泛的满意度 |

| 案例研究 | 靠近主要行动号召按钮 | 消除行动前的最后疑虑 |

| 星级评分/数字 | 靠近主图或行动号召按钮 | 社交媒体传播营造紧迫感 |

将用户评价放在价格部分底部毫无作用。同样的评价如果放在它所验证的具体功能旁边,就能起到结构性作用。

要构建一种视觉语言,让社交证明自然融入品牌,而非生硬地附加上去,Brainy 品牌识别论文 已经为你打下了坚实的基础。


单页,单行动

最佳着陆页都专注于单一的转化行动。

你添加的每一个额外的行动号召 (CTA) 都不会提高转化率。它只会分散注意力,导致用户犹豫不决,并稀释信息。那些始终表现优异的页面,都明确了访客想要做什么,并且毫不含糊。

这并不意味着整个页面上只有一个按钮。它指的是一个主要的转化目标。你可以多次重复这个 CTA(例如在页面顶部、页面中间或底部),并测试不同的标签。你不能把“开始免费试用”、“预约演示”、“观看视频”、“阅读案例研究”和“下载指南”堆放在同一个页面上,然后指望它们都能奏效。

唯一合理的例外是分层受众。Vercel 的“立即部署”和“获取演示”之所以有效,是因为层级结构清晰。自助服务是主要选项。企业用户是次要选项,并且在视觉上更小。如果你有两个不同的受众群体,你可以设置两条路径。其中一条必须占据主导地位。


体素概念图展示了页面上一个主要的CTA按钮,页面上没有其他竞争性操作,形象地说明了每个页面只有一个转化目标的原则。
体素概念图展示了页面上一个主要的CTA按钮,页面上没有其他竞争性操作,形象地说明了每个页面只有一个转化目标的原则。

常见问题解答

优秀的着陆页设计应该具备哪些要素?

优秀的着陆页设计应该按顺序解决“关注-信任-行动”的问题。核心内容通过清晰的价值主张来吸引用户的注意力。社会认同贯穿整个页面,在用户产生疑虑的地方而非事后添加,都能有效建立信任。行动号召 (CTA) 则能引导用户快速完成单一的行动,消除操作障碍。视觉层级结构控制阅读顺序,让访客无需费力寻找关键信息。

一个落地页应该包含多少个版块?

合适的版块数量是引导持怀疑态度的访客最终完成转化所需的最低数量。对于大多数产品而言,五到七个版块即可:首页标题、社会认同栏、核心功能、深度证明(客户评价或案例研究)、异议处理以及行动号召 (CTA)。添加过多的版块反而会增加阅读时间,却无法提升信任度,从而降低转化率。

落地页最重要的元素是什么?

首页标题。只有那些被首页标题吸引的访客才能看到其他版块。如果你的标题无法在五秒钟内传达核心价值并筛选出目标受众,那么页面的其余部分将毫无意义。


先构建结构,再考虑风格

落地页设计首先是一门结构学科,其次才是视觉学科。

转化率最高的品牌,例如Stripe、Linear、Vercel和Notion,并非因为它们的色彩搭配页面更出色,而是因为它们在结构方面做出了合理的决策。它们明确了目标受众,用证据消除疑虑,专注于单一行动,并让设计服务于这一逻辑,而不是凌驾于其之上。

人们很容易先设计页面,然后再根据策略进行调整。这样做虽然能做出漂亮的页面,但却无法带来转化。真正有效的流程恰恰相反:先确定结构,验证层级关系,然后围绕结构进行设计。

如果你的落地页转化率不高,不要急于更换字体。首先要检查结构,从根本上重建,然后再进行样式设计。

需要一个真正能带来转化的落地页吗?Brainy 打造的是结构清晰、而非寄希望于结果的页面。

Need a landing page that actually converts? Brainy builds pages with structure, not hope.

Get Started