揭开“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音乐选择把导航栏放在底部，更加限制了用户的操作空间。相反网易云音乐（安卓端）将导航栏置顶，虽然可能不容易点击切换界面，但是滑屏切换方式很完美的解决这个问题，为用户空出更多自由操作空间。

四、搜索界面

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

搜索页面

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

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

语音输入入口

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

搜索内容标绿

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

搜索页面比较

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

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

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

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

五、其他部分

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

音乐馆页面

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

推荐页面

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

动态界面

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

听歌识曲页面

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

更多页面

六、思考与总结

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

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

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

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

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

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

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

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

题图来自Unsplash，基于CC0协议