设计一个 SaaS 公司官网，首先会从战略层、范围层、结构层、框架层和表现层五个产品层级进行全面考虑，而作为一个产品经理，在产品设计的时候不仅仅是考虑的这几个层级。本文将从以线索量获取作为重点目标的官网设计，来你介绍官网设计那些事。

01 产品五个层级简单分析

1.1 战略层

（1）目标设定：明确官网的主要目标及量化指标，官网涉及是为了品牌宣传、还是获得线索，不同的目标将决定整个官网的设计方向。此次官网设计假定以获得线索量为核心目标，品牌宣贯次之。如月新增 AQL 达到 X 条

（2）用户分析：深入了解目标用户群体是打造成功官网的基础。包括行业、岗位、痛点等。从岗位来说，对于 SaaS 公司官网而言，其用户群体不仅包括产品的使用者，还有采购人员、负责人等。在官网内容呈现时，需要重点特定用户的核心痛点和解决方案。还有竞争分析，对竞品官网的分析

1.2 范围层

（1）功能范围：梳理并确定官网所需具备的主要功能是关键环节。一般而言，SaaS 公司官网应包括公司介绍、产品介绍、解决方案、客户案例、在线客服等功能模块。在功能梳理过程中，可以参考众多优秀的 SaaS 官网案例，但不能简单复制。需结合自身产品特点和目标用户需求，进行个性化的功能设计

1.3 结构层 + 框架层 + 表现层

（1）结构层：后续信息架构，构建合理的架构能确保用户能够快速找到所需信息的重要保障。重点关注导航菜单、页面结构和内容分类的设计。例如，将导航菜单分为首页、产品、解决方案、客户案例、资源中心、关于我们等主要板块，每个板块下再进行细分。

（2）框架层：界面设计应注重简洁、美观，同时保证功能的易用性。合理布局页面元素，避免信息过载，提高用户的阅读和操作效率

（3）表现层：包括视觉设计和文案设计。视觉设计包括色彩、字体、图标、图片等方面，应注重一致性和协调性；文案风格应与品牌形象和目标用户群体相契合，确保信息传达准确、清晰。

以上是作为一个官网设计之初的思考，思考清楚了目标、用户群体才能更好的产出方案。

02 官网页面配置能力搭建

先来看为什么要有官网的配置化：

从首页、解决方案、产品介绍页面来看，随着公司的发展，会有产品的上下架，也会有核心卖点的变更，这些都会涉及到页面的调整

从案例、企业新闻来看，更新频率也会比较高，会需要有专属的运营管理页面可以供运营进行使用

除官网本身外，也会有需要参加一些线下展会，或线上活动来作为线索获取，而这部分也会需要页面配置

所以作为一家发展型的 SaaS 公司，在官网产品设计上考虑页面的配置化。而页面配置化，会有以下几种实现方式

外采，类似官网的页面搭建的由非常多的公司有成熟的产品，所以外采是一个常用的方式之一，特别是中小型公司，或以品牌宣传作为核心目标的官网设计的公司

自建，具体的实现也会有很多种形式，包括纯自建或以开源的代码上进行自建。自建需要评估项目 ROI，包括首次搭建和持续维护的产研成本

外采即是选择不同的供应商，对比功能与价格最终选择。而本文以自建的其中一种方案进行说明—积木式配置平台：以简单组件 + 自定义业务组件作为积木的原子来搭建不同的页面。再通过官网导航配置来实现整个官网的配置化

2.1 积木式配置平台

2.1.1 组件类型

基础组件：如一级标题、二级标题、文本、图片、视频、富文本等作为基础组件

业务组件：基于官网页面需要提前预设的组件，是由基础组件 + 预设交互来实现的，比如官网常见的业务组件，如不同类型产品介绍页；不同交互的轮播图等

留资组件：依据公司实际需求预设留资组件，留资组件的类型参考文章

2.1.2 页面配置

包括以下几个模块内容：

基本信息：URL、菜单导航、创建人、创建时间等

页面配置：基本的页面配置简化如图

2.1.3 留资组件设计

详细的介绍可见文档：https://www.woshipm.com/pd/6130841.html。常见组件包括：

表单：最常见的留资方式，用户通过留手机号、公司名称、行业类型等信息。可以通过表单字段的数量、必填或选填，来实现用户的初筛。

试用注册：通过注册申请试用账号，注册用户作为一条留资进入售前环节进行跟进，也是一种留资方式。

在线客服：也是很常见的沟通方式，用户有即时的问题需要解答或快速了解时，在线聊天可以实现及时的互动，实时互动强

电话：针对产品比较复杂的公司，或者比较传统的行业，或客户购买意愿度比较高的场景下，用户更倾向于通过电话进行深入沟通

二维码：微信和企信二维码，通过用户扫码加微便于后续建立持续的联系，可以通过批量运营或群运营方式促进交易。

03 SEO 基础能力

为更好的获得免费的流量和线索，在官网的设立之初还会考虑一部分 SEO 相关的基础能力建设（本文仅基础部分，高阶单开文章说明）。SEO 设立之初会考虑以下几个方面内容：

清晰直接的导航结构：创建简介、有意义的 URL，尽可能是静态的。假设以 www.tiantian.com 来说。解决方案页即 https://www.tiantian.com/solution/***；产品页即：https://www.tiantian.com/product/***

TDK 设置：标题（Title）、描述（Description）和关键词（Keywords），合理设置 TDK 对于提高网页在搜索引擎中的排名和吸引用户点击至关重要。这部分产品更多提供配置能力，这个可以在【积木配置平台】的基本信息处增加字段配置化，TDK 本身可以由专业 SEO 运营负责

内容呈现方式：多以文字 H1、H2、Span 标签区分明确；即使是图片或视频，也需要添加描述性的文件名和 alt 属性，包含关键词，以便搜索引擎能够理解图片的内容

在具体实现上，还包括页面渲染、自动源码更新、sitemap 自动更新、网站响应速度、内链与外链等相关能力建设。这个部分需要提前与 SEO 运营沟通和了解，在设计之初做好系统基建工作。

04 官网数据指标体系

在提到产品五个层级的时候，有提到在战略层需要考虑目标。如以线索量作为目标而言，其转化的路径为：UV →点击留资按钮→ AQL → SQL

为什么要建立官网的数据指标体系：

流量转化效果分析：通过对流量关键转化行为转化漏斗的跟踪，深入了解不同渠道流量的转化效果。有助于精准把握用户在各个环节的行为，为优化营销策略提供有力依据

成本控制与资源优化：缩减低产出的流量投放，避免营销费用的浪费。通过对流量渠道的评估，找出低效益的投放区域，将资源集中在更有潜力的渠道上，实现营销成本的有效控制和资源的合理配置

高价值流量挖掘：积极挖掘高杠杆的流量，增加高产出渠道的投入。通过数据分析和市场洞察，发现那些具有较高转化率和潜在价值的流量来源，加大对这些渠道的拓展力度，提升整体营销效果

广告投资回报率提升：准确跟踪转化，依据数据做投放决策优化，提升广告的投资回报率（ROI）。在公司有限的预算内，通过精准的数据分析和决策，提高广告投放的效益，实现营收业绩的提升。

4.1 指标体系梳理

按照以下公式逐步进行拆解：

SQL=AQL * A → S 转化率

SQL=（UV* 留资率） * A → S 转化率

UV 分别来源于哪些渠道、哪些设备、哪些页面，一级一级进行拆解，具体如下：

4.2 数据获取

4.2.1 渠道数据获取

（1）设置关键词追踪 URL：百度、360 等 SEM 渠道，在如百度推广助手在 URL 后增加追踪参数，常规配置的参数：utm_source（广告投放的来源）、utm_medium（广告投放的媒介类型）、utm_term（关键词信息）、utm_content（同一广告来源、媒介和活动下的不同内容或创意版本）、utm_campaign（标识特定的广告活动名称）。可参考 Goolge Analytics 的渠道处理逻辑https://support.google.com/analytics/answer/6205762

重要网址记录：用户发生转化行为，官网在技术实现上需要记录以下网址数据：来源页网址、着陆页网址、前页网址、当前页网址。

（2）其他的渠道有不同的识别方式

比如微信小程序，【微信应用平台】-【小程序 AppID】用以作为来源的识别

比如内部网站跳转，可以在 URL 上新增【位置参数（如 utm_position）】作为来源的位置识别

4.2.3 按钮埋点

针对网站内按钮的埋点信息，一般公司有提供埋点管理的能力，需要前端对操作按钮进行手动埋点

以表单的留资组件为例：

记录节点：点击（唤起表单）即记录

记录信息：一级导航、页面 url、留资类型、位置、按钮文案、操作开始时间、操作结束时间、操作人、landingpageurl、currentpageurl 等

4.2.3 线索管理

AQL 提交之后，属于 CRM- 线索管理功能。一般在记录的时候除了线索的基本信息会记录，线索来源、landingpageurl、currentpageurl 等信息也会进行记录。

05 增长的 A/B 测试

以线索量作为官网建设目标之一，A/B 测试就非常重要了，大家可能遇到过以下几种情况：

运营框框提需求，说是能促进增长，但是没法评估哪些运营动作是有效的，除了运营动作本身会存在季节、市场环境，或人为干预的环节

产品优化了很多官网功能，到半年度汇报时，无法说明哪些产品功能优化是有效的。以此对未来应该进行哪些功能优化没有依据支持

验证因果关系，确保方向正确；量化策略效果，实现数据驱动，精细成本收益，是 A/B 测试最核心的价值。

（1）A/B 测试简单示例

（2）A/B 测试的内容

可供测试的内容一般包括：

用户体验（颜色、字体和交互等）

算法优化（搜索、广告、个性化、推荐等）

产品性能（响应速度、吞吐量、稳定性、延迟）

内容（商品、资讯、服务）

留资组件（留资类型、组件配置内容）等

（3）A/B 测试具体实现的方式

一种是对接到如 goole 分析的 A/B 测试；另外一种是自建的 A/B 测试系统，这部分单独出文说明。

在试验设置上，有以下几个主要事项：

对照组和实验组的比例：针对较大改版可按 20%、50%、80%、100% 逐步推进；针对小的优化可按 50%、100% 快速推进

试验周期：SaaS 官网的试验周期一般要以一周或两周的节奏推进，是由公司具体的业务情况，从 SaaS 公司来看，所有的留资组件需要在 3 个工作日会完成回复和转化，那测试周期就至少大于 3 个工作日

对比数据获取：如果获取不到 AB 的对比数据，按试验就是没有意义的，所以在试验之初，每一个环节的埋点要求、数据获取要求都需要整理清楚

（4）查看试验结果

对应到线索全链路数据分析，需要能够快速获取不同版本的 UV →点击留资按钮→ AQL → SQL 的各环节的数据。通过对比数据的升降，来决定接下来的推进。推进的方案包括扩大试验组的测试比例；全部恢复成对照组 A；修改试用组 B 的交互；新上线实验组 C 版本等

本文由 @亚亚的半亩产品田 原创发布于人人都是产品经理。未经作者许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务