网易云音乐交互细节分析

前言：学习了交互设计课程后，为了避免眼高手低，笔者决定通过学习一些优秀产品的交互设计，总结出好产品好的原因，并加以运用到实际工作中去。此外，只有当你明白好产品好在哪里，才能更科学的改进差产品。因此，笔者首先选取了口碑较好的网易云音乐进行分析。

网易云音乐的产品体验报告、分析报告实在不少，所以一些例如优雅的黑胶唱片设计、反馈及时的小秘书等产品闪光点我就不再一一赘述，本文将更多的从交互设计细节来分析。

软件版本：网易云音乐 4.1.1

使用设备：iphone7

操作系统：ios11.1.1

体验时间：2017-11-14

产品框架图：

结构框架图

一、让我思考良多的“我的音乐”

笔者把“我的音乐 ”中的相关功能重新分类，结果如下图所示：

左图为常规分类、右图为云音乐分类

可以看到最大的区别有两处：

1、电台和歌单的归属

无论是订阅的电台还是用户自己创建的歌单本质上都应归入收藏，即按照左图归类。但这是不符合产品目标和用户体验的。从产品目标来看，网易云音乐是很重视歌单这个功能的，因此相对于收藏的歌手、MV、专辑和专栏，要把歌单突出，于是单独拎了出来。从用户体验来看，订阅的电台是时常更新的，用户会需要经常去跟进，所以也单独拎出来（如图）。

从页面可以看出，歌单和电台的重要程度也是不同的，歌单是直接把内容显示出来，而电台的内容被收到了二级页面。这样做有两个好处，第一，默认歌单“我喜欢的音乐”可以与本地音乐和最近播放平级显示，因为从实际使用来说，用户习惯于选择这三者来进行收听；第二，在用户不想听老歌的时候，可以随手选一个自己喜欢的歌单收听，十分方便。但是缺点就是，当收藏和创建的歌单越来越多，这一页就会非常长非常拥挤，所以为了缓和，云音乐做了“展开-收起”功能。但是拥挤的问题仍然没有解决，导致对歌单的操作放不下，只能被放到左上角。

我的音乐

2、管理歌单

对歌单的管理包括创建、删除和排序，网易云音乐将这些操作放在了页面左上角“更多”中（如图）。作为操作键，对要执行操作的对象-歌单距离却很远，是不利于用户操作的，降低了产品的可用性。

而因为页面没有空闲，把当前使用频次较低的“我的音乐云盘”也塞了进去。这也是“操作”命名为“更多”的原因吧。而命名为“更多”并不利于用户理解，更多给人一种更多内容的感觉，把操作放在更多中比较牵强。笔者在使用过程中想创建歌单，也是花了一番功夫抱着尝试的心态点击开“更多”。这里需要一个更好的设计方案。

我的音乐-更多

这里QQ音乐的做法比较好，如图所示，在“我的”同样显示了歌单，但是对歌单的操作是通过“我的歌单”标题后面的展开按钮或者下拉至底部的“管理和恢复歌单”。然后进入二级页面，可以进行“添加”和“管理”，一目了然。并且在“我的”页面，歌单最多罗列10个，不会有页面过长的情况发生。

QQ音乐-管理歌单

二、关于音乐播放器

从整体框架可以看出，音乐播放器是独立的一个功能。让音乐播放器始终位于页面最高层级可以说是音乐软件公认的道理吧，因为用户对当前播放歌曲的操作（如查看歌词、评论、调节音量）是很频繁的。关键在于，不同应用对于这个功能的设计方式大有不同。

最常见的设计就是以qq音乐为代表的音乐播放器始终悬浮在底端的设计，见图一（左）。这种设计在pc端的音乐软件中比较常见，如图二，咪咕音乐网页版音乐播放器。

这种设计在pc端影响不大，但是在移动端，由于页面空间有限，这种条形播放器会占据很大的位置，原本可以在底端放置的标签栏被挤掉了。qq音乐的做法是把一些内容收到了左上角的抽屉式导航。了解过抽屉式导航的应该明白，抽屉里的内容很难到达用户，一些位于抽屉内的功能使用率会下降很多。

而网易云的做法则大大不同（如图一中），把条形播放器简化成一个有高低起伏动效的按钮，切无论切换到哪个页面，都始终位于页面右上角，点击就可以唤出音乐播放器。这样大大节省了页面空间，所以有位置可以在底部放置标签栏。这样比较起来，似乎网易云音乐比qq音乐的做法更好一点。其实也不尽然，右上角的一个小icon不够起眼，即使做了动效还是容易被忽略，而且没有当前播放音乐的信息，不够直观。对于初次使用的用户，可能需要花一定成本去寻找。

更好的做法是虾米音乐（如图一右），采用了舵式导航，即突出了音乐播放器的重要性，展示了部分信息（正在播放的音乐专辑封面）；还与标签栏完美结合，让页面位置能呈现更多信息。

图一  qq音乐（左）；网易云音乐（中）；虾米音乐（右） 咪咕音乐pc端

除了以上三种播放器，笔者在使用微信读书时发现了另一种不错的形式——悬浮于所有页面的小按钮，类似于苹果的小圆点（如图）。黄色圆圈内是微信读书的FM频道收起时的按钮，当用户在其他页面浏览时，按钮始终悬浮于页面最上方，播放状态时会旋转，暂停时会静止，点击后可以进入频道。

微信读书

写到这里，笔者的感触是，当你认为一件事是两难的，并且想要在两者之间有所取舍时（比如突出播放器和节约空间的取舍），其实可能是有第三条路的（比如虾米音乐、微信读书的做法）。所以考虑问题时，我们要时常跳出来看看，有没有其他的可能性。

三、一些交互细节

1、节目标记。

后台会标记电台收听的最后一个节目，当用户切换电台或者退出程序后重新回到该电台，可以继续收听之前没听完的节目。

节目标记

2、分享音乐。

用户分享时选择音乐，云音乐没有让用户从曲库中寻找，而是提供了搜索栏和最近播放的5首歌，这是充分考虑了用户场景做的决定。我们考虑一下什么时候用户会分享音乐？就是当用户正在听某首歌觉得很棒，那他会立刻分享，所以最近播放里会有他想分享的歌。还有一种情况是用户想分享此时的心情，所以需要找一首配乐，这时候用户一般心里已经有比较明确的目标歌曲，所以只要通过搜索功能就能快速实现目标。可以发现搜索栏有一些历史搜索记录，而这些记录与首页搜索栏的记录如出一辙，用户可以很方便的根据自己的历史记录搜索到自己想要的歌曲。

可以有所改进的是，在搜索栏可以添加一些心情标签，一些有该种心情却不知道分享什么歌曲的用户可以通过标签选择歌曲。

分享音乐

3、朋友动态。

在动态中，用户除了可以对朋友分享的动态点赞、评论和转发以外，还可以把朋友分享的歌曲设为下一首播放。对于非优质内容，用户可以选择“不感兴趣，减少此类推荐”、“不再显示推荐动态”以及举报等操作。给了用户更大的自由，让社交内容变得更纯净。

朋友动态

4、截屏。

截图后会自动跳出“分享截图给好友”（如左图），可以选择常用社交软件进行分享，从用户来看是个很方便的设计，而从产品来看也能增加产品自身的曝光率，一举两得。不过这个功能其他软件也有，真正让我感到云音乐用心之处的，是在多次截图但没有选择分享后，跳出提示“可在设置中取消截屏分享提示”（如右图）。这个功能实际来讲使用频率应该不高（除了像我这样为了分析狂截图的...），但是云音乐考虑到了，并且去做了，所以说细微之处见真章。

截屏

欢迎批评指正，欢迎补充！