编辑导语：一个公司的官网可以说是非常重要的，官网就是公司的门面；我们通常在了解一家公司时，都会去这家公司官网浏览一下；其实公司的官网除了展示之外，还涉及到他的登录后台和网站获客；本文作者分享了关于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种款式，这样才不会看起来特别的乱；而且用户一打眼，就可以看到想要的资讯，而不是刷出来的“浓妆艳抹”，没有核心。

2. 常规网站获客的方法有哪些

目前很多的ToB网站标配的是“内容版块”，即内容学院，学院里面规划了很多的版块，比如：行业的白皮书、活动的解决方案、客户的成功案例、TOC的增长裂变方法、PPT、PDF参考资料等等。

这些都是为了后续内容在搜索引擎优化来获取销售线索的主要方式，市场头部的案例有：钉钉、飞书，他们把很多活动的线下案例都做到了“线上”，通过内容的形式输出方法论。

实际上，每个公司的获客策略都不是单一的，有的通过优惠活动去引导用户注册，有的在不同专题页面引导客户”留下线索等，比如阿里云前期的使用云服务器低至几十块/年的横幅。

那么对于网站最好的形式，还是“内容的优化”，围绕长尾关键词、品牌关键词，甚至于痛点方案的关键词去“铺设内容”。

比如公司做的产品是SCRM，核心聚焦于增长，长尾进行铺设；待用户通过搜索引擎搜索，可能就抓取到了“网站的内容”，从而也就被官网的某个方案所吸引注册。

用户的需求等于关键词，无论是信息流（信息找人）还是人找信息，这个的IR的逻辑从来都没有变过，内容关键词的挖掘；其一是搜索引擎的下拉框，其二是行业词、小词、品牌词、功能词，循环渐进。

一个完善的官网搭建，大概需要这几个核心值得我们注意，即“内容的策划”、“整体架构的设定”、“UI风格的掌握”、“引导注册版块的设计”、“后续内容优化的长尾思考”、“上线前的测试”等。

五、写在最后

网站的设计并不是一个人可以完成的，大部分的时候需要产品经理出原型、定好布局、品牌策划做内容，然后交互，最后设计师设计页面。

官网不仅仅考验审美水平，也考验产品经理对用户，公司品牌业务的认知熟悉度；只有真正了解品牌和业务，了解目标客户，才能将产品推销出去。

作者：王智远， 公众号：王智远（Z201440）

本文由 @王智远 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议