营销知识
深度剖析国内外互联网业内动态,分享产品设计、中小企业网络营销、网络营销资源共享、产品运营、产品市场和项目管理等专业产品知识
交流学习
通过B站/知乎/拼多多,总结营销型网站设计

1. B 站

图示 1 – B 站移动端 Web 站形态

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

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

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

图示 2 – B 站 PC 站点形态

2. 知乎

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

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

图示 3 – 知乎产品的 PC 端 Web 站点展现

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

3. 拼多多

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

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

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

图示 5 – 拼多多的移动端 Web 站点展现

图示 6 – 拼多多的 PC 端 Web 站点展现

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

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

这里 PS 值得一提的是,移动端端 Web 浏览器还有一种特殊的浏览器,即内嵌浏览器。此类浏览器以微信浏览器为代表,Web 站的应对策略重点在用户发出打开的意图和交互动作之后,往往会引导用户打开原生浏览器查看和进行下一步。 不过,由于最近工信部重拳整治巨头相互屏蔽问题,这一块的平台政策和展示策略相信也会发生较多变化,我们等待整体环境沉淀后再行跟进观察。

营销型网站设计基本思路

那么来到产品设计方面,当你接手了一个相关项目时,从上方的分析中适当引申的话,我们应该如何合理设计一个营销型网站呢?下方配合原型图作为示例进行介绍。

实际上整体上看,站点布局上可以利用的几个经典设计位置去做引流,分别为:1、顶部固定位 2、常驻悬浮按钮 3、底部弹层 4、核心 Action Button 上设置拦截点 5、辅助 Action Button 上设置拦截点

图示 7、顶部固定位、常驻悬浮按钮

顶部固定下载 App(图示 7)

在顶部站点 Logo 右侧往往可以放置一个下载 App 的按钮。点击后可以发送 APK 或前往苹果商店,同时前往打底引流页面作为保底展示。

常驻悬浮打开 App(图示 7)

一般在底部往往可以放置一个悬浮型的打开 App 的按钮。用户点击后尝试调起 App,同时调用打底引流页面。

图示 8 – 底部弹层(或弹窗)、核心 Action Button 上设置拦截点

底部弹层(图示 8)

比较强势的一种做法是可以在用户访问时直接给予弹层(弹窗)提示,引导用户打开或者下载 App,当然这里也可以直接第一步代码上执行打开 App,UI 层的提示作为打底步骤。弹层上的两项选择,强化打开选项,继续(在浏览器中)浏览仅仅作为一个弱化选项。

与此同时,弹层(或弹窗)可以配合其他设计样式作为拦截组合,例如在核心 Action Button 上的拦截点点击后调取弹层进行提示。

核心 Action Button 上设置拦截点(图示 8)

很多时候导流的主要流量通路就是在核心 Action Button 上的拦截。对于 Bilibili 来说可以是视频正下方紧紧相连的『打开 App,流畅又高清』。对于知乎来说可以是『继续阅读全文』。

图示 9 – 辅助 Action Button 上设置拦截点(含示例 1+ 示例 2)

辅助 Action Button 上设置拦截点(图示 9)

除却上方讲的几个位置之外,在剩余的用户利益点,产品上仍然可以继续铺设辅助拦截点。案例可以是图示 9 示例 1 中的视频详情页下方的视频推荐列表,每当用户尝试点击观看 TA 认为有兴趣的视频时,即可利用弹层提示引导用户打开或下载 App 后再行使用服务。案例也可以是图示 9 示例 2 中的文章推荐列表,每当用户尝试点击 App 内查看或者互动按钮(例如点赞、回复等),同样收束流程进入引导提示。