写在最前

抛开版权和内容，笔者将以产品设计的角度来分析两款产品的优劣。

【产品】虾米音乐 & 网易云音乐

【版本】虾米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 原创发布于人人都是产品经理 ，未经许可，禁止转载。