中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

導讀：Web站點在當今許多產品體系中都扮演著非常重要的角色，即便在App橫行的今天亦是如此。與此同時，Web產品設計在時至今日各個產品人的日常工作中（無論是哪一細分領域的產品經理），依然會是經常打交道的領域，而懂得Web站點的產品設計，會成為產品經理們必要的修行路徑。那么今天，我們就來著手解析一個常見課題，即Web站點眾多類型中一個非常常見的類型 – 導流型站點的產品設計。

一、導流型Web站概念

首先從概念上講，今天我們提及的導流型，是時至今日在眼下較為常見的一種Web站點類型，包括像知乎、Bilibili等產品的Web站點皆有所較為廣泛的應用。

顧名思義，導流型Web站很大程度上，是為了服務向App導流而存在的，但同時又因為不同的場景需求或者是業務需要，在不同的端（Android/iOS/PC）下呈現不同的展示形態。特別需要注意的是，一個產品的Web站，在不同端下可能分屬導流型和非導流型Web站，例如Bilibili的移動端Web站（導流型）和PC端Web站（非導流型），而一些產品的Web站則是純粹的導流型的，例如拼多多的移動端+PC端Web站。

二、導流型Web站案例

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站的應對策略重點在用戶發出打開的意圖和交互動作之后，往往會引導用戶打開原生瀏覽器查看和進行下一步。 不過，由于最近工信部重拳整治巨頭相互屏蔽問題，這一塊的平臺政策和展示策略相信也會發生較多變化，我們等待整體環境沉淀后再行跟進觀察。

三、導流型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內查看或者互動按鈕（例如點贊、回復等），同樣收束流程進入引導提示。

四、結語

總結了看，其實無論在產品設計方案上如何取巧，實際上導流型Web站點的產品設計核心要義就是在Web上對服務過程適當阻斷，同時在阻斷點通過一定交互和視覺上的設計提示將用戶引導到目的端（App），以便完成最終的后段服務和收獲用戶量。

上方的Demo設計更多偏向概念性的展現，沿著整體的核心要義上繼續深挖，相信我們仍然可以有更多的奇思妙想來創造導流方案。

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

本文由 @菠蘿飯 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。