上篇文章我们整体介绍了SaaS网站的页面类型主要有哪些,下面我们将挨个进行具体介绍。这次我们就先来介绍首页(Home Page)。
首页的重要性
SaaS网站的首页(Home Page)是整个网站中最关键的页面之一,它的重要性体现在多个方面:品牌形象、用户体验、引导转化、SEO和流量入口等。看过上篇文章的朋友,应该还是有印象的,首页的要素构成是最多的。
- 简洁的标题
- 产品特色展示/演示
- 双重CTA设置
- 精选博客文章
- 客户评价
可以说,首页是其他分类页面的一个简要汇总,更像是一个精选集合。就拿上面列出的各个组成要素来说,产品特色展示如果有更详细的版本,那就是产品页了;客户成功案例如果想要更详细地展示出来,那就可以形成客户案例页;展示的博客内容,其实也是属于blog文章页的。
而这样做也能在最短时间内,向访客展示关于这个品牌的所有信息:这个品牌是什么?它是提供什么服务的?产品有哪些?各自的功能是什么?合作过的客户有哪些?客户的评价是怎样的?
由这些组成部分进而可以总结出首页需要做到的三件事:
- 立刻吸引访客的注意力
- 让用户建立对产品的信任
- 自然地引导用户进入下一步
主要的各要素要如何设置才能把作用发挥到最大
我们之前就说过,主要最大的整体特点就是要简洁,那具体到每个部分需要具备什么特点呢?我们下面一一来看,有案例更好理解哦~
1.吸引人的Slogan明确产品的价值主张
Slogan的显眼性应该仅次于品牌名和品牌logo了,所以除了保持简洁的特性,它一定要让人容易记忆,最好是让人看一眼就能记住。而且最好是包含你核心服务的相关关键词,让人只要看到Slogan就能知道你是提供什么服务的(比如下图的monday.com)。
“告诉别人这个产品是做什么的”其实就是所谓的价值主张,一般来说都会让Slogan来承担这个任务,但是如果准确来说,其实主要有以下三部分组成:
- 一个主标题:强调独特价值(Slogan)
- 一个副标题:补充说明产品用途和目标用户
- CTA按钮:引导操作(如免费试用/预订演示)
比如下图Figma的首页,就是一个很典型的用这三个元素呈现产品价值主张的例子:用主标题凸显产品效率(毕竟现在最关注的就是产品效果如何),再用副标题一句话解释产品功能,最后还有CTA按钮邀请用户去免费试用。
但只有这些是不够的,视觉设计也要跟上。考虑到页面加载速度,是不太推荐动画的,建议就搭配产品图或者纯色/撞色背景就好了,或者是能体现产品性质的背景图。
*klaviyo右侧放置的是可以轮播循环滚动的图片
*Spline选择的是标题+CTA+能体现他们是3D设计的背景图
*Supahub选择的是纯文字风格
不管是用哪种风格,最主要的目的就是让用户在访问你网站的时候一下子记住你。让用户在看完首屏后就能知道这是个什么产品,如果能让他产生“我什么情况下可以用到这个产品”的想法,那就更好了。
2.产品演示或产品特色展示
在Slogan之后,就是产品特色展示的部分了。这部分可选择的呈现形式有很多,简单的比如像veed.io,就是左文右图式的陈列适用场景;也有更复杂一些的,用GIF或短视频展示;或者是有互动性的引导式点击操作型,都是为了能让用户在短时间内了解产品特性、对产品感兴趣,吸引用户继续浏览首页。
*互动性引导产品演示
*简单的左文右图
这里需要注意的是,因为是在首页展示,所以不用把产品的所有功能都介绍,挑3-5个核心功能介绍即可。还要注意我们要对用户传达出的信号:易于使用(也就是所谓的易用性)。所有的用户当然都会希望自己用这个产品的时候步骤越简单越好。
还有要记得结合使用场景,毕竟用户对于产品是陌生的,但是对于用到产品的场景是熟悉的,通过描述让用户有身临其境感,仿佛自己在使用,这种带入非常有利于用户理解产品功能,并进一步引导其实现转化。
3.双重CTA设置,辐射不同类型用户
CTA的重要性,在首屏的构成中就可窥见一二。它可以说是贯穿首页始终。Slogan和价值主张那里可以出现它的身影;介绍完产品功能也可以引导用户去试用产品;还有一些资料模版想吸引潜在用户下载也可以设置CTA;当然页面末尾也是可以设置CTA的。下图就是matomo这个品牌在首页的不同位置设置CTA吸引不同用户的例子:
一般来说在设置上,CTA按钮都会用色块突出出来,比如matomo的CTA按钮就都用了绿色色块+白字的设计。除了色块突出按钮,也可以在想要重点突出的模块设置大色块进行区域划分。
CTA按钮中显示的文字也最好是比较明确的,直截了当地告诉用户可以获得什么,比“learn more”这种带有模糊性质的要好一些。一般CTA只要设置的合理,不让用户在点进去之后觉得文不对题有“诈骗感”,转化率都还是不错的。
4.客户logo合集
Logo合集我们还是很常见的,一般会出现在首屏之后的部分。入选的标准主要是看知名度,越知名的品牌覆盖的用户就越多,有了知名品牌背书,大家就会产生一种想法:“这么有名的品牌都跟这个产品合作了,那看来产品还是不错的”。通过其他品牌实现用户对我们自身产品的信任,这就是logo合集的作用。
这个logo集合一般也会和G2、Product Hunt这几个平台对产品的评分放在一起,尤其是对于新产品来说,如果在Product Hunt的新品首周、首月中能获得不错的排名,是对产品自身潜力的很好证明。
设计方面其实注意色调统一就可以了,要以彩色展示就全部彩色,要黑白就全都黑白,还有篇幅不要占很大,不然用户会觉得你在无意义地陈列。还可以配合一些数字,比如“合作超过1000+团队帮助他们……”,会更直观地让用户感受到你产品的实力被广泛认可,可以打消一些使用疑虑。
5.客户成功案例
如果说上面提到的logo合集是单纯按知名度陈列合作客户,让初访问网站的用户可以对产品的安全性和专业性稍稍放心。位于首页后半部分的客户成功案例就是一剂强心针,让有意愿的用户打消最后的顾虑,让潜在用户认可产品的专业性是真实的,而不是王婆卖瓜自卖自夸。
不同于专门的客户成功案例页面,首页中的客户成功案例一般采用“客户公司+职位+名字+人像+段落式评语(+评分)”的形式。这些人的讲述会让用户觉得是和他们在同一阵营中的先行者发出的评价,非常有参考价值。跟购物网站的评论是一个道理,尤其是如果提到了一些观看者非常在意的功能或者效果描述,也会让他们对自己使用这个产品的效果有所预见。
同样的,这些简短的评价展示,一般都可以让用户跳转到具体对应的客户成功案例页面,方便他们了解详情。
设计方面注意选取评价的篇幅即可,尽量保持在一个统一的范围内,不仅用户观看时的体验会变好,也能显示出品牌的一视同仁。
6.资源集合部分
下面来到首页的最后一个组成部分——资源合集。他就像是对于内容性页面进行精选展示,你可以在这里展示blog文章、与产品相关的视频、产品获奖的新闻和成就等等……或者是做成一个单纯的跳转集中区也可以。
总结
现在你已经基本了解了SaaS网站首页的相关内容,相信不管是为新入门的朋友扫盲还是老玩家们查漏补缺,都是一个不错的选择。首页是一个网站的门面,如果连首页都让人觉得毫无浏览欲望,就更别提通过首页把流量引入其他网页了。
首页的设计在整体上也是非常流畅合理的,首屏吸引用户留下印象→产品功能展示加深印象→CTA设置引发互动→客户logo、成功案例打消疑虑体现专业性→资源集合展示内容丰富度,进一步增强专业性。
所以首页是非常重要的,很多做SEO的人可能会更注重博客页面,而忽略其他页面,这是不正确的做法,整个网站只有设计都合格才能维持好网站的长期运作。哪怕是主要流量只靠几个页面撑着,它们也是由整个网站托举而成的。
希望大家都能设计出不错的首页,我们也会继续为带来其他类型SaaS页面的讲解,希望能对出海的大家有所帮助。
以上就是本期推文的全部内容了,希望对你了解SaaS网站首页的相关内容有所帮助。如果你还有其他想了解的内容,欢迎在评论区留言。
“以上内容由霆万科技/霆万出海学院原创/转载,请勿私自转载,以免侵权!如需转载,请扫码添加客服,获得授权并注明来源。”