Blog · Homepage ·

官网首屏应该展示什么?

打开官网后立刻映入眼帘的第一屏,业内称为 Hero 区域。大多数访客只凭这一屏就决定继续看还是离开,但许多官网却只用一句漂亮的口号和一张大图填满这个位置。本文讨论访客在首屏离开的原因,以及这个位置必须放入的要素。

一句话总结

官网首屏(Hero 区域)必须在不滚动的情况下回答四件事:这是做什么的、为谁服务、凭什么可信、下一步做什么。比起华丽的口号,先回答访客问题的首屏才能带来咨询。

描绘浏览器首屏卡片上的标题区块、按钮与访客视线路径的3D插图
离开的原因

访客在首屏离开的信号

读完仍不知道这是做什么的

“创造新价值”这类抽象口号放在任何公司都成立。如果访客读完第一句话仍猜不出行业和服务,这个首屏就还什么都没有说明。

看不出为谁服务

访客最先确认的是“这里处理的是不是我的问题”。如果目标客户和他们的处境没有出现在屏幕上,即使是最匹配的客户也会认为与自己无关而离开。

图片代替了信息

大图或视频铺满屏幕、文字淡淡叠在上面的布局,传达的是氛围而不是判断依据。图片应该辅助信息,而不能代替说明。

没有下一步行动

即使读完说明产生了兴趣,看不到下一步该做什么,流程也会中断。没有按钮,或只有“了解更多”这类去向模糊的按钮,兴趣就无法变成行动。

应放的要素

首屏必须包含的四个要素

一句话说明这是做什么的

把能读出行业、服务和提供方式的具体一句话,放在屏幕上字号最大的位置。如果和访客在搜索框输入的词一致就更好。比起华丽的措辞,一眼就能理解的表达更优先。

为谁服务

把目标客户和他们的处境写进标题或辅助句。对所有人说话就等于没对任何人说话。对象说得越具体,对匹配的客户就越精准。

一个可信的依据

放置一个可以核实的事实依据,比如经营年数、累计案例数、资质或认证。与其堆砌没有依据的形容词,一个可核实的事实更能建立第一印象的信任。

引导下一步行动的按钮

放一个下一步明确的按钮,比如预约咨询、索取报价。按钮太多会让选择变难,所以确定一个主要行动,并把面向尚在比较阶段访客的辅助路径用较低调的样式区分开。

自查清单

首屏检查清单

  • 第一次来的人只看首屏就能说出这是做什么的
  • 首屏能读出为谁服务
  • 至少有一个可核实的信任依据
  • 不滚动就能看到通向下一步行动的按钮
  • 在手机屏幕上以上四项也不会被截断
需要记住

五项中有两项以上不符合,就该先从首屏开始梳理。但整理首屏并不能保证访问量或咨询量增加。首屏只是判断开始的地方,还需要比较阶段的资料和咨询路径衔接上,才能变成成果。

常见问题

关于这个主题经常确认的内容

首屏放大公司口号不行吗?

口号本身不是问题,但如果只靠口号无法传达这是做什么的,它就不配占据屏幕上最大的位置。安全的做法是让能起到说明作用的一句话当主角,把口号放到辅助位置。

首屏信息越多越好吗?

不是。首屏的职责是给访客判断要不要继续看的材料,而不是传递所有信息。回答完做什么、为谁服务、凭什么可信、下一步做什么这四件事,其余内容交给下面的版块更合适。

Hero 区域可以用视频或大图吗?

可以。但图片应该辅助信息,如果遮住文字或明显拖慢加载,反而得不偿失。尤其要确认在手机上标题和按钮没有被图片挤出屏幕。

首屏放几个按钮合适?

建议以一个主行动按钮为基准。确定一个和经营目标直接相关的行动,比如预约咨询;面向仍在比较阶段访客的辅助链接,用视觉上更低调的样式区分开,选择就会变容易。

相关文章

适合一起阅读的文章