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

小提示：您能找到这篇{揭开“QQ音乐”交互设计的面纱}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的揭开“QQ音乐”交互设计的面纱内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

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

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

一、登录界面

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

登录页面

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

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

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

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

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

登陆页面对比

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

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

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

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

但是对于绑定手机号的方式，对于怕麻烦的用户可能在这一步就拒绝再继续往下操作公司门外的企业介绍算广告，有可能会造成用户流失。

二、音乐播放界面

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

播放页详情

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

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

音乐分享卡片

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

跳出的菜单页面

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

底部功能栏

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

播放页面对比

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

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

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

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

三、我的界面

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

我的 界面

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

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

最近播放设置

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

播放列表

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

个人信息页

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

个人页面对比

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

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

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

四、搜索界面

搜索页面

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

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

语音输入入口

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

搜索内容标绿

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

搜索页面比较

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

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

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

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

五、其他部分

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

音乐馆页面

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

推荐页面

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

动态界面

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

听歌识曲页面

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

更多页面

六、思考与总结

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

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

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

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

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

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

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

本文由 @SlowStep 于，，。

，基于CC0协议