前言：這個哥們寫的案例充分解釋了蘇杰老師的口訣：
多邊先分邊
新手與專家
人口統(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
