寫在最前
拋開版權和內容，筆者將以產品設計的角度來分析兩款產品的優(yōu)劣。
【產品】蝦米音樂 & 網(wǎng)易云音樂
【版本】蝦米V5.5.0 & 網(wǎng)易云V3.2.1
【體驗系統(tǒng)】Flyme OS 5.1.0.2Y
需要申明的一點是，蝦米和網(wǎng)易都是非常優(yōu)秀的產品，在設計上也是業(yè)界的良心之作。雖然筆者是蝦米的粉絲，但筆者會盡量以客觀的角度來對兩款產品進行比較。如有錯漏，還請大家多多指教。
服務內容
首先說明一下筆者主要使用這兩款App的哪些功能：
在蝦米音樂，筆者主要使用的是每日推薦歌單和自建精選集功能。使用了4年，筆者始終感受到的是蝦米是一個精準的個性化推薦音樂播放器。在網(wǎng)易云音樂，除了會使用每日推薦和自建歌單外，還會刷刷每首歌的評論，點點贊。使用了3年，而網(wǎng)易最新的一次更新讓我覺得，它是一個好玩的音頻服務平臺。造成這一差別的原因在于，我對它們不常用的功能的態(tài)度，在蝦米音樂，我根本不會理會其他功能，而在網(wǎng)易，我會偶爾地進去看看，感覺還不錯。
而為什么，態(tài)度會有這么大的差距呢？接下來，筆者將一層層地分析其原因。
產品結構
先從結構說起，因為蝦米和網(wǎng)易的結構差異非常大，同時也是造成體驗差異的主要因素。
按照測評文章的慣例，這里將會貼出兩個產品的信息架構圖。然而并沒有，光看架構圖并沒有任何卵用，發(fā)現(xiàn)不了問題。讓我們回歸到最直接的每一層頁面信息和頁面布局說起：
首先分析蝦米的首頁，如圖一，蝦米首頁采用的是無限下拉的瀑布流布局，頁面信息裝在了一張張的卡片上，而每張卡片的信息結構又不盡相同：有的是推薦歌單、有的是推薦話題、有的推薦專輯等等。而且每種信息都是基于用戶行為進行個性化推薦的。像這種卡片與卡片間沒有明確的聯(lián)系，以一種直接的、無規(guī)律的方式將內容暴露于用戶眼前的信息結構可以稱為自然結構。體驗就類似于：看電視時不停地轉換頻道，直到發(fā)現(xiàn)一個自己喜歡的電視節(jié)目為止。自然結構的好處在于，它非常地貼合了用戶“閑逛、漫無目的”的心理模型。可以想象這樣一種場景：用戶A在一個閑暇的時間段想來幾首對自己口味的音樂聽聽，然后他打開了蝦米音樂，不僅首屏中他可找到對他口味的音樂，他只要輕輕地滑動手指就會看到更多為他個性推薦的音樂服務：可能是歌單、可能是MV，可能是音樂專輯等等，只要他不停地往下刷新，他就能找到更多對自己口味的東西。可以說，首頁的設計很好的把閑暇找歌的用戶場景和個性化推薦業(yè)務有機地結合起來。
再來看看一個比較重要的頁面，樂管頁面，如圖二。先引入一個概覽：層級結構。所謂層級結構，就是把信息一層層得組織分類，就好像電腦的文件夾，要一層層地打開才能最終找到想要的東西。而蝦米的樂管頁面就是采用了這個結構。而這結構的好處和壞處也是非常明顯的。好處在于，繁雜龐大的信息能有條理地組織起來，使得看起來并不凌亂，用戶會依據(jù)邏輯或經(jīng)驗找自己想要的信息。而壞處在于，層級越深，分類越多，用戶就越容易迷失在其中，也會使用戶望而卻步，不利于對信息的探索。
像樂管頁面，如果深度地體驗，會有發(fā)現(xiàn)蝦米比較有意思的業(yè)務比如社區(qū)、音樂人、看演出等，但由于被收納在了層級結構內，不容易被發(fā)現(xiàn)或探索。用戶需要操作多個步驟才能真正地看到服務內容。以社區(qū)功能為例：首頁→切換到樂管頁面→找到社區(qū)入口→點擊進入→找到感興趣的話題→點擊進入，要經(jīng)過5步才能看到有用的信息，無疑門檻是非常高的。也有可能這些業(yè)務僅僅是面向于深度用戶，而非普通用戶。
而且，在信息的組織上，這個頁面也存在著問題。筆者思考了好久也沒有想出這頁面的信息分組是一個怎樣的邏輯，一些特色業(yè)務功能和邊緣功能也混淆在一起，使得特色功能業(yè)務不夠突出，頁面也顯得臃腫。（而筆者在文章底部放出了樂管頁面的修改建議，有興趣者可稍后閱讀。）
然而，層級結構不僅僅出現(xiàn)在樂管頁面，也多次出現(xiàn)在某些頁面的某些部分，如用戶音樂管理頁、用戶展示頁等等。可以這樣說，如果一個功能是你不用的，你基本感受不到它的存在，但一旦要找起來，要用起來，就會感到比較費勁。
由以上對結構的分析，我們可以感受到蝦米的產品策略，把業(yè)務重心聚焦在首頁的內容推薦上，而其他功能只是一個補充或者還在試水階段。這也解釋了為什么筆者用來蝦米這么多年都只覺得它是一個音樂播放器了。
如果說自然結構+層級結構可以總結蝦米音樂，那么網(wǎng)易云的關鍵字即是：雙層導航欄+矩陣結構。
所謂矩陣結構，如圖三，將頁面分為幾層，每一層為一個業(yè)務類別，每個類別都由標題+內容+入口組成。這種結構常見于大型的電商網(wǎng)站，可以說集成了自然結構和層級結構的優(yōu)點，滿足了用戶“閑逛性”和“任務型”兩種心理模型。用戶能夠迅速地結構性地了解到App主要業(yè)務是什么，并且能直接地體驗到每種業(yè)務的具體內容。以首頁為例，通過標題，用戶能馬上感受到App提供了推薦歌單、最新音樂、主播電臺等服務，同時他也可以直接點擊其中一個內容馬上體驗，如果他想了解更多，還有有一個“更多”的入口。可以說，在首頁用戶就可清晰地了解網(wǎng)易的大部分業(yè)務。然而，缺點也是顯而易見的，過多的信息展示，會使得頁面顯得凌亂臃腫，增加了用戶的學習成本。
雙層導航欄比較好理解，也是很常見的導航方式。優(yōu)勢在于，能讓用戶快速得到達各個業(yè)務，業(yè)務與業(yè)務間形成一種平行關系，使整個產品架構也更容易被用戶理解和學習。再以社區(qū)功能（網(wǎng)易稱為動態(tài)）為例：首頁→切換到社區(qū)頁面，僅需一步用戶就能看到有用信息，相對于蝦米的5步，實在高效太多。而更淺的路徑也能使得業(yè)務更好地展露。
總的來說，得益于雙層導航欄和矩陣結構，網(wǎng)易云的功能業(yè)務都得以直觀、清楚明白地展現(xiàn)。這也就可以解釋為什么筆者覺得網(wǎng)易云是一個音頻服務平臺：即使是一個只用少部分功能的用戶，也會每次地被動發(fā)現(xiàn)，網(wǎng)易云上有其他的功能，使得他或多或少地去嘗試新的功能。
產品策略決定產品結構，產品結構影響用戶體驗。經(jīng)過筆者的一番體驗可以倒推出：蝦米音樂是一種聚焦型的產品策略，而網(wǎng)易云則是平衡型的，孰優(yōu)孰劣暫時還不可判斷。但無可否認的是，站在商業(yè)的角度，網(wǎng)易云的結構更加有利于業(yè)務的發(fā)展。
然而，筆者在這有一個很大的疑問：拋開版權問題，在個性化推薦功能爛大街的形勢下，蝦米的核心競爭力又是什么呢？
功能模塊
經(jīng)過對比，筆者發(fā)現(xiàn)網(wǎng)易云和蝦米的功能模塊都非常類似，但在模塊的設計上卻有很大的不同。接下來，筆者將選擇兩個具體分析。
第一個不得不說的歌單模塊。
網(wǎng)易的歌單模塊是靈活而又強大的。這里所說的歌單，并不僅僅是指名字為歌單的東西。自建歌單、推薦歌單、專輯、喜歡的音樂和排行榜這些從本質上來說都是歌單，如圖四 。它們都有著一致的頁面布局，操作邏輯以及播放規(guī)則，這樣的一致的設計，好處可不少：
統(tǒng)一的界面設計和操作邏輯可以大大地減少用戶的認知負擔和學習成本。讓App做到輕量化。
歌單自行一致也能與其他業(yè)務形成明顯的差異化，比如，用戶怎么也不會吧主播電臺和歌單混淆在一起。
減低開發(fā)成本同時利于業(yè)務拓展，只要有新的業(yè)務能用歌單形式承載，就可直接復用。
以后臺管理的角度，數(shù)據(jù)結構的一致性也使管理更加方便。
再看看蝦米的歌單模塊，這里類似歌單模塊的有：我收藏的音樂、我的精選集、精選集、專輯、今日推薦歌單、排行榜，如圖五。然而它們卻沒有像網(wǎng)易云很好地統(tǒng)一起來，盡管有的形式相似，但它們的操作邏輯卻不盡相同，有的可以點贊，有的可以分享，有的可以收藏……雖然使用起來并無大礙，但無可避免地有一種凌亂感。沒有統(tǒng)一化的思路加上蝦米常見的層級結構使得產品并不怎么好用，例如：在“我的”頁面里，我收藏的音樂，訂閱的精選集被分別收藏在了下一個層級里，而自建精選集卻能在第一層級得以展現(xiàn)，如圖六左。然而它們本來可以是同一樣東西，在一個頁面全部展露，像網(wǎng)易云就是這樣做的，如圖六右。
第二個可以說說的是社區(qū)模塊。
上文已經(jīng)提到，要瀏覽社區(qū)里面的內容，蝦米需要5步，而網(wǎng)易云只需要1步，然而差距還不僅僅于此。
在社區(qū)頁，如圖七，蝦米的大致邏輯是：頁面上提供了豐富的話題，用戶必須從中選擇一個，才能進行瀏覽或言論。對于這樣的邏輯，筆者實在十分不解：
為什么一開始就要讓用戶選擇？
大量的話題選擇，難道不會讓用戶迷惑嗎？
怎么才能把話題運營起來？運營一個UGC業(yè)務，需要解決一個核心問題：如何讓數(shù)據(jù)鮮活起來？
先把問題放一放，看看網(wǎng)易云的社區(qū)是怎么做的，如圖八，頁面一開始就不分話題地展露了用戶的言論，而話題只會在用戶的言論中偶爾穿插一條。筆者認為，這是非常明智的做法：
大大降低了用戶的選擇門檻，選擇“是否”顯然比選擇“哪一個”容易決策得多。
更重要的是，話題以這樣的呈現(xiàn)方式更加容易運營。因為話題往往是具有時效性的，在一個娛樂熱點上發(fā)布一次話題能有效地提高用戶的參與度。比如“小李獲得小金人”這一話題，就可以誘導影迷們發(fā)表熱烈的言論。
再來回看蝦米的社區(qū)，固定不變的話題最終只能變成一潭死水，很難讓用戶活躍起來。而假如，因為運營的需要新增一個話題，又會造成話題的冗余，把所有話題顯露出來讓用戶選擇終究是一個不可持續(xù)的方式。而且，蝦米沒有把好友機制、大蝦館這樣的業(yè)務跟社區(qū)結合起來，孤獨、被隔離的社區(qū)又怎么能夠玩轉起來呢？
經(jīng)過以上對比，筆者完全感受到了網(wǎng)易云在產品設計上的把控力，而蝦米音樂真的略顯遜色。
交互細節(jié)
所謂魔鬼存在細節(jié)當中，好的設計細節(jié)真的會讓人著迷。而在這一方面，網(wǎng)易云可以說是全面碾壓蝦米，筆者將用幾個細節(jié)來給大家解釋。
播放列表的播放規(guī)則
蝦米的播放規(guī)則一直是讓筆者抓狂的事，以搜歌試聽為例，其邏輯是當用戶點擊搜索的結果，蝦米不僅僅是播放當前的結果，而是播放整個搜索列表，如圖九。然而用戶的目的只是想播放自己選擇的歌曲，對其它搜索結果根本不敢興趣。按蝦米的邏輯還把整個播放列表打亂，用戶還得費氣力去恢復原來的播放列表，這樣非常影響聽歌的體驗。像這種不合理的播放規(guī)則的例子還有很多，在這就不一一列舉。
而網(wǎng)易云的規(guī)則就容易理解很多，如果點擊的僅僅是一首單曲，它會自動添加到播放列表并設為當前播放，換句話說，原來的播放列表是不會受影響的，如果點擊的是一張歌單或歌單中的曲目，那么播放列表就會刷新為該歌單的曲目。這兩個簡單的邏輯使得整個聽歌體驗非常流暢，不會感到有阻礙。
社區(qū)分享音樂流程
在這流程中，蝦米點擊分享，再點擊選擇音樂的時候，出現(xiàn)的是一個搜索框，如圖十左。看起來并沒有問題。然而，在云音樂中點擊選擇音樂后，出現(xiàn)的是搜索框同時列出最近播放的歌曲，如圖十右。高下立見！因為在這分享行為中，可能會存在兩種場景：第一，用戶往往會因為在聽或剛聽的歌觸動情緒，從而觸發(fā)分享的動作；第二，用戶因某個話題想發(fā)表點什么，然后需要配一首歌來渲染所寫的內容。而蝦米卻沒有把兩種場景考慮到位。
搜索框的交互控件
在網(wǎng)易云的搜索框控件中，有一個消除按鈕，點擊消除，直接會呼出鍵盤，不需要再次點擊搜索框才呼出鍵盤，如圖十一。然而蝦米卻沒有這樣的便利。
播放列表
網(wǎng)易云的播放列表是一個彈出層，而蝦米的播放列表需要在播放界面中向右滑動才能出現(xiàn)，如圖十二。其實這也不算什么錯誤，但這樣會大大地限制了播放列表的靈活性。比如，在最底的控制欄中，網(wǎng)易可以直接呼出播放列表，而蝦米則不可以，如圖十三。且不說該不該有這樣的控制，然而蝦米是即使想有也不能有。
點進評論的操作
最后再吐槽一下，蝦米點進評論再返回的操作，用戶從播放頁面進入，返回的時候卻到了播放頁的前一個頁面。這樣操作的不對稱，就好比，你從走廊進入了房間，當你再從房間出來的時候卻到了大堂。這種邏輯有多滑稽就不再多說了。
引用《交互設計之路》的一句話：“讓交互設計變好的關鍵是減少用戶和電腦之間的不確定性。”而這就需要對用戶行為細致的觀察和預判，網(wǎng)易云對交互細節(jié)的處理都充分地體現(xiàn)了其產品團隊對用戶行為的透徹理解。
視覺細節(jié)
在視覺設計的整體風格上，孰優(yōu)孰劣只能見仁見智。然而，在視覺細節(jié)的處理上，卻可以分出高下來。
第一個要說的，也是最重要的是封面配圖。
網(wǎng)易云大多數(shù)的配圖都非常高精度，而蝦米的卻不然。兩者都是采用沉浸式的設計，然而低像素的配圖對沉浸式設計來說無疑是一個災難。
第二個要說的是圖標。
網(wǎng)易云的圖標都是嚴格地遵循幾個分級的尺寸，然而蝦米的圖標的尺寸卻滿天飛，并沒有看出有什么一致性。同時，在大屏手機上，蝦米的圖標已經(jīng)放大得出現(xiàn)毛邊。
第三，鎖屏狀態(tài)。
作為一個曝光頻率極高的頁面，其設計的重要性不言而喻。值得肯定的是兩者的設計都不錯，而筆者更加傾向網(wǎng)易：得益于高清的配圖能將沉浸式設計貫徹到底，如圖十四。
優(yōu)化建議
吐槽了這么久，還是得提一下一些有建設性的東西：
對樂管頁面的修改建議
如圖十五，左圖為蝦米原來頁面的信息結構，右圖為筆者修改后的信息結構，修改理由如下：
將本來四層的分組改為三層，分別為主推業(yè)務、特色業(yè)務和邊緣業(yè)務。
主推業(yè)務按照原來的不動，而社區(qū)、音樂人和看演出都是蝦米所特有的業(yè)務，所以組合在一起讓用戶更容易理解。
而其他的藝人、專輯等都是一些深層次的找歌功能，這種分類找歌的方式可以說是PC時代的設計思路遺留下來的產物，所以把它定義為邊緣業(yè)務。以防真的會有這種需求的用戶。
特別要說一下的是大蝦館被融入在了社區(qū)功能里，這都是UGC的業(yè)務，可以結合在一起，并且加上好友機制讓社區(qū)功能更加具備可玩性。至于三者要怎樣地有機結合在一起，這需要大量的精力去設計，筆者在這還沒能給出答案。
最后的建議，還是要回歸到蝦米的產品定位。
如果產品定位還是圍繞個性化業(yè)務，就讓自然結構更加自然，也就是說首頁上的卡片可以更加多樣化，可以再加上看演出、社區(qū)話題這樣的特色業(yè)務，將個性化推薦更加豐滿。
如果是定位為一個音樂服務平臺，筆者的建議是必須進行結構重構，因為聚焦型的產品結構實在難以支撐起業(yè)務的發(fā)展。然而，蝦米是蝦米，逼格和小眾已經(jīng)成為它的標簽，這樣向世俗的妥協(xié)是否有失它的身份？
