前言：這個哥們寫的案例充分解釋了蘇杰老師的口訣：
多邊先分邊
新手與專家
人口統(tǒng)計學(xué)
業(yè)務(wù)場景化
轉(zhuǎn)發(fā)下。供大家品味。
------------
序言
?產(chǎn)品經(jīng)理平時都需要完成一些競品分析的工作，從里里外外分析同類產(chǎn)品的功能。而競品分析做得少的同學(xué)，也深知多研究市面上成功的產(chǎn)品，可以幫助自己提高產(chǎn)品設(shè)計方面的能力。于是便會充滿熱情的投入到競品分析中，但是在分析的過程中，往往會過于關(guān)注頁面內(nèi)容和頁面跳轉(zhuǎn)，被埋在頁面中，找不到產(chǎn)品的秩序和邏輯，這樣不僅效率低下，還會影響分析結(jié)果的準(zhǔn)確性。
那么，是否存在一種高效的拆解產(chǎn)品的套路呢，并且這樣的套路能夠指導(dǎo)之后同類產(chǎn)品的設(shè)計？答案是有的，我們應(yīng)該跳出眼前看到的頁面，尋找產(chǎn)品源頭，從源頭開始分解。如何做到呢？您接著看。
我選擇了“網(wǎng)易云音樂”進(jìn)行拆解，喜歡音樂、喜歡網(wǎng)易云。本文篇長共2700字，每分鐘閱讀500字需要5分20秒。
——總體思路，面向?qū)ο蟆?/p>
基于前端界面是后端代碼的體現(xiàn)，我從面向?qū)ο笾蝎@得啟發(fā)。每一個Java對象由方法和屬性組成，方法對應(yīng)頁面上的功能用例，屬性對應(yīng)頁面上的元素；例如查詢用戶昵稱功能對應(yīng)getUserName（）方法，用戶昵稱對應(yīng)userName屬性。所以，從對象開始，抓住少而重要的源頭，才能不迷失在眾多頁面中。
總體邏輯是：利用對象，首先規(guī)劃出主要頁面，然后設(shè)計頁面流程，最終補(bǔ)充用例和頁面元素，請記住以下提綱。
step1：找出網(wǎng)易云音樂中的主要對象；
step2：針對每個對象，區(qū)分用戶角色，列出各用戶角色中帶頁面的基礎(chǔ)用例；
step3：利用列出的基礎(chǔ)用例頁面，進(jìn)行頁面流程設(shè)計，規(guī)劃用戶路徑；
step4：在頁面上補(bǔ)充其它用例；
step5：在頁面上補(bǔ)充元素。
一、網(wǎng)易云音樂主要對象
1、找出主要對象
很快就可以找出網(wǎng)易云中的主要對象：用戶、歌手、單曲、節(jié)目、MV、視頻、文章、動態(tài)、專輯、歌單、排行榜、電臺、專欄、話題、評論。這么多看的眼花繚亂，那么理一下邏輯，就很容易記了。分為四組：
2種用戶角色：“用戶”和“歌手”；
6種內(nèi)容形式：音頻類的“單曲”和“廣播節(jié)目”，視頻類的“MV”和“短視頻”，文字類的“文章”，兼容多種形式的“動態(tài)”；
5種集合：“專輯”、“歌單”、“排行榜”、“電臺”、“專欄”；
最后是百搭的“評論”，很多對象都可以進(jìn)行評論，突出音樂社區(qū)的特質(zhì)。
找出以上主要對象，是為了在步驟二中，找到基礎(chǔ)的頁面用例。
2、發(fā)現(xiàn)對象之間的關(guān)聯(lián)關(guān)系
一個對象的屬性分為一般屬性和對象屬性，對應(yīng)普通元素和關(guān)聯(lián)對象。在知道了對象之后，就可以尋找對象之間存在的關(guān)聯(lián)關(guān)系，下面我使用一張表格展示網(wǎng)易云對象之間的關(guān)系，見圖1。
明確了對象之間的關(guān)系，在步驟三中，可以幫助設(shè)計用戶路徑。舉個例子：在“歌手”和“用戶主頁”中體現(xiàn)出的對象關(guān)系，見圖2。
二、對象基礎(chǔ)用例頁面
對象基礎(chǔ)用例是指需要一個獨(dú)立頁面來完成的用例，例如對象的列表頁（歌單列表）、對象的詳情頁（歌單詳情）等。
在分析對象時，先分析該對象的生產(chǎn)者和消費(fèi)者分別是誰，生產(chǎn)者和消費(fèi)者可能是不同的用戶角色，也可能是同一種用戶角色。舉2個例子：
1、例如“歌手”的生產(chǎn)者是音樂人，音樂人需要申請成為歌手，并且完善歌手信息和上傳作品；消費(fèi)者是普通用戶，普通用戶瀏覽歌手主頁，所以是消費(fèi)者。該類情況的生產(chǎn)者和消費(fèi)者不是同一類角色，通常生產(chǎn)者和消費(fèi)者的功能不在同一個客戶端中；
2、而“用戶”的生產(chǎn)者和消費(fèi)者是同一類角色，用戶A注冊后，其他用戶會來查看用戶A的主頁，消費(fèi)用戶A的信息。該類情況的生產(chǎn)者和消費(fèi)者是同一類角色，通常生產(chǎn)者和消費(fèi)者的功能在同一個客戶端；
下面是我發(fā)現(xiàn)一些普適性的規(guī)律。
從生產(chǎn)者的角度，一個對象存在3類頁面，常見的“查”、“增”、“改”：
1、我創(chuàng)建對象的列表，注意：如果該對象每個ID只有一個，則不需要列表功能；
2、新建對象頁；
3、查看對象詳情or編輯對象頁；
從消費(fèi)者的角度，一個對象存在2類頁面，查列表、查詳情：
1、廣場列表or推薦列表or排行榜列表；
2、對象詳情頁；
舉個例子，“電臺節(jié)目”的5個頁面：生產(chǎn)者的3個頁面都在Web端的官網(wǎng)，消費(fèi)者的“節(jié)目排行榜頁”和“節(jié)目播放頁”在APP端，見圖3。
以下是我列出的對象基礎(chǔ)用例圖，見圖4。
三、基礎(chǔ)用例頁面流轉(zhuǎn)
這一步需要做的就是按照優(yōu)先級，將step2中的基礎(chǔ)用例頁面有序的排列起來，有點(diǎn)像玩拼圖的感覺，下面闡述我在操作該步驟時的套路。
1、?找到用戶的目的，消費(fèi)內(nèi)容。內(nèi)容類產(chǎn)品的最終目的就是找到內(nèi)容進(jìn)行消費(fèi)，網(wǎng)易云音樂提供6種基礎(chǔ)內(nèi)容，單曲、廣播節(jié)目、MV、短視頻、文章、動態(tài)；
2、找到獲取內(nèi)容的手段。搜索、推薦、排行、歌單、專輯、電臺、音樂專欄都是內(nèi)容的合集，只是為了更快捷找到喜歡的內(nèi)容，是找到內(nèi)容的手段。
3、考慮優(yōu)先級，確定功能入口。網(wǎng)易云音樂首頁提供跟音樂相關(guān)內(nèi)容的各種入口，視頻和動態(tài)有時下流行“刷”的氣質(zhì)，單獨(dú)分配了底欄入口。
4、提供3種不同效率，來獲取內(nèi)容。
快：首頁入口>內(nèi)容，適用主流的推薦功能；
中：首頁入口>內(nèi)容列表>內(nèi)容，例如視頻和動態(tài)；
慢：首頁入口>集合列表>集合詳情>內(nèi)容，例如歌單、電臺、專輯；
5、關(guān)聯(lián)對象之間無縫鏈接。由于對象之間存在關(guān)聯(lián)關(guān)系，所以根據(jù)step1中的對象關(guān)系，設(shè)計頁面跳轉(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個普適性的規(guī)則：
1、列表的常見用例：篩選、排序、多選等，實(shí)例見圖7；
2、內(nèi)容類產(chǎn)品提供了很多對內(nèi)容進(jìn)行反饋的功能，我把反饋功能按照感受程度的強(qiáng)弱，分為5個級別，詳見圖8。
五、補(bǔ)充頁面元素
補(bǔ)充頁面元素是指，找到對象的屬性，展示在頁面中。在step1中說過，一個對象存在一般屬性和對象屬性，這兩種屬性可以想象成數(shù)據(jù)庫中的字段項(xiàng)，這個步驟是找出對象剩下的一般屬性。
如何理解一般屬性，例如人的年齡、性別、身高、體重就是人的一般屬性。例如“歌單”的頁面元素有歌單名稱、歌單封面、歌單播放量、歌單簡介、評論數(shù)量、分享次數(shù)、歌曲數(shù)量、收藏人數(shù)；見圖9。
以上只是列出APP展示出來的元素，隱藏的元素可能有創(chuàng)建日期、是否精選歌單、歌單狀態(tài)等，一般隱藏元素在后臺管理系統(tǒng)中應(yīng)用，設(shè)計系統(tǒng)時也需要考慮到。
——尾巴——
以上并不是網(wǎng)易云音樂所有的頁面和功能用例，是闡述我對產(chǎn)品設(shè)計的思維邏輯。所以有一些從用戶角度出發(fā)的優(yōu)秀功能點(diǎn)并沒有提到，實(shí)際應(yīng)用中還需要在以上的框架上添加其他針對用戶需求的用例。
而此次我在拆解網(wǎng)易云音樂過程中感觸良多，我不是單純的去分析網(wǎng)易云音樂的功能用例和頁面流轉(zhuǎn)，而是考慮背后的產(chǎn)品設(shè)計邏輯，在眾多功能、元素當(dāng)中抽取出簡單的規(guī)則，這個過程中遇上了很多想不到的困難，時常會在放棄的邊緣。但當(dāng)我把這篇總結(jié)完成的時候，我才體會到能做完一整件事情的能力是多么的難得。
這次總結(jié)讓我感同身受的一句雞湯推薦給大家：Reading is faster than listening. Doing is faster than watching——Naval Ravikant（硅谷投資人）。
如果你連模仿都學(xué)不好，怎么去創(chuàng)造呢？后續(xù)還會繼續(xù)拆解其他類型的產(chǎn)品，比如說電商。
最后放張圖，網(wǎng)易云音樂100多個頁面的流轉(zhuǎn)匯總，你說能不迷路嗎？
如果喜歡這篇文章，就請給它一個贊、一句評論、一條轉(zhuǎn)發(fā)吧！bye~
from：https://mp.weixin.qq.com/s/49wvlgJnHNIHzFIefDc9Lg
