值得一学的导流型Web站点设计 .docVIP

值得一学的导流型Web站点设计

导读：Web站点在当今许多产品体系中都扮演着非常重要的角色，即便在App横行的今天亦是如此。与此同时，Web产品设计在时至今日各个产品人的日常工作中（无论是哪一细分领域的产品经理），依然会是经常打交道的领域，而懂得Web站点的产品设计，会成为产品经理们必要的修行路径。那么今天，我们就来着手解析一个常见课题，即Web站点众多类型中一个非常常见的类型#8211;导流型站点的产品设计。

一、导流型Web站概念

首先从概念上讲，今天我们提及的导流型，是时至今日在眼下较为常见的一种Web站点类型，包括像知乎、Bilibili等产品的Web站点皆有所较为广泛的应用。

顾名思义，导流型Web站很大程度上，是为了服务向App导流而存在的，但同时又因为不同的场景需求或者是业务需要，在不同的端（Android/iOS/PC）下呈现不同的展示形态。特别需要注意的是，一个产品的Web站，在不同端下可能分属导流型和非导流型Web站，例如Bilibili的移动端Web站（导流型）和PC端Web站（非导流型），而一些产品的Web站则是纯粹的导流型的，例如拼多多的移动端+PC端Web站。

二、导流型Web站案例

1.先看B站

图示1#8211;B站移动端Web站形态

从最简单的外观层面上，大家可以先从图示1中感知。以Bilibili站点为例，实际上为了服务不同的业务目标，其移动端的Web站点的外观形态看似与App十分相像，但同时却有许多关键差别，例如顶部的导航位置，就穿插着明确的品牌标识和导流按钮（下载App）。

同时在视频观看下方的视觉中心位，横穿了大大的极其显眼的导流按钮（打开App，流畅又高清），而在下方视频推荐列表（相关推荐）的各大视频上，均在图片右上角标注了App的提示样式，各个位置都在以各式姿势提醒来访者：“你将在App端（相比Web端）获得更好的浏览体验，动动你的小手前往App吧~”

与此同时，在不同的UserAgent访问下，我们可以看到，B站其实呈现的形态并不同，在PC浏览器访问时的展现策略如图所示，PC站体现着强烈的服务导向，视频的观看就是在Web站点完成的，不必再从浏览器去往何方。

图示2#8211;B站PC站点形态

2.再看知乎

对比之下，知乎的形态相比Bilibili就略有差别，不同的业务需求会导致Web形态发生变化。如下方图示3所展现的，B站的PC端Web站仍然是以完成服务本身为核心，但知乎的PC端Web站则采用了较强势的引导策略（首屏指向登录注册），虽然最终是不妨碍用户离开引导正常使用其服务。

而在移动端，仔细观察图4可以发现，虽然整体策略相近，知乎仍然比B站在导流意向上更为强烈。首次访问问大单页就会尝试调起App客户端，同时给出底部浮层强烈暗示用户使用App来访问内容，即便消除了浮层，在内容单页上也使用了大量引导方式（例如继续阅读全文的遮盖）提示用户，意图明显，几乎接近强制要求用户打开App才能比较顺利地使用产品。

图示3#8211;知乎产品的PC端Web站点展现

图示4#8211;知乎产品的移动端Web站点展现

3.三看拼多多

相比知乎，那么真正强制要求使用App，应该说是拼多多这一类的采用了强势导流的方案来应对移动+PC端流量的产品。

实际上，观察图5、6可以看见，拼多多移动端站点只提供了基本的服务入口（商家入驻、火车票、帮助中心，精彩活动，精选专题等），点击进入商品列表之后，商品本身只了配合单一的App下载渠道，用户并不能在Web站完全使用购买商品的服务其本身，必须前往App内进行后续步骤。

与此同时其PC端Web站在提供貌似的电商页面时，在关键节点引导了用户前往扫码下载App，也同样是完全阻断了用户对于全流程服务的使用。

图示5#8211;拼多多的移动端Web站点展现

图示6#8211;拼多多的PC端Web站点展现

中间小小总结，大家可以看见，各家在移动端和PC端的Web站的导流形态的策略选择上，各有偏好。偏好不同的来源原因，笔者认为是各家的产品性质和业务目标不同导致的。就业务目标上讲，导流型站点在关键节点与位置均在UI上向用户做出了使用App的请求，以此完成调动拉高DNU+DAU的业务目标。

但是像拼多多这类发展上打社交App分享裂变的思路，必然需要用户在App端沉淀，那么PC端Web站的研发势必无法进入业务发展重点，也就设计成了当前的样式。而B站最早其本身就是从PC端Web站视频产品一路发展而来的，其本身就有足量的场景和用户需求在PC端Web站进行视频消费，使得其自然不会对于PC端Web站进行过多的阻断式导流设计。知乎的情况其实跟B站会有更多的相近，不过多赘述。

这里PS值得一提的是，移动端端Web浏览器还有一种特殊的浏览器，即内嵌浏览器。此类浏