设计师的角度分析产品改版-网易云音乐_6.3.0

前言

Hello~各位酷友，这次给大家带来一篇自己对网易云音乐的改版分析。同时，之后也准备持续以产品改版分析的主题进行创作。

本文阅读时长大约15分钟，泡杯咖啡，准备好就继续吧~

设计师为什么要分析产品

首先跟大家说说我为什么要做这样一个主题。很多刚入行的互联网从业者会有一个误解，认为只有产品经理才需要去做产品分析。目前网上说到产品分析大多也是从产品的角度为出发点，如产品体验报告、分析报告等。但是每一个完整的产品都是一个完整的团队综合产出的结果，因此，不管是产品、设计、开发、运营都能通过分析一个产品获得自己所需要的专业知识。我在成长的过程中，通过产品分析收获了大量的设计方法、经验、见识，这是一条自我提高有效、快捷的道路。

那作为一名设计师，我们应该如何分析，怎样才能通过分析获得设计师所需要的专业知识？相信很多朋友都看过《用户体验要素》这本书，与设计最相关的层次集中在表现层、框架层与结构层，具体到产品上就是视觉元素、页面布局、设计语言、交互逻辑这几点。而我们要做的就是针对这几点进行分析。从表现层不断反推到更高的层次，如果你还掌握了产品知识的话，甚至可以反推到战略层。每完成一个反推的过程，你对这个类型的产品设计就会有更深的了解。可想而知，如果你能把这种练习养成习惯，你的设计能力不仅会更垂直，也会更全面。

为什么要做改版分析

那我们需要把一个产品完完整整的分析下来吗？如果你有足够的时间或者你需要做竞品分析时当然可以这么做。但是如果仅仅是日常积累的话并不需要。因为分析一整个产品，特别是大厂的产品，花费的时间成本太高，一来难以坚持，二来性价比不高。最有效的方法是做大厂产品的改版分析，只针对变化的内容做分析。这样做的好处有三个：第一，时间成本低，易于坚持。第二：能利用更少的时间接触更多不同类型的产品，培养更全面的设计能力。第三：了解最新的设计方向。工作过的朋友都知道，除非是初创公司，日常工作更多的是产品改版，而非从0到1。做改版分析所获得的知识能有效运用到日常工作。

我把自己日常对产品的改版分析分享给大家，希望大家不仅能在文章中学习到这个产品的改版知识，更希望大家学习到分析产品的方法，并培养起自己分析产品的习惯。

“反推”分析的多元性

受限于专业知识，我分析的内容与角度大多会从设计的层面入手，产品层面的内容稍少。而且我毕竟不是这个产品的改版设计师，只能通过它呈现给我的内容进行“反推”，猜测它的改版目的与想法，因此不能保证我的结论完全正确。但这也是一个有意思的地方，我们经常看大厂的改版报告与它们提出的改版目的，却很少从一个用户的视角出发进行分析，如果我们的观点与它们本来的改版目的是相悖的，可能就说明它们的改版效果不尽人意。因此我也希望大家在看完我的分析后，认为我的分析有误或者遗漏，或者有自己的观点，积极在评论区提出，互相探讨，共同进步。

以下就正式进入本次文章的主题，网易云音乐6.3.0版本的改版分析，选它的原因是我本身是网易云的死忠粉，而且它之前下架了一个月左右的时间进行整改，重新上架后的版本的确蛮有分析的意义与价值。建议各位在阅读时也能打开网易云音乐的最新版本进行体验与印证，能更有效地消化文章里的内容。

 1、改版概述

对比版本号：6.2.5（旧）→  6.3.0（新）

测试机型：iPhone7

网易云这次的改版中，最主要的变化在于旧版本的 “朋友” 升级到新版本的 “云村” 。

网易云音乐在初期就是因为优秀的推荐机制以及走心优质的乐评在音乐产品中突围而出。在这次升级中，显然也是网易云音乐在自己优势领域社交上的新尝试与探索。之所以把新的标签页取名为“云村”，也是因为这个名字很早就在网易云的社区中流行，这次正式把它当成了自家社区的标识，增强了用户的归属感。

在前文中提到过，做改版分析最重要的就是弄清楚变化的部分。因此在接下来的部分里，会先分析改版前后的区别，接着再对新的部分做更深入的分析。

2、更新前后对比

社区模块从 “朋友” 升级到  “云村” 后，最大的变化在于一级页面的改变，从旧版本的 “动态”与“附近“，更新成 “广场” 与 “附近”。

动态页

根据我的观察，动态页面里的内容没有改变，仅仅是把动态页的位置延后到了分段控件里的第二段。

广场页

广场页里的内容显然就是这次更新里的主角，放在了分段控件的第一段。具体的内容与功能会在下文中提到。

附近页

附近页是比较让我困惑的一个改动，这次更新把整个附近页联同里面的内容一并去除了，我翻遍了整个APP也没发现附近页原有的板块与内容。

旧版本附近页里的内容包括顶部的专题banner列表以及下面的附近的人列表。在新版本里已经找不到了。这部分内容在这次更新被去除的原因我猜测是用户在音乐产品中寻找附近的人的需求不高，导致了触达率低，因此被砍掉了。然而让我困惑的点在于两个专题页banner也找不到了，我点进去看过，还没到活动的截止时间，因此我也不清楚这两个活动的入口调整到了哪里。

可以看出来，这次更新并未对原有内容做修改，仅仅是砍掉部分旧的内容并添加新的内容。因此，接下来会对更新内容即 “广场” 板块做一个分析。

3、“广场”板块分析

首先，我们从框架层对页面进行解构。

广场页的内容板块结构其实也比较简单，由最上方的热评墙、下方的瀑布流Mlog以及悬浮的发布按钮组成。下面我们就这三个部分分别展开进行讨论。

（1）热评墙

热评墙这个板块在我所知的产品功能里还比较新颖，每一天都会选出10条热门评论吸引用户浏览并对这条评论进行互动（点赞、评论、分享）。而且还有打卡机制。

刚才我所提到的的很多都是战略层和范围层的内容，接下来就从框架层和表现层入手，看看我们可以借鉴学习到哪些设计方法。

参照上图，打开乐评墙的页面后，大家的第一感觉是什么？对我而言，首先感受到的就是一种情绪上的、感性的东西，很吸引我去看它的评论，听它的音乐。那它是怎么做到的呢？里面用到了三个视觉元素，一个听觉元素。三个视觉元素分别是大气简洁走心的乐评文字，全屏打通的朦胧背景色以及一条接一条弹幕形式的评论，而听觉元素就是与这条评论最贴切的音乐。在这些元素的视听结合下，传达给用户的就是丰富的情绪，能有效地引起用户的共鸣，让用户沉浸在自己的回忆里。

这里也提到了在分析时要注意的一点，不要仅仅理性地分析一个页面，也要去体会它的设计带给你的感受是什么。当你做设计时，就能知道应该通过什么样的视觉元素传达你想带给用户的视觉感受。

善于对比的朋友能发现，不同的评论在不同字数时使用了不同的字号大小，呈现出统一的文本块，背景的渐变与颜色也非常统一，文字与背景的层级区分也很明显，这些设计细节让用户在切换10条评论都能保持沉浸统一的阅读体验。

另外，还有一个细节点值得一提。在切换评论后，只有当用户停留在页面超过3秒左右才会在评论的作者头像上弹出关注。这个动效实际上起到鼓励用户

点击的作用，而且是当用户停留表达出对评论的兴趣后才出现的，比起静态常驻的关注按钮更能实现有效的转化。

除了这个细节动效之外，评论页面切换的动效、弹幕的出现、点击评论后的底部展开动效等都很值得我们在实际项目中进行参考，有兴趣的朋友可以自己打开手机体验一下。

刚刚说到了打卡机制，这里还有一个细节点也是值得一提的。打卡前与打卡后在1级页面里的卡片按钮是有区分的。这种对于不同状态的区分也是我们在日常工作中经常忽略的一点。一方面能让用户更清晰地知道自己的状态，另一方面能有效地节省页面空间。

当然，除了以上值得借鉴的地方之外，也发现一个让我困惑的功能。如下图所示，当乐评墙翻到最后一页时，除了已打卡的状态提示外，还有一个推荐更多好评论的按钮，然而当我点击时却出现右图的模态弹窗提示。即使我点赞了一些歌曲与评论后依然如此。因此我也不清楚是我的打开方式有误还是bug，也有可能是评论内容上仍有空白点，推荐机制仍不完善。

总而言之，我个人还是蛮看好这个功能，首先利用自身的优势领域乐评产生内容吸引用户浏览，接着通过打卡机制培养用户的浏览习惯，从而提高了整个云村板块的触达率。

（2）Mlog

自从抖音快手把短视频这一媒体形式带到了我们的生活后，vlog成为了很多平台的社交板块功能甚至是主打功能。到了音乐产品上，不管是网易云音乐或是隔壁的QQ音乐都在视频上下了很多功夫。然而，短视频对于大量用户而言制作门槛还是相对较高，无法成为日常分享的主要形式，只能成为少部分专业用户的玩法。Mlog这个功能则很好的补充的用户日常情感分享的需求。利用已有的音乐、图片再配上自己的心情感受等就可以进行分享。而且Mlog的媒体形式也与常规的朋友圈、动态等有所区别。那么下面还是从具体的界面组成去分析这个功能。

Mlog这种形式的分享其实在别的产品上很早就出现过了。我第一眼看到这种瀑布流的帖子时马上就想到了另一个产品小红书。下图就是两个产品一级页面与二级页面的对比。不仅是一级页面的瀑布流帖子呈现的形式相似，连二级页面的内容框架也很类似。顶部的作者头像与关注按钮、图片的轮播区、文字内容、主题标签以及底部的评论区。

那么它们的区别在哪呢？当我把两个产品的一级页面对比观察后发现，网易云音乐的页面会比小红书的更有整洁感与统一感，有兴趣的朋友也可以打开两个产品对比一下。之所以有这种感觉，一方面是因为网易云音乐采用了更大的栅格系统，帖子之间的间距是10px，而小红书只有5px；另一方面是因为Mlog上的图片质量稍高，另外Mlog的推荐机制似乎是根据最近常听的歌进行推荐的，例如我最近常听“无名之辈”，那推荐的就都是李现杨紫相关的内容……不过这样一来确实会让用户有更统一的浏览体验。在分析一个产品时，寻找它的竞品或者它的设计参考也是一个很好的切入点，因为这能让你通过对比更清晰地体验不同的设计方法所产生的差异性。

在仔细观察后，我发现了产品从三个不同的维度对Mlog做了归类。分别是城市、主题与音乐。前两个在一级页面有穿插的卡片作为入口。而音乐的归类入口则是直接点击Mlog内使用到的音乐。这个功能能帮助用户更准确的定位到自己想看的内容。不过这三个维度里，明显主题分类的层级会稍高，里面不仅提供了关注功能，还做了热门与时间两个维度的排序。

上文提到过，Mlog的媒体形式与常规的图文或者视频有所区别，或者说是更综合的媒体形式，如下图，主要有三种，视频（数量最少）、语音+图文（数量较少）、常规图文（数量最多）。而且一级页面的缩略图右上角会对有视频或者语音的内容加上图标提示，让用户可预知。

值得一提的是Mlog支持语音分享的这个功能，当有语音的Mlog打开的时候，背景音乐音量会自动降低，不会对语音造成干扰。我大致听了几段，发现语音大部分是作者的清唱或者心情感悟。从用户的角度来看，作者的语音内容比起常规的背景音乐更能引发用户的共鸣；从作者的角度来看，语音的加入为作者的创作与分享带来了更多可能性。

还有有一个值得借鉴的功能，当用户初次打开新版本时，第一个Mlog是网易云的新手引导教程。这种新手引导的形式与新功能的结合有效、迅速地帮助用户了解最新的内容。

在最后还是补充一个我认为可优化的细节，在一级页面里，Mlog卡片的右下角有个3个原点组成的小图标，一开始我以为点击会出现更多信息，点击却发现是一个屏蔽内容的图标按钮。这个功能应该是为了对不同用户实现更精准的推荐。作为在一级页面就可以直接点击屏蔽也没问题。但是使用这个图标却难以让用户知道这个功能的存在。

总而言之，Mlog作为一个以UGC为主的内容分享形式，确实为用户在音乐平台上的情感分享提供了更丰富的渠道。同时也让用户在听歌时，不必局限在歌词页，可以直接跳转到该歌曲的Mlog里浏览，增加用户停留在APP里的时间。

（3）发布按钮

最后要提一提的就是在页面底部层级很高的发布按钮，按钮没有使用常规的视觉样式，而是使用了蓝黄红三色组成的断点圆环。之前网易云音乐似乎没有使用过这种配色与样式，这次的变化我猜测是希望更突出年轻、潮流的品牌氛围，同时也突出按钮的层次，鼓励用户进行分享。

这里说一下一个有意思的小细节，为了给新推出的云村板块引流，播放器歌词页里的播放状态图标也从原来的变成了这个新的图标。

这个按钮还有不同状态、弹出、刷新等情感化的小动效，通过不同的方式提示用户进行分享，有兴趣也可以去体验一下。

总结

这次文章通过对网易云音乐的一个小改版进行了一个分析，希望大家能学习到日常分析产品的方法，并养成分析产品的习惯。大家可以看到，分析成熟的、用户基数大的产品，除了能学习到很多实际项目里的设计方法之外，还能很好的了解行业的动态，知道大厂都在什么方向上前进与布局。同时也能发现，成熟的产品里具备非常多的设计细节。希望大家日常也能多去进行这种练习，持之以恒，必有收获。如果这篇文章对你有所帮助，别忘了给我个赞。如果你有不同的见解或者补充，也欢迎在评论区进行留言。

相关资料

https://36kr.com/p/5230266