相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

设计师的角度分析APP改版-网易云音乐

布布发布于:2019-8-9 17:08 |原作者: Eric_LYZ|
布布
甘肃 甘南 
发私信 + 关注
简介: 分析大厂产品的APP改版是设计师综合能力提高的有效方法


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

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

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

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

设计师的角度分析APP改版-网易云音乐 飞特网 设计理论

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

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

设计师的角度分析APP改版-网易云音乐 飞特网 设计理论

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

设计师的角度分析APP改版-网易云音乐 飞特网 设计理论

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

(2)Mlog

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

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

设计师的角度分析APP改版-网易云音乐 飞特网 设计理论

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

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

设计师的角度分析APP改版-网易云音乐 飞特网 设计理论

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

17

好评
17

差评

刚表态过的朋友 (34 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

布布
甘肃 甘南 
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计