2023年ToB官方网站搭建指南

ToB官方网站搭建指南“ToB的官网有两个方面作用：业务展现、增加外链做内容优化获客”。

不管是PC还是移动端，公司的官网可以说是“一家公司的门店”。

有人可能认为，移动互联网时代谁还使用网站？现在不都是手机体验么，那你可就理解偏差了，对于ToB的业务，尤其是SCRM、SAAS类，多数的后台还是设计在PC端。

由于PC的开发成本相对较低，并且对于SAAS或者SCRM类产品而言，迭代周期比较快；假如像TOC一样做一款APP来掌握，相对费劲又增加成本。

在用户对公司以及品牌没有任何了解的时候，官网、自媒体是向用户传达信息的重要途径之一；在某种角度上可以说，自媒体和官网内容的传播影响着用户对这家公司和产品的认知与信任度。

假如一个公司的官网结构不清楚、图面陈旧、布局杂乱、配色俗气；那么用户很简单就会怀疑这家公司的“正规性”和“实力”。

当然也有的人会认为，现在信息大爆炸，做网站又不能带来客户，做了也没有什么用。

对ToB而言，官网不仅仅是一个展现面板；由于涉及到登录后台，他对内容搜寻引擎的优化，外链的布局也起到了特别大的作用。

一、目的、定位与风格

官网的定位，展现风格与功能介绍，打算了对客户心智的影响，从ToB角度，网站的设计也不肯定是和同行相同一成不变的；但主要传递的价值、核心文化理念、情感以及底层的东西应当是全都的。

风格与设计层面，呈现的内容主要还是要有“用户思维”；我们面临的客户是谁，可以解决为什么样的问题，供应什么样的客户价值。

规律要有“业务思维”，网站本身脱离不了业务，我们要关注行业趋势、市场格局、业务模式等三个板块，最核心还是想着“如何通过网站如何获客”。

1.明确主要目的，找好定位

不同的业务模型，面临的客户群体也是不同，那么呈现的内容也是不一样；因此我们肯定要明确好定位，做出呈现什么形态的网站。

比如一家SCRM企业微信客户管理的官网，那么核心确定是想让“客户使用这个软件，告知客户软件的好处与核心卖点”，通常这类软件强调的是“增长”“用户画像、数据分析”等问题。

做好基础定位，从目标用户的角度来分析，那么就可以直接在打造的时候把“卖点提炼出来”。

对于ToB成长型的企业，重要的事情肯定是“获客”，假如能够通过每一个网页把“品牌也宣扬了”、“内容被搜寻引擎收录了”，也是一件更好的事情。

所以，网站设计的前期目的打算了“风格与展现内容”，我们都要以目标用户为中心进行规划，最终让用户信任“这家企业”，成为意向客户。

即便我们在实际业务中，会有多种获客的方式，但到最终“用户”始终绕不开“官网后台注册使用，甚至于免费体验”的环节；从本质层面，网站的UI、后台体验，也对转化起到了影响作用”。

虽然现在的客户通过各种渠道搜寻可以找到相关软件的“自媒体”，其实到最终用户更情愿去官网了解；由于客户一般访问了企业的官网，基本上都是有了肯定的需求，或者是想通过官网找到解决方案。

经过大量的调查认为，当用户进入官网后，部分用户更情愿留下联系方式，还有部分用户直接会“注册体验”，这也意味着我们在做官网的时候要考虑到“引导路径问题”。

由此分析得知，不管哪个渠道到来，最终聚焦到官网带来的线索，对于产品的使用，主动性会更强一些，转化率也会更高一些；在前期搭建时候肯定要明确核心目的，找好业务定位也显得颇为重要。

2.风格设计与整体结构

在做一个ToB网站的时候，不建议您百分百进行原创；从UI层面或者结构上，您可以参考下自己的竞争对手，甚至于头部品牌的一些做法，然后加以创新，融入自己的交互等。

设计当中主要包含了2个板块核心内容：整体风格、网站的结构。

我以SCRM、SAAS为例，在某一个垂直品类中，通过大量的竞品观看可以看到；虽然多数的展现风格不同，但是网站的结构基本上是相同的。

比如一款SCRM企业微信管理软件，顶部导航栏常规属性为：首页+产品服务+定价+案例+学院+渠道合作+关于我们+后台入口为主，而首页最为常见的也都是大屏+核心功能。

那么产品或者品牌部自己在做原型的时候，主要架构就可以进行参考，核心就在于如何依据业务的详细进展阶段来“调整形态、产品的解决方案”中展现的“内容”了。

当主要框架有了，那么下一步我们就可以“查找每一个网页的框架”。

以SCRM首页为例，多数是分为大屏banner轮播位加几个不同的豆腐块，核心是表达“关心客户解决什么问题”，加上交互动作展现业务，最终把合作客户、案例见证加上，底部栏作为固定；其实你细心观看，多数的官网都是相像的方法论。

风格层面的设计，需要遵循自己的品牌调性、价值主见，有的企业是有特地的VI设计师，一套完善的品牌设计体系。

可能对于初创甚至于进展中的“品牌”，则没有时间去规划VI资产方面。

那么这时建议以“LOGO”为主，或者公司喜爱的主题风格为主，把主要色调定好；假如有条件，也可以做一些二维视频，甚至于交互。

由于ToB面对的多数是小微，甚至于大企业，所以从行业整体上看，蓝色、红色、商务高端黑居多，这样给用户的感觉也比较大气些。

所以在进行网页的设计时，除了常规的交互，还要融入一些“情感化的元素”——简洁而言就是活泼带严厉 ，简洁不杂乱；让用户在猎取信息的同时，也能体验到“品牌带来的情感关怀”。

二、内容的设计

对于ToB类网站，除了架构、交互、视觉这些方面之外，还有一个特别重要的点就是“内容的设计”；内容直接打算了“用户是否理解该产品”，产品能够解决我什么痛点。

用户使用网站，本质就好比用户在和你对话一样，当一段对话变得驴头不对马嘴的时候，用户就会抓狂；然后可能会生气的离开，我见过许多网站都说自己“特别厉害”，但没有把详细的核心展现出来。

1.用户角度撰写内容

品牌或者产品部门在做网站的时候，不要闭门造车，肯定要有“用户思维”；要幻想着对面就是你的客户，我要和他说什么，这样有了情景感，才能打磨出来基础的内容。

我以首页为例，当用户一进门，那么我们是否需要介绍下“自己是做什么的”，从而自身的“使命、愿景、价值观”是不是要告知客户；其次我能给用户供应说什么样的“服务”，什么样的关心（功能）。

我如何展现我的优势，要站在用户角度去体会，在体会网站的角度要理解用户；由于用户特别的忙，短时间找不到自己想要的东西，可能就会离开，这样就会白白流失。

其次有些东西不必“说太多”，网站本身就是“自吹自擂”，当好话说多了，用户就会觉得有压力；所以肯定要提炼功能甚至于服务的关键词，简洁直白即可。

在记录用户想法的时候尽可能使用原话，理解用户在描述他们的需求时使用的语言；这样一来，在编写内容的时候就能知道用户通常喜爱听是什么样的词汇了，当然也可以适当的加一些“专业化语”，尤其是描述“技术类产品的时候”。

用户来到网站一般都是带着“疑问”或者为了完成某个任务而来，极少是由于“网站看起来好看而来的”；当然也不排解这种状况（部分设计师为了学习，带着视觉维度参观而已）。

用户最想要的是在“官网”搜寻到自己想要的答案，所以最好的形式是跟用户对话，或者让用户直接注册体验；所以本质内容一部分是为了解决用户的问题而生，另一部分是“介绍自身业务”。

多数的B端用户很少是为了“仔细阅读产品内容”而来的，客户在网页上采纳扫瞄信息的方式来快速的“过滤掉无关的内容”；所以首页甚至于子页面内容规划的时候，削减文字的堆砌。

网站的文字大段整段的消失，会让用户看起来很伤神而不聚焦，当一段描述写好之后，肯定要认真的“站在用户角度”阅读、删减，尽可能呈现重点，避开废话连篇的占用网页空间。

2.小标题与留白

在编写不同页面内容时候，尤其是产品介绍，能用图片展现尽可能用图片展现”；假如需要图片加文字的形式，最好将大篇幅的内容写成几个部分，并标上不同的小标题。

这样用户在阅读的时候，就会先看“主要标题”，再去了解细节，用户就不用铺张许多时间阅读自己不需要的“章节了”；章节小标题的意义是为了“概述一段文字”，因此标题需要具体斟酌，切不行随便安放一句话就当做主题。

小标题与内容要比其他的信息接近，当标题和上下的文字间距相同的时候，标题就会飘在两端文字之间，简单让用户茫然。

标题与文字应当使用“紧凑原则”来布局，这样用户就能精确     的知道标题要概述的是哪个部分的核心内容。

留白也是相当重要的一个部分，从网站原型到“内容设计”，网页分为“无心留白和有意留白”；有的人可能认为内容肯定要多，这样才能展现官网业务的饱和，其实这是一种“错误的理解方式”。

无心留白加上交互能让界面有“呼吸的空间”，段落中的留白让网页更加通透，来访的客户也不会被大量的“文字信息”压的喘不过来气。

原型中，有些内容也可以用“图标进行代替”，但是基础PRD原型上要和设计师告知。

假如使用到图文搭配，图片的大小需要认真考虑，可以依据网页设计的大小来按品牌图片的排版和布局，图片使用完可能不要占据整个屏幕；由于用户看到满屏的一个大图很可能就不会关注其他了，也可能由于一张图片遗忘往下滚动而错失其他方面的核心内容。

3.内容撰写的“差异化”

要知道，在一个行业我们有许多的竞争对手，每个竞争对手所“切”的用户群体也是不同的；但产品的主要方向定位做好后，从内容的差异化上，我们也要区分于“其他竞争对手”，避开产生直线竞争。

内容差异化主要表现在“产品”、“服务”、“形象”三个版块。

官网内容起草的同事要了解业务，要和产品、运营去对接打磨，提炼自己产品与去其他产品哪个方面更有优势；我们是不是有竞争对手没有的功能，我们的产品核心卖点是什么？这样提炼的内容就有差异化了。

服务角度的差异化主要体现在“自身和竞争对手而比”，我们哪些是竞争对手不具备的，或者更好的，甚至于自身已经为哪些企业供应了哪些服务，都可以进行展现。

在某些层面上来说，已经选择我们的种子用户，在某些方面就代表了“认可我们的服务”。

比如自身关心客户供应运营方案，伴随客户一起策划活动，这些都能成为“细节的背书”；目前主流市场，多数都只是供应“SOP”，不供应深度。

形象的详细差异主要在“UI”表现层面，假如产品和服务都和竞争对手很相像；那么就可以从形象维度拉开差距，这方面直接可以影响用户的视觉体验，具有强化的作用。

不管是标题、架构、内容、留白，这些不同的差异本质都是在为“用户传递价值信息”；信息都是猎取用户认同，增加情感、信任的一种手法，最终为用户的“决策”来服务，所以驱动这一切的还是“付费”。

三、引导注册版块设计

ToB的网站不仅仅是为了展现，核心是为了获客；那么在ToB的网页中，确定少不了网页注册，免费体验流程的设计；所以基于这样的特性，我们要针对性的做出内容和路径的优化。

注册可以单独放在一个“版块”，甚至于做一个icon。

当然一般的SAAS、SCRM会放在“产品解决方案”下面或者定价版块，甚至于穿插在任何一个可视化的角落，来引导用户，当用户注册了也就意味着自身获得了“一个销售线索”。

1.为什么要做引导注册行为

ToB产品的销售链路和TOC不同，并且对注册体验有很大的影响，ToB获客一般是内容营销、案例营销、搜寻引擎投放等策略，那也就意味着“有两次跳转的规律”。

用户第一次的接收信息本质是“一个落地页，一份PDF，一篇文章，甚至于一个广告”，我们可以称之为“内容获客载体”。

载体确定不是正式的官网，相对来说是“内容较多、有诱惑力，甚至于名气大、流量大的地方。

而自身官网网站呢，通常没什么名气，也没什么大流量，流量主要来源于“内容获客的载体引流，甚至于投放”。

从用户的使用场景来分析，注册确定不是用户的第一需求，他确定是为了一个利益点，甚至于“一个操作手册”、“一份解决方案”的猎取而填写的信息后才能得到。

所以在这样的场景下，用户在迫不得已的完成了注册，然后填写了“文件下载的申请，甚至于产品体验的申请”。

那么接下来就会面临两个方面的核心问题：

用户为什么要填写这份表单；为什么落地页设计需要用户填写试用。我们先从第一个问题在来进行设定，用户填写这份表单，通常是基于两个前提：其一是对“产品真正感爱好，盼望可以使用”，其二是对落地页上面的内容所吸引；盼望通过填写，等到官方审核后，得到想要的资料。

再来看其次个维度，为什么落地页设计需要填写产品试用，其一公司的销售KA，商务盼望猎取这些信息，通过信息联系到潜在客户，留意的是盼望用户填写试用申请是为了“猎取线索”。

在填写试用后，假如后台设定人工审核机制，那对用户来说，可能就会等的不耐烦而放弃；上述是多数ToB网站的产品路径设计，这种路径本质并没有满意用户的“所见即所得”。

所以为了用户能够体验，商务猎取销售线索，这里可以优化步骤为——用户自助申请、填写信息通过、跳到学院、下载文件（3-7天产品部分功能体验权限）、若想体验更多，添加商务的联系方式。

产品的每一步设计，都有它的意义所在，并不是为了设计而设计；我们需要了解用户背后的规律，人性显得非常的重要。

2.引导行为“背后”最优路径

我们要从“用户行为的全链路角度思索”，看到一篇笔记，方法论过来；想领取资料，用户注册、登录、填写信息、申请试用、下载文件。

那么对于ToB来说，最优的流程应当为：

路径一：内容载体落地页——点击产品——跳到描述页——推断是否登录——已经登录——产品试用页面——注册登录——跳转学院——下载资料。

路径二：内容落地页——点击产品——描述页——官网——注册——是否有账号——否注册登录——有直接登录——跳转下载文件的链接（学院）——下载。

在注册的过程中，默认直接填写表单，甚至于把“添加好友”这个环节设定在“注册之后”；并且不做强制性加好友，商务审核的机制，反而会使用户体验更加的流畅。

不过现在的多数ToB网站设计对于新用户都是账号+密码或者手机号+验证码的形式，两者从单纯的登录场景来分析，密码可能会由于与其他网站撞库而被破解，这也源于“用户密码设定的简洁简单难度”。

而验证码的登录，能够让用户有更好的体验，但是验证码可能会涉及到一些额外的维护成本，不过对于ToB产品而言，量一般不会太大。

引导注册是ToB网站设计特别重要的一步，当然这确定是基于“网站成型后更深一步；它虽然是一个登陆入口，但入口也需要大量的“被设计和融入”，这也是我为什么强调官网上要做一个学院的核心缘由。

由于内容是载体，载体上有许多关键词会被搜寻引擎抓取，而抓取后，客户通过自然搜寻外链会找到“你的官网”，从而注册你的产品，给你带来线索。

四、网站上线与获客

当网站的整体框架、UI、内容、解决方案设计以后，我们也要考虑如何使用网站来“进行获客”的一些策略。

网站和SEO是相配的，假如单纯只有网页，那本质没有太大作用；我们需要将内容与网站融合为一起，让技术团队做网站的时候，产品也要梳理好相关的“数据埋点”，尤其是内容学院路径下的埋点。

1.网站的开发与上线留意

当我们把“PRD”和UI都做的特别胜利，下一步可能就涉及到技术的开发与上线的问题；首先作为官网项目小组，其一确认的是跟进整体项目进度，其二避开的是上线之后“BUG”的问题。

技术在开发的时候，尽可能沟通“PC+移动”的适配功能，其次网站的色调和调配也需要留意整体和谐。

色调在页面里能够起到多种效果，利用剧烈的对比可以凸显页面的核心；或者是利用色调的调配，也能够让网页达到非常好的效果，通常状况下，底部栏的色调是比较重的。

这样可以压制住页面上面的色调，如果不适用这种方法论，整个网页可能会显得头重脚轻，页面底部的文字和图片会有种“飘出去”的感觉。

再者做好“网站总体的分块”，有的用的全白，就可以避开这种问题，有的黑白相间是最难把握的。

分块其实是一项很重要又很难把握的工作，页面分块不同于杂志分块，杂志的分块是有边界的，杂志的设计师可以经过边界来形成立体感；但页面分块弱化了边界问题，由于电脑屏幕可以上下左右移动。

所以ToB网站的页面分块更加的重要，可以经过不同颜色、框、线来进行分块；但分块的素材不该过于“夺目”，避开影响客户对内容的整体扫瞄。

还有便是“字体配置样式的问题”，做ToB网站字体配置不要有过度的样式，在进行网页策略化格调上的操作时；总是感觉过多的字体能够让官网看起来不是特殊死板，其实不是这样的。

ToB网站讲究的是策划，而不是颜色的堆砌和款式的积累，要讲究内容的各种字体款式的颜色运用，这样才能看得出来策划人员技术实力和策划功底。

一般来说，网站上线前检查下，运用的字体不要超出3种款式，这样才不会看起来特殊的乱；而且用户一打眼