编辑指导：当新客户想要了解一个公司或产品时，他们通常会通过他们的官网网站。不同于C端官网，TO B的企业官网有着更重要的商业价值。因此，如何在官网展示企业的产品和服务，传递品牌价值？笔者对此进行分析，希望对你有所帮助。
01背景企业产品是商业产品的一种，即面向企业市场，以盈利为目的的产品。通常他们具有业务门槛高、决策链复杂、产出压力大的特点。官网服务于有意了解这一领域的商家、客户和潜在客户，展示企业的产品和服务，传递品牌价值。不同于C端官网，TO B的企业官网有着更重要的商业价值。
1.官网改版目标改版迭代项目的核心是明确改版的动机，现状，要解决什么问题，改版的最终目标是什么。做出偏离商业目标的修改是没有意义的。B端的业务目标通常是增加企业收入，提高业务效率，降低运营成本。
官方网站是潜在客户了解企业、产品和服务、接触企业的媒介。如何让客户通过官网提升业务转型，是官网改版的核心目标。这里可以从用户、商家、品牌视觉层面对目标进行拆分。
2.用户层面和C端产品的界面体验不一样。To-B产品更注重服务体验，所以用户层面的目标是关注产品提供了什么服务，为用户解决了什么问题，比如：产品核心功能的介绍，用户使用产品的场景，产品如何解决行业痛点，产品的价格是否有竞争力，产品提供的服务和支持是否全面，是否解决了用户的需求等等。
相比C端单一类型的用户，B端的用户更丰富、更垂直，不同类型的用户看待产品的角度和目标完全不同。在官网产品改版项目中，我们将B端用户分为决策者和用户，帮助我们确定用户级别。
在B端C化趋势下，很多产品都是由有机会试用然后推荐给决策者的用户转化而来，决策者和用户的界限越来越模糊。所以，既要服务于高价值决策者的核心诉求，也要忽略产品用户的痛点。对于低价值的二次用户和间接用户，我们不需要专门设计，只需要用通用的信息板来支持。
获取用户目标的方式可以是深度访谈、电话访谈、问卷调查等形式，也可以在公司资源有限的情况下，结合行业信息和公司在线数据。
对用户群体的目标进行分类和规范后，就可以确定官网相应的内容和信息层次，从而达到有目的的传播和有效的转化。
3.从业务层面来看，业务层面展示的是企业的产品价值、核心优势、投入产出，将这类信息“货”推送给特定页面/版块“场”中对应的用户“人”，于是就产生了信息分层，让不同需求的目标用户快速匹配和认同产品价值，从而引导访客留下来，完成转化。
如何创建页面的信息分层，引导用户快速转化，将在后面几节的具体修改步骤中详细拆解。
4.官网在品牌视觉层面的价值，不仅仅是直接的转化目标，还有专业度和品牌形象的打造，影响用户对企业/产品的认知和感受。
网站的整体色彩体系、设计风格、品牌元素、图标风格、版块内容布局等等构成了最终呈现给用户的品牌形象。良好的品牌形象会给用户留下深刻的印象，这是获得认同感的基础，影响用户的最终转化。
品牌风格和视觉表现需要考虑到企业和产品的整体定位，
2.结构框架和信息层次不合理。官网的框架结构，版块的布局就是给用户讲故事。用户进入官网，是官网应有的叙事逻辑。如果只是根据业务需求，页面上只有一堆功能板块，没有逻辑和差异化的信息层次区分，就很难转型。
3.视觉体验差，缺乏品牌调性官网的设计语言建设。品牌定位和风格是用户对企业和产品最直接的印象。TO B的企业官网通过页面的风格体现产品定位，传递专业性和信任度。同时，随着互联网设计的发展，有了更多的表现形式，如3d风格、轻纹理、实时交互渲染等，让用户更容易理解业务场景，加深认知。
4.高跳转率、低转化、低转化是数据的呈现，也是衡量官网改版迫切程度的最直接原因。用户的转化路径越长，跳转率越高。最好只设定一个转化目标。在官网的设计中，所有的元素都是为转化目标服务的，但现实可能无法避免多个目标，所以这种情况必须分主次，在信息分层、内容布局、视觉处理上突出最重要的转化目标。
1)页面重构，信息层次优化
官网首页很重要，是访客进入的第一页。内容中的信息准确且高效地传达给用户。说白了就是指什么，怎么放，要有清晰的叙事逻辑。这里我们用营销中的AIDA模型来搭建官网的页面区块：
安德鲁Chak在他的书《Sumit Now:设计有说服力的网站》(Submit Now:Design suited Websites)中，将这四个阶段对应到了网站的四种用户类型：
观者：在关注阶段，你浏览信息是为了引起关注，但你并没有深入了解。
评价者：兴趣阶段，对学习细节感兴趣，关注价格。
操盘手：欲望阶段，有购买意愿，甚至把物品放进购物车。
买家：在行动阶段，购买行为已经达成。
我们可以看到，市面上优秀的TOB官网首页的信息结构大多是按照这个“套路”设计的。模仿用户进入首页后，按照这个浏览顺序深入页面：先介绍产品到——，逐步了解知识到3354，强化认知到3354，打消疑虑，付费转化。
第一页——通常展示企业的产品/服务，给访问者一个初步的印象。核心业务3354展示了企业的核心价值和差异化竞争优势，与下一节的产品介绍相同，给用户更深的印象。产品的详细功能和应用场景，让用户对产品有更多的了解，做出心理预期，是否符合他们的诉求。
然后通过商业数据、案例证据、售后服务、品牌背书，一步步让用户打消疑虑，加深对产品的信任，产生购买欲望。这时候就会让他们及时获得留存资本，从而达到转型的目的。
2)突出重点路段，缩短改造路径。
官网中的企业除了揭示产品的功能外，还要创造产品差异化的核心价值。结合整个页面，要提高显示高价值信息的优先级，让用户更快找到有利于转化的内容。因此，在表现形式上，为了提高信息呈现和获取的效率，可以用更丰富的信息纬度代替视频、动图等单一表格、图片、文字的信息呈现形式，让用户在单位时间内获取更多的信息，更容易理解和加深理解。
还有人机交互模块，可以和用户实时互动，亲身体验产品的业务场景和产品性能。
光流首屏视频更生动地展现了业务流程和场景。
当成功地引起用户的兴趣并想要拍摄时
这里可以有一点文案上的“小心机”，让用户多点击CTA按钮，比如制造一种稀缺感。人在面对稀缺资源时会有一种紧迫感，让用户想先占一个地方，快速决策。
此外，抬高价格锚也是用户下单的快捷方式。TO B用户会考虑投入产出比，性价比，购买是否划算。这个时候，如果给用户一个比较有价格优势的产品，用户会很容易接受。
(2)信息输入精简化，要求用户输入信息的内容，要尽可能简单、清晰、高效，避免在输入过程中出现让用户感到枯燥、容易迷失的复杂繁琐过程。比如在留存资金的填表模块中，尽量删除无用和不重要的信息，缩短用户填写信息的数量和时长，提高用户填写任务的完成效率。
5.视觉拆解1)官网常见的布局样式
(1)核心的布局。
版本居中布局是指页面的内容显示在页面的中央。第一焦点视图可以根据浏览器的宽度进行调整，但是有效显示区域是页面的中间区域。
这种布局风格通常基于前端实现，设计只需要一套方案。虽然屏幕利用率没有达到最高，但也不用考虑适配的问题，很少出现兼容性错误。是很多传统企业和政府网站经常采用的一种布局风格。也有很多企业是因为自身情况，自身内容比较单一，或者是开发资源的问题而采用这种布局。
这种布局方式的好处是对设计师和前端开发来说最简单。它是按照一个px大小的标准宽度设计的，低于显示屏宽度时显示在中间，两边留白。当超过屏幕宽度时，水平滑动，就不用考虑适配和兼容的问题了。
缺点也很明显。大屏幕的显示器不能很好的利用空间，浪费屏幕效果。屏幕小被遮挡的屏幕影响用户的浏览体验和阅读效率。
(2)适应性布局
这种布局风格考虑了不同屏幕尺寸的显示效果。在视觉风格上，我们可以明显感觉到这种布局会因为页面宽度的不同而呈现出不同的布局风格。
这种布局的优势恰恰是在固定布局之外，在不同尺寸的显示器中都能拥有最佳的屏幕效果和显示效果。缺点是在实际的项目实践中，对于设计来说，需要输出多个设计图纸和设计说明书。同时前端开发也面临着复杂的判断和条件。
(3)分屏布局
分屏布局的特点是一屏只显示一个关键信息，翻页时自动切换一屏，适合显示多个权重相同的信息。常见的应用场景包括奢侈品、电子产品、酒店和民宿官网。
这种布局风格的好处是信息非常聚焦，一屏诠释一个重点，让用户身临其境的浏览。缺点也很明显。单个屏幕的信息密度太低，需要用户主动下拉切换才能显示更多的信息。同时，这种布局并不具有普适性，仅限于某些特定行业以及为了实现某种品牌定位和风格。
6.内容密度选择紧凑、适中、松散的内容布局。同一屏幕尺寸显示的信息量在增加，适当的信息密度表现出不同的信息差异化。比如门户网站，作为平台的电商首页，商业诉求应该是在有限的空间内曝光最多的商家，为用户最大化浏览效率，最快定位目标入口，快速分发流量。然后，你可以采用紧凑的内容密度。
官网大部分企业展示的都是自己的核心产品和服务，没有那么多信息占据第一屏，所以适度的内容密度适合官网大部分企业。
松散的内容密度适合什么样的企业？当企业以在官网推广品牌影响力为目的，首页信息量相对较少，又想突出品牌调性的时候，这时候就用大量的图片和场景作为元素来诠释公司的品牌理念，给用户沉浸式的体验。比如电子产品官网，奢侈品行业，简单家居产品，民宿，酒店行业等等。
7.视觉表现风格B端企业和产品具有明显的行业特征。因此，在视觉风格上，既要体现行业性质、品牌风格和产品属性，又要避免同质化。要有视觉记忆点，拉开与同行业竞品的差距。To的产品用户都是比较理性的购买者，更注重品牌的权威性、公信力和价值。
随着我们B端市场产品的多样化，新兴产业的兴起和关注，设计趋势的更新迭代，开发技术的成熟，设计师发挥的空间更加自由灵活。下面是一些流行的官网视觉风格。
1)3D风
C4D、Blender等设计软件的流行，点燃了3D style在游戏行业和操作设计上的热度，并像野火一样逐渐占领了C端市场的高地，受到追捧。超现实的质感，立体感的空间感，如即时的视觉感受，确实会充盈表现力，带来强烈的视觉冲击和沉浸感。当Z时代逐渐成为时代主流，B端的一些企业也开始关注用户的喜好，设计师之间的较量也介入到B端的视觉表现中。
b端企业多在云产品、物联网、大数据、数字双胞胎等行业使用3D style。这类官网对视觉表现要求很高，但产品很难用具体的实物来表现。所以3D技术的成熟给这类企业的官网呈现带来了曙光。
比如在腾讯云官网的设计中，在Banner、图标、核心产品模块展示、业务场景应用中，3D元素完美表达了云平台的行业属性、具有科技感的产品特性、传达给用户的空间感。同时在第一个焦点使用了人机交互的交互效果，当鼠标悬停在PC上时，图形发生变化，交互反馈给用户良好的交互感。
腾讯云第一焦点用3D风塑造了云产品的具体形象，鼠标可以与之互动。
2)插图风格
还有就是产品实物展示的问题，但是基于行业性质、品牌定位、技术实现等原因，插画也是可以的。10年来，平面插画的设计深入人心，用插画的元素来表达抽象模糊的产品/服务，从而塑造品牌形象。
用图形化的方式直观地向用户传达信息，不仅降低了理解的门槛，也让品牌形象更加深入人心。比如像教育、人工智能、车载系统这样的系统，会打造一个IP形象，用具象化、拟人化的形象拉近与用户的距离，同时也传达了对品牌的定位和认知。
有了IP形象，你就可以在所有可以展示的场合，比如对话弹窗、错误提示、空状态等等，系统地表达情感化的设计。深化品牌形象，给用户深刻的品牌认知。
3)真实场景匹配
在官网的设计中文字搭配实景图也是很常见的。这种风格可以传达真实感，拉近与用户的距离，给用户信任感。比如一些传统行业，展现的是企业的实力和效率。家居酒店企业利用实景地图为用户营造沉浸式的氛围，舒适温馨的家的感觉，高级有调性的设计风格，可以直达用户内心的诉求。
官网，一个有科技产品的企业，也会喜欢展示产品的实物图片，这也抓住了用户的核心诉求。一些电子产品爱好者最关心的是产品本身。结合的形象
真实图片的设计风格对图片质量要求非常高。既要体现产品的核心价值和功能场景，又要说明品牌的定位和调性，构图如何呈现视觉美感，产品品质和质感的体现，传递的品牌形象。
8.品牌升级，设计语言系统落地。由于TO B企业的产品和服务成本普遍较高，在产品未知的线上平台，官网必须最大化透明品牌的行业知名度、业务稳定性等差异化优势，以强化用户心理中的购买决心。官网的整个设计语言体系应该包括品牌基因设计规范的多场景应用。
品牌升级不是草草换颜色换款式，优化logo等。而是在充分了解业务、用户、品牌的背景下，定义设计规则，落地设计元素。
品牌升级策略有其独特性，本文不赘述。在这里，我将详述设计规则应该如何实现。
一些设计团队为了应对不断的变化，采用一套“清晰、简洁、高效”的做法是很常见的，但这只是一个基本原则，过于宽泛，在实际项目中无法很好的应用。
设计原则应贴近业务，真实有效。比如工业行业的企业要突出其智能、安全、强大的产品定位，云平台的企业要突出其专业性、高效性、先进性。这是更贴近业务的设计法则，然后根据精准定位的关键词进行设计延伸。
避免设计元素同质化：图标、图片、文字设计等。应该和品牌结合起来找记忆点，让用户一眼就能认出来，留下深刻印象。比如IP形象的流行，衍生出一套设计语言，带给用户强烈的品牌记忆。
03数据验证，迭代优化在团队共同努力完成官网项目改版后，除了关注改版的业务目标和设计目标是否达到预期外，还要注意收集线上数据，与改版前的用户行为路径、PV/UV、停留时间、点击率等方面进行对比，看数据是否与预期设计有差异，并分析问题原因，给出优化方案，作为下一步优化的依据。
除了线上数据，如果进一步完善信息收集，可以通过问卷调查，明确用户画像，了解用户对新版本的满意度，有针对性的对线上问题进行研究。同时，在企业内部，可以收集运营、产研、营销等职能部门的建议和反馈。梳理需求，分析反馈的合理性，真假，对合理的意见和需求给出解决方案，与团队沟通优化迭代，从而进一步完善线上官网。
04官网最后写的修改项目是公司内部很多项目的一个缩影，很考验团队从战略分解到执行的能力。在此，希望每一个职能伙伴都有主人翁意识，有可靠的伙伴，为共同的目标热情积极建言，发挥自己的专业特长，认真负责，有极客精神，在有限的客观条件下，克服逆境，发挥凝聚力，最终的结果一定会带来可喜的反馈。同时，安利的每个人都可以写恢复。输出是最好的输入方式，项目的积累也会让你成为最能发挥价值的人，帮助你成长。
参考：
https://www.zcool.com.cn/article/ZMTEzNzkzMg==.超文本标记语言
https://mp.weixin.qq.com/s/_MOSy5v3JfW_ajIJB3kikg
https://jelly.jd.com/article/5fd59636afd56f0142e4bc1f
https://blog.csdn.net/YeChaDeChenFu/article/details/124493574
本文由@体验设计晓晓原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。
暂无讨论，说说你的看法吧
