用Axure寫PRD:倒推網(wǎng)易云音樂APP產(chǎn)品需求文檔

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

為了更加完整的描述產(chǎn)品的需求,規(guī)范需求表達(dá)方式,產(chǎn)品需求文檔(Product Requirement Document)應(yīng)運(yùn)而生,而作為產(chǎn)品經(jīng)理的基本功,也是小白入門的必須掌握的部分。筆者作為一個(gè)小白沒有項(xiàng)目實(shí)戰(zhàn),于是通過倒推已經(jīng)成熟的產(chǎn)品來鍛煉寫需求文檔的技能。第一次使用Axure寫PRD,主要目的是希望通過大家給出的意見改進(jìn),很多表達(dá)不當(dāng)?shù)牡胤剑€望各位大神多多指教,感激不盡。

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

文檔目錄

一、產(chǎn)品概述

1. 產(chǎn)品介紹

網(wǎng)易云音樂于2013年1月正式上線,其移動(dòng)端APP能夠?yàn)橛脩籼峁┰诰€收聽原創(chuàng)音樂、私人FM、電臺、短視頻等服務(wù),同時(shí)還可以進(jìn)行在線互評,社區(qū)互動(dòng)的一款音樂平臺APP。

1.1產(chǎn)品定位:

移動(dòng)音樂社區(qū),旨在成為中國最大的移動(dòng)音樂社區(qū)和開放平臺,形成獨(dú)一無二的以用戶為中心的音樂生態(tài)圈。

1.2用戶人群:

熱愛音樂,對音樂有較高需求的高素質(zhì)年輕人群:大學(xué)生、白領(lǐng)等。

2.文檔屬性

3.需求整理

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

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

2. 產(chǎn)品信息結(jié)構(gòu)圖

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

三、 全局說明

1.功能權(quán)限

分為登錄和未登錄狀態(tài):

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

2. 頁面內(nèi)交互

2.1頂部、底部彈窗

2.2toast、dialog 彈窗

3.鍵盤說明

  • 點(diǎn)擊手機(jī)號輸入框時(shí)頁面底部彈出數(shù)字鍵盤;
  • 點(diǎn)擊其他輸入框頁面底部彈出字母全鍵盤。

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

4.頁面異常

5.頁面間交互方式

6.更多操作

四、部分業(yè)務(wù)邏輯

1. 登錄注冊業(yè)務(wù)邏輯

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

2. 音樂下載邏輯

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

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

1. 主頁進(jìn)入

1.1?使用場景:

已登錄用戶剛打開網(wǎng)易云音樂APP。

1.2 交互需求

  • 打開應(yīng)用時(shí),若無其他操作,起始頁停留約2秒后 進(jìn)入廣告頁面;廣告頁面停留約5秒進(jìn)入音樂主頁。
  • 打開應(yīng)用時(shí),起始頁停留約2秒后 進(jìn)入廣告頁面,點(diǎn)擊右下角“跳過”,直接進(jìn)入音樂主頁。
  • 點(diǎn)擊廣告頁面,進(jìn)入相應(yīng)廣告鏈接。

2.登錄/試用/注冊

2.1 用戶使用場景

  • 當(dāng)用戶第一次使用該應(yīng)用時(shí)
  • 當(dāng)游客用戶需要執(zhí)行評論、購買、收藏、訂閱等操作時(shí)(參見前文3.1關(guān)于”功能權(quán)限說明“)

2.2 交互需求

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

交互:

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

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

交互:

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

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

3.搜索功能


3.1 用戶畫像

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

(1)進(jìn)入搜索界面

  • 輸入/前置條件:點(diǎn)擊搜索圖標(biāo)按鈕
  • 功能描述:搜索輸入歌名、專輯、人名,關(guān)鍵詞;

交互:

  1. 點(diǎn)擊搜索按鈕時(shí),跳轉(zhuǎn)到搜索頁面;
  2. 光標(biāo)在輸入框中獲取焦點(diǎn);
  3. 搜索框提示”提示內(nèi)容或推薦內(nèi)容“
  4. 文字輸入鍵盤從底部彈出遮擋頁面。

(2)執(zhí)行搜索

輸入/前置條件:

  • 點(diǎn)擊輸入法鍵盤搜索按鈕
  • 直接點(diǎn)擊下拉列表中搜索內(nèi)容 ?*
  • 點(diǎn)擊熱門關(guān)鍵詞
  • 點(diǎn)擊搜索歷史記錄

交互:

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

4. 音樂播放頁面

4.1 用戶場景

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

4.2 交互需求

(1)音樂播放

輸入/前置條件:點(diǎn)擊音樂播放按鈕;

交互:

  1. 音樂暫停狀態(tài),點(diǎn)擊播放按鈕時(shí),按鈕變?yōu)椤睍和0粹o“;
  2. 音樂開始播放,”留聲機(jī)唱盤“順時(shí)針旋轉(zhuǎn),留聲機(jī)唱臂與唱盤接接觸;(此處動(dòng)圖未展示)
  3. 音樂進(jìn)度隨音樂播放進(jìn)度增長,音樂播放時(shí)間隨播放增長。

(2)音樂暫停

輸入/前置條件:點(diǎn)擊暫停按鈕;

交互:

  1. 音樂播放狀態(tài),點(diǎn)擊暫停按鈕時(shí),按鈕變?yōu)椤安シ虐粹o”;
  2. 音樂暫停播放,“留聲機(jī)唱盤”停止旋轉(zhuǎn); ?唱臂與唱盤脫離接觸;(此處動(dòng)圖未展示)
  3. 音樂進(jìn)度條停止增長;音樂播放時(shí)間停止增長。

(3)切歌

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

(4)添加喜愛

點(diǎn)擊愛心按鈕,愛心變?yōu)榧t色;再次點(diǎn)擊恢復(fù)原貌。

(5)查看歌詞

輸入/前置條件:點(diǎn)擊唱盤;

交互:

  1. 點(diǎn)擊唱盤時(shí),音樂播放界面消失,顯示歌詞界面;
  2. 原音樂播放界面進(jìn)度條及以下按鈕保持不變;歌詞頁面頂部顯示聲音狀態(tài)條;
  3. 歌詞根據(jù)音樂進(jìn)度向上滾動(dòng);正在播放詞句高亮突出顯示。

(6)滑動(dòng)歌詞

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

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

輸入/前置條件:點(diǎn)擊分享按鈕

交互:

  1. 點(diǎn)擊分享按鈕時(shí),分享選項(xiàng)界面從頁面底部向上滑入;
  2. 遮蓋背景內(nèi)容;背景內(nèi)容變暗;背景內(nèi)容變?yōu)殪o態(tài);
  3. 若不執(zhí)行分享操作,點(diǎn)擊背景,分享選項(xiàng)向下滑出頁面;背景內(nèi)容恢復(fù)正常;
  4. 執(zhí)行分享選項(xiàng)后,跳轉(zhuǎn)到該選項(xiàng)相關(guān)頁面。

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

輸入/前置條件:點(diǎn)擊相應(yīng)執(zhí)行按鈕;(圖中的“三點(diǎn)”)

交互:

  1. 點(diǎn)擊按鈕時(shí),歌曲信息頁面由頁面底部向上滑入;
  2. 遮蓋背景內(nèi)容;背景內(nèi)容變暗;背景內(nèi)容變?yōu)殪o態(tài);
  3. 若不執(zhí)行分享操作,點(diǎn)擊背景,分享選項(xiàng)向下滑出頁面;背景內(nèi)容恢復(fù)正常。

5.下載(免費(fèi)下載/會(huì)員下載)

5.1 用戶場景

  • 公司舉行頒獎(jiǎng)會(huì)議,小愛要下載一些音樂作為領(lǐng)獎(jiǎng)北京音樂
  • 小剛想給自己做的搞笑視頻配上背景音樂
  • 小葉想給自己換個(gè)炫一點(diǎn)的手機(jī)鈴聲

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

(1)免費(fèi)歌曲

1)當(dāng)該歌曲未被收藏到歌單前:

交互:

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

2)當(dāng)該歌曲已被收藏到歌單時(shí),點(diǎn)擊下載按鈕直接默認(rèn)下載到收藏歌單:(邏輯參見本文4.2)

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

(2)付費(fèi)歌曲:

點(diǎn)擊下載按鈕時(shí):

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

6.評論功能

6.1 用戶使用場景

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

6.2 頁面邏輯

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

6.3 交互需求

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

評論操作框執(zhí)行:

(1)前置條件:點(diǎn)擊回復(fù)評論

交互:

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

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

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

(3)前置條件:點(diǎn)擊復(fù)制評論

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

(4)前置條件:點(diǎn)擊舉報(bào)評論

交互:

  1. 頁面中部彈出舉報(bào)原因彈窗,遮蓋背景內(nèi)容,背景內(nèi)容變暗無法操作;
  2. 點(diǎn)擊背景彈窗淡出。

7.主頁面切換

7.1 用戶使用場景

當(dāng)用戶想看點(diǎn)其他內(nèi)容時(shí);

7.2?交互需求

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

【以下為網(wǎng)易云音樂APP主要流量入口“發(fā)現(xiàn)”版塊的“推薦”Tab示例】

8.推薦頁面

8.1主頁面邏輯與交互需求

  • 推薦頁面主要由4個(gè)部分構(gòu)成:banner+快捷入口+推薦相關(guān)板塊+欄目調(diào)整按鈕,分別點(diǎn)擊可以進(jìn)入相關(guān)鏈接頁面;
  • 主頁面交互:頁面可進(jìn)行上下滑動(dòng),上下有邊界;到達(dá)上下邊界時(shí)頁面無法滑動(dòng);邊界顯示透明遮蓋陰影;

8.2 詳細(xì)功能

(1)FM

頁面邏輯:

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

交互需求:

  • 點(diǎn)擊私人FM按鈕時(shí),F(xiàn)M頁面從底部快速滑入,默認(rèn)選中“私人FM”頁面;對應(yīng)的按鈕和文字高亮顯示;進(jìn)入頁面音樂自動(dòng)播放;(評論 喜愛等操作不贅述)
  • 點(diǎn)擊跑步FM時(shí),按鈕和文字相應(yīng)高亮顯示,私人FM按鈕和文字變暗;
  • 進(jìn)入跑步FM頁面后,主頁面圓形向四周動(dòng)態(tài)輻射狀獲取步頻;獲取步頻后,圓形變?yōu)殪o態(tài),圓形中間顯示步頻;音樂播放功能區(qū)在頁面底部逐漸顯現(xiàn);
  • 點(diǎn)擊離線音樂包按鈕時(shí),中部顯示彈窗;遮蓋背景,背景變暗;點(diǎn)擊背景后彈窗消失,背景恢復(fù);

(2)每日推薦

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

交互需求:

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

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

(3)歌單

頁面邏輯:

  • 點(diǎn)擊歌單按鈕,進(jìn)入精品歌單頁面,點(diǎn)擊封面進(jìn)入精品歌單所有歌單列表;
  • 點(diǎn)擊全部歌單按鈕,進(jìn)入選擇分類頁面,可點(diǎn)擊選擇分類,進(jìn)入對應(yīng)類型歌單;
  • 點(diǎn)擊具體歌單封面,進(jìn)入歌單詳細(xì)頁。

(4)排行榜

頁面邏輯:

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

(5)專欄

頁面邏輯:

  • 拖動(dòng)推薦頁面到“精選專欄”位置,該位置展示三個(gè)專欄摘要,主要包括標(biāo)題、閱讀量和封面;
  • 點(diǎn)擊“精選專欄”字樣,打開專欄頁面;
  • 點(diǎn)擊推薦展示專欄的標(biāo)題或封面,直接進(jìn)入該專欄的具體內(nèi)容頁。

(6)推薦歌單

頁面邏輯:

  • 該板塊展示6個(gè)推薦歌單,主要展示封面、收聽數(shù)、歌單名;
  • 點(diǎn)擊推薦歌單擴(kuò)展按鈕,進(jìn)入效果同上述的“歌單”快捷入口頁面;
  • 點(diǎn)擊標(biāo)題或封面,直接進(jìn)入歌單內(nèi)容頁面。

(7)獨(dú)家放送

頁面邏輯:

  • 該板塊主要是將精選的各個(gè)類型的獨(dú)家內(nèi)容推薦展示,可以包括視頻、話題、專輯等;
  • 展示三個(gè)推薦內(nèi)容,包括封面、標(biāo)題、和類型標(biāo)簽;
  • 點(diǎn)擊標(biāo)題或內(nèi)容直接進(jìn)入相關(guān)頁面。

(8)會(huì)員專區(qū)

頁面邏輯:

  • 該板塊是針對會(huì)員的一個(gè)集中展示的入口;
  • 展示三個(gè)推薦內(nèi)容,橫排展示,包括專輯、單曲、電臺等在內(nèi);
  • 主要展示封面和標(biāo)題;
  • 點(diǎn)擊封面或標(biāo)題直接進(jìn)入相關(guān)內(nèi)容頁面;
  • 點(diǎn)擊會(huì)員專區(qū)擴(kuò)展按鈕,非會(huì)員進(jìn)入VIP開通頁面。

(9)主播電臺

頁面邏輯:

  • 該標(biāo)簽頁展示6個(gè)推薦內(nèi)容,包括付費(fèi)標(biāo)識、封面、標(biāo)題、描述;
  • 點(diǎn)擊封面或描述直接進(jìn)入電臺內(nèi)容頁;
  • 點(diǎn)擊主播電臺擴(kuò)展按鈕,直接切換發(fā)現(xiàn)音樂的Tab,即直接進(jìn)入了電臺功能區(qū)。

(10)調(diào)整順序

頁面邏輯:點(diǎn)擊該按鈕進(jìn)入主頁標(biāo)簽欄目的順序調(diào)節(jié)頁面,右方按鈕拖動(dòng)即可調(diào)節(jié);

交互: 調(diào)節(jié)進(jìn)入按鈕在頁面底部顯示

  1. 進(jìn)入調(diào)節(jié)順序頁面后,按住調(diào)節(jié)目標(biāo)對應(yīng)的按鈕后,該行欄目標(biāo)題變暗,上下拖動(dòng)垂直交換順序;
  2. 欄目名稱重疊時(shí),該行呈透明;
  3. 結(jié)束拖動(dòng)時(shí),字體恢復(fù)深色;
  4. 上下拖動(dòng)有邊界,到達(dá)邊界后無法拖動(dòng);
  5. 在點(diǎn)擊非拖動(dòng)按鈕的欄目標(biāo)題區(qū)域時(shí),改行顯示深色,約1秒后深色消失。

9.聽歌識曲/定時(shí)停止播放

(1)聽歌識曲

用戶使用場景:

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

前置條件:點(diǎn)擊識別按鈕,以及開啟語音權(quán)限;

交互需求:

  1. 點(diǎn)擊主頁面左上角折疊按鈕,個(gè)人設(shè)置功能區(qū)由左邊緣滑出,遮蓋原頁面,原頁面變暗;
  2. 點(diǎn)擊聽歌識曲,直接進(jìn)入聽歌識別功能;顯示正在識別音樂字樣;識別界面程動(dòng)態(tài)輻射狀;
  3. 點(diǎn)擊識別頁面,停止識別,停止動(dòng)態(tài)輻射。

(2)定時(shí)停止播放

用戶使用場景:

小明每天睡覺都有聽歌的習(xí)慣,晚上睡覺想聽點(diǎn)助眠歌曲,但又怕放著睡著了忘記關(guān)掉音樂浪費(fèi)電量。

交互需求:

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

六、總結(jié)

整個(gè)網(wǎng)易云音樂APP功能龐大繁雜,本文只對該應(yīng)用的主要流量入口進(jìn)行說明,多有不足還請見諒。

另外本文運(yùn)用Axure進(jìn)行PRD寫作的思路參考了@神戶短郎《用Axure寫PRD:虎撲app產(chǎn)品需求文檔》

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

 

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

題圖來自網(wǎng)絡(luò)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 你好可以交流下么

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

    來自廣東 回復(fù)
  3. 想問一下 跳轉(zhuǎn)頁面的時(shí)候如何做到手機(jī)固定不動(dòng) 就是不會(huì)閃一下..

    來自廣東 回復(fù)
    1. 動(dòng)態(tài)面板?

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

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

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

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

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

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

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

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

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

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

    來自新加坡 回復(fù)
  14. 產(chǎn)品小白,求大神分享!npf20082012@163.com

    來自北京 回復(fù)
  15. 產(chǎn)品小白,求分享原型文檔,感激不盡?。?05447175@qq.com

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

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

    來自寧夏 回復(fù)
  18. 同產(chǎn)品小白,求分享bb520mb@163.com,感謝!

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

    來自上海 回復(fù)
    1. Axure

      回復(fù)
  20. 不錯(cuò)不錯(cuò)啊,學(xué)習(xí)了

    來自陜西 回復(fù)
  21. 帥哥 求一份原型學(xué)習(xí)一下272643147@qq.com謝謝啦

    來自北京 回復(fù)