B站產(chǎn)品需求文檔

MPC
25 評論 40581 瀏覽 288 收藏 32 分鐘

本文從產(chǎn)品結(jié)構(gòu)、全局說明、流程圖、頁面邏輯圖、頁面詳細(xì)說明頁五個角度,對年輕人喜歡的B站進行了全方位的分析,希望對你有幫助。

B站定位是多元化視頻平臺,主要功能是視頻播放,圍繞視頻播放構(gòu)建的用戶體驗十分完善,本文只選取常用的視頻播放等功能進行分析。

一、文檔綜述

1.1 文檔屬性

1.2 產(chǎn)品簡介

產(chǎn)品類型:視頻平臺

產(chǎn)品slogan: 你感興趣的視頻都在B站

產(chǎn)品介紹:是一個圍繞用戶、創(chuàng)作者和內(nèi)容,構(gòu)建出一個源源不斷產(chǎn)生優(yōu)質(zhì)內(nèi)容的生態(tài)系統(tǒng)的多元文化社區(qū)。

產(chǎn)品定位: 中國年輕世代高度聚集的文化社區(qū)和視頻平臺

1.3 產(chǎn)品用戶

用戶活躍程度:

2020年5月19日,B站公布了截至2020年3月31日的第一季度未經(jīng)審計的財務(wù)報告。財報顯示,B站2020年一季度,月均活躍用戶達到1.72億,同比增長70%;移動端月均活躍用戶達到1.56億,同比增長77%;日均活躍用戶達到5100萬,同比增長69%。

在用戶基數(shù)大幅增加的基礎(chǔ)上,社區(qū)活躍度也進一步躍升。尤其是用戶日均使用時長攀升至87分鐘,環(huán)比提升10分鐘;而社區(qū)月均互動數(shù)則高達49億次,為去年同期的三倍之多。

1.4 需求總結(jié)

二、產(chǎn)品結(jié)構(gòu)

2.1 產(chǎn)品功能結(jié)構(gòu)圖

右擊,在新標(biāo)簽頁中打開即可查看

2.2 產(chǎn)品信息架構(gòu)圖

右擊,在新標(biāo)簽頁中打開即可查看

三、全局說明

3.1 登錄頁面

權(quán)限說明:

登錄狀態(tài)下可以進行所有操作。

未登錄狀態(tài)下進入APP,除了可以觀看視頻,其他所有功能都不能進行。

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:登錄頁面

頁面入口:未登錄狀態(tài)下,在“我的”頁面左上角顯示“點擊登錄”,或者使用除了觀看視頻之外的所有的交互功能時,會自動跳轉(zhuǎn)進入登錄頁面

頁面功能:實現(xiàn)兩種方式的登錄——手機驗證碼登錄、密碼登錄

頁面邏輯內(nèi)容及其交互詳細(xì)說明:

手機驗證碼登錄方式:

  • 初始界面下,呈現(xiàn)國家/地區(qū)選擇框、手機號碼輸入欄、驗證碼輸入欄、獲取驗證碼按鈕、驗證登錄按鈕。
  • 手機號碼默認(rèn)+86,輸入限制16位數(shù)字,當(dāng)輸入非數(shù)字內(nèi)容時,輸入欄不予顯示;輸入數(shù)字后,獲取驗證碼按鈕亮起;輸入錯誤格式、無效號碼時,點擊“獲取驗證碼”,彈出“手機號格式錯誤”。
  • 點擊“獲取驗證碼”后,會彈出一個滑圖驗證,“獲取驗證碼”按鈕變?yōu)椤?0s后重試”,倒計時結(jié)束前不能在獲取驗證碼。
  • 驗證碼正確,完成登錄,進入“我的”頁面。

密碼登錄:

  • 初始界面下,右上方有密碼登錄按鈕,點擊進入密碼登錄界面。
  • 登錄界面,呈現(xiàn)賬號輸入欄、密碼輸入欄、忘記密碼按鈕、注冊按鈕、登錄按鈕。
  • 賬號輸入欄支持輸入手機號與郵箱,且沒有字?jǐn)?shù)限制、字符類別限制;密碼輸入欄同上也沒有任何限制,輸入密碼時輸入的字符會短暫的顯示2s,然后隱藏為“*”。
  • 點擊注冊,進入“手機號登陸注冊”頁面,通過手機號驗證注冊賬號。
  • 忘記密碼時,點擊“忘記密碼”按鈕,會彈出“已綁定手機號”、“已綁定郵箱”的選項,點擊前者,跳轉(zhuǎn)進入手機號驗證登錄方式,點擊后者,通過綁定郵箱重置密碼。
  • 賬號密碼登錄成功后,完成登錄,進入“我的”頁面。

3.2 網(wǎng)絡(luò)環(huán)境

此為在沒有wifi,打開了數(shù)據(jù)的狀態(tài)下,橫屏豎屏播放的頁面。

流程,先關(guān)閉wifi、打開數(shù)據(jù),再點進視頻。

結(jié)果,播放頁面會提醒流量消耗。

右擊,在新標(biāo)簽頁中打開即可查看

此為在沒有網(wǎng)絡(luò)狀態(tài)下,TAB欄的五個頁面
流程,先關(guān)閉網(wǎng)絡(luò),再打開APP。
結(jié)果,前兩個TAB頁面不能顯示,后三個TAB頁面可以正常顯示。

右擊,在新標(biāo)簽頁中打開即可查看

3.3 鍵盤輸入

只有在手機號驗證登錄時,點擊手機號輸入欄/驗證碼輸入欄,會彈出數(shù)字鍵盤。

其余所有的輸入都是彈出字母鍵盤。

右擊,在新標(biāo)簽頁中打開即可查看

在豎屏播放頁面,右下角有一個笑臉按鈕,點擊后,底側(cè)彈出表情包鍵盤。
在字母鍵盤中,也可以點擊笑臉按鈕,切換至表情包鍵盤。

右擊,在新標(biāo)簽頁中打開即可查看

3.4 評論框

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:評論頁面

頁面入口:在TAB欄“首頁”下,任一標(biāo)簽頁面內(nèi),點擊右上角“消息”按鈕,進入消息頁面

頁面結(jié)構(gòu):

  • 評論切換欄
  • 用戶信息欄
  • 用戶的評論內(nèi)容
  • 對用戶評論的反饋
  • 二次評論
  • 評論欄

頁面邏輯內(nèi)容及其詳細(xì)交互:

從左到右,發(fā)送彈幕、彈幕開關(guān)。

發(fā)送彈幕,點擊該按鈕,按鈕變?yōu)椤皬椖惠斎胫小保瑫r底側(cè)彈出鍵盤,可以進行彈幕的發(fā)送。

彈幕開關(guān),默認(rèn)為開啟彈幕;點擊該圖標(biāo),圖標(biāo)右下角顯示“禁止“圖標(biāo),關(guān)閉彈幕;再次點擊,復(fù)原。

評論切換欄,默認(rèn)“按熱度”(熱度按多項指標(biāo)計算),所有用戶的評論按熱度從大到小排序;點擊該按鈕,變?yōu)椤卑磿r間“,所有用戶的評論按時間,最近發(fā)布的排序靠前。

用戶信息欄:從左到右,用戶信息、關(guān)注。

顯示用戶頭像、名稱、賬號等級、評論時間(只有豎屏播放-評論框內(nèi),顯示了用戶逇賬號等級)

關(guān)注,在“按熱度”下,排序靠前的三個用戶會顯示“關(guān)注”按鈕;如果是該視頻的up主的評論,不管“按熱度”、“按時間”,都會顯示。

點擊后變?yōu)榛疑摹耙殃P(guān)注”,然后再次點擊,底側(cè)彈出窗口,點擊”取消關(guān)注“即可取消關(guān)注。

用戶的評論內(nèi)容,點擊此范圍,底側(cè)彈出鍵盤,進行對該用戶評論內(nèi)容的二次評論。

對用戶評論的反饋,從左到右,點贊、不喜歡、分享、評論、拉黑按鈕。

  • 點贊,按鈕右方顯示點贊數(shù),點擊該按鈕,點贊數(shù)加1,同時按鈕與點贊數(shù)變紅,如果再次點擊,恢復(fù)原狀。
  • 不喜歡,點擊后,按鈕變紅,如果再次點擊,恢復(fù)原狀(同時點贊與不喜歡不能同時點擊,點擊其中一個,將取消之前對另一個的點擊)。
  • 分享,點擊后,底側(cè)彈出分享框,可將該用戶評論分享至第三方平臺。
  • 評論,點擊后,底側(cè)彈出鍵盤,進行對該用戶評論內(nèi)容的二次評論。
  • 拉黑,點擊后,從該按鈕彈出窗口,可選擇“加入黑名單”/“舉報”:點擊前者,將彈出警示,點擊”確認(rèn)“可拉黑該用戶;點擊后者,右側(cè)彈出舉報頁面,必須且只能選擇一個舉報的類型,然后點擊“提交”按鈕可進行舉報。

二次評論:

此欄顯示了用戶對用戶評論的評論,包括用戶名稱、評論內(nèi)容,最下方是二次評論的數(shù)量。點擊此欄,底側(cè)彈出二次評論框,展示所有的二次評論。

評論欄:從左到右,評論欄、表情包。

  • 評論欄,點擊后,底側(cè)彈出鍵盤,進行對該視頻的評論(可點擊表情包按鈕,切換至表情包鍵盤)。
  • 表情包,點擊后,底側(cè)彈出表情包鍵盤,可自由選擇多種表情包。選擇完畢后,可點擊鍵盤按鈕,切換至普通鍵盤,輸入文字,完成對視頻的評論。

3.5 消息頁

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:消息頁面

頁面入口:在“首頁”任一標(biāo)簽下,點擊右上角消息按鈕,右側(cè)彈出消息頁面

頁面結(jié)構(gòu):通訊錄區(qū)、互動區(qū)、消息區(qū)

頁面邏輯內(nèi)容及其交互詳細(xì)說明:

通訊錄區(qū):

左邊的為通訊錄按鈕,點擊后,右側(cè)彈出通訊錄頁面。

右邊的為消息設(shè)置按鈕,點擊后,彈出彈窗,從上到下分別為“消息設(shè)置”、“up主”小助手、“應(yīng)援團消息助手”,點擊將進入相應(yīng)頁面。

互動區(qū):

此處是一個互動消息的集中,可以按照不同的互動類型查看與個人有關(guān)的互動消息。從左到右描述:

  • 回復(fù)我的:點擊后,右側(cè)彈出頁面,里面從上到下按時間順序展示了其他用戶對于我發(fā)表的評論的回復(fù)。點擊任一回復(fù)框,將跳轉(zhuǎn)進入該回復(fù)所在的頁面。
  • @我:點擊后,右側(cè)彈出頁面,里面從上到下按時間順序展示了其他用戶發(fā)表的對@我的評論。點擊任一評論框,將跳轉(zhuǎn)進入該回復(fù)所在的頁面。
  • 收到的贊:點擊后,右側(cè)彈出頁面,里面從上到下按時間順序展示了其他用戶對于我的評論的點贊。點擊任一回復(fù)框,將跳轉(zhuǎn)進入該回復(fù)所在的頁面。
  • 系統(tǒng)通知:點擊后,右側(cè)彈出頁面,里面從上到下按時間順序展示了系統(tǒng)通知。

聊天列表:從上到下按時間順序展示了用戶對我發(fā)送的私信,點擊任一私信欄,右側(cè)彈出與該用戶的對話頁面,類似于社交APP的對話。

3.6 分享頁

3.6.1 豎屏分享頁面

右擊,在新標(biāo)簽頁中打開即可查看

3.6.2 橫屏分享頁面

在橫批播放頁面,點擊分享按鈕,底側(cè)彈出分享框,同時頁面的其余功能按鈕消失,變?yōu)椴シ乓曨l的頁面效果。

分享的功能同豎屏一致。

3.7 播放頁面交互

此部分主要是考察,在播放視頻時,單擊/雙擊頁面帶來的交互及頁面變化。

3.7.1 豎屏播放頁面交互

右擊,在新標(biāo)簽頁中打開即可查看

3.7.2 橫屏播放頁面交互

右擊,在新標(biāo)簽頁中打開即可查看

3.8 播放頁面功能

此部分主要是考察,在播放視頻時,播放頁面上的各種功能。

3.8.1 豎屏頁面播放功能

右擊,在新標(biāo)簽頁中打開即可查看

3.8.2 橫屏頁面播放功能

右擊,在新標(biāo)簽頁中打開即可查看

四、產(chǎn)品流程圖

4.1 登錄注冊流程

右擊,在新標(biāo)簽頁中打開即可查看

4.2 觀看視頻/購物流程

右擊,在新標(biāo)簽頁中打開即可查看

五、產(chǎn)品頁面邏輯圖

右擊,在新標(biāo)簽頁中打開即可查看

右擊,在新標(biāo)簽頁中打開即可查看

六、頁面詳細(xì)說明頁

6.1 首頁頁面

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:首頁-推薦頁面

頁面入口:在首頁,第二欄位于“推薦”時。每次打開APP,會自動跳入首頁-推薦頁面

頁面結(jié)構(gòu):搜索區(qū);標(biāo)簽區(qū);輪播區(qū);展示區(qū);TAB欄

頁面邏輯內(nèi)容及其交互詳細(xì)說明:

整個頁面:上拉可刷新

搜索區(qū):

  • 位于頁面最頂端,從左到右描述:
  • 左邊是用戶頭像,點擊后,跳轉(zhuǎn)進入“我的”頁面。
  • 中間是搜索欄,點擊后,右側(cè)滑出搜索頁面。
  • 右邊是消息按鈕,點擊后,右側(cè)滑出消息頁面,詳見上文消息頁面。

標(biāo)簽區(qū):

  • 該部分可以選擇進入不同頁面,每次打開APP,會自動跳入推薦頁面。
  • 在推薦頁面,“推薦”二字加粗、變紅,底部有一紅線。
  • 切換頁面的交互方式有兩種,左右滑動以及直接點擊“直播”/“熱門”等按鈕。

輪播區(qū):

  • 三個banner輪流向左滑動,每次展示持續(xù)2s。
  • 右下角有三個圓點,當(dāng)展示某一banner時,對應(yīng)的圓點將亮起,其余的變灰。
  • 用戶可以左右滑動以切換banner。
  • 點擊Banner,右側(cè)滑出相應(yīng)的頁面。

展示區(qū):

  • 視頻呈兩欄式分布,可上下滑動。
  • 每一視頻包括的信息:封面、播放量、評論、時長、視頻名稱、點贊數(shù)/視頻類型。
  • 點擊該區(qū),右側(cè)滑出豎屏播放頁面,視頻自動播放。

TAB欄:

  • 在首頁頁面,對應(yīng)的文字、圖標(biāo)變紅。
  • 點擊其他圖標(biāo),可跳轉(zhuǎn)進入其他頁面。

6.2 頻道頁面

6.2.1 頻道-頻道頁面

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:頻道-頻道頁面

頁面入口:打開APP后,點擊TAB”頻道“,默認(rèn)進入頻道頁面

頁面結(jié)構(gòu):

  • 標(biāo)簽區(qū)
  • 搜索區(qū)
  • 訂閱區(qū)
  • 最近看過區(qū)
  • 詳細(xì)訂閱區(qū)

頁面邏輯內(nèi)容及其交互詳細(xì)說明

整個頁面:上拉可刷新

標(biāo)簽區(qū):

  • 左邊是頻道按鈕,右邊是分區(qū)按鈕。
  • 在頻道頁面,“頻道”按鈕顯示為紅色加粗,下方有一紅線。
  • 在整個頁面任意位置,向左滑動/點擊分區(qū)按鈕,將切換至分區(qū)頁面。

搜索區(qū):

點擊后,右側(cè)滑出搜索頁面。

訂閱區(qū):

  • 此處展示的是用戶訂閱的頻道。
  • 訂閱的頻道從左到右按訂閱時間先后分布,最右邊的一個是“更多頻道”。
  • 點擊任一訂閱頻道,右側(cè)滑出該頻道頁面;點擊“更多頻道”按鈕,右側(cè)滑出“全部頻道”頁面。

最近看過區(qū):

  • 此處從左到右按,瀏覽的時間先后展示最近看過頻道。
  • 可以左滑查看更多看過的頻道。
  • 點擊任一頻道,右側(cè)滑出該頻道頁面。

詳細(xì)訂閱區(qū):

  • 此處展示了訂閱頻道的詳情,每個訂閱頻道展示了兩個視頻。
  • 可以向下滑動,查看更多頻道。
  • 點擊右上角“管理訂閱”,右側(cè)滑出“全部頻道”頁面;“進入頻道”按鈕的左邊顯示了更新的視頻數(shù)量,點擊該按鈕,右側(cè)滑出該頻道頁面;點擊下方展示的任一視頻,右側(cè)滑出該視頻豎屏播放頁面。

6.2.2 頻道-分區(qū)頁面

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:分區(qū)頁面

頁面入口:打開APP后,點擊TAB頻道,進入頻道頁面,向左滑動,進入分區(qū)頁面

頁面結(jié)構(gòu):標(biāo)簽區(qū)、類別區(qū)、TAB欄

頁面邏輯內(nèi)容以及交互詳細(xì)說明:

標(biāo)簽區(qū):

  • 左邊是頻道按鈕,右邊是分區(qū)按鈕。
  • 在分區(qū)頁面,“分區(qū)”按鈕顯示為紅色加粗,下方有一紅線。
  • 在整個頁面任意位置,向右滑動/點擊分區(qū)按鈕,將切換至頻道頁面。

類別區(qū):

  • 這一部分展示了所有的分區(qū)。
  • 可以向下滑動。
  • 點擊任一圖標(biāo),右側(cè)滑出該分區(qū)頁面。

TAB欄:

  • 在頻道頁面,對應(yīng)的文字、圖標(biāo)變紅。
  • 點擊其他圖標(biāo),可跳轉(zhuǎn)進入其他頁面。

6.3 動態(tài)頁面

6.3.1 動態(tài)-綜合

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:動態(tài)-綜合頁面

頁面入口:

  • 打開APP后,點擊TAB欄“動態(tài)”按鈕,進入綜合頁面。
  • 在視頻頁面任意位置,向右滑動/點擊綜合按鈕,將切換至綜合頁面。

頁面結(jié)構(gòu):

從上到下描述:

  • 標(biāo)簽區(qū)
  • 搜索區(qū)
  • 關(guān)注up主的直播區(qū)
  • 話題區(qū)
  • 綜合動態(tài)區(qū)
  • TAB欄

頁面邏輯內(nèi)容及其交互詳細(xì)說明:

整個頁面:上拉可刷新

標(biāo)簽區(qū):

  • 從左到右,視頻、綜合、編輯按鈕。
  • 在綜合頁面,“綜合”按鈕顯示為紅色加粗,下方有一紅線。
  • 點擊編輯按鈕,右側(cè)滑出編輯頁面,可以編輯并發(fā)布動態(tài)。
  • 點擊后,底側(cè)跳出搜索頁面,可以搜索動態(tài)內(nèi)容。

關(guān)注up主的直播區(qū):

  • 此處顯示的是用戶關(guān)注的正在直播的up主。
  • 點擊頭像后,右側(cè)滑出該up主豎屏直播頁面,默認(rèn)播放直播。

話題區(qū):

  • 此處顯示的是網(wǎng)站的熱門話題以及用戶的訂閱話題。
  • 點擊“查看更多”按鈕,右側(cè)滑出話題頁面。

綜合動態(tài)區(qū):

  • 此處從上到下,按投稿時間先后展示了關(guān)注的up主的綜合動態(tài)(包括專欄、視頻、圖文)。
  • 可以上下滑動,查看更多綜合動態(tài)。
  • 點擊右上角“更多”按鈕,底側(cè)彈出彈窗,頁面其余部分變暗。彈窗內(nèi)容包括稍后在看等功能。
  • 點擊up主頭像,右側(cè)滑出up主個人空間。
  • 點擊其余部分,右側(cè)滑出豎屏視頻播放頁面/專欄頁面/圖文頁面。
  • TAB欄:同上。

6.3.2 動態(tài)-視頻

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:動態(tài)-視頻頁面

頁面入口:

  • 打開APP后,點擊TAB欄“動態(tài)”按鈕,進入綜合頁面,向右滑動,進入視頻頁面。
  • 在視頻頁面任意位置,向左滑動/點擊綜合按鈕,將切換至綜合頁面。

頁面結(jié)構(gòu):

從上到下描述:

  • 標(biāo)簽區(qū)
  • 搜索區(qū)
  • 關(guān)注up主的最常訪問區(qū)
  • 我的追番追劇區(qū)
  • 視頻動態(tài)區(qū)
  • TAB欄

頁面邏輯內(nèi)容及其交互詳細(xì)說明:

整個頁面:上拉可刷新

標(biāo)簽區(qū):

  • 從左到右,視頻、綜合、編輯按鈕。
  • 在綜合頁面,“視頻”按鈕顯示為紅色加粗,下方有一紅線。
  • 點擊編輯按鈕,右側(cè)滑出編輯頁面,可以編輯并發(fā)布動態(tài)。

搜索區(qū):

點擊后,底側(cè)跳出搜索頁面,可以搜索動態(tài)內(nèi)容。

關(guān)注up主的最常訪問區(qū):

  • 此處顯示的是用戶關(guān)注的最常訪問的up主
  • 頭像右下角有紅點的up主排在左邊,沒有的排在右邊。
  • 頭像右下角的紅點表示該up主有新的視頻動態(tài),點擊紅點頭像后,跳轉(zhuǎn)進入該up主的視頻動態(tài)頁面。返回后,該up主紅點消失。

我的追番追劇區(qū):

  • 此處顯示的用戶的追番追劇,可左右滑動。
  • 點擊任一番劇,右側(cè)滑出該番劇豎屏播放頁面。
  • 點擊右上角“全部”按鈕,右側(cè)滑出“我的收藏”頁面,默認(rèn)“追番”標(biāo)簽。

視頻動態(tài)區(qū):

  • 此處從上到下,按投稿時間先后展示了關(guān)注的up主的視頻動態(tài)。
  • 可以上下滑動,查看更多視頻動態(tài)。
  • 點擊右上角“更多”按鈕,底側(cè)彈出彈窗,頁面其余部分變暗。彈窗內(nèi)容包括稍后在看等功能。
  • 點擊up主頭像,右側(cè)滑出up主個人空間。
  • 點擊其余部分,右側(cè)滑出豎屏視頻播放頁面。
  • TAB欄:同上。

6.4 會員購頁面

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:動態(tài)-綜合頁面

頁面入口:打開APP后,點擊TAB欄“會員購”按鈕,進入會員購頁面

頁面結(jié)構(gòu):

從上到下描述

  • 功能區(qū)
  • 搜索區(qū)
  • 分類區(qū)
  • 精選區(qū)
  • 輪播區(qū)
  • 展示區(qū)
  • TAB欄

頁面邏輯內(nèi)容及其交互詳細(xì)說明:

整個頁面:上拉可刷新

功能區(qū):

  • 從左到右,收藏、購物車、會員購中心按鈕。
  • 點擊按鈕,右側(cè)將滑出對應(yīng)的頁面,可進行相應(yīng)的操作。
  • 點擊后,底側(cè)跳出搜索頁面,可以搜索動態(tài)內(nèi)容。

分類區(qū):

此處展示的是商品的分類,點擊圖標(biāo)可進入對應(yīng)的分類商品。

精選區(qū):

從左到右,分別為“今日上新”、“圈子社區(qū)”、“IP樂園”。點擊后,將進入相應(yīng)的頁面。

輪播區(qū):

  • 六個banner輪流向左滑動,每次展示持續(xù)5s。
  • 右下角有三個圓點,當(dāng)展示某一banner時,對應(yīng)的圓點將亮起,其余的變灰。
  • 用戶可以左右滑動以切換banner。
  • 點擊Banner,右側(cè)滑出相應(yīng)的頁面。

展示區(qū):

  • 頂部的四個按鈕是類別,下方是對應(yīng)的商品展示區(qū)。
  • 商品呈兩欄式分布,點擊某一商品,進入該商品詳細(xì)頁,可以完成支付購買。

TAB欄:同上。

6.5 我的頁面

右擊,在新標(biāo)簽頁中打開即可查看

頁面名稱:我的頁面

頁面入口:

  • 點擊TAB欄“我的”按鈕,進入我的頁面。
  • 在“首頁”頁面,點擊左上角頭像,進入我的頁面。

頁面結(jié)構(gòu):

從上到下描述

  • 背景設(shè)置區(qū)
  • 用戶信息區(qū)
  • 社交區(qū)
  • 大會員區(qū)
  • 視頻功能區(qū)
  • 創(chuàng)作區(qū)
  • 服務(wù)區(qū)
  • TAB欄

頁面邏輯內(nèi)容及其交互詳細(xì)說明:

背景設(shè)置區(qū):

  • 從左到右的功能,掃一掃、主題顏色、夜間。
  • 點擊掃一掃,右側(cè)滑出該功能頁面。
  • 點擊主題顏色,右側(cè)滑出該功能頁面,可以設(shè)置首頁視圖、主題顏色。
  • 點擊夜間,切換至夜間模式,整個APP的白色背景變?yōu)榛疑尘啊?/li>

用戶信息區(qū):

  • 左邊,包括用戶頭像、昵稱、性別符號、賬號等級、會員資格、B幣數(shù)量、硬幣數(shù)量。
  • 右邊,顯示出空間兩字。
  • 點擊該區(qū),右側(cè)滑出空間頁面,可以進行編輯資料、管理空間等操作。

社交區(qū):

  • 此處顯示的是與社交相關(guān)。
  • 從左到右,顯示用戶的動態(tài)、關(guān)注的up主、用戶的粉絲。
  • 點擊任一按鈕,可進入相應(yīng)頁面。

大會員區(qū):

點擊此部分,右側(cè)滑出大會員頁面,可進行與大會員相關(guān)的操作。

視頻功能區(qū):

  • 從左到右,顯示離線緩存、歷史記錄、我的收藏、稍后在看。
  • 點擊任一按鈕,可進入相應(yīng)頁面。

創(chuàng)作區(qū):

  • 右上角,顯示圓角框紅色填充背景的“發(fā)布”按鈕。點擊后,底側(cè)彈出彈窗,可以編輯并發(fā)布相應(yīng)內(nèi)容。
  • 從左到右,顯示創(chuàng)作首頁、創(chuàng)作學(xué)院、創(chuàng)作日歷、熱門活動。點擊任一按鈕,可進入相應(yīng)頁面。

服務(wù)區(qū):

  • 此處顯示了“推薦服務(wù)”與“更多服務(wù)”。
  • 點擊任一按鈕,可進入相應(yīng)頁面。

TAB欄:同上。

七、總結(jié)

整體來看,B站功能完善而強大,圍繞視頻播放為中心構(gòu)建了龐大的功能生態(tài);同時完整的分類體系體現(xiàn)了多元化的內(nèi)容,包攬了年輕用戶所想觀看的一切。

TAB欄一個是動態(tài),一個是會員購。

動態(tài)可以理解為,B站不僅僅想要發(fā)展圍繞觀看視頻所形成彈幕文化、社區(qū)氛圍,也在構(gòu)建up主與觀眾之間的關(guān)系鏈,進一步沉淀用戶之間的氛圍。

動態(tài)本質(zhì)上與微博一般無二,是一種中心化的用戶與一般觀眾的單向聯(lián)系。

但是我個人的理解,兩者是有不同的,對微博而言,用戶間的聯(lián)系是根本,對B站而言,視頻是根本,用戶間的聯(lián)系為輔,具體反映為:up主們更多的是利用動態(tài)轉(zhuǎn)發(fā)個人的視頻、專欄等,用作給視頻導(dǎo)流;轉(zhuǎn)發(fā)視頻的動態(tài)的點贊、評論多于日常動態(tài)。

會員購則是B站的特有了。形式與其他購物平臺一般無二,但是商品完全聚焦在二次元,包括手辦、魔力賞、游戲相關(guān)等,異常鮮明地針對B站的用戶群體。

購物從兩個方面來講,二次元商品這個垂直領(lǐng)域B站是無敵的,但是體量有限。同時在B站不斷破圈的進程中,內(nèi)容、用戶越來越多元的進程中,商品卻仍然聚焦于二次元,說明用戶不習(xí)慣B站購買非二次元商品,個人比較不看好。

 

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我以為是B端需求文檔,點進來看了半天,這不是B站嗎,標(biāo)題黨!退出去才發(fā)現(xiàn)是我自己標(biāo)題看錯了

    來自浙江 回復(fù)
    1. ?汝無雙眼為何欲見整

      來自河北 回復(fù)
  2. 這跟流水一樣 什么價值吶

    回復(fù)
  3. 作者寫這篇文章應(yīng)該花了不少時間和精力

    回復(fù)
  4. 首先肯定態(tài)度,建議后續(xù)可以學(xué)習(xí)一門編程語言,對你有幫助,免得被開發(fā)天天懟。因為你畫的這些只是皮毛,遠沒有達到能夠交付的標(biāo)準(zhǔn),真的。 加油,比我入門那時好很多了??

    來自浙江 回復(fù)
  5. 需求文檔

    回復(fù)
  6. 作者寫的不錯,看得出對于原型交互這方面有很用心的研究了,不過這方面研究再深也只能停留在產(chǎn)品助理或者初級產(chǎn)品等等層面了。對于轉(zhuǎn)行或者入行產(chǎn)品坑來說挺不錯的。憑這份交互說明入個門應(yīng)該沒問題,由于現(xiàn)在市面上很多人對產(chǎn)品經(jīng)理的認(rèn)知還不是很規(guī)范,可能你投一個產(chǎn)品經(jīng)理 有些公司也以為原型交互畫的好就合格,但那是因為他們也不清楚 只把你當(dāng)一個對接開發(fā)的功能設(shè)計者。這是最基層的水平,功能設(shè)計,往后你肯定也要進階業(yè)務(wù)層、戰(zhàn)略層的;到時候你連原型怎么畫都不記得了也沒關(guān)系因為你已經(jīng)是業(yè)務(wù)設(shè)計主導(dǎo)者,原型交互的事讓產(chǎn)品助理或者初級產(chǎn)品經(jīng)理去做就行了。建議樓主想轉(zhuǎn)行做產(chǎn)品、或者想進大廠,更多需要鍛煉一下產(chǎn)品思維和業(yè)務(wù)思維;比如你現(xiàn)在是把一個APP各個功能交互都寫的很全,但是如果你能解釋清楚為什么要做這個APP、或者為什么要做這個功能、這個功能帶來的價值是什么、等等之類的思維,會對你有很大優(yōu)勢;加油,我也是一枚搬磚產(chǎn)品;

    來自廣東 回復(fù)
    1. 回復(fù)
  7. 產(chǎn)品新人去倒推大廠產(chǎn)品其實是很難的,因為你沒有在團隊里面,只能看到一個前臺產(chǎn)品,這個產(chǎn)品對于你來說仍然是一個黑箱,你想象不到這個產(chǎn)品后面有多龐大、配套的產(chǎn)品有多少,比如CRM是怎么樣的?運營管理平臺是怎么樣的?更往后一點中臺搭建和后臺是怎么樣的?因此去倒推大廠的產(chǎn)品,往往就是臨摹一個原型而已,一個PM最重要的底層能力是思考能力,我的建議是在你現(xiàn)在技能基本功已經(jīng)有了的時候,去思考自己的一款產(chǎn)品,從0到1去寫出來,包括需求來源、市場分析、用戶畫像、需求價值、業(yè)務(wù)流程、信息說明、信息流、權(quán)限、極值、異常處理、運營方案等,事無巨細(xì)地把整個思考過程寫出來,這才是一份完整且可以推敲的PRD

    回復(fù)
    1. 謝謝大佬分享,受教了~

      回復(fù)
    2. 人家只是應(yīng)聘產(chǎn)品經(jīng)理,又不是產(chǎn)品總監(jiān),一個初進公司產(chǎn)品經(jīng)理不會涉及到CRM,信息流之類的問題,只要把原型圖畫好,PRD寫的通俗易懂就可以了,至于其他例如需求的甄別,運營方案的撰寫這些每個公司都是不一祥的只有到了項目中去才能學(xué)習(xí)總結(jié)和提高,這份PRD確實花了不少心思已經(jīng)可以讓面試者感受到作者的細(xì)心和能力,比較建議做一份就某一功能模塊的PRD和畫出一個高保真的原型圖,帶著作品去面試我相信沒有人會拒絕這位朋友的。

      回復(fù)
    3. 你的說法我同意,但是有一點必須要明確的是作者的這份產(chǎn)出不是PRD而是交互設(shè)計稿,在大廠里面靠這份產(chǎn)品來找產(chǎn)品崗是有壓力的,另外現(xiàn)在產(chǎn)品崗的競爭真的非常激烈,細(xì)化很厲害,想單純通過這樣一份臨摹原型來獲得一個優(yōu)質(zhì)崗位已經(jīng)很難了,現(xiàn)在面試官比較注重的都是底層思維能力而使用工具這種人人都可以短時間學(xué)習(xí)的技能,產(chǎn)品崗也漸漸變得面試造航母工作擰螺絲了,找個實習(xí)倒是沒有問題的。最后給作者點個贊吧~

      來自廣東 回復(fù)
    4. 面試官比較注重的都是底層思維能力而不是使用工具這種可以短時間學(xué)習(xí)的技能

      來自廣東 回復(fù)
  8. 最近看到非常多產(chǎn)品新人倒推大廠產(chǎn)品的PRD,希望能給你一些建議吧。看了非常多的此類PRD,我感覺現(xiàn)在市面上的產(chǎn)品入門知識體系存在不少漏洞,你以為你倒推的是PRD,但你實際上產(chǎn)出的是交互設(shè)計稿,說真的這只是PRD中價值小但又耗時間的一部分,如果把主要精力投入到這部分內(nèi)容的產(chǎn)出的話,可能在技能點就往交互設(shè)計師那里點去了,如果一心想往產(chǎn)品經(jīng)理這個崗位發(fā)展,一定要想辦法跳出這個束縛,PM的底層能力強調(diào)的是為什么做和怎么做,也就是強調(diào)一個產(chǎn)品最底層的邏輯,比如這部分內(nèi)容在你的作品中是沒有體現(xiàn)的,開發(fā)拿到你的這份作品,可能就只能畫個靜態(tài)頁面出來,而信息流怎么走、怎么推薦、怎么管理內(nèi)容,都沒有表現(xiàn)出來。

    回復(fù)
    1. 同意,作者給到的更多是交互圖,與服務(wù)端怎么進行數(shù)據(jù)傳輸?shù)氖菦]有體現(xiàn)出來的,也沒有去研究用戶、市場,也就是你說的為什么做,不過能把交互畫的這么仔細(xì),看得出作者還是花了很多時間的。

      來自廣東 回復(fù)
    2. 你好,我想問一下作為一個從0開始的產(chǎn)品應(yīng)該怎么寫出需求文檔,文檔里面應(yīng)該展示什么樣的內(nèi)容,需要給叫交付的人看出哪些內(nèi)容呢?

      來自湖北 回復(fù)
  9. 兄弟好肝呀

    回復(fù)
  10. 很干貨!很強!學(xué)習(xí)學(xué)習(xí)~ 謝謝分享~

    來自浙江 回復(fù)
  11. 寫的很詳細(xì),受教了

    來自廣東 回復(fù)
  12. 文檔沒有涉及B站的視頻編輯、上傳等功能,因為我大概花了兩周時間撰寫,然后實在是肝不動了。
    本人吃苦耐勞、熱愛互聯(lián)網(wǎng)、希望成為一名產(chǎn)品經(jīng)理、正在尋找產(chǎn)品實習(xí),如果有老板想找產(chǎn)品實習(xí)生,可以考慮一下我~

    來自重慶 回復(fù)
  13. 請問一下,你這個寫了多久???

    來自江蘇 回復(fù)
    1. 第一次寫prd,寫之前花了一點時間學(xué)axure,之后的撰寫花了兩周吧

      來自重慶 回復(fù)
    2. 坐標(biāo)上海?
      有意來試發(fā)送簡歷到郵箱1970477375@qq.com

      來自上海 回復(fù)
    3. 你好,我現(xiàn)在在重慶,簡歷已發(fā)送

      來自重慶 回復(fù)
    4. 請問您是B站的員工嗎?

      來自江蘇 回復(fù)