B端产品经理-官网设计总结

官网，代表着一个企业的门户形象，或者称之为企业的另一张名片，记载企业的概况和发展历程。好的官网，能够充分展现其内涵，给人以美的感受；而糟糕的官网，不仅不能有效表达企业的愿景，更有可能将合作和发展机会拒之门外；至于没有官网，在这个信息数据化的时代，无疑意味着寸步难行。对一个企业来说，官网是最具性价比的长期广告。

本文以B端产品经理的角度，从产品规划-产品设计-产品验证三个阶段来总结一下官网设计。

即将官网当做一个产品，从企业和顾客体验的角度出发，围绕“目的、定位、人群和功能”要素进行设计，并用迭代的思路不断改进。

产品规划

1、需求分析

官网，是企业面向大众的窗口，具有传达给阅读者企业的形象，展现自身实力，展示产品信息以及解决用户反馈疑问等诸多功能。

不过，在规划官网的时候，需要了解该企业的需求，从而对功能进行优先级的排序，通过与客户的沟通，清楚该官网所需要展现的最主要的内容是什么。

顾客进入官网，能够对公司主营业务一目了然，最直接有效地获取想要了解的信息，减少不必要的麻烦。

对于初创公司新上线的官网，需要以最小最优产品（MVP）方式呈现公司的核心业务，和其他公司差异化；
优秀的初创公司会在设计上呈现高度的个性化，抓住用户的注意力，体现独具风格的产品服务，充满活力与惊喜；
对于较为成熟的公司，需要细化单个产品线的内容，将各个垂直产品线做到精致，例如针对一个产品就可以拥有一个官网。
面向客户，展示公司的产品，需要详细介绍主营产品的信息，突出优势点，展示其最有竞争力的内容。
面向企业，介绍公司业务能力，体现公司的实力，方便寻求商务合作。
品牌文化，美观，大气，简洁的官网整体形象，往往决定了公司在顾客中的形象，高端的官网往往增加顾客对公司的信任。

2、目标人群

最终使用产品的用户（包括企业客户和大众用户），这一类人群重视产品的使用感受；
投资方和业务相关人群，可能有进一步进行企业合作洽谈的机会；
面试人群，会浏览官网形成产品印象，也就是说官网是吸纳人才的第一道门。

3、总体定位

虽然各家企业的发展业务不同，但官网总离不开以下信息：核心业务，优势，产品简介，公司简介等基础信息。

参考现有诸多优秀的网站设计，争取做到人无我有，人有我优，人优我精即可。

以比亚迪汽车官网为例，此次官网项目主要内容可以总结为几点：优化视觉表现；突出营销业务；丰满产品线。

产品设计

1、产品风格

首先，需要根据产品或品牌的调性确定产品风格，强化产品优势。

官网风格应该与企业文化保持一致性，官网的风格只是企业文化的一种表现方式,

例如丸山正宏的官网，设计者通过简洁的首页设计，让其可以冲分的展示每一款产品的特点和特色，体现了品牌对于产品本身的执着与重视。值得一提的是在表达产品与人的关系上采用了大胆的交互设计，通过不同产品与不同使用者的匹配，带出品牌理念的同时也表达出令人意想不到的“惊喜阅读感”。

MASAHIROMARUYAMA官网

https://masahiromaruyama.com/#/erace

苹果官网则秉承着“less is more”的简约风，旗下系列产品就像精致的工艺品，黑白灰的色调搭配宽屏高清主图，传递优雅、极致、禅式的理念，营造极佳的用户体验。字重转向识别力强但是乏味的Medium+Boid字重，但是在官网的浏览过程中增加了巨量的特效，来表达排版过程和增加趣味性，UI设计回归精致排版，效率第一的本质。

苹果官网

https://www.apple.com/cn/macbook-air/

比亚迪官网采用的大图片与全屏背景的设计，倍感简约大方，车型展示模块的高交互操作与排版布局搭配，更能增加用户浏览时耳目一新的体验感。 高质量的精修产品图片、产品视频、抓人的文案、阅读舒适的排版无不在顾客心中提升着品牌的档次，激发购买欲。

比亚迪官网

http://www.bydauto.com.cn/auto/index.html

2、产品框架

产品框架建立的流程分为：

拆解功能 → 确定功能优先级 → 聚合重组

将官网所有的功能平铺成以下关键词：首页，全部车型，购车服务，金融服务，服务介绍，维修保养，迪粉汇服务，纯正配件，充电介绍，爱车养护知识，动态资讯，品牌活动，关于我们，加入比亚迪，校园招聘，经销商加盟，技术品质，经销商加盟。

做网站和写文章一样，也是从结构开始构思的，第一章节写什么，第二章节写什么……最后一章写什么；网站的一级页面（首页）展示哪些内容，二级页面展示哪些内容，三级页面展示哪些内容，大的框架定好之后，再针对每个页面进行细节设计。

在产品设计中，每个功能都突出，其实就等于没重点 。由于互联网中信息量极其庞大，为了向用户展示更多有价值的信息，搜索引擎会优先抓取每个网站中相对重要的页面(即权重较高的页面)，页面的权重按照一级页面> 二级页面> 三级页面> 四级页面> …… 依次往后递减。页面层级越高，用户的到达率越低，因此网站的层级不宜设计得过深，清晰的网站结构可以帮助用户快速获取所需信息。

比如我们需要明确最重要的内容是向顾客展示产品信息，即全部车型一栏，最后提炼出来的产品框架如下：

3、核心页面设计

首页设计：

重点展现企业的愿景、产品的定位、实力
公司的业务介绍，使用户有顶层的感受
把首页当成整个官网各个菜单功能的概述，并提供便捷入口，即目录式的指引
展示最核心的信息，直击大部分浏览者的需求内容

首页布局：

4、导航

品牌网站的导航是需要精心设计的，好的导航是用户的指路牌，它总是能带领用户去到想去的页面。

主导航：

下拉的图文并茂的导航是首选，普通的文字导航不够直观，图片可以让用户感受到产品的外形和颜色，搭配文字使用容易形成记忆，发挥视觉锤语言钉的效果。比亚迪的导航栏，相对于上方固定，且占比较小，方便客户在浏览时，随时跳转其他页面。

切忌没有导航栏或其他悬浮按钮的情况下，单一页面内，浏览内容过多。

面包屑导航：

面包屑导航的概念来源于一个有趣童话故事，迷路的小孩利用撒下的面包屑追溯回家的路。面包屑导航可以让用户了解当前所处的网站位置，以及当前页面在整个网站中的位置。面包屑导航一般出现在网站的主导航下面或者网站底部导航的上面。

网站底部导航：

或许有人会有疑问，网站的顶部已经有导航了，为什么底部还要再设计一个呢？

其实，网站的底部导航是很有必要的。相较于顶部导航，底部导航是全部铺开的，当我们浏览到网站底部的时候，可以直接切换到想去的页面，十分便捷。

底部导航相对于，顶部导航来说，链接更全更完整，可以将一些功能内容小众且无法放在顶部的链接，置于底部。

内部链接：

有些网站的页面很多，但是产品经理、设计师在设计页面的时候，没有将这些页面联系起来，从而出现了网页孤岛。孤岛页面带来的不良影响是，如果当前页面做得平平淡淡，没有用户需要的信息，用户会离开网站。

网站页面的关键词内链密度建议保持在6%~8%之间，在当前页面平平淡淡或者十分吸引人的时候，可以引导用户点击关键词内链，去更多的页面，让用户在网站里流连忘返。

一般内链的设计方法为：同类产品推荐、查看所有产品／文章、上一个产品／文章、下一个产品／文章以及各类导航等。

5、产品列表页面

产品列表页的设计可以根据企业的产品线来设计，如果产品线多、产品型号多，就可以设计成具有筛选功能的产品列表页。用户可以根据不同的品类、型号、价格、功能、参数去选择想要的产品。

如果产品型号少，则可以参考苹果国际品牌官网的做法，为Mac、iPad、iPhone、Watch、Music5条产品线的产品，分别设计产品类表页。

以iPhone的产品列表页为例，这个页面展示了：iPhone X、iPhone 8、机型比较、Apple Pay 刷公交功能、增强现实功能、iOS12、iPhone焕新计划、iPhone配件等，这些都是与iPhone产品相关的内容——新产品、新功能、活动、配件信息。

在GA谷歌分析中，发现机型比较功能（产品比较功能）的使用率很高，确实根据字面上的意思我们看不出来iPhone X和iPhone 8的区别，但是有了产品比较功能，用户可以一目了然的看出两个产品之间的差异。对于具有选择困难症的用户来说，这无疑可以辅助他们进行购买决策。

产品比较功能需要产品经理和设计师针对产品的卖点和参数进行筛选，通过竞品调研、用户需求分析等方法，找出用户感兴趣的比较项。

6、产品详情页面

产品详情页是设计的重中之中，因为用户是通过详情页来了解产品，那么我们如何来提高商品详情页的购买转化率呢？

高质量的精修产品图片、产品视频、抓人的文案、阅读舒适的排版……这些都提升页面的转化率的制胜法宝。

商品详情页由大量的视频、图片和文字组成，整个页面的文件往往都很大，打开网页时需要加载很久，我们应该如何解决呢？

必须对图片进行压缩处理，既要文件小（每张图片不超过100mb），又要保持清晰，渐进式图片是最好的选择。渐进式图片带来的好处是——让用户还没有下载完图片，就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验。

优化前：打开网页时，图片是一条一条加载出来的，看不到图片的全貌。

优化后：打开网页时，图片可以全部展示出来，渐渐的从模糊到清晰，网站加载速度快时，根本察觉不到模糊的状态。

7、线上预约

当用户通过官网了解到品牌的信息和产品的信息，决定购买的时候，我们需要引导他们进行购买，优化购买体验，可以提高产品的购买转化率。

有些国际品牌官网是具有电商购买功能的，有些没有。建设和维护一套全球的电商系统的成本是十分高昂的，而且现在很多用户习惯在亚马逊、天猫之类的第三方平台购买。

本文介绍的是比亚迪不带电商功能的情况下，如何引导用户进行线上预约和线下的购买。

8、其他

售后页面：

售后做的好，可以促进用户的产品复购率及分享率。一般官网可以提供售后电话、在线售后聊天软件、售后邮箱、AI售后机器人、说明书、如何使用视频、FAQ等功能。官网上自助的售后服务，可以帮助一大部分的用户解决问题，节约了大量的人力成本。

搜索页面：

有目的性的用户一般会使用搜索功能，比如他想了解某型号的产品，在使用的过程中遇到了问题等等，这些都可以通过搜索功能得到答案。

在设计搜索功能之初，我们就需要制定好搜索规则：

全站的文字都是可以搜索的；
针对搜索结果进行分类，可以分为产品类、资讯类、售后类等；
搜索框内关键词推荐；
搜索结果为0时，推荐项设置，预留联系方式，方便进一步解决用户问题。

图字分离& 语言包：

国际品牌官网的大部分是由图片和文字组成的，建议图片和文字分离，不要把文字做到图片上，而是将文字放在代码里。这样不仅有利于SEO搜索引擎的爬取，也有利于语言包的制作。

聆听用户的声音：

通过网站的在线反馈功能、用户搜索的内容、GA网站数据分析可以收集到用户的需求，定期的收集和分析用户的需求，进行官网的迭代优化，这是一个持续的过程。

产品验证

功能路径：功能是否有欠缺？跳转路径是否正确？
文案：语句是否通顺，不存在歧义？
风格UI：页面主图和配图的风格是否和模块定位相对应？布局和设计稿是否有出入？
兼容性：考虑移动端的适配问题，页面是否会错乱？
- 无适配：无适配不仅仅是布局和内容没有做适配，交互动作也没有做适配。原本为pc端设计的网页在手机端往往会缩小，然后变形，大部分操作会失效。
- 极简适配：极简适配就是又想做适配，又因为其他种种原因，所以对内容进行删减直到剩下最后一个页面，用一个页面去呈现最基本的产品介绍以及下载按钮。
- 适配：做了适配的官网会在手机端有良好的表现。当然，Pc端的官网有时候体量太大，在适配到手机端的时候会有删减。
性能：页面跳转时间、图片加载时间是否太长？
监控：页面是否正常运行，出现异常则记录该模块异常信息。

写在最后

“夫五指之更弹，不若卷手之一挃”，本文只是站在产品角度去打造官网，真正上线还需要整个项目团队的支持，一个高端大气上档次的官网离不开一个优秀的团队的齐心努力！