用Axure寫PRD:倒推網易云音樂APP產品需求文檔

130 評論 78359 瀏覽 586 收藏 32 分鐘

為了更加完整的描述產品的需求,規范需求表達方式,產品需求文檔(Product Requirement Document)應運而生,而作為產品經理的基本功,也是小白入門的必須掌握的部分。筆者作為一個小白沒有項目實戰,于是通過倒推已經成熟的產品來鍛煉寫需求文檔的技能。第一次使用Axure寫PRD,主要目的是希望通過大家給出的意見改進,很多表達不當的地方,還望各位大神多多指教,感激不盡。

本文倒推的是網易云音樂APP,由于功能入口繁多,本文在功能需求與交互的部分,只以主要流量入口“發現音樂-推薦”示例。以下是我的原型截圖:

文檔目錄

一、產品概述

1. 產品介紹

網易云音樂于2013年1月正式上線,其移動端APP能夠為用戶提供在線收聽原創音樂、私人FM、電臺、短視頻等服務,同時還可以進行在線互評,社區互動的一款音樂平臺APP。

1.1產品定位:

移動音樂社區,旨在成為中國最大的移動音樂社區和開放平臺,形成獨一無二的以用戶為中心的音樂生態圈。

1.2用戶人群:

熱愛音樂,對音樂有較高需求的高素質年輕人群:大學生、白領等。

2.文檔屬性

3.需求整理

二、產品結構圖

1.產品功能結構圖

2. 產品信息結構圖

(第一次做結構圖,對功能信息具體怎么去劃分開始還是有些模糊的,但通過一邊做一邊思考發現,功能結構則是整個產品的骨架,信息結構則是由骨架傳遞出來的信息組合而成的,例如評論,可以作為一種功能,但評論顯示的數量,評論用戶的信息,評論的內容則是信息。個人理解,有偏差請指正~~)

三、 全局說明

1.功能權限

分為登錄和未登錄狀態:

  • 登錄狀態:可進行App內所有操作;
  • 未登錄狀態:即游客試用狀態;常規的音樂播放與下載、視頻播放、專欄瀏覽電臺收聽等均可以進行,但無法進行簽到,訂閱電臺,收藏專欄,發布動態;點贊評論功能也無法使用;在商城里無法進行商品的加購和購買;

2. 頁面內交互

2.1頂部、底部彈窗

2.2toast、dialog 彈窗

3.鍵盤說明

  • 點擊手機號輸入框時頁面底部彈出數字鍵盤;
  • 點擊其他輸入框頁面底部彈出字母全鍵盤。

(此處特別說明,注冊賬號時,填寫電話號碼后需要接收數字驗證碼,但網易云音樂現有版本點擊驗證碼輸入框時顯示的并非數字鍵盤,而是字母全鍵盤)

4.頁面異常

5.頁面間交互方式

6.更多操作

四、部分業務邏輯

1. 登錄注冊業務邏輯

(這是用axure做的流程圖,沒有箭頭看起來有點奇怪)

2. 音樂下載邏輯

(會員部分省略了歌單判斷邏輯)

五、功能需求與交互(部分展示)

1. 主頁進入

1.1?使用場景:

已登錄用戶剛打開網易云音樂APP。

1.2 交互需求

  • 打開應用時,若無其他操作,起始頁停留約2秒后 進入廣告頁面;廣告頁面停留約5秒進入音樂主頁。
  • 打開應用時,起始頁停留約2秒后 進入廣告頁面,點擊右下角“跳過”,直接進入音樂主頁。
  • 點擊廣告頁面,進入相應廣告鏈接。

2.登錄/試用/注冊

2.1 用戶使用場景

  • 當用戶第一次使用該應用時
  • 當游客用戶需要執行評論、購買、收藏、訂閱等操作時(參見前文3.1關于”功能權限說明“)

2.2 交互需求

(1)輸入/前置條件:點擊登錄按鈕

交互:

  1. 點擊手機號登錄按鈕時,跳轉到手機登錄頁面;獲取焦點在電話號碼輸入框,默認為+86形式,數字鍵盤從頁面底部彈出;
  2. 當輸入非數字內容時,輸入界面不顯示任何內容;輸入數字小于11位時,點擊登錄提示“請輸入11位數字手機號”當輸入大于11位數字時,超過部分不顯示;
  3. 輸入密碼時,密碼顯為不可見狀態;
  4. 忘記密碼時,點擊密碼欄右側“忘記密碼?”可進行重置密碼操作(前文有具體的登錄邏輯,此處不細述,見4.1)
  5. 點擊登錄頁面下方第三方登錄按鈕時,跳轉到第三方授權頁面。

(2)輸入/前置條件:點擊“注冊”按鈕

交互:

  1. 點擊“注冊”按鈕時,跳轉到手機號注冊頁面;
  2. 點擊手機號輸入框,數字鍵盤從底部彈出;
  3. 手機號默認+86,輸入限制11位;
  4. 密碼輸入不可見,限制不低于6位;當設置低于6位密碼時,點擊注冊按鈕提示toast“請輸入6位或以上的密碼”(前文有具體的注冊邏輯,此處不細述,見4.1)。

(3)輸入/前置條件:點擊“游客試用”時,直接進入音樂主頁面

3.搜索功能


3.1 用戶畫像

3.2 交互需求(下載頁面邏輯見前文)

(1)進入搜索界面

  • 輸入/前置條件:點擊搜索圖標按鈕
  • 功能描述:搜索輸入歌名、專輯、人名,關鍵詞;

交互:

  1. 點擊搜索按鈕時,跳轉到搜索頁面;
  2. 光標在輸入框中獲取焦點;
  3. 搜索框提示”提示內容或推薦內容“
  4. 文字輸入鍵盤從底部彈出遮擋頁面。

(2)執行搜索

輸入/前置條件:

  • 點擊輸入法鍵盤搜索按鈕
  • 直接點擊下拉列表中搜索內容 ?*
  • 點擊熱門關鍵詞
  • 點擊搜索歷史記錄

交互:

  1. 輸入搜索內容時,提示文字消失;輸入框下方向顯示搜索關鍵詞相關內容;
  2. 點擊”搜索”關鍵詞“或點擊推薦相關搜索內容時,跳轉到搜索結果頁面,鍵盤消失;結果頁面搜索框中顯示關鍵詞;
  3. 點擊熱門搜索關鍵詞執行搜索功能;點擊搜索歷史記錄,執行搜索功能;
  4. 點擊返回按鈕回到執行搜索前頁面。

4. 音樂播放頁面

4.1 用戶場景

  1. 播放歌曲
  2. 切換上一曲/下一曲
  3. 查看歌詞
  4. 想查看歌曲信息
  5. 想查看歌曲作者信息
  6. 喜歡這首歌,想添加到喜愛歌單
  7. 很喜歡這首歌,想分享給朋友聽

4.2 交互需求

(1)音樂播放

輸入/前置條件:點擊音樂播放按鈕;

交互:

  1. 音樂暫停狀態,點擊播放按鈕時,按鈕變為”暫停按鈕“;
  2. 音樂開始播放,”留聲機唱盤“順時針旋轉,留聲機唱臂與唱盤接接觸;(此處動圖未展示)
  3. 音樂進度隨音樂播放進度增長,音樂播放時間隨播放增長。

(2)音樂暫停

輸入/前置條件:點擊暫停按鈕;

交互:

  1. 音樂播放狀態,點擊暫停按鈕時,按鈕變為“播放按鈕”;
  2. 音樂暫停播放,“留聲機唱盤”停止旋轉; ?唱臂與唱盤脫離接觸;(此處動圖未展示)
  3. 音樂進度條停止增長;音樂播放時間停止增長。

(3)切歌

  1. 點擊下一曲按鈕,上一首音樂暫停播放;
  2. 留聲機唱臂與唱盤約脫離“1s”后,下一首音樂唱盤從頁面右邊緣滑入;
  3. 留聲機唱臂與下一首唱盤接觸后開始播放下一首音樂,進度條和播放時間回到初始狀態。

(4)添加喜愛

點擊愛心按鈕,愛心變為紅色;再次點擊恢復原貌。

(5)查看歌詞

輸入/前置條件:點擊唱盤;

交互:

  1. 點擊唱盤時,音樂播放界面消失,顯示歌詞界面;
  2. 原音樂播放界面進度條及以下按鈕保持不變;歌詞頁面頂部顯示聲音狀態條;
  3. 歌詞根據音樂進度向上滾動;正在播放詞句高亮突出顯示。

(6)滑動歌詞

  1. 歌詞部分可以進行上下滑動;滑動第一行文字和最后一行文字到達頁面中部時邊界,到達邊界后無法拖動;(本文圖片未展示)
  2. 滑動歌詞到某一句后,歌詞左側顯示播放按鈕,點擊可從該句開始播放;
  3. 滑動歌詞到某一句后,無操作時歌詞滾動暫停5秒,5秒后恢復正常滾動。

(7)分享(同前文3.1 底部彈窗)

輸入/前置條件:點擊分享按鈕

交互:

  1. 點擊分享按鈕時,分享選項界面從頁面底部向上滑入;
  2. 遮蓋背景內容;背景內容變暗;背景內容變為靜態;
  3. 若不執行分享操作,點擊背景,分享選項向下滑出頁面;背景內容恢復正常;
  4. 執行分享選項后,跳轉到該選項相關頁面。

(8)查看歌曲相關信息(同前文3.1 底部彈窗)

輸入/前置條件:點擊相應執行按鈕;(圖中的“三點”)

交互:

  1. 點擊按鈕時,歌曲信息頁面由頁面底部向上滑入;
  2. 遮蓋背景內容;背景內容變暗;背景內容變為靜態;
  3. 若不執行分享操作,點擊背景,分享選項向下滑出頁面;背景內容恢復正常。

5.下載(免費下載/會員下載)

5.1 用戶場景

  • 公司舉行頒獎會議,小愛要下載一些音樂作為領獎北京音樂
  • 小剛想給自己做的搞笑視頻配上背景音樂
  • 小葉想給自己換個炫一點的手機鈴聲

5.2 交互需求(下載邏輯見前文4.2)

(1)免費歌曲

1)當該歌曲未被收藏到歌單前:

交互:

  1. 點擊下載按鈕時,中部彈出歌單頁面,遮蓋背景部分;背景內容變暗;
  2. 點擊新建單,中部彈出建立歌單頁面,不透明遮蓋歌單頁面,歌單變暗;焦點獲取在輸入框可輸入 ? 歌單名稱;輸入框右下方提示輸入字符數,限制40字符;輸入框下方復選框可勾選是否設置為“隱私歌單”點擊取消回到歌單頁面,歌單頁面回復正常亮度;輸入歌單名稱后點擊確定,開始下載;
  3. 點擊已有歌單直接開始后臺下載,歌單頁面消失,背景界面恢復正常亮度;下載完成后,下載按鈕右下角顯示“√”。

2)當該歌曲已被收藏到歌單時,點擊下載按鈕直接默認下載到收藏歌單:(邏輯參見本文4.2)

交互:點擊下載按鈕時,后臺直接開始下載,不顯示界面,下載成功后,下載按鈕右下角顯示“√”。

(2)付費歌曲:

點擊下載按鈕時:

  • 會員直接開始下載(具體同上)
  • 非會員跳轉到會員界面,顯示加載進度條;購買會員后繼續下載(下載邏輯參見4.2)

6.評論功能

6.1 用戶使用場景

  • 小A看了劉若英的后來,再次聽《后來》這首歌,更是百感交集,很想跟別人分享一下感受,也想知道是不是有同樣很多人跟我有一樣的感受呢?
  • 小B聽到自己家idol出的新歌,必須挺!

6.2 頁面邏輯

  1. 點擊評論按鈕,進入評論頁面;頁面主要分為:被評論歌曲+歌曲相關內容推薦+歷史評論內容+評論輸入框;
  2. 點擊被評歌曲版塊,回到歌曲播放頁面;點擊相關推薦鏈接到相關內容;點擊歷史評論內容可進回復,分享等操作;點擊評論者頭像可查看該評論者主頁;
  3. 評論內容分為“精彩評論”與“最新評論” 精彩評論按點贊數量降序排列,展示15條后其余部分折疊,點擊展開;最新評論按發布時間,優先展示最近評論;評論右上角可進行點贊操作,點擊按鈕執行點贊,點贊數量增加,再次點擊按鈕,執行取消點贊,點贊數減少;
  4. 評論輸入框內可輸入內容,內容限制140字;未輸入內容時,“發送“按鈕禁止操作

6.3 交互需求

  1. 點擊點贊按鈕時,點贊按鈕和點贊數量同時變為紅色,同時點贊數量+1;再次點擊按鈕時,紅色消失恢復正常顏色,點贊數量-1;
  2. 點擊評論按鈕時,評論頁從底部快速滑入;
  3. 評論框中無內容時,發送按鈕字體顯示為灰色;輸入內容后顯示黑色;
  4. 評論內容超過140字時,顯示toast彈窗“評論字數超過限制”
  5. 評論頁面可進行上下滑動,上下有邊界,上邊界無法拖動,到達下邊界執行更多內容加載
  6. 評論框在頁面底部顯示;評論框顯示提示文字;
  7. 點擊輸入框時,輸入法鍵盤從頁面底部滑入;遮蓋評論頁面;輸入框同步上移,保持與鍵盤相連;光標獲取焦點在輸入框;(彈出輸入框后仍然可以操作背景內容)
  8. 點擊“被評歌曲版塊”時,原歌曲頁面從底部快速滑入;點擊相關推薦內容時,相關內容頁面從底部快速滑入;點擊評論者頭像時,評論者主頁頁面從底部快速滑入;
  9. 點擊已有評論內容時,頁面中部彈出“評論操作框”遮蓋背景頁面,背景內容變暗;點擊背景頁面后彈窗淡出;背景內容恢復正常亮度;

評論操作框執行:

(1)前置條件:點擊回復評論

交互:

  1. 輸入法鍵盤從頁面底部滑入;
  2. 遮蓋評論頁面;
  3. 輸入框同步上移,保持與鍵盤相連;
  4. 光標獲取焦點在輸入框;
  5. 點擊收起鍵盤按鈕后,鍵盤向下滑出消失,輸入框回到原先位置。

(2)前置條件:點擊分享評論

交互:同前文分享界面,此處不贅述

(3)前置條件:點擊復制評論

交互:頁面底部顯示toast彈窗”復制成功”(toast彈窗見前文)

(4)前置條件:點擊舉報評論

交互:

  1. 頁面中部彈出舉報原因彈窗,遮蓋背景內容,背景內容變暗無法操作;
  2. 點擊背景彈窗淡出。

7.主頁面切換

7.1 用戶使用場景

當用戶想看點其他內容時;

7.2?交互需求

  1. 主頁面功能頁面切換:點擊版塊按鈕水平切換頁面,(當上一個頁面按鈕在新頁面按鈕左邊時,新頁面從右邊緣水平滑入;當上一個頁面按鈕在新頁面按鈕右邊時,新頁面從左邊緣水平滑入;)
  2. 推薦版塊Tab切換時,點擊Tab按鈕(或左右滑動時),頁面水平切換;按鈕字體高亮顯示;小滑塊隨之移動;切換方向規則同上。

【以下為網易云音樂APP主要流量入口“發現”版塊的“推薦”Tab示例】

8.推薦頁面

8.1主頁面邏輯與交互需求

  • 推薦頁面主要由4個部分構成:banner+快捷入口+推薦相關板塊+欄目調整按鈕,分別點擊可以進入相關鏈接頁面;
  • 主頁面交互:頁面可進行上下滑動,上下有邊界;到達上下邊界時頁面無法滑動;邊界顯示透明遮蓋陰影;

8.2 詳細功能

(1)FM

頁面邏輯:

  • FM主要分為“私人FM”和“跑步FM”兩個部分;
  • 私人FM將進行音樂隨機播放,每天限量20首,可對其進行下一曲切換,添加喜愛、刪除、評論操作;
  • 跑步FM則是根據跑步頻率自動播放何時的歌曲;同時可以開啟離線操作,在wifi情況下提前緩存音樂,離線收聽。

交互需求:

  • 點擊私人FM按鈕時,FM頁面從底部快速滑入,默認選中“私人FM”頁面;對應的按鈕和文字高亮顯示;進入頁面音樂自動播放;(評論 喜愛等操作不贅述)
  • 點擊跑步FM時,按鈕和文字相應高亮顯示,私人FM按鈕和文字變暗;
  • 進入跑步FM頁面后,主頁面圓形向四周動態輻射狀獲取步頻;獲取步頻后,圓形變為靜態,圓形中間顯示步頻;音樂播放功能區在頁面底部逐漸顯現;
  • 點擊離線音樂包按鈕時,中部顯示彈窗;遮蓋背景,背景變暗;點擊背景后彈窗消失,背景恢復;

(2)每日推薦

該功能是基于海量的數據以及用戶的下載、收藏、喜歡、分享等行為進行的口味話推薦,每天6:00點更新,限量30首。

交互需求:

  • 點擊每日推薦按鈕時,推薦頁面從底部快速滑入;
  • 頁面可進行上下滑動,上下有邊界,邊界拖動時顯示透明遮蓋形狀,該形狀在結束滑動行為或約2秒后消失(本文圖中未展示)。

(篇幅有有限,每日推薦的歌曲的各種交互暫不在此處羅列,部分交互可參看動圖)

(3)歌單

頁面邏輯:

  • 點擊歌單按鈕,進入精品歌單頁面,點擊封面進入精品歌單所有歌單列表;
  • 點擊全部歌單按鈕,進入選擇分類頁面,可點擊選擇分類,進入對應類型歌單;
  • 點擊具體歌單封面,進入歌單詳細頁。

(4)排行榜

頁面邏輯:

  • 點擊排行榜按鈕,進入榜單頁面,頁面展示不用類型的排行榜分為:官方榜、全球榜、用戶榜;
  • 官方排行榜展示前三名歌曲名稱與作者;
  • 點擊榜單封面可進入具體榜單頁面。

(5)專欄

頁面邏輯:

  • 拖動推薦頁面到“精選專欄”位置,該位置展示三個專欄摘要,主要包括標題、閱讀量和封面;
  • 點擊“精選專欄”字樣,打開專欄頁面;
  • 點擊推薦展示專欄的標題或封面,直接進入該專欄的具體內容頁。

(6)推薦歌單

頁面邏輯:

  • 該板塊展示6個推薦歌單,主要展示封面、收聽數、歌單名;
  • 點擊推薦歌單擴展按鈕,進入效果同上述的“歌單”快捷入口頁面;
  • 點擊標題或封面,直接進入歌單內容頁面。

(7)獨家放送

頁面邏輯:

  • 該板塊主要是將精選的各個類型的獨家內容推薦展示,可以包括視頻、話題、專輯等;
  • 展示三個推薦內容,包括封面、標題、和類型標簽;
  • 點擊標題或內容直接進入相關頁面。

(8)會員專區

頁面邏輯:

  • 該板塊是針對會員的一個集中展示的入口;
  • 展示三個推薦內容,橫排展示,包括專輯、單曲、電臺等在內;
  • 主要展示封面和標題;
  • 點擊封面或標題直接進入相關內容頁面;
  • 點擊會員專區擴展按鈕,非會員進入VIP開通頁面。

(9)主播電臺

頁面邏輯:

  • 該標簽頁展示6個推薦內容,包括付費標識、封面、標題、描述;
  • 點擊封面或描述直接進入電臺內容頁;
  • 點擊主播電臺擴展按鈕,直接切換發現音樂的Tab,即直接進入了電臺功能區。

(10)調整順序

頁面邏輯:點擊該按鈕進入主頁標簽欄目的順序調節頁面,右方按鈕拖動即可調節;

交互: 調節進入按鈕在頁面底部顯示

  1. 進入調節順序頁面后,按住調節目標對應的按鈕后,該行欄目標題變暗,上下拖動垂直交換順序;
  2. 欄目名稱重疊時,該行呈透明;
  3. 結束拖動時,字體恢復深色;
  4. 上下拖動有邊界,到達邊界后無法拖動;
  5. 在點擊非拖動按鈕的欄目標題區域時,改行顯示深色,約1秒后深色消失。

9.聽歌識曲/定時停止播放

(1)聽歌識曲

用戶使用場景:

  • 小胡今天在奶茶店聽到了一首很對胃口的歌,但直接去問小姐姐又略顯羞澀,但又很想知道歌名好去下載聽歌;
  • 小江在觀看視頻時,被背景音樂吸引到,想知道歌名。

前置條件:點擊識別按鈕,以及開啟語音權限;

交互需求:

  1. 點擊主頁面左上角折疊按鈕,個人設置功能區由左邊緣滑出,遮蓋原頁面,原頁面變暗;
  2. 點擊聽歌識曲,直接進入聽歌識別功能;顯示正在識別音樂字樣;識別界面程動態輻射狀;
  3. 點擊識別頁面,停止識別,停止動態輻射。

(2)定時停止播放

用戶使用場景:

小明每天睡覺都有聽歌的習慣,晚上睡覺想聽點助眠歌曲,但又怕放著睡著了忘記關掉音樂浪費電量。

交互需求:

  1. 點擊定時停止播放按鈕時,個人設置功能區像左滑出頁面邊緣,中部顯示定時選擇頁面,頁面背景變暗;
  2. 選擇停止時間后,中部彈窗消失,背景頁面顯示正常亮度;頁面底部顯示toast彈窗“設置成功,將于**分鐘后關閉”。

六、總結

整個網易云音樂APP功能龐大繁雜,本文只對該應用的主要流量入口進行說明,多有不足還請見諒。

另外本文運用Axure進行PRD寫作的思路參考了@神戶短郎《用Axure寫PRD:虎撲app產品需求文檔》

歡迎各位指教~~~~小白菜致上~~

 

本文由 @小白菜 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自網絡

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你好可以交流下么

    來自江蘇 回復
  2. 樓主您好,想借鑒下你的原型文檔學習一下,郵箱:871763138@qq.com

    來自廣東 回復
  3. 想問一下 跳轉頁面的時候如何做到手機固定不動 就是不會閃一下..

    來自廣東 回復
    1. 動態面板?

      來自四川 回復
  4. 畫的真好!可以借鑒一下原型圖嘛?756077390@qq.com,謝謝!!

    來自上海 回復
  5. 現在求原型文檔還來得及嗎?麻煩大佬了
    2698248626@qq.com

    來自廣東 回復
  6. 2465229032@qq.com 同球啊 謝謝樓主大大

    來自北京 回復
  7. 求文擋:it.aly@qq.com

    來自北京 回復
  8. 挖墳~感覺作者做事愿意思考,又很用心,可以加微信交個朋友嗎~VX871231414

    來自北京 回復
  9. 煩請大神發一份原型文檔到郵箱,郵箱741724451@qq.com 萬分感謝!!

    來自廣東 回復
  10. 這已經是以前寫的東西了 評論里我發了原型的百度云鏈接 可以自取 永久有效的

    來自四川 回復
  11. 煩請大神發一份原型文檔到郵箱,郵箱704984831@qq.com 萬分感謝??!

    來自天津 回復
  12. 可否勞煩大神分享一份到郵箱,761367479@qq.com,謝謝謝謝。

    來自廣東 回復
  13. 跪求分享!330729815@qq.com

    來自新加坡 回復
  14. 產品小白,求大神分享!npf20082012@163.com

    來自北京 回復
  15. 產品小白,求分享原型文檔,感激不盡??!505447175@qq.com

    來自安徽 回復
  16. 正在求職的產品小白一枚,懇求分享一下原型文檔,感激不盡??!1521916742@qq.com

    來自福建 回復
  17. 原型文檔可以借鑒一下嗎?郵箱2330222197@qq.com 感謝~

    來自寧夏 回復
  18. 同產品小白,求分享bb520mb@163.com,感謝!

    來自廣東 回復
  19. 請問一下頁面的演示交互用什么做的呀

    來自上海 回復
    1. Axure

      回復
  20. 不錯不錯啊,學習了

    來自陜西 回復
  21. 帥哥 求一份原型學習一下272643147@qq.com謝謝啦

    來自北京 回復