產(chǎn)品經(jīng)理在做競品分析時(shí)，往往會(huì)過于關(guān)注頁面內(nèi)容和頁面跳轉(zhuǎn)，被埋在頁面中，找不到產(chǎn)品的秩序和邏輯，這樣不僅效率低下，還會(huì)影響分析結(jié)果的準(zhǔn)確性。那么，是否存在一種高效的拆解產(chǎn)品的套路呢？并且這樣的套路能夠指導(dǎo)之后同類產(chǎn)品的設(shè)計(jì)？

產(chǎn)品經(jīng)理平時(shí)都需要完成一些競品分析的工作，從里里外外分析同類產(chǎn)品的功能。而競品分析做得少的同學(xué)，也深知多研究市面上成功的產(chǎn)品，可以幫助自己提高產(chǎn)品設(shè)計(jì)方面的能力。

于是便會(huì)充滿熱情的投入到競品分析中，但是在分析的過程中，往往會(huì)過于關(guān)注頁面內(nèi)容和頁面跳轉(zhuǎn)，被埋在頁面中，找不到產(chǎn)品的秩序和邏輯，這樣不僅效率低下，還會(huì)影響分析結(jié)果的準(zhǔn)確性。

那么，是否存在一種高效的拆解產(chǎn)品的套路呢？并且這樣的套路能夠指導(dǎo)之后同類產(chǎn)品的設(shè)計(jì)？

答案是有的，我們應(yīng)該跳出眼前看到的頁面，尋找產(chǎn)品源頭，從源頭開始分解，如何做到呢？

您接著看。我選擇了“網(wǎng)易云音樂”進(jìn)行拆解，喜歡音樂、喜歡網(wǎng)易云。

總體思路，面向?qū)ο?/h2>

基于前端界面是后端代碼的體現(xiàn)，我從面向?qū)ο笾蝎@得啟發(fā)。每一個(gè)Java對象由方法和屬性組成，方法對應(yīng)頁面上的功能用例，屬性對應(yīng)頁面上的元素。例如：查詢用戶昵稱功能對應(yīng)getUserName方法，用戶昵稱對應(yīng)userName屬性。所以，從對象開始，抓住少而重要的源頭，才能不迷失在眾多頁面中。

總體邏輯是：利用對象，首先規(guī)劃出主要頁面，然后設(shè)計(jì)頁面流程，最終補(bǔ)充用例和頁面元素。

請記住以下提綱：

• step1：找出網(wǎng)易云音樂中的主要對象；
• step2：針對每個(gè)對象，區(qū)分用戶角色，列出各用戶角色中帶頁面的基礎(chǔ)用例；
• step3：利用列出的基礎(chǔ)用例頁面，進(jìn)行頁面流程設(shè)計(jì)，規(guī)劃用戶路徑；
• step4：在頁面上補(bǔ)充其它用例；
• step5：在頁面上補(bǔ)充元素。

一、網(wǎng)易云音樂主要對象

1. 找出主要對象

很快就可以找出網(wǎng)易云中的主要對象：用戶、歌手、單曲、節(jié)目、MV、視頻、文章、動(dòng)態(tài)、專輯、歌單、排行榜、電臺、專欄、話題、評論。這么多看的眼花繚亂，那么理一下邏輯，就很容易記了。

分為四組：

1. 2種用戶角色：“用戶”和“歌手”；
2. 6種內(nèi)容形式：音頻類的“單曲”和“廣播節(jié)目”，視頻類的“MV”和“短視頻”，文字類的“文章”，兼容多種形式的“動(dòng)態(tài)”；
3. 5種集合：“專輯”、“歌單”、“排行榜”、“電臺”、“專欄”；
4. 最后是百搭的“評論”，很多對象都可以進(jìn)行評論，突出音樂社區(qū)的特質(zhì)。

找出以上主要對象，是為了在步驟二中，找到基礎(chǔ)的頁面用例。

2. 發(fā)現(xiàn)對象之間的關(guān)聯(lián)關(guān)系

一個(gè)對象的屬性分為一般屬性和對象屬性，對應(yīng)普通元素和關(guān)聯(lián)對象。在知道了對象之后，就可以尋找對象之間存在的關(guān)聯(lián)關(guān)系，下面我使用一張表格展示網(wǎng)易云對象之間的關(guān)系，見圖1。

明確了對象之間的關(guān)系，在步驟三中，可以幫助設(shè)計(jì)用戶路徑。

舉個(gè)例子：在“歌手”和“用戶主頁”中體現(xiàn)出的對象關(guān)系，見圖2。

二、對象基礎(chǔ)用例頁面

對象基礎(chǔ)用例是指需要一個(gè)獨(dú)立頁面來完成的用例，例如：對象的列表頁（歌單列表）、對象的詳情頁（歌單詳情）等。

在分析對象時(shí)，先分析該對象的生產(chǎn)者和消費(fèi)者分別是誰，生產(chǎn)者和消費(fèi)者可能是不同的用戶角色，也可能是同一種用戶角色。

舉2個(gè)例子：

1. 例如：“歌手”的生產(chǎn)者是音樂人，音樂人需要申請成為歌手，并且完善歌手信息和上傳作品；消費(fèi)者是普通用戶，普通用戶瀏覽歌手主頁，所以是消費(fèi)者。該類情況的生產(chǎn)者和消費(fèi)者不是同一類角色，通常生產(chǎn)者和消費(fèi)者的功能不在同一個(gè)客戶端中。
2. 而“用戶”的生產(chǎn)者和消費(fèi)者是同一類角色，用戶A注冊后，其他用戶會(huì)來查看用戶A的主頁，消費(fèi)用戶A的信息。該類情況的生產(chǎn)者和消費(fèi)者是同一類角色，通常生產(chǎn)者和消費(fèi)者的功能在同一個(gè)客戶端。

下面是我發(fā)現(xiàn)一些普適性的規(guī)律，從生產(chǎn)者的角度，一個(gè)對象存在3類頁面，常見的“查”、“增”、“改”：

1. 我創(chuàng)建對象的列表，注意：如果該對象每個(gè)ID只有一個(gè)，則不需要列表功能；
2. 新建對象頁；
3. 查看對象詳情or編輯對象頁；

從消費(fèi)者的角度，一個(gè)對象存在2類頁面，查列表、查詳情：

1. 廣場列表or推薦列表or排行榜列表；
2. 對象詳情頁。

舉個(gè)例子：“電臺節(jié)目”的5個(gè)頁面，生產(chǎn)者的3個(gè)頁面都在Web端的官網(wǎng)，消費(fèi)者的“節(jié)目排行榜頁”和“節(jié)目播放頁”在APP端，見圖3。

以下是我列出的對象基礎(chǔ)用例圖，見圖4。

三、基礎(chǔ)用例頁面流轉(zhuǎn)

這一步需要做的就是按照優(yōu)先級，將step2中的基礎(chǔ)用例頁面有序的排列起來，有點(diǎn)像玩拼圖的感覺，下面闡述我在操作該步驟時(shí)的套路。

1. ?找到用戶的目的，消費(fèi)內(nèi)容。內(nèi)容類產(chǎn)品的最終目的就是找到內(nèi)容進(jìn)行消費(fèi)，網(wǎng)易云音樂提供6種基礎(chǔ)內(nèi)容，單曲、廣播節(jié)目、MV、短視頻、文章、動(dòng)態(tài)；
2. 找到獲取內(nèi)容的手段。搜索、推薦、排行、歌單、專輯、電臺、音樂專欄都是內(nèi)容的合集，只是為了更快捷找到喜歡的內(nèi)容，是找到內(nèi)容的手段；
3. 考慮優(yōu)先級，確定功能入口。網(wǎng)易云音樂首頁提供跟音樂相關(guān)內(nèi)容的各種入口，視頻和動(dòng)態(tài)有時(shí)下流行“刷”的氣質(zhì)，單獨(dú)分配了底欄入口。
4. 提供3種不同效率，來獲取內(nèi)容。
   • 快：首頁入口>內(nèi)容，適用主流的推薦功能；
   • 中：首頁入口>內(nèi)容列表>內(nèi)容，例如視頻和動(dòng)態(tài)；
   • 慢：首頁入口>集合列表>集合詳情>內(nèi)容，例如歌單、電臺、專輯。
5. 關(guān)聯(lián)對象之間無縫鏈接。由于對象之間存在關(guān)聯(lián)關(guān)系，所以根據(jù)step1中的對象關(guān)系，設(shè)計(jì)頁面跳轉(zhuǎn)。

以下是我根據(jù)步驟整理出來的基礎(chǔ)頁面流轉(zhuǎn)，其中部分生產(chǎn)者的頁面不在APP中體現(xiàn)，只可以在Web版上進(jìn)行操作，所以有兩張圖，圖5是APP的頁面流轉(zhuǎn)，圖6是Web版的補(bǔ)充功能頁面。

四、補(bǔ)充其他用例

補(bǔ)充其它用例的意思有兩層：

1. 在現(xiàn)有的頁面中，補(bǔ)充其他的操作用例，例如收藏、下載等反饋功能；
2. 在現(xiàn)有的頁面流程上，提出更加貼近用戶需求的產(chǎn)品功能，例如私人FM，跑步FM、推薦機(jī)制等。

看了網(wǎng)易云音樂這么多頁面我發(fā)現(xiàn)2個(gè)普適性的規(guī)則：

1. 列表的常見用例：篩選、排序、多選等，實(shí)例見圖7；
2. 內(nèi)容類產(chǎn)品提供了很多對內(nèi)容進(jìn)行反饋的功能，我把反饋功能按照感受程度的強(qiáng)弱，分為5個(gè)級別，詳見圖8。

五、補(bǔ)充頁面元素

補(bǔ)充頁面元素是指，找到對象的屬性，展示在頁面中。在step1中說過，一個(gè)對象存在一般屬性和對象屬性，這兩種屬性可以想象成數(shù)據(jù)庫中的字段項(xiàng)，這個(gè)步驟是找出對象剩下的一般屬性。

如何理解一般屬性，例如：人的年齡、性別、身高、體重就是人的一般屬性。例如：“歌單”的頁面元素有歌單名稱、歌單封面、歌單播放量、歌單簡介、評論數(shù)量、分享次數(shù)、歌曲數(shù)量、收藏人數(shù)，見圖9。

以上只是列出APP展示出來的元素，隱藏的元素可能有創(chuàng)建日期、是否精選歌單、歌單狀態(tài)等，一般隱藏元素在后臺管理系統(tǒng)中應(yīng)用，設(shè)計(jì)系統(tǒng)時(shí)也需要考慮到。

尾巴

以上并不是網(wǎng)易云音樂所有的頁面和功能用例，是闡述我對產(chǎn)品設(shè)計(jì)的思維邏輯。所以有一些從用戶角度出發(fā)的優(yōu)秀功能點(diǎn)并沒有提到，實(shí)際應(yīng)用中還需要在以上的框架上，添加其他針對用戶需求的用例。

而就在我拆解網(wǎng)易云音樂過程中感觸良多，我沒有單純的去分析網(wǎng)易云音樂的功能用例和頁面流轉(zhuǎn)，而是考慮產(chǎn)品設(shè)計(jì)背后的邏輯，在眾多功能、元素當(dāng)中抽取出簡單的規(guī)則，這個(gè)過程中遇上了很多想不到的困難，時(shí)常會(huì)在放棄的邊緣。

但當(dāng)我把這篇總結(jié)完成的時(shí)候，我才體會(huì)到能做完一整件事情的能力是多么的難得。

這次總結(jié)讓我感同身受的一句雞湯推薦給大家：

Reading is faster than listening. Doing is faster than watching——Naval Ravikant（硅谷投資人）。

如果連模仿都學(xué)不好，怎么去創(chuàng)造呢？

后續(xù)還會(huì)繼續(xù)拆解其他類型的產(chǎn)品，比如說：電商。

最后放張圖，網(wǎng)易云音樂100多個(gè)頁面的流轉(zhuǎn)匯總，你說能不迷路嗎？

作者：翔自由，微信公眾號：小王出版

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

題圖作者提供