揭开“QQ音乐”交互设计的面纱

不懂技术怎么做产品?15天在线学习,补齐产品经理必备技术知识,再也不被开发忽悠。了解一下>

我本人一直是网易云音乐的忠实粉丝用户,这么多年以来用的第一款移动端音乐平台就是网易云音乐。但是记忆里的QQ音乐貌似更加地具有回忆感,所以我也想看一看这个时代下的QQ音乐能带给我怎样的交互体验,也想比较一下QQ音乐与网易云音乐的独特之处~

体验版本:9.7  体验机型:Huawei Mate20 Pro

一、登录界面

QQ音乐界面清新、沉浸感十足,一个“9”的大logo,以唱片的形状作为元素,很好的体现出其音乐APP的特点

揭开“QQ音乐”交互设计的面纱

登录页面

1. 此页面中交互方式的特点

优:在登陆方式上,QQ音乐只提供QQ和微信两个登录方式,而网易云音乐则是采取多渠道方式登录,QQ音乐这样的登录方式无需其他多余操作,可以给用户流畅的体验感。

优:同时也在登录方式上标注了上次登录的记录操作,方便用户想起之前的操作。

缺:但这样也可能会造成用户隐私泄露。

揭开“QQ音乐”交互设计的面纱

2. 与网易云音乐的登录页面比较

揭开“QQ音乐”交互设计的面纱

登陆页面对比

在登录注册界面中,两者都很能体现自家APP的主题风格:

QQ音乐的界面设计特别的清新,采用了多种颜色,同时也富有设计感,向用户传达着自家公司的理念——年轻有活力,让人眼前一亮。

网易云音乐则采用红色为自己的主色调,一片红色汪洋让用户产生极强视觉冲击效果,第一次就能给用户留下很深刻的印象,让用户记住网易云音乐的“红色”。

在登陆方式上,QQ音乐只提供QQ和微信两个登录方式,网易云音乐则采用多渠道登录;QQ音乐的做法是基于腾讯强大的社交网络资源,他们对自己的用户使用量充满信心,网易云音乐则采用多渠道登录的方式,能够吸引到更多平台的用户以及新用户,绑定手机号的方式能够让用户更好的管理自己的账号安全。

但是对于绑定手机号的方式,对于怕麻烦的用户可能在这一步就拒绝再继续往下操作,有可能会造成用户流失。

二、音乐播放界面

QQ音乐的播放页有三个部分,分别为歌曲、推荐与歌词,通过左右滑动的方式进行切换。

揭开“QQ音乐”交互设计的面纱

播放页详情

1. 此页面中交互方式的特点

优:当对歌曲播放页面截图时,页面就会跳转至如下——分享音乐卡片,方便用户对歌曲的分享。

揭开“QQ音乐”交互设计的面纱

音乐分享卡片

缺:当用户单击音乐播放页面时,页面会自动弹出如下窗口,QQ音乐的左右滑动不易上手,且用户单击也会触发误操作 (可能是自己网易云音乐用久了,一时没切换回来)。

揭开“QQ音乐”交互设计的面纱

跳出的菜单页面

优:播放界面最常规的操作是播放/暂停、切歌、循环模式,QQ音乐将这一栏功能置底,放在用户最容易操作的地方,按用户操作频率布局,逻辑清晰,用户体验感好。

揭开“QQ音乐”交互设计的面纱

底部功能栏

2. 与网易云音乐的播放页面比较

揭开“QQ音乐”交互设计的面纱

播放页面对比

从整体布局上看,QQ音乐按钮布局就显的比较拥挤,给人一种莫名压迫感,影响听歌体验;网易云音乐的播放界面更简单整洁,图标logo更加精致小巧,将整个界面空间映衬的更空旷大方。

在歌词显示界面上,QQ音乐在原有基础之上更加上弹幕和k歌功能,占据歌词页面,显示的歌词更少,亦是给人紧张的压迫感。而且k歌功能需要用户二次下载,可能会影响用户的体验(但是对最近喜欢上k歌的我而言,这也慢慢变成一个惊喜的地方,相信能吸引一类典型的用户)。

网易云音乐则省去个性功能一栏,尽可能多的将歌词显示给用户,欣赏歌词时应该是很放松的,给用户足够的空旷空间,更有呼吸感。

在播放界面之间的切换方式上,QQ音乐选择左右滑屏切换,满足用户的习惯性左右切屏的操作,而且操作简单易懂,但是个人觉着不容易上手(可能是一种先入为主的观念)。而网易云音乐采取的是点击式切屏方式,操作更加简单,更加给用户一种清爽的感觉。

三、我的界面

我的页面集成了账号信息与自己的听歌记录,布局简洁清新,结合绿色图标给人特别清新舒爽的感觉,更贴近自然。

揭开“QQ音乐”交互设计的面纱

我的 界面

1. 此页面中交互方式的特点

优:类似于其他影音播放软件,QQ音乐也有自己的最近播放列表,相较其他,这里多了一个“最近播放设置”,可以设置列表内记录歌曲的数量,最多是200首 。

揭开“QQ音乐”交互设计的面纱

最近播放设置

优:在播放列表里面,会在歌曲后面显示听歌的总次数,记录用户自己的数据,方便用户查看自己的历史数据,给用户一种数据透明感。

揭开“QQ音乐”交互设计的面纱

播放列表

优:点击个人信息页,系统会记录并计算用户的音乐口味,能将数据反馈给用户,同时也能记录那年今日听歌的记录,能给用户带来惊喜。

揭开“QQ音乐”交互设计的面纱

个人信息页

2. 与网易云音乐的个人页面比较

揭开“QQ音乐”交互设计的面纱

个人页面对比

在此界面,QQ音乐以灰白搭配打底,结合绿色图标给人特别清新舒爽的感觉,更贴近自然。网易云音乐主要以白色打底(夜间模式下为黑色),结合经典网易红,形成视觉反差,抓住用户眼球,但也容易造成断层的感觉。

QQ音乐将个人信息入口、会员入口、签到入口等等放在这个界面,这些功能入口都是与用户个人信息息息相关的。这些功能的布局也刚刚好符合“我的”这个词的定位,让用户有归属感。而网易云音乐(安卓端)则是将这些功能隐藏在了侧边栏,用户不大容易找到相关的功能界面。

关于导航栏,QQ音乐和网易云音乐的布局完全相反,前者在顶部栏,后者在底部栏。在一般情况下,用户的操作空间是手机的下半部分,而QQ音乐选择把导航栏放在底部,更加限制了用户的操作空间。相反网易云音乐(安卓端)将导航栏置顶,虽然可能不容易点击切换界面,但是滑屏切换方式很完美的解决这个问题,为用户空出更多自由操作空间。

四、搜索界面

QQ音乐拥有强大的搜索引擎,在搜索栏很显示的告诉用户可搜索的范围、条件(音乐、视频、歌单……)等等信息,简单明了。

揭开“QQ音乐”交互设计的面纱

搜索页面

1. 此页面中交互方式的特点

优:在输入方式中,QQ音乐可以在键盘输入的基础上进行语音输入,用户可以切换交互方式。

揭开“QQ音乐”交互设计的面纱

语音输入入口

优:搜索栏里输入内容时,系统会自动进行推荐,并且讲关键词进行标绿,干净整洁。

揭开“QQ音乐”交互设计的面纱

搜索内容标绿

2. 与网易云音乐的搜索页面比较

揭开“QQ音乐”交互设计的面纱

搜索页面比较

在“搜索”界面,两者的布局相差无几,主要是在一些小交互细节上的差异。

QQ音乐拥有强大的搜索引擎,在搜索栏很显示的告诉用户可搜索的范围、条件(音乐、视频、歌单……)等等信息,简单明了。网易云音乐则是直接提供用户示例,根据大数据算法算出近期搜索较多的内容作为搜索栏默认内容,用户可直接搜索默认内容也可自行选择搜索内容,更加人性化。

在输入方式中,QQ音乐在数字键盘上增加一个麦克风图标,用户可以使用这个功能进行语音输入,同时也可以坚持键盘输入,给了用户更大的选择空间。网易云音乐则只有键盘输入的方式。

在搜索栏里输入内容时,两者都会自动显示与搜索内容相关的信息,但是信息展现的形式不一样, QQ音乐则是直接以一个新页面展示相关信息,并为每一条相关内容里的搜索关键字标绿,界面更加的清晰;而网易云音乐在一个独立的覆盖在主界面之上的小界面显示,使得界面富有层次感。

五、其他部分

优:当页面下拉时,会出现如下的动态加载图标,可以在提示数据缓存的同时,带来一定程度上的趣味性与灵活。

揭开“QQ音乐”交互设计的面纱

音乐馆页面

优:底部的推荐icon是会随着日期的改变而改变,如今天是12月23日,icon内的数字就会变成“23”,这一个细节可以加深用户的时间观念。

揭开“QQ音乐”交互设计的面纱

推荐页面

缺:没有独立的视频模块,视频内容是集成在社交页面与音乐播放页面,如果用户想要看音乐视频的话上手不是很方便。

揭开“QQ音乐”交互设计的面纱

动态界面

优:听歌识曲模块中的识别效果会动态显示,中部波浪变化动态显示声波效果,很有拟物化特点,对用户做出反馈。同时也有哼唱识别的功能切换,增加了用户友好度,同时也包含识别的历史记录。

揭开“QQ音乐”交互设计的面纱

听歌识曲页面

优:此页面是我的页面的子页面,增设了两个特别模式模块,分别为跑步电台和亲子模式两种,增加了场景模式的多样性。

揭开“QQ音乐”交互设计的面纱

更多页面

六、思考与总结

目前中国国内的音乐市场已然相对成熟,QQ音乐作为起步最早的一款音乐类产品之一,在早期凭借着QQ和微信社交平台提供的庞大用户群体,建立了一片天下。

发展至今,QQ音乐已经涵盖了极其庞大的功能体系,包括各种风格的音乐曲库、个性化电台服务。在后期也逐渐搭建起了音乐交流社区,以明星IP带动粉丝用户消费和置入评论互动,不断提高平台的用户活跃度

在前几个版本的QQ音乐的使用过程中,并没有对我产生很好的印象,功能结构复杂,框架不明显,使用体验极差,但是最近几个版本更新过后,使我对它的印象焕然一新。

这一版本的感觉是:大方、简洁、干净,视觉上秉承了简洁和轻薄的扁平化设计,白色的默认主题颜色,大方自然,不显压抑厚重和累赘感。功能的布局上,比之前几个版本更加自然化,板块划分明确、功能结构清晰,更加符合人们使用的思维习惯。

后续迭代开发上也有较大的潜力,其强大的版权和乐库资源也将成为其未来最具有竞争力的优势。

第一篇网络文章请多指教,在此平台上希望能记录自己的成长,也希望大佬们能多多赐教~

 

作者:SlowStep,产品小白一名,目前正在找实习ing……

本文由 @SlowStep 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!
  1. 看我简介😬

    回复
  2. 同小白,可否加好友互相交流?

    回复
    1. 可以呀

      回复
  3. 企鹅音乐上市了,网易音乐可还没吧

    回复
    1. 嗯嗯

      回复