導(dǎo)讀：Web站點(diǎn)在當(dāng)今許多產(chǎn)品體系中都扮演著非常重要的角色，即便在App橫行的今天亦是如此。與此同時(shí)，Web產(chǎn)品設(shè)計(jì)在時(shí)至今日各個(gè)產(chǎn)品人的日常工作中（無(wú)論是哪一細(xì)分領(lǐng)域的產(chǎn)品經(jīng)理），依然會(huì)是經(jīng)常打交道的領(lǐng)域，而懂得Web站點(diǎn)的產(chǎn)品設(shè)計(jì)，會(huì)成為產(chǎn)品經(jīng)理們必要的修行路徑。那么今天，我們就來(lái)著手解析一個(gè)常見(jiàn)課題，即Web站點(diǎn)眾多類型中一個(gè)非常常見(jiàn)的類型 – 導(dǎo)流型站點(diǎn)的產(chǎn)品設(shè)計(jì)。

一、導(dǎo)流型Web站概念

首先從概念上講，今天我們提及的導(dǎo)流型，是時(shí)至今日在眼下較為常見(jiàn)的一種Web站點(diǎn)類型，包括像知乎、Bilibili等產(chǎn)品的Web站點(diǎn)皆有所較為廣泛的應(yīng)用。

顧名思義，導(dǎo)流型Web站很大程度上，是為了服務(wù)向App導(dǎo)流而存在的，但同時(shí)又因?yàn)椴煌膱?chǎng)景需求或者是業(yè)務(wù)需要，在不同的端（Android/iOS/PC）下呈現(xiàn)不同的展示形態(tài)。特別需要注意的是，一個(gè)產(chǎn)品的Web站，在不同端下可能分屬導(dǎo)流型和非導(dǎo)流型Web站，例如Bilibili的移動(dòng)端Web站（導(dǎo)流型）和PC端Web站（非導(dǎo)流型），而一些產(chǎn)品的Web站則是純粹的導(dǎo)流型的，例如拼多多的移動(dòng)端+PC端Web站。

二、導(dǎo)流型Web站案例

1. 先看B站

圖示1 – B站移動(dòng)端Web站形態(tài)

從最簡(jiǎn)單的外觀層面上，大家可以先從圖示1中感知。以Bilibili站點(diǎn)為例，實(shí)際上為了服務(wù)不同的業(yè)務(wù)目標(biāo)，其移動(dòng)端的Web站點(diǎn)的外觀形態(tài)看似與App十分相像，但同時(shí)卻有許多關(guān)鍵差別，例如頂部的導(dǎo)航位置，就穿插著明確的品牌標(biāo)識(shí)和導(dǎo)流按鈕（下載App）。

同時(shí)在視頻觀看下方的視覺(jué)中心位，橫穿了大大的極其顯眼的導(dǎo)流按鈕（打開App，流暢又高清），而在下方視頻推薦列表（相關(guān)推薦）的各大視頻上，均在圖片右上角標(biāo)注了App的提示樣式，各個(gè)位置都在以各式姿勢(shì)提醒來(lái)訪者：“你將在App端（相比Web端）獲得更好的瀏覽體驗(yàn)，動(dòng)動(dòng)你的小手前往App吧~”

與此同時(shí)，在不同的User Agent訪問(wèn)下，我們可以看到，B站其實(shí)呈現(xiàn)的形態(tài)并不同，在PC瀏覽器訪問(wèn)時(shí)的展現(xiàn)策略如圖所示，PC站體現(xiàn)著強(qiáng)烈的服務(wù)導(dǎo)向，視頻的觀看就是在Web站點(diǎn)完成的，不必再?gòu)臑g覽器去往何方。

圖示2 – B站PC站點(diǎn)形態(tài)

2. 再看知乎

對(duì)比之下，知乎的形態(tài)相比Bilibili就略有差別，不同的業(yè)務(wù)需求會(huì)導(dǎo)致Web形態(tài)發(fā)生變化。如下方圖示3所展現(xiàn)的，B站的PC端Web站仍然是以完成服務(wù)本身為核心，但知乎的PC端Web站則采用了較強(qiáng)勢(shì)的引導(dǎo)策略（首屏指向登錄注冊(cè)），雖然最終是不妨礙用戶離開引導(dǎo)正常使用其服務(wù)。

而在移動(dòng)端，仔細(xì)觀察圖4可以發(fā)現(xiàn)，雖然整體策略相近，知乎仍然比B站在導(dǎo)流意向上更為強(qiáng)烈。首次訪問(wèn)問(wèn)大單頁(yè)就會(huì)嘗試調(diào)起App客戶端，同時(shí)給出底部浮層強(qiáng)烈暗示用戶使用App來(lái)訪問(wèn)內(nèi)容，即便消除了浮層，在內(nèi)容單頁(yè)上也使用了大量引導(dǎo)方式（例如繼續(xù)閱讀全文的遮蓋）提示用戶，意圖明顯，幾乎接近強(qiáng)制要求用戶打開App才能比較順利地使用產(chǎn)品。

圖示3 – 知乎產(chǎn)品的PC端Web站點(diǎn)展現(xiàn)

圖示4 – 知乎產(chǎn)品的移動(dòng)端Web站點(diǎn)展現(xiàn)

3. 三看拼多多

相比知乎，那么真正強(qiáng)制要求使用App，應(yīng)該說(shuō)是拼多多這一類的采用了強(qiáng)勢(shì)導(dǎo)流的方案來(lái)應(yīng)對(duì)移動(dòng)+PC端流量的產(chǎn)品。

實(shí)際上，觀察圖5、6可以看見(jiàn)，拼多多移動(dòng)端站點(diǎn)只提供了基本的服務(wù)入口（商家入駐、火車票、幫助中心，精彩活動(dòng)，精選專題等），點(diǎn)擊進(jìn)入商品列表之后，商品本身只了配合單一的App下載渠道，用戶并不能在Web站完全使用購(gòu)買商品的服務(wù)其本身，必須前往App內(nèi)進(jìn)行后續(xù)步驟。

與此同時(shí)其PC端Web站在提供貌似的電商頁(yè)面時(shí)，在關(guān)鍵節(jié)點(diǎn)引導(dǎo)了用戶前往掃碼下載App，也同樣是完全阻斷了用戶對(duì)于全流程服務(wù)的使用。

圖示5 – 拼多多的移動(dòng)端Web站點(diǎn)展現(xiàn)

圖示6 – 拼多多的PC端Web站點(diǎn)展現(xiàn)

中間小小總結(jié)，大家可以看見(jiàn)，各家在移動(dòng)端和PC端的Web站的導(dǎo)流形態(tài)的策略選擇上，各有偏好。偏好不同的來(lái)源原因，筆者認(rèn)為是各家的產(chǎn)品性質(zhì)和業(yè)務(wù)目標(biāo)不同導(dǎo)致的。就業(yè)務(wù)目標(biāo)上講，導(dǎo)流型站點(diǎn)在關(guān)鍵節(jié)點(diǎn)與位置均在UI上向用戶做出了使用App的請(qǐng)求，以此完成調(diào)動(dòng)拉高DNU+DAU的業(yè)務(wù)目標(biāo)。

但是像拼多多這類發(fā)展上打社交App分享裂變的思路，必然需要用戶在App端沉淀，那么PC端Web站的研發(fā)勢(shì)必?zé)o法進(jìn)入業(yè)務(wù)發(fā)展重點(diǎn)，也就設(shè)計(jì)成了當(dāng)前的樣式。而B站最早其本身就是從PC端Web站視頻產(chǎn)品一路發(fā)展而來(lái)的，其本身就有足量的場(chǎng)景和用戶需求在PC端Web站進(jìn)行視頻消費(fèi)，使得其自然不會(huì)對(duì)于PC端Web站進(jìn)行過(guò)多的阻斷式導(dǎo)流設(shè)計(jì)。知乎的情況其實(shí)跟B站會(huì)有更多的相近，不過(guò)多贅述。

這里PS值得一提的是，移動(dòng)端端Web瀏覽器還有一種特殊的瀏覽器，即內(nèi)嵌瀏覽器。此類瀏覽器以微信瀏覽器為代表，Web站的應(yīng)對(duì)策略重點(diǎn)在用戶發(fā)出打開的意圖和交互動(dòng)作之后，往往會(huì)引導(dǎo)用戶打開原生瀏覽器查看和進(jìn)行下一步。 不過(guò)，由于最近工信部重拳整治巨頭相互屏蔽問(wèn)題，這一塊的平臺(tái)政策和展示策略相信也會(huì)發(fā)生較多變化，我們等待整體環(huán)境沉淀后再行跟進(jìn)觀察。

三、導(dǎo)流型Web站產(chǎn)品設(shè)計(jì)基本思路

那么來(lái)到產(chǎn)品設(shè)計(jì)方面，當(dāng)你接手了一個(gè)相關(guān)導(dǎo)流項(xiàng)目時(shí)，從上方的分析中適當(dāng)引申的話，我們應(yīng)該如何應(yīng)對(duì)一個(gè)導(dǎo)流型的Web站的合理設(shè)計(jì)呢？下方配合原型圖作為示例進(jìn)行介紹。

實(shí)際上整體上看，站點(diǎn)布局上可以利用的幾個(gè)經(jīng)典設(shè)計(jì)位置去做引流，分別為：1、頂部固定位 2、常駐懸浮按鈕 3、底部彈層 4、核心Action Button上設(shè)置攔截點(diǎn) 5、輔助Action Button上設(shè)置攔截點(diǎn)

圖示7、頂部固定位、常駐懸浮按鈕

頂部固定下載App（圖示7）

在頂部站點(diǎn)Logo右側(cè)往往可以放置一個(gè)下載App的按鈕。點(diǎn)擊后可以發(fā)送APK或前往蘋果商店，同時(shí)前往打底引流頁(yè)面作為保底展示。

常駐懸浮打開App（圖示7）

一般在底部往往可以放置一個(gè)懸浮型的打開App的按鈕。用戶點(diǎn)擊后嘗試調(diào)起App，同時(shí)調(diào)用打底引流頁(yè)面。

圖示8 – 底部彈層（或彈窗）、核心Action Button上設(shè)置攔截點(diǎn)

底部彈層（圖示8）

比較強(qiáng)勢(shì)的一種做法是可以在用戶訪問(wèn)時(shí)直接給予彈層（彈窗）提示，引導(dǎo)用戶打開或者下載App，當(dāng)然這里也可以直接第一步代碼上執(zhí)行打開App，UI層的提示作為打底步驟。彈層上的兩項(xiàng)選擇，強(qiáng)化打開選項(xiàng)，繼續(xù)（在瀏覽器中）瀏覽僅僅作為一個(gè)弱化選項(xiàng)。

與此同時(shí)，彈層（或彈窗）可以配合其他設(shè)計(jì)樣式作為攔截組合，例如在核心Action Button上的攔截點(diǎn)點(diǎn)擊后調(diào)取彈層進(jìn)行提示。

核心Action Button上設(shè)置攔截點(diǎn)（圖示8）

很多時(shí)候?qū)Я鞯闹饕髁客肪褪窃诤诵腁ction Button上的攔截。對(duì)于Bilibili來(lái)說(shuō)可以是視頻正下方緊緊相連的『打開App，流暢又高清』。對(duì)于知乎來(lái)說(shuō)可以是『繼續(xù)閱讀全文』。

圖示9 – 輔助Action Button上設(shè)置攔截點(diǎn)（含示例1+示例2）

輔助Action Button上設(shè)置攔截點(diǎn)（圖示9）

除卻上方講的幾個(gè)位置之外，在剩余的用戶利益點(diǎn)，產(chǎn)品上仍然可以繼續(xù)鋪設(shè)輔助攔截點(diǎn)。案例可以是圖示9示例1中的視頻詳情頁(yè)下方的視頻推薦列表，每當(dāng)用戶嘗試點(diǎn)擊觀看TA認(rèn)為有興趣的視頻時(shí)，即可利用彈層提示引導(dǎo)用戶打開或下載App后再行使用服務(wù)。案例也可以是圖示9示例2中的文章推薦列表，每當(dāng)用戶嘗試點(diǎn)擊App內(nèi)查看或者互動(dòng)按鈕（例如點(diǎn)贊、回復(fù)等），同樣收束流程進(jìn)入引導(dǎo)提示。

四、結(jié)語(yǔ)

總結(jié)了看，其實(shí)無(wú)論在產(chǎn)品設(shè)計(jì)方案上如何取巧，實(shí)際上導(dǎo)流型Web站點(diǎn)的產(chǎn)品設(shè)計(jì)核心要義就是在Web上對(duì)服務(wù)過(guò)程適當(dāng)阻斷，同時(shí)在阻斷點(diǎn)通過(guò)一定交互和視覺(jué)上的設(shè)計(jì)提示將用戶引導(dǎo)到目的端（App），以便完成最終的后段服務(wù)和收獲用戶量。

上方的Demo設(shè)計(jì)更多偏向概念性的展現(xiàn)，沿著整體的核心要義上繼續(xù)深挖，相信我們?nèi)匀豢梢杂懈嗟钠嫠济钕雭?lái)創(chuàng)造導(dǎo)流方案。

最后希望文中的實(shí)際案例和原型示例加解說(shuō)的組成，能在實(shí)際工作中幫助到大家更進(jìn)一步了解Web站產(chǎn)品設(shè)計(jì)的特點(diǎn)，感謝閱讀！碼字是真的辛苦啊~

本文由 @菠蘿飯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。