SaaS企业官网设计要点

产品定位

官网是客户对你产品的第一印象，很多潜在客户在购买之前都是先通过官网来了解产品的。官网作用主要是线上收集用户线索，将尽量多的访客（潜在客户）转化为注册用户，方便线下转化

按照用户浏览网站的顺序，有以下4大设计要点：

一、首屏大图吸引视线

首屏大图占据了官网最宝贵的第一屏，它决定了访客对官网的第一印象。首屏大图辅助产品Slogan来有效传达产品价值，同时还会影响到官网整体的气质。

1.实景照片营造场景氛围

用客户使用产品的场景照来说明产品给他们工作带来的益处，增加说服力。

使用真实客户的肖像作为首屏大图，兼具客户案例的作用，使产品更有说服力。

2.隐喻表达产品价值

经过设计处理之后的概念图，比真实照片的表现空间更大，可以通过一些隐喻的手法来传达产品价值。

Zendesk用形象的概念图来辅助传达产品的价值主张——We can lend a hand（我们可以伸出援手）。

一些企业重塑品牌向更年轻更有活力的方向发展。插画的形式有利于塑造轻松时尚的品牌气质

Intercom用生动的手绘风插画描绘了一副工作中遭遇的混乱场景，引出了使用Intercom可以结束这一切混乱的概念：

Atlassian用配色明快的图形插画描绘了齐心协力的工作场景，烘托出“Team up”的产品价值主张：

3.产品界面图简单直观

简单直观的运用产品界面图作为首屏大图，让用户对产品使用过程有一种直观的体验，也是一种对于自己产品的设计很有自信的表现。

云存储应用Box用产品界面和照片混搭的形式来表现“Work as One（齐心协力）”的产品理念：

4.视频是流行趋势

用视频代替静态图出现在首屏成为近年来流行的一大趋势，比起静态图，动态视频更容易吸引目光。视频的内容可以是产品功能解说/客户案例讲述/企业文化传播等，视频的触发方式有自动播放/预加载/点击播放等。

Tips：

• 首屏大图是官网的重中之重，既是营销的核心，同时也是页面布局和表现的核心。

• 不同子产品页可以用不同的首屏大图，但是要注意尺寸和风格保持一致。

  
  

二、明确传达产品价值

当用户被首屏大图吸引住目光之后，想要进一步留住客户，就必须立即向他们传达产品的核心价值，让他明白购买你们的产品可以获得什么好处。

USP理论,其特点是必须向受众陈述产品的卖点，同时这个卖点必须是独特的、能够带来销量的。

传达产品价值通常会有以下三个途径：首屏标题、强化阐述和最后重申。

1.首屏标题

首屏大标题是核心，简短明确的slogan是一个强有力的开场白。通常位于官网首屏最显眼的位置，用大字体突出，同时可以用小字在旁边进行辅助说明。

MailChimp的首屏标题简短有力：

2.强化阐述

用来强化和丰富USP，让它看起来更有说服力。可以从正面出发列举产品功能、强调产品优势，也可以从侧面来印证，比如成功案例、资质证书等。

3.最后重申

当访客浏览了长篇的强化阐述，浏览到页面底部时，最后再重申一下USP，首尾呼应。

MailChimp在页面底部最后重申，号召转化行动：

4.清晰直白的功能陈述

Xero是一款为小型企业提供会计服务的应用，他们用一句话清晰传达了Xero的功能价值与目标用户：

5.抓住用户痛点，唤起情感共鸣

从反面切入描述痛点，例如“工作不用那么麻烦，用xxx你可以…”，然后引出产品可以解决这些痛点，引发共鸣。

Basecamp整个官网的措辞风格都是如此：

Tips：

• 规划USP时要站在客户角度，强调你的产品能为他们带来什么好处。

• 不要怕首屏标题太短讲不清功能，旁边小字的作用就是补充说明，同时丰富排版。

  
  

三、无处不在的CTA推动转化

CTA（Call to Action，用户行为召唤）是指希望访客在浏览官网时完成的指定行为，通常有：注册、申请试用、邮件订阅、软件下载等等。CTA是促进官网完成转化的主要手段。

1.视觉样式必须醒目

CTA按钮一定是整个页面中最醒目、最聚焦视线的。很多研究证明绿色按钮的点击率最高，蓝色其次，按钮颜色取决于官网的整体配色和品牌调性

2.文案需要引发点击欲望

文案应该是动词短语，含有紧迫感的文字例如“立即/马上”，或者利益导向的文字例如“免费”，可以有效引发用户的点击欲望。常用的文案有：免费/立即试用、免费/立即注册、观看演示等

3.保持一直可见，反复强调

主要分布在官网的三个位置：顶部导航、首屏大图、页面底部。顶部导航的位置可以保证按钮一直可见，首屏大图上的按钮是视觉核心，页面底部的位置则作为终极呼唤。

4.次级CTA也不容忽视

近年来越来越多的企业产品官网会在主要CTA按钮旁边放一个次级CTA按钮，为访客提供第二选择，这样做可以让访客在不想点击主按钮的情况下退而求其次。在注册之前提供产品试用或视频演示能增进对产品的了解。

5.嵌入简易表单，降低注册门槛

当用户点击注册按钮之后如果表单项很复杂，用户很可能会放弃填写。如果一开始只要求填写邮箱，这就大大降低了注册门槛。另外一方面，即使用户在后续的注册流程中放弃了填写，那企业至少已经get到客户的邮箱信息了。

直接把需要填写的注册项全列出来，这适用于注册项在三个以内的情况：

四、客户案例增强信任感

官网要帮助用户消除他们的疑虑，建立对产品的信任感，最好的方式就是把已购买产品的客户成功案例展示出来。你的客户就是你产品天生的代言人，他们比你的产品本身更有说服力。

1.用真实的客户头像提升可信度

比起单纯的文字展示，真实的客户头像可以大大提升客户评论的可信度。对比下面两张图感受一下。

2.讲故事，更容易打动用户

比起一句话评论，用户显然更容易接受并记住一个真实场景下的故事。有的企业官网会花一整个版面的篇幅来讲这个故事，从痛点到使用过程再到最后的获益，有理有据令人信服。

Intercom在客户故事这方面下足了功夫，每个重点客户都有内容丰富的专题页，里面有客户公司简介，描述产品解决了哪些问题

使用采访短片来作为客户成功案例：

3.数据更有说服力

比起“大大提升了效率”、“获得了更多用户咨询量”，人们更喜欢看到这样的描述：这款产品帮助我们“减少了18%的操作时间”、“提升了25%的用户咨询量”。精确的数字比模糊的范围来更有说服力。

4.大公司的案例会强化信心