优化词汇表

英雄形象

什么是英雄形象?

英雄形象是一个网站设计术语,用于描述网站顶部的超大横幅图像。有时称为“英雄标题”,它是用户的首次瞥见贵公司和产品,因为它朝向通常延伸全宽的网页顶部的突出位置。

英雄形象例子

来源: Balsamiq.

除了高分辨率图形之外,英雄图像还可以包含您的公司 独特的卖点(USP) 和转换目标,如注册表格或按钮开始购物。最近的网络设计趋势一直是为英雄形象而不是静态照片使用视频和动画。

为什么使用英雄形象?

英雄形象,通常是高质量的照片或视频,可以是添加个人触摸的好方法,立即为您的品牌构建信誉和信任。由于人们高度视觉,具有高质量,页面顶部的全屏图像可以帮助创造积极的第一印象。

英雄图像也可以用于指导用户朝向所需的链接或 呼吁采取行动,或呈现您的业务 价值主张 在网页的顶部。媒体网站和博客上的英雄图像也可用于捕获访客的注意力,并将它们绘制入页面上的文章。

使用英雄图像时要注意的2件事

考虑您是否要在网站上使用英雄图像,有几件事要注意。

  • 谨慎对您的英雄图像使用大型图像,因为它们可能会影响加载时间,尤其是在移动设备上。 基于在谷歌完成的研究,已经表明,将页面负载速度从0.4升至0.9秒,可以将流量降低20%。如果用户加载太长时间,英雄图像的有效性将丢失。确保优化大量横幅图像和视频大小,并且它们在快速CDN上托管,以便它们不会减慢页面的负载时间。
  • 问自己是否选择的图像实际添加值。 虽然使用股票图像作为您的特色图像最初是一个便宜且快速的解决方案,但很多时候库存照片是陈词滥调和无原创。完美的英雄形象是为了补充你的产品图像和核心产品 - 这很难得到股票图像。

英雄图像示例

以下是来自各种公司和行业的英雄图像设计的一些例子。

正如您所看到的,公司雇用了许多不同的方式来指导客户转换目标:插入表单或突出的呼叫对动作和按钮。值得注意的是指出,有时导航栏层位于英雄图像的顶部。

桌子英雄形象例子

桌面(B2B公司)在主页上具有英雄映像,包括独特的销售点和表格捕获顶部覆盖的客户信息。桌面的图像强化了产品名称,并干净且令人愉悦。

光申请英雄图像示例

媒体(电子商务,打印 按需T恤 公司)清楚地概述了公司在其英雄形象中的价值主张,并具有两个CTA指导用户迈向主要功能。

TaskRabbit Hero Image示例

Taskrabbit(为差事提供按需帮助的公司),具有与新生儿的母亲的英雄形象,可视地传达服务的价值。英雄图像也覆盖了公司的标记和CTA,以搜索网站以获取您所在地区的帮助。

Trunk Club Hero Image示例

Trunk Club清楚地传达他们在英雄形象中的价值主张,并包括CTA。图像本身也传达了中继俱乐部提供的服务。

发现英雄图像示例

Discovery有一个动画的英雄映像,它将用户指示在点击时的视频。所有Discovery的页面和文章也具有甜美的英雄图像,展示了公司的高质量摄影。

秘密逃脱英雄形象榜样

秘密逃脱(旅行交易公司)在其英雄形象中提供CTA正面和中心,以及它们的价值主张。他们使用的形象也唤起了他们提供的旅行目的地的感受。

如何使用A / B测试测试不同的英雄图像

由于英雄图像突出地放置在您的网站上,因此测试不同的图像是值得确定的,以确定哪些是推动转换目标,无论是阅读文章还是点击CTA在您的网站上购买。

A / B测试 是一种测试网站的方法,其中50%的流量显示了页面的原始版本,50%显示了新的变化。通过显示访问者的随机样本,您可以使用数据来确定页面的哪个版本更好。

如果挑战者页面不超过原始页面,则可以始终测试新的假设,以图像,复制和调用动作的变体。您还可以通过显示访客不同英雄图像的不同细分来个性化您的经验。

通过持续测试不同的图像,您可以改善您的 转换率 和网站随着时间的推移经验。

英雄图像测试想法

优化英雄图像的一些想法包括:

  • 测试静止图像与运动图像的影响:在发现用户是否找到视觉效果,美学上令人愉悦或信息,或者如果他们发现它们分散注意力的值得有价值。对移动图形进行测试仍然是图形的,例如.gif或html5视觉可以为您的用户的偏好提供见解。
  • 测试交互式播放视频的影响或自动播放视频:在线听到嵌入式音频播放的越来越普遍,而无需激活它。它对于使用视频消息传递来测量视频内容的重要性,通过测试用户是否单击以激活内容,或者自动播放视频是播放的方式。
  • 测试英雄的价值命题:不同的图像在您的用户中创造不同的情绪,使它们在您的网站上表现不同吗?
  • 测试英雄的对象焦点:图像的主要主题是为生成贡献结束业务转换目标的操作的用户创造了积极的感觉吗?还是关闭了?

周围有很多问题,这些问题值得调查。因为英雄的图像是用户看到的第一件事,这是测试的重要领域。