2021-2022年B2B官网搭建指南.pptx

2021-2022年 B2B官网搭建指南 章节 1： B2B 企业为什么要重视官网搭建 ？ 官网对于 B2B 企业的价值 章节 2： B2B 官网的状态判断及自检 B2B 名片型官网 B2B 品牌型官网 B2B 营销型官网 章节 3： B2B 官网搭建步骤与流程 Step1： 明确官网搭建 （ 改版 ） 的目的 Step2： 栏目与页面框架规划 Step3： 颜色 、 距离 、 动态等规范确定 Step4： 网页设计 ， 留白与美 Step5： 交互开发 ， 细节里的艺术 Step6： 程序介入 ， 构建一个动态的网站 Step7： CMS（ 内容管理系统 ） 章节 4： 网站运营 内容填充 A/B 测试 埋点与数据分析 辅助运营工具推荐 章节 5： 行业优秀官网案例 46 42 43 44 44 45 01 03 官网给 B2B 市场营销可以贡献哪些力量 ？ 05 07 08 08 08 10 15 17 22 25 27 28 33 简介 B2B 官网搭建指南的价值是期望帮你搭建一个优秀的网 站 ， 官网是 门 面 ， 同时也具备营销价 值 ， 可以带来流量并转化成销售线 索 ， 促 进公司营 收 ， B2B 业务是复杂 的 ， 客户在选择你之前会长期的研究 你的官 网 ， 了解你的产品及服 务 、 成功案 例 、 甚至是品牌的创始团 队信息 ， 来获取与你合作的信心 ， 打消心中的顾虑和担忧 。 品 牌 ： 客户会因为高质量的官网选择信 任 ， 也会在选型的时候有所 加 分 ； 官网上有价值的内容可以持续的对客户有所支 持 ， 直至客户 成功 。 SEO： 官网可以通 过 SEO 的方式在搜索引擎上获取大量流 量 ， 为品 牌提供曝光机 会 ， 如果你的网站足够优 秀 ， 这些流量会源源不断的 转化成销售线索 ， 为你的商业发动机提供 “ 汽油 ” 。 SEM： SEM 等线上广告会将流量引导至官 网 ， 优质的官网可以最大 限度的转化这些付费访客成为线索 ， 提高投入产出比 ； 用户成长基 地 ： 访客看三到五篇布局在官网上的专业内 容 ， 会对业 务产生兴 趣 ， 注册成为销售线 索 ， 在转化成为客户的过程 中 ， 官网 上的内容会加速漏斗流速 。 接下 来 ， 我们来分享构建一个优秀 的 B2B 官网全流 程 ， 帮助你得到 客户认可 ， 同时提高线索量 。 “ 如果你的网站体验很糟 糕 ， 凭什么让客户相信你 的产品很优秀 ？ ” 1 Part I B重2B视企官业网为 什？么要 PBa2rBt 企I 业为什么要重视官网 ？ 如果你是网站运营的负责人 ， 或者是数字营销总监 ， 你心中可能知道为什么官网很重 要 ， 以及运营官网 能给部门和公司带来什么样的价 值 ， 但是当你去向 公司内部其他人解释为什么我们要投入一些资源认 真建设官 网 、 运营好官网的时 候 ， 这个过程可能会 非常费 力 ， 甚至会遭受很多质 疑 ， 如果你不告诉他 们后面这些原因的 话 ， 你也很难揭秘答 案 ， B2B 企 业为什么要重视自己的官网 ？ B2B 官网搭建指南 2 Part I B2B 企业为什么要重视官网 ？ 这是我们需要一个优质的官网最现实的原 因 ， 我们会获得很 多 访 客 ， 这些访客有的是知道我们品 牌 ， 主动搜索我们官网 的 ， 有的是通过我们在搜索引擎上留下的痕迹寻迹而来 的 ， 也有 好 多会做类似 于 SEM 一类的线上广 告 ， 这些访客会着陆在官网的 某个页面 上 （ 百度推广可能会着陆到基木鱼搭建的落地页上 ） ， 一 个 优秀 的 官 网 可以 在 同样 数 量访 客 到 访 的情 况 下获 得 更 多的 线 索 。 如果你的网站规格足够高的 话 ， 网站会成为转化利 器 ， 可以有效的将源源不断的访客转化成线 索 ， 什么样的设计和 内 容会让访客产生兴趣 ， 愿意更多的停留和更多的了解呢 ？ 一个有充分内容的官网可以在搜索引擎上获取大量的流 量 ， 可能是你 得到了你所在行业最火热的关键词排名前三的位 置 ， 也有可能是你的 成千上万个关键词都获得了很有利的排 名 ， 这些良好的位置会通过搜 索引擎上用户搜索的需 求 ， 让用户发现你的网 站 ， 这可比销售去登门 拜访高效的多 ， 通常这个技术也被称之为搜索引擎优化 ， 简称 SEO。 从搜索引擎获取流量是很可观的增长模 式 ， 根 据 SEMRUSH 的数 据 ， HubSpot 全网品牌关键词占比仅 为 8.54%， 自然关键词占比超过 90%， 每天 为 HubSpot 带来 1600 万 + 的自然搜索流量 。 02 获取搜索引擎流量 B2B 官网搭建指南 官网对于 B2B 企业的价值 01 流量的转化 3 Part I 4 B2B 企业为什么要重视官网 ？ 眼睛是心灵的窗 口 ， 官网是企业的窗 口 ， 用户从第一次听说 我们品牌到最后成为我们的客 户 ， 在任意的一个生命周期环 节 中 ， 都有极大的可能性来到我们的官 网 ， 每一次到 来 ， 用 户心中都会有直观感 受 ， 加分还是减 分 ， 用户会对我们品牌 有一个累加判 定 ， 如果用户持续累加坏印 象 ， 销售的努力很 有可能被一个垃圾网站充斥掉 ， 甚至对于很多 B2B 团队来讲 ， 这些线索都到不了销售手里 ， 就夭折在网站这个环节 。 我们看到一个不修边幅的人大概率会认为这个人不靠 谱 ， 同理 如果我们看到一个很垃圾的网 站 ， 我们就会联想到这家公司不 怎么 样 ， 这家公司的产品不怎么 样 ， B2B 的生意基础是信 任 ， 如果第一印象就很差 ， 你很大可能会失去很多潜在的生意机会 。 在 Go To Marketing 的每个环节都做到极致专 业 ， 这种背后不 可见的品牌力量会给企业带来无限 的 、 巨大的收 益 ， 这已经升 级到影响用户的高度 了 ， 如果在用户心中打下了一个清晰且坚 定 的 印 象 ： 这家 公 司很 靠 谱 ， 我 要选 它 ， 这 无 疑是 完 美 的 商业 成功体现 ， 也是所有品牌都追求的最终目标 。 04 塑造品牌形象 03 促进商务转化 B2B 官网搭建指南 Part I B2B 企业为什么要重视官网 ？ 官网给 B2B 市场营销可以贡献哪些力量 ？ 一个优秀的网站运营在网站开始策划的时候就知道这个网站的未来 ， 搭建 好了营销型网站 ， 也仅仅是开始 ， 后期的网站运营的策略也很重要 ； 官网 不仅仅创造流量 、 转化线索 ， 它还可以作为市场部核心数据生产场所 ， 为 营销云提供数据 。 基础网站运营数据 ： 通过网站基础数 据 ， 我们可以大致知道网站的运营情 况 ， 如每天有多少访客到 访 、 跳出率及退出率如何 ， 以及通过网站上的热力图了解访客对网站信息的喜好 。 用户行为数据 ： 通过埋点的方 式 ， 给网站上交互事件做好标 记 ， 当访客触发相应的行为 后 ， 数据会 上报给用户行为分析系 统 ， 通过事件分 析 、 漏斗分析等分析模 型 ， 了解访客在网站 上的行为 ， 优化网站的结构与交互 ， 提高转化率 。 B2B 官网搭建指南 5 Part I B2B 企业为什么要重视官网 ？ 内容消耗数据 ： 访客在网站上看了文章及视 频 ， 下载了资 料 ， 报名了线上直播与线下 活 动 ， 这些数据对于数字营销来说都是有价值数 据 ， 访客与我们交互的 越 频繁 ， 意味着越了解公司与产品 ， 即越有可能成为我们的客户 ； 线索及用户数据 ： 官网是转化中 枢 ， 承接流量后转化流 量 ， 源源不断的获取线 索 ， 同时官 网也可以继承广告数据 ， 拿到广告数据后在用户注册的时候同步给营销 云 ， 这部分数据对于销售来说有着很重要的意 义 ， 毕竟如果销售知道 自 己接收的线索是搜索什么关键词过来的 ， 就知道了应该准备什么资料 。 B2B 官网搭建指南 6 7 B判2B断官及网自的 状检态 Part 2 B搭2建B 指官南网 PBa2rBt 官2 网的状态判断及自检 随着我们对官网价值认知的越来越 多 ， 也对官网的 开发与运营付出更多的精 力 ， 不同的投入也意味着 官网的质量不 同 ， 如果将官网归属于三个阶 段 ， 你 的官网处在什么阶段呢 ？ 8 名片型官网 ： 策划之初就明确了它的价 值 ， 或许组织 并没有期待它能起到更多的营销作 用 ； 当在介绍自己品牌的场合 下 ， 通常会告 诉对 方 ， 你可以去我的官网找到 我 ， 此 时 ， 官网就是品牌在互联网上的一张名 片 ； 品牌型官网 ： 注重品牌形 象 ， 官网虽然 小 ， 但是细节 会做的很有质 感 ， 大多会动用很精良的 设计以及交 互 ， 力求通过官网让访客认 同品牌 ； 营销型官网 ： 具备明显的转化流 程 ， 期待通过官网去 竞 争 SEO 流 量 、 承接品牌带来的自然 流 量 ， 清晰有力的转化流程期待将流量 转化成线 索 ， 整个官网的全部力量都在 向获客上去发力 。 B2B 官网搭建指南 Part 2 B2B 官网的状态判断及自检 三种官网类型的定位 ： 你的官网处在哪个阶段 ， 哪种类型的官网又是你需要的呢 ？ 页面数量 CTA 密 度 SEO 规范 内容更新频次 设计特点 CMS 名片型官网 5 - 10 无 CTA 无 SEO 痕迹 无更新 无原创设计 无 品牌型官网 10 - 20 1-3/ 全站 无 SEO 痕迹 无更新 图 片 / 动画为主 新闻中心 营销型官网 20 - 50 1-3/ 页 SEO 规范齐全 周更新 突出转化逻辑 资源中心 9 B2B 官网搭建指南 10 B步2B骤官与网流搭 建程 Part 3 PBa2rBt 官3 网搭建步骤与流程 如果你是一个市场 人 ， 了解网站构建原理很有必 要 ， 因为当 你了解网站是怎么做 的 ， 你就可以跟团队沟 通 ， 跟产品研发 沟 通 ， 至 少 在提需求的 时 候 ， 如果你知道原 理 ， 你会很好 的 评估项目研发周期 ， 达到意想不到的效果 。 制作网站 流程 ： 1、 策划 11 早些 年 ， 市场要做个网 站 ， 需要提 供 MRD 文 档 ， 翻译过来就是市场需求文 档 ， 项 目经理基于此文档开发网站 ， 这个文档里会写市场要什么 ， 但是如今市场部已经不 产出 MRD， 而是直接产出线框图 。 线框图是原型图的早期版本 ， 无交互 ， 但是把页面结构和内容结构讲的很清楚 ， 线 框图能解决一个问题 ， 那就是不同的页面表达的内容是什么 。 这应该是市场部决定 ， 市场部是最了解用户需求的团队 ， 如果我们向后追溯就会发现 ， 除了市场部 ， 没有 团队可以把页面要表达什么这个任务承接下来 。 B2B 官网搭建指南 12 2、 网页设计 网页设计师会根据网站原型图进行网页设计工作 ， 相当于把策划的想法用 PS 实 现 ， 画成 图 ， 这个过程需要大量的沟 通 ， 因为设计师能提供的是 设 计思考 ， 表达形态则需要策划 （ 网站的产品经理或者项目经理 ） 决定 ， 举 个例子 ， 按钮用圆角还是直角 ， 一个页面的颜色如何分布 。 很多网页设计师会先制定网页设计规 范 ， 保 证 B2B 官网的专业 性 ， 因为 对 于 B2B 而 言 ， 官网优先要传递的就是严谨与专 业 ， 用户会因为网站同 步联想到你的产品的质量 ， 如果你的网站毫无专业性而言 ， 那么用户有充 分的理由认为你的产品是垃圾的 ， 网站的专业性取决于很多因素 ， 网页设 计就是其中之一 。 3、 前端排版 设计师产出的是什 么 ？ 是一个图 片 ， 经 过 PS 设 计 ， 设计师可以导出不 同 格式的图片 ， 比 如 PSD、 JPG、 PNG 等格式 ， 它此时还不能称作为网页 ， 仅仅是图片级别的产出 ， 这个时候就需要前端工程师介入 ， 前端工程师帮 助我们把这些页面切碎成一个一个的小单 元 ， 再 用 DIV+CSS 技术将这些 单元重组成页面 ， 此时页面是由 HTML 代码组成的 ， 可以真正的在浏览器 打开 。 早些年 ， DIV 和 CSS 还不成熟的时候 ， 前端工程师会用表格来进行页面排 版 ， 首先建立一个大表格 ， 大表格里面放小表格 ， 经过层级嵌套就搭成了 一个房子的骨架 ， 接下来用图片和文字装修这个房子形成网页 ， 后来有了 DIV 和 CSS 之 后 ， 由 DIV 来负责搭房 子 ， 由 CSS 来决定装 修 ， DIV+CSS 比表格先进的多 ， 逻辑更清晰 ， 占用资源更少 。 如果你的网站是一个静态网站 ， 也就是没有内容系统 ， 不需要从数据库里 调取数据的话 ， 经过前端工程师之手就可以用了 ， 但是这样简单的网站已 经很少见 了 ， 尤其 在 B2B 领 域 ， 内容会帮助我们获得用户的注意力以及 获得用户的认可 ， 所 以 B2B 的官网会很重视动态内容 ， 如案例与资源中心 。 B2B 官网搭建指南 4、 程序 如果需要网页与数据库互通 ， 从数据库里动态的得到内容 ， 就要工程师上 场了 ， 我们也会管工程师叫程序员 ， 工程师通过一些代码 ， 让网站上的内 容可以动态的操作数据库 ， 对数据库里的信息执行增删改查工作 ， 就实现 了内容板块 、 表单板块等能力 。 但凡涉及到与数据库里的内容沟通 ， 都需 要程序员的参与 。 经过以上几个步骤一个网站就做完了 ， 但是此时的网站仅仅存在于研发人 员的电脑上 ， 如何让所有人通过一个域名就可以访问到你的网站呢 ？ 接下 来就需要运维工程师的介入 。 B2B 官网搭建指南 13 其实很多站长都不是运维工程 师 ， 因为运维一个网站是很简 单的工 作 ， 程序员自己就可以搞 定 。 以作者本人为 例 ， 早在 2010 年我就可以自己开发网站 、 运维网站 ， 为了帮助你理解 ， 百块 ， 这是一个优质虚拟机的最低价格 ， 也听闻过可以花几十 块钱买一个虚拟机 ， 但那些一般都存在风险 ， 那种虚拟机特别 像隔断房 ， 不太建议大家购买 。 一般而言 ， 几百块的虚拟机足 够满足一个小型官网的需求 ， 而且大多支持弹性扩容 ， 相对来 说非常好用 。 第二步 ， 进行域名备案 。 在主流云厂商后台申请备案后 ， 平台 会给你快递一个背景布 ， 需要你实名认证并且上传照片以及保 证书 ， 证明这个域名是归你所有 。 我介绍一下 ， 如何让开发好的网站可以被别人访问 。 第三步 ， 买好虚拟机以及完成域名备案后 ， 你需要将开发好的 第一步 ， 你要买个虚拟主机和域名 ， 在主流云厂商上购买即可 。 如果买 个 com 的域 名 ， 大约几十 元 ， 虚拟主机的价格大约几 第四 步 ， 进行域名解 析 。 将域名与虚拟机给你分配好 的 IP 绑 定在一起 ， 这样所有人就都可以访问到你的网站 。 以上就是一个网站开发的总流程 ， 每个阶段都有不同职业的伙 伴支持 ， 当然大部分公司找不全这样的团队支持 ， 要么就一个 人什么都做了 ， 要么就找专业的供应商帮我们做网站 。 B2B 官网搭建指南 14 经常有很多伙伴在沟通时表现出想要改版网站的欲 望 ， 对 此 ， 大家应该慎重考 虑 。 首先网站改版是一个很大的 事 情 ， 从策划到研发到上 线 ， 动用的资源很 多 ， 一个 B2B 官网进行一次改版项 目 ， 至少要消 耗 10 万 ， 平均 需要历经三个月左右时间完 成 ， 很多网站其实不需要推 翻改 版 ， 而是网站升 级 ； 如果你真要对网站进行改 版 ， 可以想想网站改版的目的是什么 ？ 2016 年我们团队对网站进行过一次改 版 ， 那个时候因 为网站的上一个底层程序是 C 语言 ， 而我们团队没人懂 C， 在市面上找到一个可以 做 C 语言的网站开发很 难 ， 为了未来几年的发 展 ， 我们进行了网站改 版 ， 把语言全 部换成了 PHP， 这样的网站改版目的是合理的 。 还有一个项 目 ， 我们的初始目的是想优化它的转化 率 ， 但是发现一个现象 ， 我们的运营人员对这个网站不可控 ， 牵一发动全 身 ， 改任何一个小的东西成本都很 高 ， 而且 我们要想达到目的要改的东西很多很多 ， 于是决定推翻 ， 重构官网 。 所以当我们想进行网站改版重构的时 候 ， 要清晰的知道 为什么要改 版 ， 改版了之后得到的收益是否可以覆盖掉 我们牺牲的成本 ， 这里还不算机会成本 。 （明改确版官）网的搭目建的 Step1 B2B 官网搭建指南 15 大部分网站优 化 ， 我都不建议以网站重构改版为目 的 ， 而是基于原 有的环境进行持续优 化 ， 此时不得不 说 ， 一个底子良 好 、 基础牢固 的网站多么重 要 ， 这样的网站可以支撑一个公司发展四到五 年 ， 而 之后的网站开发团队可以基于此基础持续的增加页 面 ， 增加内 容 ， 这种建议特别像老一辈人给年轻人的建 议 ， 不要总重 来 ， 在一个地 方深入进去 ， 持续积累 。 如果没有目 标 ， 就没有动作指 导 ， 很多官网开发项目动作开始前目 标定义不 清 ， 这会导致项目推进过程中失去方 向 ， 就像大海中航行 的船只 ， 如果没有方向 ， 很容易迷失在大海中 。 品牌型官网向营销型官网改变 ， 增强官网的营销能力 ， 其中包括获取 流量 、 也包括将流量转化为线索 ； 再或者当前的网站底层基础薄弱 ， 无法基于此基础进行加厚开发 。 2 网站 “ 装修 ” 基于品牌重新定位的策略进行官网升级 ， 使其内容 、 视觉 、 交互均得 到提升 ， 期待在网站端得到更多用户认可 ； 3 提高转化率 基于转化率优化为目的网站改动 ， 比如增加落地页 、 更改文字等常见 行为 ， 通常会结合 AB 测试策略进行网站的微调 ； 常见的网站开发 （ 改版 ） 目的 ： 1 改变性质 B2B 官网搭建指南 16 我们在盖房子的时 候 ， 会先打地 基 ， 然后搭建房 子的骨 架 ， 接下来添砖 加 土 ， 这是正常的顺 序 ， 做网站策划也是一样 的 ， 我们在做网站策划的时 候要先考 虑 ， 网站的栏目结构是什 么 ， 也就是我 的网站要有哪些页面 。 B2B 的官网有自己的特色 ， 因 为 B2B 的官网不仅仅在表达品 牌 ， 同时还要 承担获客的职责 。 我们思考一 下 ， B2B 的获客流 程 ， 如何 让官网可以一脉相 承 ， B2B 的生意有 几 个特点 ： 1 我们需要表达专业能力 ： 我们在选择一家合作伙伴的时 候 ， 当然 是期望这个伙伴可以是专业 的 ， 无论是 产品还是服 务 ， 都能做到完美的价值交 付 2 客户会钻研我们 B2B 的生意客单价都很 高 ， 客户会花大 量的时间去钻研我 们 ， 直到完全打消心 中的顾虑 ， 产生信任 3 周期长 用户会在很长的时间内观察我们的动 向 ， 在客户从陌生人到成为我们的客户 之间的任意环 节 ， 他都会跟我们频繁接 触 ， 在这期间期望可以得到更多的共鸣 。 站在官网的负责人视 角 ， 官网应该传递 什么样的信息才可以称之为一个合格的 B2B 官网呢 ？ 我将一 个 B2B 官网要传递的信息总结 为 VIP 结构 ： V=value， I=insight， P=Person 即价值 、 洞察 、 人 。 B2B 官网搭建指南 Step 2 B栏2目B 规官划网的 17 用户来到一个官网最优先想要了解的就是这个公司是做什么的 ？ 卖什么 产品和解决方案 ？ 这些产品能否帮助到我 。 所以我们需要在首页 、 产品页 、 解决方案页 ， 充分的表达我们是做什么 的 ， 以及我们是如何帮助到用户的 。 大多数情况下 ， 我们在商城买东西 的时候 ， 基本都默认知道我们需要什么 ， 比如我要解决洗衣服的问题 ， 我想买个洗衣机 ， 这种固定的需求与解决方案匹配信息 ， 在我们脑海中 天然存 在 ， 但是 在 B2B 领域不是这样 的 ， B2B 的领域有很多人停留在 我仅仅知道我的需求是什么 ， 但是并不知道什么产品可以解决我的需求 ， 这也是当前所 有 B2B 企业需要解决的问题 ， 很多人管它叫 ， 教育市场 。 假设我们已经很清晰的告诉用户我们是什么组织 ， 我们做什么产品与解 决方案 ， 用户就会积极的找我们想要促成合作么 ？ 远没有那么简单 ， 如 果真的这么简单 ， 那么 B2B 的官网真的可以提供支付接口了 。 我们会用产品频道和解决方案频道来表达价值 。 用户在知道我们可以提供什么支持的时候 ， 他还需要什么呢 ？ 那就是我 们是否有资格 ， 成为最合适的合作伙伴 。 B2B 官网搭建指南 V I P Value 价值 Value 价值 ： Insight 洞察 Pe rson 人 18 Part 3 B2B 官网搭建步骤与流程 做 B2B 的生意 ， 每一家企业都应该是这个领域的专家 ， 否则怎么能服 务好他的客户 呢 ？ 客户在选型的时候也会考虑对方是否有行业经 验 ， 因为早已经过了产品就能解决问题的年代 ， 如果是 B2C 领域 ， 比如我 们要在电商平台买个东 西 ， 很大概率我们是知道商品能解决什么问 题 的 ， 比如我想给手机充 电 ， 那么我需要买个充电 线 ， 直接在电商平台 购买即 可 ， 我们的需求与产品价值之间存在的鸿沟已经在我们脑海 中 潜意识的形成了关联 ， 但是 在 B2B 领域 ， 产品功能与用户痛点之间存 在着巨大的鸿 沟 ， 大到很多领域是无法依赖用户自己联想到 的 ， 需要 经历漫长的市场教育过 程 （ 其 实 ， B2C 领域商品与需求之间的潜意识 关联也是经历了教育过程 ） 。 所以此时 ， 用户在选择一 家 B2B 产品的时候 ， 很大概率并不知道这个 产品能为我解决什么问 题 ， 如何解决的我的问 题 ， 是否足够专业解决 我的问 题 ， 这些疑问都天然的存在用户的脑海 中 ， 谁能先解决这些用 户困 惑 ， 谁就能在用户心中塑造一个坚实的专家形 象 ， 谁就能更多的 获得客户的关注与信任 。 在 TOB 的官网上 ， 会用资源中心 、 案例来满足 insight 的相关需求 。 Insight 洞察 ： B2B 官网搭建指南 19 Part 3 B2B 官网搭建步骤与流程 产品和解决方案是我需要的 ， 资源中心和案例也充分表达了这家 公司能解决我的问题 ， 外在因素都解决了 ， 接下来就要升级到高 维度的思考了 ， 那就是价值观共鸣 。 如果一家公司的态度和价值 与用户心中所想完全一致 ， 那么这个用户在同等条件下 ， 会优先 选择跟自己价值观一致的企业 ， 所以我们需要在网站中表达我们 的态度 、 观点 ， 以及团队风貌 。 VIP 结构基本上把一个 B2B 的官网结构总结清楚了 ， 这是一个标 准结构 ， 这个结构基本上就成为一个网站的主导航了 ， 很多时候 我们可以自定义主导航结构 ， 但是一定要注意层级感 ， 比如我们 去看一个售楼处的样板间 ， 在我们的思维结构里 ， 可能先知道这 个房子有几个房间 ， 厨房 、 卧室 、 卫生间 ， 然后才会去关注床 。 用户在体验一 个 B2B 官网的时候其实潜意识原理也是这样 的 ， 会先关注产品 、 解决方案 、 资源中心 、 关于我们这样的主导航 ， 交互体验 等 ， 总 之 B2B 的官网一定要认真对 待 ， 因为访客会 从 之后才会找一个自己感兴趣的频道点击进去继续浏览 。 判断一个 任何细节都可以表达这家公司的态度 ， 比如设计风格 、 内容布局 、 链接是否要放在主导航上 ， 就要看它的力量是否足够 ， 成为最顶 层的分类存在 。 网站上联想很多东西 ， 比如从网站就判断产品不严谨 ， 不靠谱 。 Person 人 ： B2B 官网搭建指南 20 Part 3 B2B 官网搭建步骤与流程 在 B2B 官网的设计过程 中 ， 我们经常会遇见这样一种情 况 ， 即来自领导的 安 排 ， 譬如领导对你 讲 ： “ 我们新出了个产 品 ， 很重 要 ， 需要把它放在主 导航上 。 ” 碰上这种情况时 ， 你应该如何进行回应呢 ？ 作为网站的负责人 ， 你必须清楚主导航上结构清晰 、 逻辑流畅的设计需求 。 如家族的族谱一 样 ， 如果儿子的名字跟父 亲 、 叔叔在一个维度 上 ， 那么关 系就会混 乱 ， 同 理 ， 如果我们把一个很重要的产品名称放在主导航 上 ， 它 还隶属于产品 ， 从形态上跟产品是并列关系 ， 这就很奇怪 。 因 此 ， 面对领导不合理的需求 时 ， 你应该从专业角度予以拒 绝 ， 表示这种 这种行为不仅不能给主推产品带来推广的帮 助 ， 反而会破坏网站的体验逻 辑 。 我们可以通过其他方式来解决加强曝光的问 题 ， 比如在网站的最顶部 加个高 10 像素的广告条 。 无论如何 ， 在进行网站运营的时候 ， 务必要优先保证网站本身的框架结构 ， 在结构稳定的基础上进行内容丰富或满足其他需求 ， 千万不要本末倒置 。 B2B 官网搭建指南 Tips 21 Part 3 B2B 官网搭建步骤与流程 从 细 节处 定 标 准 ， 苹果 的 网站 为 什 么 看着 舒 服专 业 ， 其 实背后有严格的设计规范及标准 。 （ 1） 色彩是品牌的传承 ， 也是情感的有力的传递 网站的配色一般基于企业的 VI 系统 ， 这是客户的品牌策 略 ， 我 们只 需 要 遵 循 。 但 是 仍然 有 很多 企 业并 没 有 完 善 的 VI 系 统 ， 这时设计师 在 logo 色的基础 上 ， 衍生辅助 颜色 。 a. 从用户角度出发的网页配色方针 ， 请细品 ： 单独使用鲜艳色彩可传达出明确需求 ； 使用鲜艳色彩互相搭配时必须注意明度差距 ； 使用鲜艳颜色做设计的时 候 ， 色块面积小比较容易取得 色彩平衡 ； 大面积鲜艳的色块比较容易引起不适 ； 低饱和度的颜色适合大面积使 用 ， 想要强调的地方采用 鲜艳的颜色 ； 采 用 无色 彩 的设 计 ， 那 一 定要 具 备好 的 图 片 ， 不然 页 面 会变得寡淡而没有看头 。 B2B 官网搭建指南 Step 3 色动彩效、等距规离范、确定 22 Part 3 B2B 官网搭建步骤与流程 b. 平面色彩在网页中如何应用 大部分的企业在做网站之前已经设计 好 logo及整套 的 VI 系 统 （但 是没有网页应用说 明 ）， 网站的设计又要延续这整 套 VI 系 统 ， VI 中的颜色在平面打印还不错 ， 但是转成网页后颜色不够美观 ， 如何处理 ？ 网页使用的是三原 色 ， 需要 把 VI 中定义 的 CMYK 的颜色转为 RGB 色 值 ， 转出后的颜色在网页上显示的效果与平面打印效果 如果不尽相 同 ， 或网页上颜色不够美观 的 ， 可以减少主色调的 使 用 ， 增加辅助颜 色 ， 而辅助色调可在主色调的基础上酌情调 整色 值 。 网页的显示效果由显示器分辨 率 、 电脑显 卡 、 手机的 屏 幕 ， 手机渲染的技术等等决定 的 ， 可以通过过渡 色 、 透明度 对 VI 色进行更好的表达 。 c. 网 页 配 色 比 例 公 式 ： “ 主色调： 强色调 ： 辅助色 =70:5:25” （ 2） 距离可以让重点更明确 ， 可以让阅读更舒适 a. 网页中的距离 ， 无绝对的距离 ， 只有相对的距离 ； b. 行间距与字体大小相关 ， 无固定距离 ； c. 行间距的倍数问题 ， 1.2-1.8 倍 ； d. 而且字越大距离越小 ， 这里是相反的 ； 配图 ： B2B 官网搭建指南 23 Part 3 B2B 官网搭建步骤与流程 （ 3） 动效的基础原理 a. 动画的速度和持续时间 在 UI 动效设计中最优的时间是 200-500ms， 这个数据同样是来源于人 类大脑的认知水平 ， 任何小于 100ms 的动画人类都很难感知到 ， 而大 于 1 秒的动画又会让用户觉得有些延迟 ， 不够流畅 。 但是也有特殊情况 ， 如果你是在页面中设计一些创意动画或者出发点就是为了引起注 意 ， 这时就应该抛弃这些规 范 ， 时间你可以做的更长一 些 。 另外动画的持 续时间不仅跟它的移动距离有 关 ， 还跟它本身的大小有关 系 。 小的元 素或者变化不大的动画应该要移动的更 快 ， 而大的元素或者复杂的元 素持续时间稍长一些看起来会更好 。 b. 缓动 为了让动画看起来不会太过机 械 ， 物体的运动应该会同时伴有一些加 速 度 ， 就像现实世界中的运动一 样 ， 不会有绝对匀速的运动形 式 ， 让 用户更容易接 受 。 缓动的物体会比线性运动的物体看起来更加自 然 ， 缓动可以通过贝塞尔函数来描述这种速度 。 B2B 官网搭建指南 24 Part 3 B2B 官网搭建步骤与流程 留白应该是最高级的设计能力的表现 了 ， 留白的目的是给予视觉一定的放松时 间 ， 也就是所 谓的呼吸感 ， 舒适自然 。 a. 留白是为了突出主题 ， 让网站更有层次感 页面的每个部分都有清晰的视觉焦 点 ， 主次分 明 ， 用户永远不会在这里迷失和分 心 。 想要让 一个元素足够吸引用户的注意 力 ， 往往需要通过周围的留白来衬 托 ， 这样的设计所营造的用 户体验更为优 雅 。 留白并不一定必须是白色 的 ， 它可以是其他的任何颜 色 ， 而留白的另外一 个名字是 负空间 。 留白能够衬托和凸显视觉主体 ， 这也是它发挥作用的主要途径 。 B2B 官网搭建指南 Step 4 网页设计 、 25 留白与美 Part 3 B2B 官网搭建步骤与流程 b.利用对齐 、 错位 、 留白等方式创造了许多具有强大视觉冲击力的作品 留白的作用就像我们常说 的 “ 此处无声胜有 声 ” 的效果一 样 ， 能把人们 带到一个拥有无尽想象的时空 ， 让人们在这里可以自由的畅想 ， 轻松的 感悟与体 验 ， 留白还能创造出设计版面的戏剧 性 ， 只要我们能合理地运 用 ， 它将更好地帮助我们实现信息传达的目 的 ， 为平面设计作品增添更 多魅力 。 c. 极简主义风格是留白的高级运用 在极简主义风格是主流的今天 ， 少即是多 是设计师奉为圭臬的准则 。 控制配色方案的数 量 ， 限制视觉元素的数 量 ， 在清晰的层级之 下 ， 呈现 最核心的元 素 ， 抓人眼 球 ， 直击核 心 。 这样的设计对于留白极为依 赖 ， 因此 ， 留白很重要 。 尽管留白看起来不复 杂 ， 但是在复杂多变的设计环境之 下 ， 往往并不是 一件简单的事 情 。 优秀的留白设计能够在简约的风格和功能的可用性之 间达到平衡 ， 而要做到这一点 ， 需要相当的实践和积累 。 B2B 官网搭建指南 26 Part 3 B2B 官网搭建步骤与流程 从人对媒体的感知来看 ， 交互动 效 视 频 图 片 文字 ， 动效交互让网站更加立 体 ， 打造网站记忆 点 ， 也不会打 搅用户 。 a. 留如何打造记忆点 从客户品牌出发或者从客户业务出 发 ， 去设计动效的 表 达 ， “ 浓妆艳 抹 ” 的设计只会让人感觉浮 夸 ， 因为对于 商业设计包括动 效 ， 都是为了传递内 容 ， 原始的出发点 不能 变 。 通过交互更好的让客户记住你的品 牌 ， 或者更 好理解业务 。 案例 ： 致趣百川 、 建发集团 b. 不打扰用户 一个优秀的动效交互设 计 ， 不会是那么刻 意 ， 更不能分 散用户对目标的注意 力 。 有些时 候 ， 我们都在为网站做 减 法 ， 可以优化的优 化 ， 不行的话干脆把动效去 掉 。 动 效不能影响用户对核心内容的阅 读 ， 不能影响客户体 验 网站的效率 。 c. 要考虑和用户的交互 ， 这种对话更有趣 网站和平面物料的最大区别是可以进行人机交 互 ， 你 的 每次点 击 ， 鼠标经 过 ， 滚动条的滚动等 等 ， 网站都可以 很好增强阅读内容的感受 ， 让用户参与到动画的过程中 ， 会让人更有印象 。 d. 动效的本质来源于现 实 ， 不要打破自然规 律 ， 那会让 人很难接受 从物理中运动的规律和原 则 ， 可以得出网页中动效应 该 要反映客观物质世界 , 例如我们都知道的 ， 加速 、 减速 、 我们在执行动效落地的基础 ， 满足用户的心理预期 。 B2B 官网搭建指南 Step 5 交里互的开艺发术， 细节 27 Part 3 B2B 官网搭建步骤与流程 如果你的网站交互能力很 差 ， 将失去优质的 用户体 验 ； 如果你的网站还没有后 台 ， 那运 营工作将会变得非常糟糕 。 网站涉及的编程技术分为前端和后端 。 a. 前端程 序 ， 更专注于交互和体 验 ， 偏向用 户端 ： 当我们网页设计稿做完之 后 ， 首先需要前端 技术人员通 过 html+css+js 技术将网站做成 可交 互 ， 比如鼠标点 击 ， 比如经过的下拉菜 单 ， 已经复杂的动画交 互 ， 都需要前端技术 支撑 。 现阶段 html5+css3 可以实现非常炫酷 的交 互 ， 而且可以实现屏幕适配能 力 ， 也就 是根据不同屏幕尺寸展示好的效果 。 在前端制作中最重要 、 最需要注意的几个点 ， B2B 官网搭建指南 Step 6 程一 个序动接态入的，网构站建 28 Part 3 B2B 官网搭建步骤与流程 主流浏览器 PC： 移动 ： B2B 官网搭建指南 29 Part 3 B2B 官网搭建步骤与流程 主流分辨率 ： ( 这是真实目前分辨率情况 ) B2B 官网搭建指南 30 Part 3 B2B 官网搭建步骤与流程 搜索引擎友好 ： 1. 完整的 title description keywords 标签 ； 2.根据语义使用标 签 ， 比 如 h1 h2 h3. 为标 题 （ h1 标签每个 页面只能有一个 ）， p 标签为段落 ； 3.a 标签要有 title 属性 ； 4.img 图片标签要有 alt 属性 ； B2B 官网搭建指南 31 Part 3 B2B 官网搭建步骤与流程 B2B 官网搭建指南 b. 后端程序 ， 维护 、 功能及安全的保障 ， 偏运营 端 ： 后端开发的程序语言有哪些 呢 ？ 常见 的 asp、 后端程序主要为了实现网站的逻辑功 能 ， 以及 网 php、 java、 ， 首 先 asp 的网站是绝对不推 荐 站内容的录入修 改 。 有些网站完全没有后台管 理 了 ， 属于上个年代的编程语 言 ， 如果谁家网站还 功 能 ， 也有很多后台管理不完 善 ， 只能专业的 编 在 用 asp 开 发 ， 那技术过时太 久 ， 漏洞多且不好 程人员使用更 新 ， 而普通的运营人员无法进行 维 维 护 。 至 于 php、 java、 ， 对企业官网来讲 首 护 ， 这样后台也是非常不友好 的 。 试 想 ， 如果 我 先推荐使 用 php， php 的开发效率 高 ， 维护 快 ， 们运营的同事可以非常方便的进行网站的数据 修 特别适合网站开 发 ， 比如百度搜索引擎和新浪微 改 ， 能大大配合公司市场活 动 ， 相反所有内容 都 博都 是 php 制作 的 ， 如果是政 府 、 金融等项 目 ， 需要第三方公司或者专业人员支 持 ， 效率将大 打 用 java 居多 ， 项目会比较重 ， 开发和维护成本高 ， 折扣 ， 也带来更多的成本 。 迭代 慢 。 同 java， 但是又不 如 java， 属于 替 代当年 asp 的编程语言 。 32 Part 3 B2B 官网搭建步骤与流程 网站主要是以内容管理为 主 ， 所以专门用于网站管理的软件叫 CMS 系统 ， CMS 的存在是为了快速构建网站后台 。 首先讲下 CMS 的优劣势 ： 优势是节省程序的开发时间 ， 可以快速构建网站后台管理 ， 在后 台实现模板编辑等功 能 。 劣势在于大多数传 统 CMS 是为专业的 前端或者后端人员开 发 ， 所以网站使 用 CMS 制作 后 ， 后台使用 门槛高 ， 在内容维护上对于普通运营者可能很难找到管理