登陆页面英雄镜头：18 个有见地的例子来帮助指导你 [2022]

1911年，雪城广告男子俱乐部举办宴会，讨论新闻和宣传。 该报援引其成员之一（亚瑟布里斯班）的话说： “使用图片。 值一千字。”

不是 Confusious、所罗门王、爱因斯坦或亚里士多德，而是一个广告人。 （告诉你的父母。）

快进 100 多年，亚瑟的谚语仍然是正确的——尤其是在着陆页方面。

输入：登陆页面英雄截图。

如果您的标题和副标题传达了您的价值主张，那么您的着陆页英雄镜头就会以只有图片才能做到的方式将其变为现实。 这就是为什么强大的英雄镜头是登陆页面设计的支柱。

弄错了，你的转化率会直线下降。

做对了（就像亚瑟从经验中知道的那样），然后看着你的转化率飙升。

以正确的名义，我们将通过探索不同类型的英雄形象、创建自己的英雄形象所需的步骤以及好的、坏的和虚假的例子来让亚瑟感到自豪。

我们走吧。

您的着陆页英雄照片是指用于传达您的报价价值的主要图片或视频，它是您的访问者到达时会遇到的第一张图片。

例如，请注意 Divvy 的英雄形象如何以信用卡和移动应用为特色，这两者都在其标题中添加了上下文，即：“您的业务蓬勃发展所需的信用和软件。”

英雄形象会引诱某人购买吗？

不是自己。

但与您的标题、副标题、报价和号召性用语 (CTA) 一起，您的英雄镜头可以提供推动访问者越过终点线所需的背景、情感和清晰度。

这意味着高质量的英雄射击不只是填补空间； 它以一种单凭言语无法实现的方式将您的报价带入生活，并营造出不可磨灭的第一印象。

不要将英雄射击与英雄部分混淆。

着陆页的英雄部分是指“首屏”部分，或访问者在开始向下滚动之前首先遇到的着陆页部分。

您的英雄部分包括您的英雄镜头、标题、副标题和 CTA（至少），但英雄镜头和英雄部分指的是整个着陆页的两个独立元素。

无论是动画、自定义摄影、视频还是其他风格，着陆页英雄镜头分为五个主要类别：

1. 以产品为中心
2. 隐喻
3. “理想国”
4. 以过程为中心
5. 抽象的

让我们探索每个示例。

以产品为中心的着陆页突出了实际产品。 惊喜，惊喜。

对于一个新的或复杂的产品，一个以产品为中心的英雄镜头可以通过使抽象感觉具体来帮助揭开你的报价的神秘面纱。

例如，Editor X 的英雄镜头具有他们实际的可视化编辑器界面：

比喻英雄镜头使用代表或象征报价价值的图像，而不是字面意义上的。

例如，在我们的免费营销计划登陆页面上拍摄的英雄以美元钞票和微笑大脑的形式展示了我们的品牌表情符号：

承诺的土地英雄镜头通过聚焦成功的客户或理想的未来状态来描绘使用您的产品或服务的预期结果。

例如，Keeps 订阅脱发药物展示了一位满意和微笑的顾客，大概是在使用了他们的脱发药物之后：

您通常会在无法说明产品的情况下看到服务或软件的以流程为中心的英雄镜头。 相反，您将负责服务价值或有效性的流程可视化。

例如，GatherContent 使用自定义图形来说明其软件的内容管理过程：

我们最不喜欢的英雄镜头：抽象的英雄图像（或由形状或图案等视觉元素组成的英雄图像）。

为什么它们是我们最不喜欢的？ 因为它们只是填充空间。 别的不多。

例如，Semrush 以两个抽象形状为主要视觉元素，仅此而已。 错失良机。

高质量的英雄射击不只是填补空间； 它增加了上下文，传达了相关性，唤起了情感，并丰富了用户体验。 它使用以下组合来做到这一点

• 具体性
• 关联
• 语境
• 情感
• 定制
• 结盟

让我们逐一探索。

抽象的英雄镜头有两件事做得很好：1）绝对没有，2）增加认知负荷（访问者理解你的提议所花费的时间）。

就是这样。

高质量的登陆页面英雄镜头应该在现实世界中或尽可能接近现实的情况下描绘您的产品、服务、期望的结果或价值主张。 简单的。

不要让你的访客想得太难。 为了艺术而避免艺术。 并保持您的视觉效果具体。

例如，Dollar Shave Club 使用他们的英雄形象来说明他们 5 美元的 Razor Starter Set 中包含的产品。 简单而有效。

高质量的着陆页英雄镜头应该立即引起目标受众的共鸣，同时向其他人发出“这不适合我”的信号。

您的访问者会在瞬间做出决定，主要受他们潜意识的影响。 如果你的英雄镜头没有立即明确它是给谁用的，不是给谁用的，请再试一次。

这也意味着将您的着陆页英雄镜头与将人们发送到那里的消息和创意相匹配（即消息匹配）。

例如，当您查看 Allure 的 Beauty Box 英雄镜头时，是否有任何问题表明它是针对对美特别感兴趣的人？

您的着陆页英雄镜头可以支持您的标题和副标题。 时期。

更好的是，将其视为您的价值主张的视觉表现。

这意味着你的英雄镜头需要实现你在标题中做出的承诺，而不是你在页面其他地方做出的承诺。

例如，Canva 为他们的“创造力和生产力”标题添加了上下文，其中以产品为中心的英雄镜头展示了协作、模板和随时随地的设计（移动应用程序）：

当我们说情感时，我们并不是说让某人流泪； 我们的意思是为您的品牌和产品创造积极的感觉。

很多都归结为您的图形设计的质量——高质量的网页设计可以建立信任并建立信誉。

但是你可以通过使用选择图像直接从你的英雄拍摄中唤起积极的感觉，如信任、安全、幸福和自信。

例如，Namogo 提供了各种随心所欲的“买家”，就好像在说：“这就是您的客户在您开始使用 Namogoo 后的感受。”

通过反映与其价值主张的“应许之地”相关的积极情绪，Namogoo 从其潜在客户那里引发了积极情绪。

或者，您可以直接在您的英雄镜头中添加社交证明，例如客户推荐、星级或奖励，以唤起信任和信心的感觉。

没有存货。 摄影。

让您的着陆页英雄照片为您的品牌定制。

如果您由于资源原因需要库存摄影的帮助，至少，将库存摄影制作成自定义图形，使其符合您品牌的风格和感觉。

例如，Monday.com 使用各种人的股票照片，但他们以一种感觉原始和独特的方式将它们编辑到他们的登陆页面英雄镜头中。

最后，最好的着陆页英雄图片不会分散副本的注意力； 他们以一种引起人们注意（而不是远离）他们的方式高雅地围绕头条新闻和 CTA调整自己。

例如，请注意 Apostrophe 如何让皮肤科医生关注标题和 CTA？

将她的身体和视线向右引导会产生一种微妙的视觉提示，将访问者的注意力吸引到同一方向——正对标题和 CTA。

现在将它与 VanMoof 的登陆页面英雄镜头并列。 它不会使标题和 CTA 脱颖而出； 它埋葬了他们。

现在是有趣的部分：登陆页面英雄镜头示例。

我们将此部分分为三个不同的类别：

1. 好（10个例子）
2. 坏的（4个例子）
3. 假的（4 个例子）

为什么？

因为并不是所有的英雄镜头都是超级英雄，学习不做什么和学习做什么一样重要。

为它们添加书签。 将它们添加到您的滑动文件中。 告诉你所有的朋友。

1. 帆布临
2. 斗
3. 上市
4. Adobe 创意云
5. 客户提升
6. 广场空间
7. 样条
8. 快速呼叫
9. 打字机
10. 犰狳

我们喜欢什么：以产品为中心的英雄镜头，为标题添加上下文，不会分散 CTA 的注意力，并唤起积极的情绪。

我们喜欢什么： Doo 展示了他们提醒应用程序的真实截图。 简单，具体，上下文，定制，有效。

我们喜欢什么： Public 提供一个循环视频，展示他们应用程序的屏幕截图以及真实、真实的用户。 该视频以产品为中心与应许之地相结合，巧妙地捕捉其易用性、目标市场和移动友好性。

我们喜欢什么：没有比展示它所促成的实际设计更好的方式来展示您的设计软件的强大功能。 好吧，也许是一种方式：让你的标志成为设计的主题。 太棒了，Adobe。

我们喜欢什么：我们喜欢 KlientBoost 的隐喻登陆页面英雄镜头。 主要是因为我们已经培养了一整套需要 15 分钟成名的品牌吉祥物，还因为它们以独特而有趣的方式说明了我们的价值主张。 谁不喜欢微笑登陆页面和下雨？

我们喜欢什么：Squarespace 始终优先考虑设计。 因此，他们的着陆页英雄图片看起来更像现代艺术而不是大多数现代艺术也就不足为奇了。 但就像我们之前提到的，在着陆页英雄镜头方面，为艺术而艺术并没有削减它。 除非你在现实生活中捕捉到你的产品，否则不会。 这正是 Squarespace 在这里所做的。

我们喜欢什么：从这张图片中很难看出（我建议您访问他们的网页），但是当您单击并将鼠标拖到其上时，Spline 的 3D 英雄镜头会移动。 相当整洁，考虑到他们销售协作 3D 设计工具。

我们喜欢什么： SnapCall 使用他们的英雄镜头来说明他们的目标市场可能认为有价值的常见用例（或痛点）（例如与您的客户远程交互）。 考虑到他们的副标题承诺“通过一键式视频通话提供开创性的客户体验”，这是有道理的。

我们喜欢什么：谈论以产品为中心。 Typeform 使用现实生活中的嵌入式 Typeform 表单作为他们的英雄形象。 访问者实际上可以单击“试一试”按钮并亲自体验该表格。 杰出的。

我们喜欢什么：隐喻警报。 一只犰狳把它的身体包裹在房子周围，好像它在保护它，就像它是它自己的孩子一样。 是否有可能以更好的方式传达他们的品牌承诺和价值主张？ 没有机会。

我们已经看到更糟糕的情况，但这些着陆页英雄镜头仍然没有成功。

1. 赛姆拉什
2. 视觉
3. 壁画
4. 袖珍卫士

我们不喜欢的：当隐喻失败时会发生以下情况。 Semrush 使用一个工具箱，大概是为了突出他们的“任何 SEO 挑战的工具”的价值主张。 只有工具箱里装满了尺子、放大镜和齿轮。 你卖水管工具吗？ 还是SEO工具？

我们不喜欢的：当摘要失败时会发生这种情况。 不过，我们明白了，因为这个登录页面宣传了 InVision 的新“Freehand”软件。 但是为什么只在墙上展示一个女人“徒手”呢？ 是的，没有。 错失良机。 人们希望在现实生活中看到该软件，尤其是当它是一种新型软件时。

我们不喜欢的是：它超载了。 我们甚至关注什么？ MURAL 尝试使用以产品为中心的英雄镜头，但他们挤得太多了，因此很难辨别每个功能的作用。 我现在可以看到：太多的人想要代表太多的功能，所以设计师说，“Eff it, we'll throw them all in there。”

我们不喜欢的地方：这个抽象设计最令人不安的是它看起来像是某种声波。 但 PocketGuard 是一款个人理财应用。 课程？ 确保您的英雄射击乍一看不像是不同的服务，即使是偶然的。

是的，我们不能忘记虚假。 这些英雄镜头直接浪费了最有价值的着陆页房地产。

1. 对讲机
2. 调查猴子
3. 采取行动
4. 缩放信息

我们讨厌什么：吹气球的女人？ 这就是您将如何说明您的“将更多网站访问者转化为付费客户”的价值主张？ 摇摆和错过。

我们讨厌什么：登陆页面并不总是需要英雄镜头来转换。 所以不要仅仅因为你“需要视觉上的东西”就把它们挤进去。 对空间填充物说不（咳咳，SurveyMonkey）。

我们讨厌的东西：我想这是一个漏斗。 但它看起来更像是一个灯泡。 在一个可以从强烈的视觉效果中受益的大量文字的登陆页面中，Act-On 没有抓住重点。 更不用说他们甚至没有在这个登陆页面上包含他们的标志。

我们讨厌什么：那是亚马逊无人机运送我的新延长线吗？ 哎呀。 更不用说展示位置（右上角）将您的注意力从底部的 CTA 上拉开，而不是向它靠拢。

底线？

虽然着陆页英雄镜头有各种形状和类型，但最好的镜头结合了

• 具体性
• 关联
• 语境
• 情感
• 定制
• 结盟

无论您是小型企业还是全球性组织，都应优先考虑这些元素来确定您的着陆页英雄镜头。

想知道你的英雄投篮是否命中目标？

尝试英雄射击测试。

找一个朋友或同事（最好是从未接触过你的着陆页宣传的产品的人），加载着陆页，然后给他们五到十秒的时间来查看英雄镜头。

如果他们不能用两句话准确地描述你的价值主张和伴随的英雄镜头，那么是时候开始 A/B 测试不同的变体了。

现在出去让亚瑟（和我们）感到自豪。

只是不要忘记掌握着陆页标题。 在我们的下一篇博客中阅读所有关于如何做到这一点的信息。