用Axure寫PRD:倒推網易云音樂APP產品需求文檔
為了更加完整的描述產品的需求,規范需求表達方式,產品需求文檔(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)輸入/前置條件:點擊登錄按鈕
交互:
- 點擊手機號登錄按鈕時,跳轉到手機登錄頁面;獲取焦點在電話號碼輸入框,默認為+86形式,數字鍵盤從頁面底部彈出;
- 當輸入非數字內容時,輸入界面不顯示任何內容;輸入數字小于11位時,點擊登錄提示“請輸入11位數字手機號”當輸入大于11位數字時,超過部分不顯示;
- 輸入密碼時,密碼顯為不可見狀態;
- 忘記密碼時,點擊密碼欄右側“忘記密碼?”可進行重置密碼操作(前文有具體的登錄邏輯,此處不細述,見4.1)
- 點擊登錄頁面下方第三方登錄按鈕時,跳轉到第三方授權頁面。
(2)輸入/前置條件:點擊“注冊”按鈕
交互:
- 點擊“注冊”按鈕時,跳轉到手機號注冊頁面;
- 點擊手機號輸入框,數字鍵盤從底部彈出;
- 手機號默認+86,輸入限制11位;
- 密碼輸入不可見,限制不低于6位;當設置低于6位密碼時,點擊注冊按鈕提示toast“請輸入6位或以上的密碼”(前文有具體的注冊邏輯,此處不細述,見4.1)。
(3)輸入/前置條件:點擊“游客試用”時,直接進入音樂主頁面
3.搜索功能
3.1 用戶畫像
3.2 交互需求(下載頁面邏輯見前文)
(1)進入搜索界面
- 輸入/前置條件:點擊搜索圖標按鈕
- 功能描述:搜索輸入歌名、專輯、人名,關鍵詞;
交互:
- 點擊搜索按鈕時,跳轉到搜索頁面;
- 光標在輸入框中獲取焦點;
- 搜索框提示”提示內容或推薦內容“
- 文字輸入鍵盤從底部彈出遮擋頁面。
(2)執行搜索
輸入/前置條件:
- 點擊輸入法鍵盤搜索按鈕
- 直接點擊下拉列表中搜索內容 ?*
- 點擊熱門關鍵詞
- 點擊搜索歷史記錄
交互:
- 輸入搜索內容時,提示文字消失;輸入框下方向顯示搜索關鍵詞相關內容;
- 點擊”搜索”關鍵詞“或點擊推薦相關搜索內容時,跳轉到搜索結果頁面,鍵盤消失;結果頁面搜索框中顯示關鍵詞;
- 點擊熱門搜索關鍵詞執行搜索功能;點擊搜索歷史記錄,執行搜索功能;
- 點擊返回按鈕回到執行搜索前頁面。
4. 音樂播放頁面
4.1 用戶場景
- 播放歌曲
- 切換上一曲/下一曲
- 查看歌詞
- 想查看歌曲信息
- 想查看歌曲作者信息
- 喜歡這首歌,想添加到喜愛歌單
- 很喜歡這首歌,想分享給朋友聽
4.2 交互需求
(1)音樂播放
輸入/前置條件:點擊音樂播放按鈕;
交互:
- 音樂暫停狀態,點擊播放按鈕時,按鈕變為”暫停按鈕“;
- 音樂開始播放,”留聲機唱盤“順時針旋轉,留聲機唱臂與唱盤接接觸;(此處動圖未展示)
- 音樂進度隨音樂播放進度增長,音樂播放時間隨播放增長。
(2)音樂暫停
輸入/前置條件:點擊暫停按鈕;
交互:
- 音樂播放狀態,點擊暫停按鈕時,按鈕變為“播放按鈕”;
- 音樂暫停播放,“留聲機唱盤”停止旋轉; ?唱臂與唱盤脫離接觸;(此處動圖未展示)
- 音樂進度條停止增長;音樂播放時間停止增長。
(3)切歌
- 點擊下一曲按鈕,上一首音樂暫停播放;
- 留聲機唱臂與唱盤約脫離“1s”后,下一首音樂唱盤從頁面右邊緣滑入;
- 留聲機唱臂與下一首唱盤接觸后開始播放下一首音樂,進度條和播放時間回到初始狀態。
(4)添加喜愛
點擊愛心按鈕,愛心變為紅色;再次點擊恢復原貌。
(5)查看歌詞
輸入/前置條件:點擊唱盤;
交互:
- 點擊唱盤時,音樂播放界面消失,顯示歌詞界面;
- 原音樂播放界面進度條及以下按鈕保持不變;歌詞頁面頂部顯示聲音狀態條;
- 歌詞根據音樂進度向上滾動;正在播放詞句高亮突出顯示。
(6)滑動歌詞
- 歌詞部分可以進行上下滑動;滑動第一行文字和最后一行文字到達頁面中部時邊界,到達邊界后無法拖動;(本文圖片未展示)
- 滑動歌詞到某一句后,歌詞左側顯示播放按鈕,點擊可從該句開始播放;
- 滑動歌詞到某一句后,無操作時歌詞滾動暫停5秒,5秒后恢復正常滾動。
(7)分享(同前文3.1 底部彈窗)
輸入/前置條件:點擊分享按鈕
交互:
- 點擊分享按鈕時,分享選項界面從頁面底部向上滑入;
- 遮蓋背景內容;背景內容變暗;背景內容變為靜態;
- 若不執行分享操作,點擊背景,分享選項向下滑出頁面;背景內容恢復正常;
- 執行分享選項后,跳轉到該選項相關頁面。
(8)查看歌曲相關信息(同前文3.1 底部彈窗)
輸入/前置條件:點擊相應執行按鈕;(圖中的“三點”)
交互:
- 點擊按鈕時,歌曲信息頁面由頁面底部向上滑入;
- 遮蓋背景內容;背景內容變暗;背景內容變為靜態;
- 若不執行分享操作,點擊背景,分享選項向下滑出頁面;背景內容恢復正常。
5.下載(免費下載/會員下載)
5.1 用戶場景
- 公司舉行頒獎會議,小愛要下載一些音樂作為領獎北京音樂
- 小剛想給自己做的搞笑視頻配上背景音樂
- 小葉想給自己換個炫一點的手機鈴聲
5.2 交互需求(下載邏輯見前文4.2)
(1)免費歌曲
1)當該歌曲未被收藏到歌單前:
交互:
- 點擊下載按鈕時,中部彈出歌單頁面,遮蓋背景部分;背景內容變暗;
- 點擊新建單,中部彈出建立歌單頁面,不透明遮蓋歌單頁面,歌單變暗;焦點獲取在輸入框可輸入 ? 歌單名稱;輸入框右下方提示輸入字符數,限制40字符;輸入框下方復選框可勾選是否設置為“隱私歌單”點擊取消回到歌單頁面,歌單頁面回復正常亮度;輸入歌單名稱后點擊確定,開始下載;
- 點擊已有歌單直接開始后臺下載,歌單頁面消失,背景界面恢復正常亮度;下載完成后,下載按鈕右下角顯示“√”。
2)當該歌曲已被收藏到歌單時,點擊下載按鈕直接默認下載到收藏歌單:(邏輯參見本文4.2)
交互:點擊下載按鈕時,后臺直接開始下載,不顯示界面,下載成功后,下載按鈕右下角顯示“√”。
(2)付費歌曲:
點擊下載按鈕時:
- 會員直接開始下載(具體同上)
- 非會員跳轉到會員界面,顯示加載進度條;購買會員后繼續下載(下載邏輯參見4.2)
6.評論功能
6.1 用戶使用場景
- 小A看了劉若英的后來,再次聽《后來》這首歌,更是百感交集,很想跟別人分享一下感受,也想知道是不是有同樣很多人跟我有一樣的感受呢?
- 小B聽到自己家idol出的新歌,必須挺!
6.2 頁面邏輯
- 點擊評論按鈕,進入評論頁面;頁面主要分為:被評論歌曲+歌曲相關內容推薦+歷史評論內容+評論輸入框;
- 點擊被評歌曲版塊,回到歌曲播放頁面;點擊相關推薦鏈接到相關內容;點擊歷史評論內容可進回復,分享等操作;點擊評論者頭像可查看該評論者主頁;
- 評論內容分為“精彩評論”與“最新評論” 精彩評論按點贊數量降序排列,展示15條后其余部分折疊,點擊展開;最新評論按發布時間,優先展示最近評論;評論右上角可進行點贊操作,點擊按鈕執行點贊,點贊數量增加,再次點擊按鈕,執行取消點贊,點贊數減少;
- 評論輸入框內可輸入內容,內容限制140字;未輸入內容時,“發送“按鈕禁止操作
6.3 交互需求
- 點擊點贊按鈕時,點贊按鈕和點贊數量同時變為紅色,同時點贊數量+1;再次點擊按鈕時,紅色消失恢復正常顏色,點贊數量-1;
- 點擊評論按鈕時,評論頁從底部快速滑入;
- 評論框中無內容時,發送按鈕字體顯示為灰色;輸入內容后顯示黑色;
- 評論內容超過140字時,顯示toast彈窗“評論字數超過限制”
- 評論頁面可進行上下滑動,上下有邊界,上邊界無法拖動,到達下邊界執行更多內容加載
- 評論框在頁面底部顯示;評論框顯示提示文字;
- 點擊輸入框時,輸入法鍵盤從頁面底部滑入;遮蓋評論頁面;輸入框同步上移,保持與鍵盤相連;光標獲取焦點在輸入框;(彈出輸入框后仍然可以操作背景內容)
- 點擊“被評歌曲版塊”時,原歌曲頁面從底部快速滑入;點擊相關推薦內容時,相關內容頁面從底部快速滑入;點擊評論者頭像時,評論者主頁頁面從底部快速滑入;
- 點擊已有評論內容時,頁面中部彈出“評論操作框”遮蓋背景頁面,背景內容變暗;點擊背景頁面后彈窗淡出;背景內容恢復正常亮度;
評論操作框執行:
(1)前置條件:點擊回復評論
交互:
- 輸入法鍵盤從頁面底部滑入;
- 遮蓋評論頁面;
- 輸入框同步上移,保持與鍵盤相連;
- 光標獲取焦點在輸入框;
- 點擊收起鍵盤按鈕后,鍵盤向下滑出消失,輸入框回到原先位置。
(2)前置條件:點擊分享評論
交互:同前文分享界面,此處不贅述
(3)前置條件:點擊復制評論
交互:頁面底部顯示toast彈窗”復制成功”(toast彈窗見前文)
(4)前置條件:點擊舉報評論
交互:
- 頁面中部彈出舉報原因彈窗,遮蓋背景內容,背景內容變暗無法操作;
- 點擊背景彈窗淡出。
7.主頁面切換
7.1 用戶使用場景
當用戶想看點其他內容時;
7.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秒后深色消失。
9.聽歌識曲/定時停止播放
(1)聽歌識曲
用戶使用場景:
- 小胡今天在奶茶店聽到了一首很對胃口的歌,但直接去問小姐姐又略顯羞澀,但又很想知道歌名好去下載聽歌;
- 小江在觀看視頻時,被背景音樂吸引到,想知道歌名。
前置條件:點擊識別按鈕,以及開啟語音權限;
交互需求:
- 點擊主頁面左上角折疊按鈕,個人設置功能區由左邊緣滑出,遮蓋原頁面,原頁面變暗;
- 點擊聽歌識曲,直接進入聽歌識別功能;顯示正在識別音樂字樣;識別界面程動態輻射狀;
- 點擊識別頁面,停止識別,停止動態輻射。
(2)定時停止播放
用戶使用場景:
小明每天睡覺都有聽歌的習慣,晚上睡覺想聽點助眠歌曲,但又怕放著睡著了忘記關掉音樂浪費電量。
交互需求:
- 點擊定時停止播放按鈕時,個人設置功能區像左滑出頁面邊緣,中部顯示定時選擇頁面,頁面背景變暗;
- 選擇停止時間后,中部彈窗消失,背景頁面顯示正常亮度;頁面底部顯示toast彈窗“設置成功,將于**分鐘后關閉”。
六、總結
整個網易云音樂APP功能龐大繁雜,本文只對該應用的主要流量入口進行說明,多有不足還請見諒。
另外本文運用Axure進行PRD寫作的思路參考了@神戶短郎《用Axure寫PRD:虎撲app產品需求文檔》
歡迎各位指教~~~~小白菜致上~~
本文由 @小白菜 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自網絡
你好可以交流下么
樓主您好,想借鑒下你的原型文檔學習一下,郵箱:871763138@qq.com
想問一下 跳轉頁面的時候如何做到手機固定不動 就是不會閃一下..
動態面板?
畫的真好!可以借鑒一下原型圖嘛?756077390@qq.com,謝謝!!
現在求原型文檔還來得及嗎?麻煩大佬了
2698248626@qq.com
2465229032@qq.com 同球啊 謝謝樓主大大
求文擋:it.aly@qq.com
挖墳~感覺作者做事愿意思考,又很用心,可以加微信交個朋友嗎~VX871231414
煩請大神發一份原型文檔到郵箱,郵箱741724451@qq.com 萬分感謝!!
這已經是以前寫的東西了 評論里我發了原型的百度云鏈接 可以自取 永久有效的
煩請大神發一份原型文檔到郵箱,郵箱704984831@qq.com 萬分感謝??!
可否勞煩大神分享一份到郵箱,761367479@qq.com,謝謝謝謝。
跪求分享!330729815@qq.com
產品小白,求大神分享!npf20082012@163.com
產品小白,求分享原型文檔,感激不盡??!505447175@qq.com
正在求職的產品小白一枚,懇求分享一下原型文檔,感激不盡??!1521916742@qq.com
原型文檔可以借鑒一下嗎?郵箱2330222197@qq.com 感謝~
同產品小白,求分享bb520mb@163.com,感謝!
請問一下頁面的演示交互用什么做的呀
Axure
不錯不錯啊,學習了
帥哥 求一份原型學習一下272643147@qq.com謝謝啦