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

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

01 产品五个层级简单分析 1.1 战略层

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

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

1.2 范围层

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

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

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

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

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

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

02 官网页面配置能力搭建

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

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

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

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

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

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

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

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

展开全文

2.1 积木式配置平台

2.1.1 组件类型

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

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

留资组件：依据公司实际需求预设留资组件亚星游戏官网2，留资组件的类型参考文章

2.1.2 页面配置

包括以下几个模块内容：

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

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

2.1.3 留资组件设计

详细的介绍可见文档：。常见组件包括：

03 SEO基础能力

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

亚星游戏官网2。SEO设立之初会考虑以下几个方面内容：

清晰直接的导航结构：创建简介、有意义的URL，尽可能是静态的

亚星游戏官网2。假设以来说。解决方案页即/***

TDK设置：标题（Title）、描述（Deion）和关键词（Keywords），合理设置 TDK 对于提高网页在搜索引擎中的排名和吸引用户点击至关重要

亚星游戏官网2。这部分产品更多提供配置能力，这个可以在【积木配置平台】的基本信息处增加字段配置化，TDK本身可以由专业SEO运营负责

内容呈现方式：多以文字H1、H2、Span标签区分明确；即使是图片或视频

亚星游戏官网2，也需要添加描述性的文件名和 alt 属性，包含关键词，以便搜索引擎能够理解图片的内容

在具体实现上，还包括页面渲染、自动源码更新、sitemap自动更新、网站响应速度、内链与外链等相关能力建设

亚星游戏官网2。这个部分需要提前与SEO运营沟通和了解，在设计之初做好系统基建工作。

04 官网数据指标体系

在提到产品五个层级的时候，有提到在战略层需要考虑目标

亚星游戏官网2。如以线索量作为目标而言，其转化的路径为：UV→点击留资按钮→AQL→SQL

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

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

SQL=AQL * A→S转化率

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

UV分别来源于哪些渠道、哪些设备、哪些页面

亚星游戏官网2，一级一级进行拆解，具体如下：

4.2 数据获取

4.2.1 渠道数据获取

（1）设置关键词追踪 URL：百度、360等SEM渠道，在如百度推广助手在URL后增加追踪参数，常规配置的参数：utm_source（广告投放的来源）、utm_medium（广告投放的媒介类型）、utm_term（关键词信息）、utm_content（同一广告来源、媒介和活动下的不同内容或创意版本）、utm_campaign（标识特定的广告活动名称）

亚星游戏官网2。可参考Goolge Analytics的渠道处理逻辑

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

亚星游戏官网2。

（2）其

亚星游戏官网2他的渠道有不同的识别方式

比如微信小程序

亚星游戏官网2，【微信应用平台】-【小程序 AppID】用以作为来源的识别

比如内部网站跳转

亚星游戏官网2，可以在URL上新增【位置参数（如utm_position）】作为来源的位置识别

4.2.3 按钮埋点

针对网站内按钮的埋点信息

亚星游戏官网2，一般公司有提供埋点管理的能力，需要前端对操作按钮进行手动埋点

以表单的留资组件为例：

4.2.3 线索管理

AQL提交之后，属于CRM-线索管理功能

亚星游戏官网2。一般在记录的时候除了线索的基本信息会记录，线索来源、landingpageurl、currentpageurl等信息也会进行记录。

05 增长的A/B测试

以线索量作为官网建设目标之一

亚星游戏官网2，A/B测试就非常重要了，大家可能遇到过以下几种情况：

运营框框提需求

亚星游戏官网2，说是能促进增长，但是没法评估哪些运营动作是有效的，除了运营动作本身会存在季节、市场环境，或人为干预的环节

产品优化了很多官网功能，到半年度汇报时，无法说明哪些产品功能优化是有效的

亚星游戏官网2。以此对未来应该进行哪些功能优化没有依据支持

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

亚星游戏官网2。

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

（2）A/B测试的内容

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

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

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

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

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

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

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

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

亚星游戏官网2。

在试验设置上

亚星游戏官网2，有以下几个主要事项：

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

试验周期：SaaS官网的试验周期一般要以一周或两周的节奏推进

亚星游戏官网2，是由公司具体的业务情况，从SaaS公司来看，所有的留资组件需要在3个工作日会完成回复和转化，那测试周期就至少大于3个工作日

对比数据获取：如果获取不到AB的对比数据

亚星游戏官网2，按试验就是没有意义的，所以在试验之初，每一个环节的埋点要求、数据获取要求都需要整理清楚

（4）查看试验结果

对应到线索全链路数据分析，需要能够快速获取不同版本的UV→点击留资按钮→AQL→SQL的各环节的数据

亚星游戏官网2。通过对比数据的升降，来决定接下来的推进。推进的方案包括扩大试验组的测试比例；全部恢复成对照组A；修改试用组B的交互；新上线实验组C版本等

本文由 @亚亚的半亩产品田 原创发布于人人都是产品经理

亚星游戏官网2。未经作者许可，禁止转载

题图来自 Unsplash

亚星游戏官网2，基于CC0协议

该文观点仅代表作者本人

亚星游戏官网2，人人都是产品经理平台仅提供信息存储空间服务