1. 主页 > 设计资讯 > 行业动态

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

我一直是网易云音乐的忠实粉丝,多年来使用的第一个手机音乐平台就是网易云音乐。不过我记忆中的QQ音乐好像有更多的记忆,所以我也想看看QQ音乐在这个时代能带给我什么样的互动体验,也想对比一下QQ音乐和网易云音乐的独特性~

体验版:9.7体验模型:华为Mate20 Pro

一、登录界面

QQ音乐界面清新,充满沉浸感。一个“9”大logo以唱片的形状为元素,很好的体现了其音乐APP的特点

揭开“QQ音乐”互动设计的面纱(图1)

登录页面

1.此页面中交互模式的特征

优秀:在登录方式上,QQ音乐只提供QQ和微信登录方式,网易云音乐采用多渠道登录方式。QQ音乐不需要其他多余的操作,可以给用户流畅的体验。

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

缺乏:但这也可能造成隐私泄露。

揭开“QQ音乐”互动设计的面纱(图2)

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

揭开“QQ音乐”互动设计的面纱(图3)

登录页面的比较

在登录注册界面,两者都可以体现自己应用的主题风格:

QQ音乐的界面设计特别清新,色彩多样,有设计感,向用户传达了自己公司的理念——年轻有活力,让人眼前一亮。

网易云音乐以红色为主色调,浩瀚的红色海洋让用户产生强烈的视觉冲击,可以第一时间给用户留下深刻的印象,让用户记住网易云音乐的“红色”。

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

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

二、音乐播放界面

QQ音乐的播放页面有歌曲、推荐、歌词三部分,左右滑动切换。

揭开“QQ音乐”互动设计的面纱(图4)

播放页面详细信息

1.此页面中交互模式的特征

优秀:当你截图歌曲播放页面时,页面会跳转到下面——分享音乐卡片,方便用户分享歌曲。

揭开“QQ音乐”互动设计的面纱(图5)

音乐共享卡

缺:当用户点击音乐播放页面时,会自动弹出如下窗口。QQ音乐左右滑动不太好上手,用户点开会引发误操作(可能是自己的网易云音乐用了很久,有段时间没切换回来)。

揭开“QQ音乐”互动设计的面纱(图6)

弹出菜单页面

优秀:播放界面最常见的操作有播放/暂停、切歌、循环模式。QQ音乐把这个功能放在最底层,放在用户最容易操作的地方,按照用户的操作频率来排列,逻辑清晰,用户体验好。

揭开“QQ音乐”互动设计的面纱(图7)

底部功能栏

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

揭开“QQ音乐”互动设计的面纱(图8)

播放页面比较

从整体布局来看,QQ音乐按钮的布局相当拥挤,给人一种莫名的压迫感,影响收听体验;网易的云音乐播放界面更简洁干净,图标logo更精致小巧,使得整个界面空更空醒目。

在歌词显示界面上,QQ音乐在原有的基础上增加了弹幕和k歌的功能,占据了歌词页面,显示的歌词更少,也给人一种神经压迫感。而且k歌功能需要用户下载两次,可能会影响用户体验(但对于我这个最近喜欢k歌的人来说,慢慢变成了惊喜之地,相信吸引了一个典型的用户阶层)。

网易云音乐省略了个性功能的栏目,尽可能的向用户展示歌词。在欣赏歌词的时候,要很放松,给用户足够的空 空,让他们更有呼吸的感觉。

在播放界面的切换方式上,QQ音乐选择左右滑动屏幕,满足用户习惯性的左右切屏操作,操作简单易懂,但个人不容易上手(可能是先入为主的想法)。网易云音乐采用点击式切屏模式,操作更简单,给用户耳目一新的感觉。

第三,我的界面

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

揭开“QQ音乐”互动设计的面纱(图9)

我的界面

1.此页面中交互模式的特征

优秀:类似于其他音视频播放软件,QQ Music也有自己的近期播放列表。与其他相比,还有一个额外的“最近播放设置”,可以设置列表中记录的歌曲数量,最多200首。

揭开“QQ音乐”互动设计的面纱(图10)

最近播放设置

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

揭开“QQ音乐”互动设计的面纱(图11)

播放列表

优秀:点击个人信息页面,系统会记录并计算用户的音乐品味,可以将数据反馈给用户,同时记录今天当年听歌的记录,会给用户带来惊喜。

揭开“QQ音乐”互动设计的面纱(图12)

个人信息页面

2.对比网易云音乐个人页面

揭开“QQ音乐”互动设计的面纱(图13)

个人页面比较

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

QQ音乐在这个界面里放了个人信息门户、会员门户、登录门户等等,这些功能门户都与用户的个人信息息息相关。这些功能的布局正好符合“矿”字的定位,给用户一种归属感。网易云音乐(Android)将这些功能隐藏在侧栏中,用户不容易找到相关的功能界面。

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

第四,搜索界面

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

揭开“QQ音乐”互动设计的面纱(图14)

搜索页面

1.此页面中交互模式的特征

优秀:在输入模式下,QQ音乐可以基于键盘输入进行语音输入,用户可以切换交互模式。

揭开“QQ音乐”互动设计的面纱(图15)

语音输入门户

优秀:在搜索栏输入内容,系统会自动推荐,关键词会标绿色,干净整洁。

揭开“QQ音乐”互动设计的面纱(图16)

搜索内容标记为绿色

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

揭开“QQ音乐”互动设计的面纱(图17)

搜索页面比较

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

QQ音乐有强大的搜索引擎,显示可搜索范围和条件(音乐、视频、歌单等)等信息。)在搜索栏,简单明了。网易云音乐就是直接提供用户的例子。根据大数据算法,最近搜索过的内容计算为搜索栏的默认内容。用户可以直接搜索默认内容,也可以自行选择搜索内容,更加人性化。

在输入模式下,QQ Music在数字键盘上增加了麦克风图标,让用户在使用该功能进行语音输入的同时坚持键盘输入,让用户在空之间有更大的选择余地。网易云音乐只有键盘输入。

当在搜索栏中输入内容时,两者都会自动显示与搜索内容相关的信息,但信息显示的形式不同。QQ音乐直接在新页面显示相关信息,将每个相关内容中的搜索关键词标记为绿色,界面更加清晰;网易云音乐在覆盖主界面的独立小界面上展示,使得界面富有层次感。

动词 (verb的缩写)其他部分

优秀:页面下拉时会出现以下动态加载图标,可以提示数据缓存,带来一定的趣味性和灵活性。

揭开“QQ音乐”互动设计的面纱(图18)

音乐厅页面

优秀:底部的推荐图标会随着日期的变化而变化。如果今天是12月23日,图标中的数字将变成“23”。这个细节可以加深用户的时间观念。

揭开“QQ音乐”互动设计的面纱(图19)

推荐页面

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

揭开“QQ音乐”互动设计的面纱(图20)

动态界面

优秀:音乐听辨模块中的识别效果会动态显示,中波变化会动态显示声波效果,具有准物化的特点,给用户反馈。同时还有哼唱识别的功能切换,增加了用户友好性,也包含了识别历史。

揭开“QQ音乐”互动设计的面纱(图21)

听歌和识别歌曲页面

优秀:这个页面是我页面的一个子页面,增加了两个特殊的模式模块,分别是运行电台和亲子模式,增加了场景模式的多样性。

揭开“QQ音乐”互动设计的面纱(图22)

更多页面

不及物动词思考与总结

目前,中国国内音乐市场相对成熟。QQ音乐作为最早的音乐产品之一,在早期凭借QQ和微信社交平台提供的庞大用户群,构建了一个完整的世界。

到目前为止,QQ音乐已经覆盖了一个庞大的功能系统,包括各种风格的音乐库和个性化的电台服务。后期逐步建立音乐交流社区,利用明星IP带动粉丝用户消费投放评论和互动,不断提升平台的用户活跃度

在之前版本的QQ音乐中,我并没有什么好印象。功能结构复杂,框架不明显,使用体验很差。但是最近的版本更新后,我对它有了全新的印象。

这个版本的感觉是:大方简洁干净,视觉上秉承简约轻盈的扁平化设计,默认的白色主题色是大方自然,没有压迫感、沉重感、累赘感。功能布局比以前的版本更加自然,板块划分清晰,功能结构清晰,更符合人们的思维习惯。

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

第一篇网文请多多指教。希望在这个平台上记录自己的成长,也希望大佬们多多指教~

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/xingyezixun/jhsj/710.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息