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

B站產(chǎn)品需求文檔本文從產(chǎn)品結(jié)構(gòu)、全局說明、流程圖、頁面邏輯圖、頁面詳細說明頁五個角度，對年輕人喜歡的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)審計的財務報告。財報顯示，B站2020年一季度，月均活躍用戶達到1.72億，同比增長70％；移動端月均活躍用戶達到1.56億，同比增長77％；日均活躍用戶達到5100萬，同比增長69%。在用戶基數(shù)大幅增加的基礎上，社區(qū)活躍度也進一步躍升。尤其是用戶日均使用時長攀升至87分鐘，環(huán)比提升10分鐘；而社區(qū)月均互動數(shù)則高達49億次，為去年同期的三倍之多。1.4需求總結(jié)二、產(chǎn)品結(jié)構(gòu)2.1產(chǎn)品功能結(jié)構(gòu)圖右擊，在新標簽頁中打開即可查看2.2產(chǎn)品信息架構(gòu)圖右擊，在新標簽頁中打開即可查看三、全局說明3.1登錄頁面權(quán)限說明：登錄狀態(tài)下可以進行所有操作。未登錄狀態(tài)下進入APP，除了可以觀看視頻，其他所有功能都不能進行。右擊，在新標簽頁中打開即可查看頁面名稱：登錄頁面頁面入口：未登錄狀態(tài)下，在“我的”頁面左上角顯示“點擊登錄”，或者使用除了觀看視頻之外的所有的交互功能時，會自動跳轉(zhuǎn)進入登錄頁面頁面功能：實現(xiàn)兩種方式的登錄——手機驗證碼登錄、密碼登錄頁面邏輯內(nèi)容及其交互詳細說明：手機驗證碼登錄方式：初始界面下，呈現(xiàn)國家/地區(qū)選擇框、手機號碼輸入欄、驗證碼輸入欄、獲取驗證碼按鈕、驗證登錄按鈕。手機號碼默認+86，輸入限制16位數(shù)字，當輸入非數(shù)字內(nèi)容時，輸入欄不予顯示；輸入數(shù)字后，獲取驗證碼按鈕亮起；輸入錯誤格式、無效號碼時，點擊“獲取驗證碼”，彈出“手機號格式錯誤”。點擊“獲取驗證碼”后，會彈出一個滑圖驗證，“獲取驗證碼”按鈕變?yōu)椤?0s后重試”，倒計時結(jié)束前不能在獲取驗證碼。驗證碼正確，完成登錄，進入“我的”頁面。密碼登錄：初始界面下，右上方有密碼登錄按鈕，點擊進入密碼登錄界面。登錄界面，呈現(xiàn)賬號輸入欄、密碼輸入欄、忘記密碼按鈕、注冊按鈕、登錄按鈕。賬號輸入欄支持輸入手機號與郵箱，且沒有字數(shù)限制、字符類別限制；密碼輸入欄同上也沒有任何限制，輸入密碼時輸入的字符會短暫的顯示2s，然后隱藏為“*”。點擊注冊，進入“手機號登陸注冊”頁面，通過手機號驗證注冊賬號。忘記密碼時，點擊“忘記密碼”按鈕，會彈出“已綁定手機號”、“已綁定郵箱”的選項，點擊前者，跳轉(zhuǎn)進入手機號驗證登錄方式，點擊后者，通過綁定郵箱重置密碼。賬號密碼登錄成功后，完成登錄，進入“我的”頁面。3.2網(wǎng)絡環(huán)境此為在沒有wifi，打開了數(shù)據(jù)的狀態(tài)下，橫屏豎屏播放的頁面。流程，先關閉wifi、打開數(shù)據(jù)，再點進視頻。結(jié)果，播放頁面會提醒流量消耗。右擊，在新標簽頁中打開即可查看此為在沒有網(wǎng)絡狀態(tài)下，TAB欄的五個頁面

流程，先關閉網(wǎng)絡，再打開APP。

結(jié)果，前兩個TAB頁面不能顯示，后三個TAB頁面可以正常顯示。右擊，在新標簽頁中打開即可查看3.3鍵盤輸入只有在手機號驗證登錄時，點擊手機號輸入欄/驗證碼輸入欄，會彈出數(shù)字鍵盤。其余所有的輸入都是彈出字母鍵盤。右擊，在新標簽頁中打開即可查看在豎屏播放頁面，右下角有一個笑臉按鈕，點擊后，底側(cè)彈出表情包鍵盤。

在字母鍵盤中，也可以點擊笑臉按鈕，切換至表情包鍵盤。右擊，在新標簽頁中打開即可查看3.4評論框右擊，在新標簽頁中打開即可查看頁面名稱：評論頁面頁面入口：在TAB欄“首頁”下，任一標簽頁面內(nèi)，點擊右上角“消息”按鈕，進入消息頁面頁面結(jié)構(gòu)：評論切換欄用戶信息欄用戶的評論內(nèi)容對用戶評論的反饋二次評論評論欄頁面邏輯內(nèi)容及其詳細交互：從左到右，發(fā)送彈幕、彈幕開關。發(fā)送彈幕，點擊該按鈕，按鈕變?yōu)椤皬椖惠斎胫小?，同時底側(cè)彈出鍵盤，可以進行彈幕的發(fā)送。彈幕開關，默認為開啟彈幕；點擊該圖標，圖標右下角顯示“禁止“圖標，關閉彈幕；再次點擊，復原。評論切換欄，默認“按熱度”（熱度按多項指標計算），所有用戶的評論按熱度從大到小排序；點擊該按鈕，變?yōu)椤卑磿r間“，所有用戶的評論按時間，最近發(fā)布的排序靠前。用戶信息欄：從左到右，用戶信息、關注。顯示用戶頭像、名稱、賬號等級、評論時間（只有豎屏播放-評論框內(nèi)，顯示了用戶逇賬號等級）關注，在“按熱度”下，排序靠前的三個用戶會顯示“關注”按鈕；如果是該視頻的up主的評論，不管“按熱度”、“按時間”，都會顯示。點擊后變?yōu)榛疑摹耙殃P注”，然后再次點擊，底側(cè)彈出窗口，點擊”取消關注“即可取消關注。用戶的評論內(nèi)容，點擊此范圍，底側(cè)彈出鍵盤，進行對該用戶評論內(nèi)容的二次評論。對用戶評論的反饋，從左到右，點贊、不喜歡、分享、評論、拉黑按鈕。點贊，按鈕右方顯示點贊數(shù)，點擊該按鈕，點贊數(shù)加1，同時按鈕與點贊數(shù)變紅，如果再次點擊，恢復原狀。不喜歡，點擊后，按鈕變紅，如果再次點擊，恢復原狀（同時點贊與不喜歡不能同時點擊，點擊其中一個，將取消之前對另一個的點擊）。分享，點擊后，底側(cè)彈出分享框，可將該用戶評論分享至第三方平臺。評論，點擊后，底側(cè)彈出鍵盤，進行對該用戶評論內(nèi)容的二次評論。拉黑，點擊后，從該按鈕彈出窗口，可選擇“加入黑名單”/“舉報”：點擊前者，將彈出警示，點擊”確認“可拉黑該用戶；點擊后者，右側(cè)彈出舉報頁面，必須且只能選擇一個舉報的類型，然后點擊“提交”按鈕可進行舉報。二次評論：此欄顯示了用戶對用戶評論的評論，包括用戶名稱、評論內(nèi)容，最下方是二次評論的數(shù)量。點擊此欄，底側(cè)彈出二次評論框，展示所有的二次評論。評論欄：從左到右，評論欄、表情包。評論欄，點擊后，底側(cè)彈出鍵盤，進行對該視頻的評論（可點擊表情包按鈕，切換至表情包鍵盤）。表情包，點擊后，底側(cè)彈出表情包鍵盤，可自由選擇多種表情包。選擇完畢后，可點擊鍵盤按鈕，切換至普通鍵盤，輸入文字，完成對視頻的評論。3.5消息頁右擊，在新標簽頁中打開即可查看頁面名稱：消息頁面頁面入口：在“首頁”任一標簽下，點擊右上角消息按鈕，右側(cè)彈出消息頁面頁面結(jié)構(gòu)：通訊錄區(qū)、互動區(qū)、消息區(qū)頁面邏輯內(nèi)容及其交互詳細說明：通訊錄區(qū)：左邊的為通訊錄按鈕，點擊后，右側(cè)彈出通訊錄頁面。右邊的為消息設置按鈕，點擊后，彈出彈窗，從上到下分別為“消息設置”、“up主”小助手、“應援團消息助手”，點擊將進入相應頁面?；訁^(qū)：此處是一個互動消息的集中，可以按照不同的互動類型查看與個人有關的互動消息。從左到右描述：回復我的：點擊后，右側(cè)彈出頁面，里面從上到下按時間順序展示了其他用戶對于我發(fā)表的評論的回復。點擊任一回復框，將跳轉(zhuǎn)進入該回復所在的頁面。@我：點擊后，右側(cè)彈出頁面，里面從上到下按時間順序展示了其他用戶發(fā)表的對@我的評論。點擊任一評論框，將跳轉(zhuǎn)進入該回復所在的頁面。收到的贊：點擊后，右側(cè)彈出頁面，里面從上到下按時間順序展示了其他用戶對于我的評論的點贊。點擊任一回復框，將跳轉(zhuǎn)進入該回復所在的頁面。系統(tǒng)通知：點擊后，右側(cè)彈出頁面，里面從上到下按時間順序展示了系統(tǒng)通知。聊天列表：從上到下按時間順序展示了用戶對我發(fā)送的私信，點擊任一私信欄，右側(cè)彈出與該用戶的對話頁面，類似于社交APP的對話。3.6分享頁3.6.1豎屏分享頁面右擊，在新標簽頁中打開即可查看3.6.2橫屏分享頁面在橫批播放頁面，點擊分享按鈕，底側(cè)彈出分享框，同時頁面的其余功能按鈕消失，變?yōu)椴シ乓曨l的頁面效果。分享的功能同豎屏一致。3.7播放頁面交互此部分主要是考察，在播放視頻時，單擊/雙擊頁面帶來的交互及頁面變化。3.7.1豎屏播放頁面交互右擊，在新標簽頁中打開即可查看3.7.2橫屏播放頁面交互右擊，在新標簽頁中打開即可查看3.8播放頁面功能此部分主要是考察，在播放視頻時，播放頁面上的各種功能。3.8.1豎屏頁面播放功能右擊，在新標簽頁中打開即可查看3.8.2橫屏頁面播放功能右擊，在新標簽頁中打開即可查看四、產(chǎn)品流程圖4.1登錄注冊流程右擊，在新標簽頁中打開即可查看4.2觀看視頻/購物流程右擊，在新標簽頁中打開即可查看五、產(chǎn)品頁面邏輯圖右擊，在新標簽頁中打開即可查看右擊，在新標簽頁中打開即可查看六、頁面詳細說明頁6.1首頁頁面右擊，在新標簽頁中打開即可查看頁面名稱：首頁-推薦頁面頁面入口：在首頁，第二欄位于“推薦”時。每次打開APP，會自動跳入首頁-推薦頁面頁面結(jié)構(gòu)：搜索區(qū)；標簽區(qū)；輪播區(qū)；展示區(qū)；TAB欄頁面邏輯內(nèi)容及其交互詳細說明：整個頁面：上拉可刷新搜索區(qū)：位于頁面最頂端，從左到右描述：左邊是用戶頭像，點擊后，跳轉(zhuǎn)進入“我的”頁面。中間是搜索欄，點擊后，右側(cè)滑出搜索頁面。右邊是消息按鈕，點擊后，右側(cè)滑出消息頁面，詳見上文消息頁面。標簽區(qū)：該部分可以選擇進入不同頁面，每次打開APP，會自動跳入推薦頁面。在推薦頁面，“推薦”二字加粗、變紅，底部有一紅線。切換頁面的交互方式有兩種，左右滑動以及直接點擊“直播”/“熱門”等按鈕。輪播區(qū)：三個banner輪流向左滑動，每次展示持續(xù)2s。右下角有三個圓點，當展示某一banner時，對應的圓點將亮起，其余的變灰。用戶可以左右滑動以切換banner。點擊Banner，右側(cè)滑出相應的頁面。展示區(qū)：視頻呈兩欄式分布，可上下滑動。每一視頻包括的信息：封面、播放量、評論、時長、視頻名稱、點贊數(shù)/視頻類型。點擊該區(qū)，右側(cè)滑出豎屏播放頁面，視頻自動播放。TAB欄：在首頁頁面，對應的文字、圖標變紅。點擊其他圖標，可跳轉(zhuǎn)進入其他頁面。6.2頻道頁面6.2.1頻道-頻道頁面右擊，在新標簽頁中打開即可查看頁面名稱：頻道-頻道頁面頁面入口：打開APP后，點擊TAB”頻道“，默認進入頻道頁面頁面結(jié)構(gòu)：標簽區(qū)搜索區(qū)訂閱區(qū)最近看過區(qū)詳細訂閱區(qū)頁面邏輯內(nèi)容及其交互詳細說明整個頁面：上拉可刷新標簽區(qū)：左邊是頻道按鈕，右邊是分區(qū)按鈕。在頻道頁面，“頻道”按鈕顯示為紅色加粗，下方有一紅線。在整個頁面任意位置，向左滑動/點擊分區(qū)按鈕，將切換至分區(qū)頁面。搜索區(qū)：點擊后，右側(cè)滑出搜索頁面。訂閱區(qū)：此處展示的是用戶訂閱的頻道。訂閱的頻道從左到右按訂閱時間先后分布，最右邊的一個是“更多頻道”。點擊任一訂閱頻道，右側(cè)滑出該頻道頁面；點擊“更多頻道”按鈕，右側(cè)滑出“全部頻道”頁面。最近看過區(qū)：此處從左到右按，瀏覽的時間先后展示最近看過頻道。可以左滑查看更多看過的頻道。點擊任一頻道，右側(cè)滑出該頻道頁面。詳細訂閱區(qū)：此處展示了訂閱頻道的詳情，每個訂閱頻道展示了兩個視頻?？梢韵蛳禄瑒樱榭锤囝l道。點擊右上角“管理訂閱”，右側(cè)滑出“全部頻道”頁面；“進入頻道”按鈕的左邊顯示了更新的視頻數(shù)量，點擊該按鈕，右側(cè)滑出該頻道頁面；點擊下方展示的任一視頻，右側(cè)滑出該視頻豎屏播放頁面。6.2.2頻道-分區(qū)頁面右擊，在新標簽頁中打開即可查看頁面名稱：分區(qū)頁面頁面入口：打開APP后，點擊TAB頻道，進入頻道頁面，向左滑動，進入分區(qū)頁面頁面結(jié)構(gòu)：標簽區(qū)、類別區(qū)、TAB欄頁面邏輯內(nèi)容以及交互詳細說明：標簽區(qū)：左邊是頻道按鈕，右邊是分區(qū)按鈕。在分區(qū)頁面，“分區(qū)”按鈕顯示為紅色加粗，下方有一紅線。在整個頁面任意位置，向右滑動/點擊分區(qū)按鈕，將切換至頻道頁面。類別區(qū)：這一部分展示了所有的分區(qū)。可以向下滑動。點擊任一圖標，右側(cè)滑出該分區(qū)頁面。TAB欄：在頻道頁面，對應的文字、圖標變紅。點擊其他圖標，可跳轉(zhuǎn)進入其他頁面。6.3動態(tài)頁面6.3.1動態(tài)-綜合右擊，在新標簽頁中打開即可查看頁面名稱：動態(tài)-綜合頁面頁面入口：打開APP后，點擊TAB欄“動態(tài)”按鈕，進入綜合頁面。在視頻頁面任意位置，向右滑動/點擊綜合按鈕，將切換至綜合頁面。頁面結(jié)構(gòu)：從上到下描述：標簽區(qū)搜索區(qū)關注up主的直播區(qū)話題區(qū)綜合動態(tài)區(qū)TAB欄頁面邏輯內(nèi)容及其交互詳細說明：整個頁面：上拉可刷新標簽區(qū)：從左到右，視頻、綜合、編輯按鈕。在綜合頁面，“綜合”按鈕顯示為紅色加粗，下方有一紅線。點擊編輯按鈕，右側(cè)滑出編輯頁面，可以編輯并發(fā)布動態(tài)。點擊后，底側(cè)跳出搜索頁面，可以搜索動態(tài)內(nèi)容。關注up主的直播區(qū)：此處顯示的是用戶關注的正在直播的up主。點擊頭像后，右側(cè)滑出該up主豎屏直播頁面，默認播放直播。話題區(qū)：此處顯示的是網(wǎng)站的熱門話題以及用戶的訂閱話題。點擊“查看更多”按鈕，右側(cè)滑出話題頁面。綜合動態(tài)區(qū)：此處從上到下，按投稿時間先后展示了關注的up主的綜合動態(tài)（包括專欄、視頻、圖文）?？梢陨舷禄瑒?，查看更多綜合動態(tài)。點擊右上角“更多”按鈕，底側(cè)彈出彈窗，頁面其余部分變暗。彈窗內(nèi)容包括稍后在看等功能。點擊up主頭像，右側(cè)滑出up主個人空間。點擊其余部分，右側(cè)滑出豎屏視頻播放頁面/專欄頁面/圖文頁面。TAB欄：同上。6.3.2動態(tài)-視頻右擊，在新標簽頁中打開即可查看頁面名稱：動態(tài)-視頻頁面頁面入口：打開APP后，點擊TAB欄“動態(tài)”按鈕，進入綜合頁面，向右滑動，進入視頻頁面。在視頻頁面任意位置，向左滑動/點擊綜合按鈕，將切換至綜合頁面。頁面結(jié)構(gòu)：從上到下描述：標簽區(qū)搜索區(qū)關注up主的最常訪問區(qū)我的追番追劇區(qū)視頻動態(tài)區(qū)TAB欄頁面邏輯內(nèi)容及其交互詳細說明：整個頁面：上拉可刷新標簽區(qū)：從左到右，視頻、綜合、編輯按鈕。在綜合頁面，“視頻”按鈕顯示為紅色加粗，下方有一紅線。點擊編輯按鈕，右側(cè)滑出編輯頁面，可以編輯并發(fā)布動態(tài)。搜索區(qū)：點擊后，底側(cè)跳出搜索頁面，可以搜索動態(tài)內(nèi)容。關注up主的最常訪問區(qū)：此處顯示的是用戶關注的最常訪問的up主頭像右下角有紅點的up主排在左邊，沒有的排在右邊。頭像右下角的紅點表示該up主有新的視頻動態(tài)，點擊紅點頭像后，跳轉(zhuǎn)進入該up主的視頻動態(tài)頁面。返回后，該up主紅點消失。我的追番追劇區(qū)：此處顯示的用戶的追番追劇，可左右滑動。點擊任一番劇，右側(cè)滑出該番劇豎屏播放頁面。點擊右上角“全部”按鈕，右側(cè)滑出“我的收藏”頁面，默認“追番”標簽。視頻動態(tài)區(qū)：此處從上到下，按投稿時間先后展示了關注的up主的視頻動態(tài)?？梢陨舷禄瑒?，查看更多視頻動態(tài)。點擊右上角“更多”按鈕，底側(cè)彈出彈窗，頁面其余部分變暗。彈窗內(nèi)容包括稍后在看等功能。點擊up主頭像，右側(cè)滑出up主個人空間。點擊其余部分，右側(cè)滑出豎屏視頻播放頁面。TAB欄：同上。6.4會員購頁面右擊，在新標簽頁中打開即可查看頁面名稱：動態(tài)-綜合頁面頁面入口：打開APP后，點擊TAB欄“會員購”按鈕，進入會員購頁面頁面結(jié)構(gòu)：從上到下描述功能區(qū)搜索區(qū)分類區(qū)精選區(qū)輪播區(qū)展示區(qū)TAB欄頁面邏輯內(nèi)容及其交互詳細說明：整個頁面：上拉可刷新功能區(qū)：從左到右，收藏、購物車、會員購中心按鈕。點擊按鈕，右側(cè)將滑出對應的頁面，可進行相應的操作。點擊后，底側(cè)跳出搜索頁面，可以搜索動態(tài)內(nèi)容。分類區(qū)：此處展示的是商品的分類，點擊圖標可進入對應的分類商品。精選區(qū)：從左到右，分別為“今日上新”、“圈子社區(qū)”、“IP樂園”。點擊后，將進入相應的頁面。輪播區(qū)：六個banner輪流向左滑動，每次展示持續(xù)5s。右下角有三個圓點，當展示某一banner時，對應的圓點將亮起，其余的變灰。用戶可以左右滑動以切換banner。點擊Banner，右側(cè)滑出相應的頁面。展示區(qū)：頂部的四個按鈕是類別，下方是對應的商品展示區(qū)。商品呈兩欄式分布，點擊某一商品，進入該商品詳細頁，可以完成支付購買。TAB欄：同上。6.5我的頁面右擊，在新標簽頁中打開即可查看頁面名稱：我的頁面頁面入口：點擊TAB欄“我的”按鈕，進入我的頁面。在“首頁”頁面，點擊左上角頭像，進入我的頁面。頁面結(jié)構(gòu)：從上到下描述背景設置區(qū)用戶信息區(qū)社交區(qū)大會員區(qū)視頻功能區(qū)創(chuàng)作區(qū)服務區(qū)TAB欄頁面邏輯內(nèi)容及其交互詳細說明：背景設置區(qū)：從左到右的功能，掃一掃、主題顏色、夜間。點擊掃一掃，右側(cè)滑出該功能頁面。點擊主題顏色，右側(cè)滑出該功能頁面，可以設置首頁視圖、主題顏色。點擊夜間，切換至夜間模式，整個APP的白色背景變?yōu)榛疑尘?。用戶信息區(qū)：左邊，包括用戶頭像、昵稱、性別符號、賬號等級、會員資格、B幣數(shù)量、硬幣數(shù)量。右邊，顯示出空間兩字。點擊該區(qū)，右側(cè)滑出空間頁面，可以進行編輯資料、管理空間等操作