來人人都是産品經理【起點學院】，BAT實戰派産品總監手把手系統帶你學産品、學運營。

寫在最前

抛開版權和内容，筆者将以産品設計的角度來分析兩款産品的優劣。

【産品】蝦米音樂 & 網易雲音樂

【版本】蝦米V5.5.0 & 網易雲V3.2.1

【體驗系統】Flyme OS 5.1.0.2Y

需要聲明的一點是，蝦米和網易都是非常優秀的産品，在設計上也是業界的良心之作。筆者會盡量客觀地來對兩款産品進行比較。如有錯漏，還請大家多多指教。

服務内容

首先說明一下筆者主要使用這兩款App的哪些功能：

在蝦米音樂，筆者主要使用的是每日推薦歌單和自建精選集功能。使用了4年，筆者始終感受到的是蝦米是一個精準的個性化推薦音樂播放器。在網易雲音樂，除了會使用每日推薦和自建歌單外，還會刷刷每首歌的評論，點點贊。使用了3年，而網易最新的一次更新讓我覺得，它是一個好玩的音頻服務平台。造成這一差别的原因在于，我對它們不常用的功能的态度，在蝦米音樂，我根本不會理會其他功能，而在網易，我會偶爾地進去看看，感覺還不錯。

而為什麼，态度會有這麼大的差距呢？接下來，筆者将一層層地分析其原因。

産品結構

先從結構說起，因為蝦米和網易的結構差異非常大，同時也是造成體驗差異的主要因素。

按照測評文章的慣例，這裡将會貼出兩個産品的信息架構圖。然而并沒有，光看架構圖并沒有任何卵用，發現不了問題。讓我們回歸到最直接的每一層頁面信息和頁面布局說起：

圖一（蝦米音樂首頁）

首先分析蝦米的首頁，如圖一，蝦米首頁采用的是無限下拉的瀑布流布局，頁面信息裝在了一張張的卡片上，而每張卡片的信息結構又不盡相同：有的是推薦歌單、有的是推薦話題、有的推薦專輯等等。而且每種信息都是基于用戶行為進行個性化推薦的。像這種卡片與卡片間沒有明确的聯系，以一種直接的、無規律的方式将内容暴露于用戶眼前的信息結構可以稱為自然結構。

體驗就類似于：看電視時不停地轉換頻道，直到發現一個自己喜歡的電視節目為止。自然結構的好處在于，它非常地貼合了用戶“閑逛、漫無目的”的心理模型。可以想象這樣一種場景：用戶A在一個閑暇的時間段想來幾首對自己口味的音樂聽聽，然後他打開了蝦米音樂，不僅首屏中他可找到對他口味的音樂，他隻要輕輕地滑動手指就會看到更多為他個性推薦的音樂服務：可能是歌單、可能是MV，可能是音樂專輯等等，隻要他不停地往下刷新，他就能找到更多對自己口味的東西。可以說，首頁的設計很好的把閑暇找歌的用戶場景和個性化推薦業務有機地結合起來。

圖二（蝦米音樂樂館頁）

再來看看一個比較重要的頁面，樂管頁面，如圖二。先引入一個概覽：層級結構。所謂層級結構，就是把信息一層層得組織分類，就好像電腦的文件夾，要一層層地打開才能最終找到想要的東西。而蝦米的樂管頁面就是采用了這個結構。而這結構的好處和壞處也是非常明顯的。好處在于，繁雜龐大的信息能有條理地組織起來，使得看起來并不淩亂，用戶會依據邏輯或經驗找自己想要的信息。而壞處在于，層級越深，分類越多，用戶就越容易迷失在其中，也會使用戶望而卻步，不利于對信息的探索。

像樂管頁面，如果深度地體驗，會有發現蝦米比較有意思的業務比如社區、音樂人、看演出等，但由于被收納在了層級結構内，不容易被發現或探索。用戶需要操作多個步驟才能真正地看到服務内容。以社區功能為例：首頁→切換到樂管頁面→找到社區入口→點擊進入→找到感興趣的話題→點擊進入，要經過5步才能看到有用的信息，無疑門檻是非常高的。也有可能這些業務僅僅是面向于深度用戶，而非普通用戶。

而且，在信息的組織上，這個頁面也存在着問題。筆者思考了好久也沒有想出這頁面的信息分組是一個怎樣的邏輯，一些特色業務功能和邊緣功能也混淆在一起，使得特色功能業務不夠突出，頁面也顯得臃腫。（而筆者在文章底部放出了樂管頁面的修改建議，有興趣者可稍後閱讀。）

然而，層級結構不僅僅出現在樂管頁面，也多次出現在某些頁面的某些部分，如用戶音樂管理頁、用戶展示頁等等。可以這樣說，如果一個功能是用戶不用的，用戶基本感受不到它的存在，但一旦要找起來，要用起來，就會感到比較費勁。

由以上對結構的分析，我們可以感受到蝦米的産品策略，把業務重心聚焦在首頁的内容推薦上，而其他功能隻是一個補充或者還在試水階段。這也解釋了為什麼筆者用來蝦米這麼多年都隻覺得它是一個音樂播放器了。

如果說自然結構 層級結構可以總結蝦米音樂，那麼網易雲的關鍵字即是：雙層導航欄 矩陣結構。

圖三（網易雲音樂首頁）

所謂矩陣結構，如圖三，将頁面分為幾層，每一層為一個業務類别，每個類别都由标題 内容 入口組成。這種結構常見于大型的電商網站，可以說集成了自然結構和層級結構的優點，滿足了用戶“閑逛性”和“任務型”兩種心理模型。用戶能夠迅速地結構性地了解到App主要業務是什麼，并且能直接地體驗到每種業務的具體内容。以首頁為例，通過标題，用戶能馬上感受到App提供了推薦歌單、最新音樂、主播電台等服務；同時他也可以直接點擊其中一個内容馬上體驗；如果他想了解更多，還有有一個“更多”的入口。可以說，在首頁用戶就可清晰地了解網易的大部分業務。然而，缺點也是顯而易見的，過多的信息展示，會使得頁面顯得淩亂臃腫，增加了用戶的學習成本。

雙層導航欄比較好理解，也是很常見的導航方式。優勢在于，能讓用戶快速得到達各個業務，業務與業務間形成一種平行關系，使整個産品架構也更容易被用戶理解和學習。再以社區功能（網易稱為動态）為例：首頁→切換到社區頁面，僅需一步用戶就能看到有用信息，相對于蝦米的5步，實在高效太多。而更淺的路徑也能使得業務更好地展露。

總的來說，得益于雙層導航欄和矩陣結構，網易雲的功能業務都得以直觀、清楚明白地展現。這也就可以解釋為什麼筆者覺得網易雲是一個音頻服務平台：即使是一個隻用少部分功能的用戶，也會每次地被動發現，網易雲上有其他的功能，使得他或多或少地去嘗試新的功能。

産品策略決定産品結構，産品結構影響用戶體驗。經過筆者的一番體驗可以倒推出：蝦米音樂是一種聚焦型的産品策略，而網易雲則是平衡型的，孰優孰劣暫時還不可判斷。但無可否認的是，站在商業的角度，網易雲的結構更加有利于業務的發展。

然而，筆者在這有一個很大的疑問：抛開版權問題，在個性化推薦功能爛大街的形勢下，蝦米的核心競争力又會是什麼呢？

功能模塊

經過對比，筆者發現網易雲和蝦米的功能模塊都非常類似，但在模塊的設計上卻有很大的不同。接下來，筆者将選擇兩個具體分析。

圖四（網易雲音樂我的歌單&推薦歌單&專輯&排行榜）

第一個不得不說的歌單模塊。

網易的歌單模塊是靈活而又強大的。這裡所說的歌單，并不僅僅是指名字為歌單的東西。自建歌單、推薦歌單、專輯、喜歡的音樂和排行榜這些從本質上來說都是歌單，如圖四。它們都有着一緻的頁面布局，操作邏輯以及播放規則，這樣的一緻的設計，好處可不少：

1. 統一的界面設計和操作邏輯可以大大地減少用戶的認知負擔和學習成本。讓App做到輕量化。
2. 歌單自行一緻也能與其他業務形成明顯的差異化，比如，用戶怎麼也不會吧主播電台和歌單混淆在一起。
3. 減低開發成本同時利于業務拓展，隻要有新的業務能用歌單形式承載，就可直接複用。
4. 以後台管理的角度，數據結構的一緻性也使管理更加方便。

圖五（蝦米音樂我的收藏&我的歌單&精選集&專輯 &今日推薦歌單&排行榜）

再看看蝦米的歌單模塊，這裡類似歌單模塊的有：我收藏的音樂、我的精選集、精選集、專輯、今日推薦歌單、排行榜，如圖五。然而它們卻沒有像網易雲很好地統一起來，盡管有的形式相似，但它們的操作邏輯卻不盡相同，有的可以點贊，有的可以分享，有的可以收藏……雖然使用起來并無大礙，但無可避免地有一種淩亂感。沒有統一化的思路加上蝦米常見的層級結構使得産品并不怎麼好用，例如：在“我的”頁面裡，我收藏的音樂，訂閱的精選集被分别收藏在了下一個層級裡，而自建精選集卻能在第一層級得以展現，如圖六左。然而它們本來可以是同一樣東西，在一個頁面全部展露，像網易雲就是這樣做的，如圖六右。

圖六（左為蝦米音樂、右為網易雲音樂）

第二個可以說說的是社區模塊。

上文已經提到，要浏覽社區裡面的内容，蝦米需要5步，而網易雲隻需要1步，然而差距還不僅僅于此。

圖七（蝦米音樂社區頁面）

在社區頁，如圖七，蝦米的大緻邏輯是：頁面上提供了豐富的話題，用戶必須從中選擇一個，才能進行浏覽或言論。對于這樣的邏輯，筆者實在十分不解：

1. 為什麼一開始就要讓用戶選擇？
2. 大量的話題選擇，難道不會讓用戶迷惑嗎？
3. 怎麼才能把話題運營起來？運營一個UGC業務，需要解決一個核心問題：如何讓數據鮮活起來？

圖八（網易雲音樂社區頁面）

先把問題放一放，看看網易雲的社區是怎麼做的，如圖八，頁面一開始就不分話題地展露了用戶的言論，而話題隻會在用戶的言論中偶爾穿插一條。筆者認為，這是非常明智的做法：

1. 大大降低了用戶的選擇門檻，選擇“是否”顯然比選擇“哪一個”容易決策得多。
2. 更重要的是，話題以這樣的呈現方式更加容易運營。因為話題往往是具有時效性的，在一個娛樂熱點上發布一次話題能有效地提高用戶的參與度。比如“小李獲得小金人”這一話題，就可以誘導影迷們發表激烈的言論。

再來回看蝦米的社區，固定不變的話題最終隻能變成一潭死水，很難讓用戶活躍起來。而假如，因為運營的需要新增一個話題，又會造成話題的冗餘，把所有話題顯露出來讓用戶選擇終究是一個不可持續的方式。而且，蝦米沒有把好友機制、大蝦館這樣的業務跟社區結合起來，孤獨、被隔離的社區又怎麼能夠玩轉起來呢？

經過以上對比，筆者完全感受到了網易雲在産品設計上的把控力，而蝦米音樂真的略顯遜色。

交互細節

所謂魔鬼存在細節當中，好的設計細節真的會讓人着迷。而在這一方面，網易雲可以說是全面碾壓蝦米，筆者将用幾個細節來給大家解釋。

播放列表的播放規則

圖九（蝦米音樂播放列表頁）

蝦米的播放規則一直是讓筆者抓狂的事，以搜歌試聽為例，其邏輯是當用戶點擊搜索的結果，蝦米不僅僅是播放當前的結果，而是播放整個搜索列表，如圖九。然而用戶的目的隻是想播放自己選擇的歌曲，對其它搜索結果根本不敢興趣。按蝦米的邏輯還會把整個播放列表打亂，用戶還得費氣力去恢複原來的播放列表，這樣非常影響聽歌的體驗。像這種不合理的播放規則的例子還有很多，在這就不一一列舉。

而網易雲的規則就容易理解很多，如果點擊的僅僅是一首單曲，它會自動添加到播放列表并設為當前播放，換句話說，原來的播放列表是不會受影響的，如果點擊的是一張歌單或歌單中的曲目，那麼播放列表就會刷新為該歌單的曲目。這兩個簡單的邏輯使得整個聽歌體驗非常流暢，不會感到有阻礙。

社區分享音樂流程

圖十（左為蝦米音樂、右為網易雲音樂）

在這流程中，蝦米點擊分享，再點擊選擇音樂的時候，出現的是一個搜索框，如圖十左。看起來并沒有問題。然而，在雲音樂中點擊選擇音樂後，出現的是搜索框同時列出最近播放的歌曲，如圖十右。高下立見！因為在這分享行為中，可能會存在兩種場景：第一，用戶往往會因為在聽或剛聽的歌觸動情緒，從而觸發分享的動作；第二，用戶因某個話題想發表點什麼，然後需要配一首歌來渲染所寫的内容。而蝦米卻沒有把兩種場景考慮到位。

搜索框的交互控件

圖十一

在網易雲的搜索框控件中，有一個消除按鈕，點擊消除，直接會呼出鍵盤，不需要再次點擊搜索框才呼出鍵盤，如圖十一。然而蝦米卻沒有這樣的便利。

播放列表

圖十二（左為網易雲音樂、右為蝦米音樂）

網易雲的播放列表是一個彈出層，而蝦米的播放列表需要在播放界面中向右滑動才能出現，如圖十二。其實這也不算什麼錯誤，但這樣會大大地限制了播放列表的靈活性。比如，在最底的控制欄中，網易可以直接呼出播放列表，而蝦米則不可以，如圖十三。且不說該不該有這樣的控制，然而蝦米是即使想有也不能有。

圖十三（上為蝦米音樂、下為網易雲音樂）

點進評論的操作

最後再吐槽一下，蝦米點進評論再返回的操作，用戶從播放頁面進入，返回的時候卻到了播放頁的前一個頁面。這樣操作的不對稱，就好比，你從走廊進入了房間，當你再從房間出來的時候卻到了大堂。這種邏輯有多滑稽就不再多說了。

引用《交互設計之路》的一句話：“讓交互設計變好的關鍵是減少用戶和電腦之間的不确定性。”而這就需要對用戶行為細緻的觀察和預判，網易雲對交互細節的處理都充分地體現了其産品團隊對用戶行為的透徹理解。

視覺細節

在視覺設計的整體風格上，孰優孰劣隻能見仁見智。然而，在視覺細節的處理上，卻可以分出高下來。

第一個要說的，也是最重要的是封面配圖。

網易雲大多數的配圖都非常高精度，而蝦米的卻不然。兩者都是采用沉浸式的設計，然而低像素的配圖對沉浸式設計來說無疑是一個災難。

第二個要說的是圖标。

網易雲的圖标都是嚴格地遵循幾個分級的尺寸，然而蝦米的圖标的尺寸卻滿天飛，并沒有看出有什麼一緻性。同時，在大屏手機上，蝦米的圖标已經放大得出現毛邊。

第三，鎖屏狀态。

作為一個曝光頻率極高的頁面，其設計的重要性不言而喻。值得肯定的是兩者的設計都不錯，而筆者更加傾向網易：得益于高清的配圖能将沉浸式設計貫徹到底，如圖十四。

圖十四（左為蝦米音樂、右為網易雲音樂）

還有更多的細節筆者就不一一叙述，感興趣的朋友可以自行發覺。

優化建議

吐槽了這麼久，還是得提一下一些有建設性的東西：

對樂管頁面的修改建議

如圖十五，左圖為蝦米原來頁面的信息結構，右圖為筆者修改後的信息結構，修改理由如下：

1. 将本來四層的分組改為三層，分别為主推業務、特色業務和邊緣業務。
2. 主推業務按照原來的不動，而社區、音樂人和看演出都是蝦米所特有的業務，所以組合在一起讓用戶更容易理解。
3. 而其他的藝人、專輯等都是一些深層次的找歌功能，這種分類找歌的方式可以說是PC時代的設計思路遺留下來的産物，所以把它定義為邊緣業務。以防真的會有這種需求的用戶。
4. 特别要說一下的是大蝦館被融入在了社區功能裡，這都是UGC的業務，可以結合在一起，并且加上好友機制讓社區功能更加具備可玩性。至于三者要怎樣地有機結合在一起，這需要大量的精力去設計，筆者在這還沒能給出答案。

圖十五

最後的建議，還是要回歸到蝦米的産品定位。

• 如果産品定位還是圍繞個性化業務，就讓自然結構更加自然，也就是說首頁上的卡片可以更加多樣化，可以再加上看演出、社區話題這樣的特色業務，将個性化推薦更加豐滿。
• 如果是定位為一個音樂服務平台，筆者的建議是必須進行結構重構，因為聚焦型的産品結構實在難以支撐起業務的發展。然而，蝦米是蝦米，逼格和小衆已經成為它的标簽，這樣向世俗的妥協是否有失它的身份？

作者：Genrry，設計師。

本文由 @Genrry 原創發布于人人都是産品經理 ，未經許可，禁止轉載。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!