B站產品需求文檔
本文從產品結構、全局說明、流程圖、頁面邏輯圖、頁面詳細說明頁五個角度,對年輕人喜歡的B站進行了全方位的分析,希望對你有幫助。
B站定位是多元化視頻平臺,主要功能是視頻播放,圍繞視頻播放構建的用戶體驗十分完善,本文只選取常用的視頻播放等功能進行分析。
一、文檔綜述
1.1 文檔屬性
1.2 產品簡介
產品類型:視頻平臺
產品slogan: 你感興趣的視頻都在B站
產品介紹:是一個圍繞用戶、創作者和內容,構建出一個源源不斷產生優質內容的生態系統的多元文化社區。
產品定位: 中國年輕世代高度聚集的文化社區和視頻平臺
1.3 產品用戶
用戶活躍程度:
2020年5月19日,B站公佈了截至2020年3月31日的第一季度未經審計的財務報告。財報顯示,B站2020年一季度,月均活躍用戶達到1.72億,同比增長70%;移動端月均活躍用戶達到1.56億,同比增長77%;日均活躍用戶達到5100萬,同比增長69%。
在用戶基數大幅增加的基礎上,社區活躍度也進一步躍升。尤其是用戶日均使用時長攀升至87分鐘,環比提升10分鐘;而社區月均互動數則高達49億次,爲去年同期的三倍之多。
1.4 需求總結
二、產品結構
2.1 產品功能結構圖
右擊,在新標籤頁中打開即可查看
2.2 產品信息架構圖
右擊,在新標籤頁中打開即可查看
三、全局說明
3.1 登錄頁面
權限說明:
登錄狀態下可以進行所有操作。
未登錄狀態下進入APP,除了可以觀看視頻,其他所有功能都不能進行。
右擊,在新標籤頁中打開即可查看
頁面名稱:登錄頁面
頁面入口:未登錄狀態下,在“我的”頁面左上角顯示“點擊登錄”,或者使用除了觀看視頻之外的所有的交互功能時,會自動跳轉進入登錄頁面
頁面功能:實現兩種方式的登錄——手機驗證碼登錄、密碼登錄
頁面邏輯內容及其交互詳細說明:
手機驗證碼登錄方式:
- 初始界面下,呈現國家/地區選擇框、手機號碼輸入欄、驗證碼輸入欄、獲取驗證碼按鈕、驗證登錄按鈕。
- 手機號碼默認+86,輸入限制16位數字,當輸入非數字內容時,輸入欄不予顯示;輸入數字後,獲取驗證碼按鈕亮起;輸入錯誤格式、無效號碼時,點擊“獲取驗證碼”,彈出“手機號格式錯誤”。
- 點擊“獲取驗證碼”後,會彈出一個滑圖驗證,“獲取驗證碼”按鈕變爲“60s後重試”,倒計時結束前不能在獲取驗證碼。
- 驗證碼正確,完成登錄,進入“我的”頁面。
密碼登錄:
- 初始界面下,右上方有密碼登錄按鈕,點擊進入密碼登錄界面。
- 登錄界面,呈現賬號輸入欄、密碼輸入欄、忘記密碼按鈕、註冊按鈕、登錄按鈕。
- 賬號輸入欄支持輸入手機號與郵箱,且沒有字數限制、字符類別限制;密碼輸入欄同上也沒有任何限制,輸入密碼時輸入的字符會短暫的顯示2s,然後隱藏爲“*”。
- 點擊註冊,進入“手機號登陸註冊”頁面,通過手機號驗證註冊賬號。
- 忘記密碼時,點擊“忘記密碼”按鈕,會彈出“已綁定手機號”、“已綁定郵箱”的選項,點擊前者,跳轉進入手機號驗證登錄方式,點擊後者,通過綁定郵箱重置密碼。
- 賬號密碼登錄成功後,完成登錄,進入“我的”頁面。
3.2 網絡環境
此爲在沒有wifi,打開了數據的狀態下,橫屏豎屏播放的頁面。
流程,先關閉wifi、打開數據,再點進視頻。
結果,播放頁面會提醒流量消耗。
右擊,在新標籤頁中打開即可查看
此爲在沒有網絡狀態下,TAB欄的五個頁面
流程,先關閉網絡,再打開APP。
結果,前兩個TAB頁面不能顯示,後三個TAB頁面可以正常顯示。
右擊,在新標籤頁中打開即可查看
3.3 鍵盤輸入
只有在手機號驗證登錄時,點擊手機號輸入欄/驗證碼輸入欄,會彈出數字鍵盤。
其餘所有的輸入都是彈出字母鍵盤。
右擊,在新標籤頁中打開即可查看
在豎屏播放頁面,右下角有一個笑臉按鈕,點擊後,底側彈出表情包鍵盤。
在字母鍵盤中,也可以點擊笑臉按鈕,切換至表情包鍵盤。
右擊,在新標籤頁中打開即可查看
3.4 評論框
右擊,在新標籤頁中打開即可查看
頁面名稱:評論頁面
頁面入口:在TAB欄“首頁”下,任一標籤頁面內,點擊右上角“消息”按鈕,進入消息頁面
頁面結構:
- 評論切換欄
- 用戶信息欄
- 用戶的評論內容
- 對用戶評論的反饋
- 二次評論
- 評論欄
頁面邏輯內容及其詳細交互:
從左到右,發送彈幕、彈幕開關。
發送彈幕,點擊該按鈕,按鈕變爲“彈幕輸入中”,同時底側彈出鍵盤,可以進行彈幕的發送。
彈幕開關,默認爲開啓彈幕;點擊該圖標,圖標右下角顯示“禁止“圖標,關閉彈幕;再次點擊,復原。
評論切換欄,默認“按熱度”(熱度按多項指標計算),所有用戶的評論按熱度從大到小排序;點擊該按鈕,變爲”按時間“,所有用戶的評論按時間,最近發佈的排序靠前。
用戶信息欄:從左到右,用戶信息、關注。
顯示用戶頭像、名稱、賬號等級、評論時間(只有豎屏播放-評論框內,顯示了用戶逇賬號等級)
關注,在“按熱度”下,排序靠前的三個用戶會顯示“關注”按鈕;如果是該視頻的up主的評論,不管“按熱度”、“按時間”,都會顯示。
點擊後變爲灰色的“已關注”,然後再次點擊,底側彈出窗口,點擊”取消關注“即可取消關注。
用戶的評論內容,點擊此範圍,底側彈出鍵盤,進行對該用戶評論內容的二次評論。
對用戶評論的反饋,從左到右,點贊、不喜歡、分享、評論、拉黑按鈕。
- 點贊,按鈕右方顯示點贊數,點擊該按鈕,點贊數加1,同時按鈕與點贊數變紅,如果再次點擊,恢復原狀。
- 不喜歡,點擊後,按鈕變紅,如果再次點擊,恢復原狀(同時點贊與不喜歡不能同時點擊,點擊其中一個,將取消之前對另一個的點擊)。
- 分享,點擊後,底側彈出分享框,可將該用戶評論分享至第三方平臺。
- 評論,點擊後,底側彈出鍵盤,進行對該用戶評論內容的二次評論。
- 拉黑,點擊後,從該按鈕彈出窗口,可選擇“加入黑名單”/“舉報”:點擊前者,將彈出警示,點擊”確認“可拉黑該用戶;點擊後者,右側彈出舉報頁面,必須且只能選擇一個舉報的類型,然後點擊“提交”按鈕可進行舉報。
二次評論:
此欄顯示了用戶對用戶評論的評論,包括用戶名稱、評論內容,最下方是二次評論的數量。點擊此欄,底側彈出二次評論框,展示所有的二次評論。
評論欄:從左到右,評論欄、表情包。
- 評論欄,點擊後,底側彈出鍵盤,進行對該視頻的評論(可點擊表情包按鈕,切換至表情包鍵盤)。
- 表情包,點擊後,底側彈出表情包鍵盤,可自由選擇多種表情包。選擇完畢後,可點擊鍵盤按鈕,切換至普通鍵盤,輸入文字,完成對視頻的評論。
3.5 消息頁
右擊,在新標籤頁中打開即可查看
頁面名稱:消息頁面
頁面入口:在“首頁”任一標籤下,點擊右上角消息按鈕,右側彈出消息頁面
頁面結構:通訊錄區、互動區、消息區
頁面邏輯內容及其交互詳細說明:
通訊錄區:
左邊的爲通訊錄按鈕,點擊後,右側彈出通訊錄頁面。
右邊的爲消息設置按鈕,點擊後,彈出彈窗,從上到下分別爲“消息設置”、“up主”小助手、“應援團消息助手”,點擊將進入相應頁面。
互動區:
此處是一個互動消息的集中,可以按照不同的互動類型查看與個人有關的互動消息。從左到右描述:
- 回覆我的:點擊後,右側彈出頁面,裏面從上到下按時間順序展示了其他用戶對於我發表的評論的回覆。點擊任一回復框,將跳轉進入該回復所在的頁面。
- @我:點擊後,右側彈出頁面,裏面從上到下按時間順序展示了其他用戶發表的對@我的評論。點擊任一評論框,將跳轉進入該回復所在的頁面。
- 收到的贊:點擊後,右側彈出頁面,裏面從上到下按時間順序展示了其他用戶對於我的評論的點贊。點擊任一回復框,將跳轉進入該回復所在的頁面。
- 系統通知:點擊後,右側彈出頁面,裏面從上到下按時間順序展示了系統通知。
聊天列表:從上到下按時間順序展示了用戶對我發送的私信,點擊任一私信欄,右側彈出與該用戶的對話頁面,類似於社交APP的對話。
3.6 分享頁
3.6.1 豎屏分享頁面
右擊,在新標籤頁中打開即可查看
3.6.2 橫屏分享頁面
在橫批播放頁面,點擊分享按鈕,底側彈出分享框,同時頁面的其餘功能按鈕消失,變爲播放視頻的頁面效果。
分享的功能同豎屏一致。
3.7 播放頁面交互
此部分主要是考察,在播放視頻時,單擊/雙擊頁面帶來的交互及頁面變化。
3.7.1 豎屏播放頁面交互
右擊,在新標籤頁中打開即可查看
3.7.2 橫屏播放頁面交互
右擊,在新標籤頁中打開即可查看
3.8 播放頁面功能
此部分主要是考察,在播放視頻時,播放頁面上的各種功能。
3.8.1 豎屏頁面播放功能
右擊,在新標籤頁中打開即可查看
3.8.2 橫屏頁面播放功能
右擊,在新標籤頁中打開即可查看
四、產品流程圖
4.1 登錄註冊流程
右擊,在新標籤頁中打開即可查看
4.2 觀看視頻/購物流程
右擊,在新標籤頁中打開即可查看
五、產品頁面邏輯圖
右擊,在新標籤頁中打開即可查看
右擊,在新標籤頁中打開即可查看
六、頁面詳細說明頁
6.1 首頁頁面
右擊,在新標籤頁中打開即可查看
頁面名稱:首頁-推薦頁面
頁面入口:在首頁,第二欄位於“推薦”時。每次打開APP,會自動跳入首頁-推薦頁面
頁面結構:搜索區;標籤區;輪播區;展示區;TAB欄
頁面邏輯內容及其交互詳細說明:
整個頁面:上拉可刷新
搜索區:
- 位於頁面最頂端,從左到右描述:
- 左邊是用戶頭像,點擊後,跳轉進入“我的”頁面。
- 中間是搜索欄,點擊後,右側滑出搜索頁面。
- 右邊是消息按鈕,點擊後,右側滑出消息頁面,詳見上文消息頁面。
標籤區:
- 該部分可以選擇進入不同頁面,每次打開APP,會自動跳入推薦頁面。
- 在推薦頁面,“推薦”二字加粗、變紅,底部有一紅線。
- 切換頁面的交互方式有兩種,左右滑動以及直接點擊“直播”/“熱門”等按鈕。
輪播區:
- 三個banner輪流向左滑動,每次展示持續2s。
- 右下角有三個圓點,當展示某一banner時,對應的圓點將亮起,其餘的變灰。
- 用戶可以左右滑動以切換banner。
- 點擊Banner,右側滑出相應的頁面。
展示區:
- 視頻呈兩欄式分佈,可上下滑動。
- 每一視頻包括的信息:封面、播放量、評論、時長、視頻名稱、點贊數/視頻類型。
- 點擊該區,右側滑出豎屏播放頁面,視頻自動播放。
TAB欄:
- 在首頁頁面,對應的文字、圖標變紅。
- 點擊其他圖標,可跳轉進入其他頁面。
6.2 頻道頁面
6.2.1 頻道-頻道頁面
右擊,在新標籤頁中打開即可查看
頁面名稱:頻道-頻道頁面
頁面入口:打開APP後,點擊TAB”頻道“,默認進入頻道頁面
頁面結構:
- 標籤區
- 搜索區
- 訂閱區
- 最近看過區
- 詳細訂閱區
頁面邏輯內容及其交互詳細說明
整個頁面:上拉可刷新
標籤區:
- 左邊是頻道按鈕,右邊是分區按鈕。
- 在頻道頁面,“頻道”按鈕顯示爲紅色加粗,下方有一紅線。
- 在整個頁面任意位置,向左滑動/點擊分區按鈕,將切換至分區頁面。
搜索區:
點擊後,右側滑出搜索頁面。
訂閱區:
- 此處展示的是用戶訂閱的頻道。
- 訂閱的頻道從左到右按訂閱時間先後分佈,最右邊的一個是“更多頻道”。
- 點擊任一訂閱頻道,右側滑出該頻道頁面;點擊“更多頻道”按鈕,右側滑出“全部頻道”頁面。
最近看過區:
- 此處從左到右按,瀏覽的時間先後展示最近看過頻道。
- 可以左滑查看更多看過的頻道。
- 點擊任一頻道,右側滑出該頻道頁面。
詳細訂閱區:
- 此處展示了訂閱頻道的詳情,每個訂閱頻道展示了兩個視頻。
- 可以向下滑動,查看更多頻道。
- 點擊右上角“管理訂閱”,右側滑出“全部頻道”頁面;“進入頻道”按鈕的左邊顯示了更新的視頻數量,點擊該按鈕,右側滑出該頻道頁面;點擊下方展示的任一視頻,右側滑出該視頻豎屏播放頁面。
6.2.2 頻道-分區頁面
右擊,在新標籤頁中打開即可查看
頁面名稱:分區頁面
頁面入口:打開APP後,點擊TAB頻道,進入頻道頁面,向左滑動,進入分區頁面
頁面結構:標籤區、類別區、TAB欄
頁面邏輯內容以及交互詳細說明:
標籤區:
- 左邊是頻道按鈕,右邊是分區按鈕。
- 在分區頁面,“分區”按鈕顯示爲紅色加粗,下方有一紅線。
- 在整個頁面任意位置,向右滑動/點擊分區按鈕,將切換至頻道頁面。
類別區:
- 這一部分展示了所有的分區。
- 可以向下滑動。
- 點擊任一圖標,右側滑出該分區頁面。
TAB欄:
- 在頻道頁面,對應的文字、圖標變紅。
- 點擊其他圖標,可跳轉進入其他頁面。
6.3 動態頁面
6.3.1 動態-綜合
右擊,在新標籤頁中打開即可查看
頁面名稱:動態-綜合頁面
頁面入口:
- 打開APP後,點擊TAB欄“動態”按鈕,進入綜合頁面。
- 在視頻頁面任意位置,向右滑動/點擊綜合按鈕,將切換至綜合頁面。
頁面結構:
從上到下描述:
- 標籤區
- 搜索區
- 關注up主的直播區
- 話題區
- 綜合動態區
- TAB欄
頁面邏輯內容及其交互詳細說明:
整個頁面:上拉可刷新
標籤區:
- 從左到右,視頻、綜合、編輯按鈕。
- 在綜合頁面,“綜合”按鈕顯示爲紅色加粗,下方有一紅線。
- 點擊編輯按鈕,右側滑出編輯頁面,可以編輯併發布動態。
- 點擊後,底側跳出搜索頁面,可以搜索動態內容。
關注up主的直播區:
- 此處顯示的是用戶關注的正在直播的up主。
- 點擊頭像後,右側滑出該up主豎屏直播頁面,默認播放直播。
話題區:
- 此處顯示的是網站的熱門話題以及用戶的訂閱話題。
- 點擊“查看更多”按鈕,右側滑出話題頁面。
綜合動態區:
- 此處從上到下,按投稿時間先後展示了關注的up主的綜合動態(包括專欄、視頻、圖文)。
- 可以上下滑動,查看更多綜合動態。
- 點擊右上角“更多”按鈕,底側彈出彈窗,頁面其餘部分變暗。彈窗內容包括稍後在看等功能。
- 點擊up主頭像,右側滑出up主個人空間。
- 點擊其餘部分,右側滑出豎屏視頻播放頁面/專欄頁面/圖文頁面。
- TAB欄:同上。
6.3.2 動態-視頻
右擊,在新標籤頁中打開即可查看
頁面名稱:動態-視頻頁面
頁面入口:
- 打開APP後,點擊TAB欄“動態”按鈕,進入綜合頁面,向右滑動,進入視頻頁面。
- 在視頻頁面任意位置,向左滑動/點擊綜合按鈕,將切換至綜合頁面。
頁面結構:
從上到下描述:
- 標籤區
- 搜索區
- 關注up主的最常訪問區
- 我的追番追劇區
- 視頻動態區
- TAB欄
頁面邏輯內容及其交互詳細說明:
整個頁面:上拉可刷新
標籤區:
- 從左到右,視頻、綜合、編輯按鈕。
- 在綜合頁面,“視頻”按鈕顯示爲紅色加粗,下方有一紅線。
- 點擊編輯按鈕,右側滑出編輯頁面,可以編輯併發布動態。
搜索區:
點擊後,底側跳出搜索頁面,可以搜索動態內容。
關注up主的最常訪問區:
- 此處顯示的是用戶關注的最常訪問的up主
- 頭像右下角有紅點的up主排在左邊,沒有的排在右邊。
- 頭像右下角的紅點表示該up主有新的視頻動態,點擊紅點頭像後,跳轉進入該up主的視頻動態頁面。返回後,該up主紅點消失。
我的追番追劇區:
- 此處顯示的用戶的追番追劇,可左右滑動。
- 點擊任一番劇,右側滑出該番劇豎屏播放頁面。
- 點擊右上角“全部”按鈕,右側滑出“我的收藏”頁面,默認“追番”標籤。
視頻動態區:
- 此處從上到下,按投稿時間先後展示了關注的up主的視頻動態。
- 可以上下滑動,查看更多視頻動態。
- 點擊右上角“更多”按鈕,底側彈出彈窗,頁面其餘部分變暗。彈窗內容包括稍後在看等功能。
- 點擊up主頭像,右側滑出up主個人空間。
- 點擊其餘部分,右側滑出豎屏視頻播放頁面。
- TAB欄:同上。
6.4 會員購頁面
右擊,在新標籤頁中打開即可查看
頁面名稱:動態-綜合頁面
頁面入口:打開APP後,點擊TAB欄“會員購”按鈕,進入會員購頁面
頁面結構:
從上到下描述
- 功能區
- 搜索區
- 分類區
- 精選區
- 輪播區
- 展示區
- TAB欄
頁面邏輯內容及其交互詳細說明:
整個頁面:上拉可刷新
功能區:
- 從左到右,收藏、購物車、會員購中心按鈕。
- 點擊按鈕,右側將滑出對應的頁面,可進行相應的操作。
- 點擊後,底側跳出搜索頁面,可以搜索動態內容。
分類區:
此處展示的是商品的分類,點擊圖標可進入對應的分類商品。
精選區:
從左到右,分別爲“今日上新”、“圈子社區”、“IP樂園”。點擊後,將進入相應的頁面。
輪播區:
- 六個banner輪流向左滑動,每次展示持續5s。
- 右下角有三個圓點,當展示某一banner時,對應的圓點將亮起,其餘的變灰。
- 用戶可以左右滑動以切換banner。
- 點擊Banner,右側滑出相應的頁面。
展示區:
- 頂部的四個按鈕是類別,下方是對應的商品展示區。
- 商品呈兩欄式分佈,點擊某一商品,進入該商品詳細頁,可以完成支付購買。
TAB欄:同上。
6.5 我的頁面
右擊,在新標籤頁中打開即可查看
頁面名稱:我的頁面
頁面入口:
- 點擊TAB欄“我的”按鈕,進入我的頁面。
- 在“首頁”頁面,點擊左上角頭像,進入我的頁面。
頁面結構:
從上到下描述
- 背景設置區
- 用戶信息區
- 社交區
- 大會員區
- 視頻功能區
- 創作區
- 服務區
- TAB欄
頁面邏輯內容及其交互詳細說明:
背景設置區:
- 從左到右的功能,掃一掃、主題顏色、夜間。
- 點擊掃一掃,右側滑出該功能頁面。
- 點擊主題顏色,右側滑出該功能頁面,可以設置首頁視圖、主題顏色。
- 點擊夜間,切換至夜間模式,整個APP的白色背景變爲灰色背景。
用戶信息區:
- 左邊,包括用戶頭像、暱稱、性別符號、賬號等級、會員資格、B幣數量、硬幣數量。
- 右邊,顯示出空間兩字。
- 點擊該區,右側滑出空間頁面,可以進行編輯資料、管理空間等操作。
社交區:
- 此處顯示的是與社交相關。
- 從左到右,顯示用戶的動態、關注的up主、用戶的粉絲。
- 點擊任一按鈕,可進入相應頁面。
大會員區:
點擊此部分,右側滑出大會員頁面,可進行與大會員相關的操作。
視頻功能區:
- 從左到右,顯示離線緩存、歷史記錄、我的收藏、稍後在看。
- 點擊任一按鈕,可進入相應頁面。
創作區:
- 右上角,顯示圓角框紅色填充背景的“發佈”按鈕。點擊後,底側彈出彈窗,可以編輯併發布相應內容。
- 從左到右,顯示創作首頁、創作學院、創作日曆、熱門活動。點擊任一按鈕,可進入相應頁面。
服務區:
- 此處顯示了“推薦服務”與“更多服務”。
- 點擊任一按鈕,可進入相應頁面。
TAB欄:同上。
七、總結
整體來看,B站功能完善而強大,圍繞視頻播放爲中心構建了龐大的功能生態;同時完整的分類體系體現了多元化的內容,包攬了年輕用戶所想觀看的一切。
TAB欄一個是動態,一個是會員購。
動態可以理解爲,B站不僅僅想要發展圍繞觀看視頻所形成彈幕文化、社區氛圍,也在構建up主與觀衆之間的關係鏈,進一步沉澱用戶之間的氛圍。
動態本質上與微博一般無二,是一種中心化的用戶與一般觀衆的單向聯繫。
但是我個人的理解,兩者是有不同的,對微博而言,用戶間的聯繫是根本,對B站而言,視頻是根本,用戶間的聯繫爲輔,具體反映爲:up主們更多的是利用動態轉發個人的視頻、專欄等,用作給視頻導流;轉發視頻的動態的點贊、評論多於日常動態。
會員購則是B站的特有了。形式與其他購物平臺一般無二,但是商品完全聚焦在二次元,包括手辦、魔力賞、遊戲相關等,異常鮮明地針對B站的用戶羣體。
購物從兩個方面來講,二次元商品這個垂直領域B站是無敵的,但是體量有限。同時在B站不斷破圈的進程中,內容、用戶越來越多元的進程中,商品卻仍然聚焦於二次元,說明用戶不習慣B站購買非二次元商品,個人比較不看好。
本文由 @MPC 原創發佈於人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基於CC0協議